/* =========================================================
   Flux Montréal — styles.css (CLEAN / DEDUP / ORDERED)
   Notes:
   - Aucun “crochet vert”
   - Règles regroupées + doublons supprimés
   - Fix coverage table (pas de texte vertical + scrollbar en bas)
   - Header icônes centrées + plus de mini espace vide
   ========================================================= */

/* =========================================================
   1) RESET & BASE
   ========================================================= */
*{ margin:0; padding:0; box-sizing:border-box; }

:root{
  /* Palette */
  --hm-bg:#1e293b;
  --hm-surface:#283242;
  --hm-surface-2:#1F283B;
  --hm-card:#18202f;

  --hm-border: rgba(148,163,184,0.15);
  --hm-border-strong: rgba(148,163,184,0.35);

  --hm-text:#e5e7eb;
  --hm-muted:#9ca3af;

  --hm-link:#67a7e4;
  --hm-link-hover:#93c5fd;

  --hm-font-global: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
                    "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --hm-sidebar-w: 290px;
  --hm-header-h: 60px;
  --hm-footer-h: 26px;

  /* Desktop split */
  --hm-split-map: 65%;
  --hm-split-side: 35%;
}

html, body{
  font-family: var(--hm-font-global) !important;
  background: var(--hm-surface) !important;
  min-height: 100%;
}

/* Police globale (sans casser les libs d’icônes) */
body :where(*):not(i):not(svg){
  font-family: var(--hm-font-global) !important;
}

/* Ne jamais écraser les fonts d’icônes */
i[class^="ri-"], i[class*=" ri-"]{
  font-family:"remixicon" !important;
  font-style:normal;
}
i.ti, i[class^="ti-"], i[class*=" ti-"]{
  font-family:"tabler-icons" !important;
  font-style:normal;
}
i.fa, i.fas, i.far, i.fab,
i.fa-solid, i.fa-regular, i.fa-brands{
  font-family:"Font Awesome 6 Free" !important;
  font-style:normal;
}
i.fa-brands{ font-family:"Font Awesome 6 Brands" !important; }


/* =========================================================
   2) SIDEBAR GAUCHE
   ========================================================= */
.hm-sidebar-left{
  position:fixed;
  top:0; left:0;
  width:var(--hm-sidebar-w);
  height:100vh;
  background-color:var(--hm-bg);
  border-right:1px solid var(--hm-border);
  z-index:1001;
  overflow-y:auto;
}

/* Scrollbar sidebar */
.hm-sidebar-left::-webkit-scrollbar{ width:6px; }
.hm-sidebar-left::-webkit-scrollbar-track{ background:transparent; }
.hm-sidebar-left::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.3);
  border-radius:3px;
}
.hm-sidebar-left::-webkit-scrollbar-thumb:hover{ background:rgba(148,163,184,.5); }

.hm-sidebar-header{
  padding:0 1rem;
  height:60px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--hm-border);
}

.hm-sidebar-logo{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#f9fafb;
  padding:1rem;
  gap:.75rem;
}

.hm-sidebar-logo img{
  width:48px;
  height:48px;
  border-radius:8px;
  margin:0;
}

.hm-sidebar-logo span{
  font-size:1.125rem;
  font-weight:700;
  letter-spacing:-0.02em;
  background:linear-gradient(135deg,#f1f5f9 0%,#cbd5e1 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.hm-sidebar-section{ padding:.75rem 1rem; }

.hm-sidebar-section-title{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--hm-muted);
  font-weight:600;
  margin-bottom:.5rem;
}


/* =========================================================
   3) HEADER (DESKTOP)
   ========================================================= */
.hm-header{
  position:fixed;
  top:0;
  left:var(--hm-sidebar-w);
  right:0;
  background-color:var(--hm-bg);
  border-bottom:1px solid var(--hm-border);
  z-index:1000;
  display:flex;
  flex-direction:column;
}

.hm-header-top{
  height:var(--hm-header-h);
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--hm-border);
  padding:0 1rem;
  position:relative;
}

/* Menu centré desktop */
.hm-header-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:1.5rem;
}

.hm-nav-link{
  position:relative;
  color:#94a3b8;
  font-weight:500;
  font-size:.8rem;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
  padding:.35rem 0;
  transition:color .18s ease, opacity .18s ease;
  opacity:.85;
}

.hm-nav-link::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-6px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#6366f1);
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .22s ease-out, opacity .22s ease-out;
}

.hm-nav-link:hover{ color:var(--hm-text); opacity:1; }
.hm-nav-link:hover::after{ transform:scaleX(1); opacity:.85; }

.hm-nav-link--active{ color:#f9fafb; opacity:1; }
.hm-nav-link--active::after{ transform:scaleX(1); opacity:1; }

/* Bande bulles */
.hm-header-bottom{
  background-color:var(--hm-surface) !important;
  padding:.32rem 1.5rem;
  overflow:visible;
  min-height:92px;
  position:relative;
}


/* =========================================================
   4) CONTENU / SCROLL PRINCIPAL
   ========================================================= */
.hm-main{
  position:fixed;
  top:0;
  left:var(--hm-sidebar-w);
  right:0;
  bottom:var(--hm-footer-h);
  overflow-y:auto;
  min-height:0;
  padding-top:165px; /* desktop fallback; JS peut override */
  background-color:var(--hm-surface) !important;
}

.hm-main-inner{ padding:1.5rem 1.5rem 1rem 1.5rem; }

/* Scrollbar contenu principal */
.hm-main::-webkit-scrollbar{ width:6px; }
.hm-main::-webkit-scrollbar-track{ background:transparent; }
.hm-main::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.3);
  border-radius:3px;
}
.hm-main::-webkit-scrollbar-thumb:hover{ background:rgba(148,163,184,.5); }


/* =========================================================
   5) CARTES & MAP
   ========================================================= */
.card{
  background-color:var(--hm-card) !important;
  border:1px solid rgba(148,163,184,.2) !important;
  border-radius:8px;
}

.card-header{
  background-color:#1a1f2e !important;
  border-bottom:1px solid var(--hm-border) !important;
  color:#f9fafb !important;
}

.card-body{ background-color:var(--hm-card) !important; }

.hm-map-col .card.custom-card{
  padding:0;
  border:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
}

/* Contour MAP */
.hm-map-wrapper{
  position:relative;
  height:520px;         /* desktop safe: JS override height */
  min-height:420px;
  background:var(--hm-surface-2) !important;
  border:1px solid var(--hm-border-strong) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  box-shadow:0 0 6px rgba(0,0,0,.35);
}

.hm-map-wrapper iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  border-radius:12px !important;
  overflow:hidden !important;
  z-index:1; /* l’iframe sous les overlays/boutons */
}


/* =========================================================
   6) KPI / SIDEBAR ANALYTIQUE
   ========================================================= */
.hm-kpi-board.card{
  background-color:var(--hm-card);
  border-radius:14px;
  border:1px solid var(--hm-border-strong);
  box-shadow:0 18px 40px rgba(15,23,42,.95);
}

.hm-kpi-header{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px;
  margin-bottom:4px;
}

.hm-kpi-title{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--hm-muted);
}

.hm-kpi-subtitle{ font-size:.78rem; color:#64748b; }

.hm-kpi-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  color:var(--hm-text);
  white-space:nowrap;
}

.hm-kpi-status-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.27),
              0 0 12px rgba(34,197,94,.9);
}

.th-sidebar{
  background-color:var(--hm-surface-2);
  border-radius:14px;
  border:1px solid var(--hm-border-strong);
  color:var(--hm-text);
}
.th-sidebar h1, .th-sidebar h2, .th-sidebar h3, .th-sidebar h4,
.th-sidebar p, .th-sidebar span, .th-sidebar li, .th-sidebar small{ color:var(--hm-text); }

/* Collapse sidebar */
.hm-layout-row.sidebar-collapsed .hm-sidebar-col{ display:none !important; }
.hm-layout-row.sidebar-collapsed .hm-map-col{
  flex:0 0 100% !important;
  max-width:100% !important;
}


/* =========================================================
   7) TABLEAUX (Coverage / Densité) — BASE + FIX PRO
   Objectif:
   - texte secteur jamais vertical
   - si pas assez de place: scroll horizontal en bas (table-responsive)
   - icônes du header centrées + sans mini espace vide
   ========================================================= */

/* Cards compact (sidebar droite) */
.hm-sidebar-col .card.custom-card{
  margin-bottom:.55rem !important;
  background-color:var(--hm-surface) !important;
  border-radius:12px !important;
  border:1px solid var(--hm-border-strong) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  overflow:visible !important;
}
.hm-sidebar-col .card.custom-card .card-header,
.hm-sidebar-col .card.custom-card .card-body{
  background-color:transparent !important;
  border:none !important;
}
.hm-sidebar-col .card-header{ padding:6px 10px !important; font-size:.78rem !important; }
.hm-sidebar-col .card-body{ padding:8px 10px !important; }

/* Tableau base */
.hm-coverage-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-bottom:0;
  font-family:var(--hm-font-global) !important;
}

/* Header base */
table.hm-coverage-table thead th,
.hm-coverage-table > thead > tr > th,
.table.hm-coverage-table thead th{
  background:var(--hm-bg) !important;
  color:var(--hm-muted) !important;
  border:none !important;
  border-bottom:2px solid #3b4a5f !important;
  font-size:.70rem !important;
  font-weight:600 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  white-space:nowrap !important;
  padding:.65rem .85rem !important;
  vertical-align:middle !important;
  text-align:center !important;
  position:relative !important;
  cursor:pointer !important;
  user-select:none !important;
  transition:background .2s ease !important;
}
table.hm-coverage-table thead th:first-child{ border-top-left-radius:8px !important; }
table.hm-coverage-table thead th:last-child{ border-top-right-radius:8px !important; }

/* Body base */
.hm-coverage-table tbody td{
  font-size:.80rem;
  padding:.20em .85rem;
  vertical-align:middle;
  border:none;
  border-bottom:1px solid #2b3544;
  white-space:nowrap;
  color:#e4e6eb;
}

/* Alternance + hover */
.hm-coverage-table tbody tr:nth-child(even) > *{ background-color:#1a2332; }
.hm-coverage-table tbody tr:nth-child(odd)  > *{ background-color:#1f283b; }
.hm-coverage-table tbody tr:hover > *{
  background:linear-gradient(90deg,#2a3647 0%,#253244 100%) !important;
}

/* Séparateurs */
.hm-coverage-table th + th,
.hm-coverage-table td + td{
  border-left:1px solid rgba(148,163,184,.12);
}

/* Colonne 1 (Ville/Secteur) — base (hors sidebar fix scroll) */
.hm-coverage-table th:nth-child(1),
.hm-coverage-table td:nth-child(1){
  text-align:left !important;
  white-space:normal !important;
  overflow-wrap:break-word !important;
  word-break:normal !important;
  hyphens:auto;
  font-weight:500;
  color:#e5e7eb;
}

/* Colonnes numériques — base */
.hm-coverage-table th:nth-child(n+2),
.hm-coverage-table td:nth-child(n+2){
  text-align:center !important;
  white-space:nowrap !important;
}

/* Tri */
.hm-coverage-table th.sortable{ padding-right:2rem; }
.hm-coverage-table th.sortable::after{
  content:"";
  position:absolute;
  right:.6rem;
  top:50%;
  transform:translateY(-50%);
  font-size:.75rem;
  opacity:0;
  transition:opacity .2s, color .2s;
}
.hm-coverage-table th.sortable:hover::after{ opacity:.7; color:#93c5fd; }
.hm-coverage-table th.sortable.asc::after{ content:"▲"; opacity:1; color:#60a5fa; }
.hm-coverage-table th.sortable.desc::after{ content:"▼"; opacity:1; color:#60a5fa; }

/* Panels */
.coverage-panel{ display:none; }
.coverage-panel.active{ display:block; }

/* ===== FIX PRO (SIDEBAR DROITE) : scroll horizontal + largeur stable ===== */

/* Wrapper scroll horizontal réel */
.hm-sidebar-col .table-responsive{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color: rgba(148,163,184,.45) rgba(148,163,184,.10);
}

/* Scrollbar (WebKit) */
.hm-sidebar-col .table-responsive::-webkit-scrollbar{ height:10px; }
.hm-sidebar-col .table-responsive::-webkit-scrollbar-track{
  background:rgba(148,163,184,.10);
  border-radius:999px;
}
.hm-sidebar-col .table-responsive::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
}
.hm-sidebar-col .table-responsive::-webkit-scrollbar-thumb:hover{
  background:rgba(148,163,184,.55);
}

/* Tableau: peut dépasser pour déclencher le scroll */
.hm-sidebar-col table.hm-coverage-table{
  table-layout:auto !important;      /* stop le squeeze */
  width:max-content !important;      /* autorise overflow */
  min-width:100% !important;         /* au moins pleine largeur */
  border-collapse:separate;
  border-spacing:0;
}

/* Colonne 1: jamais vertical */
.hm-sidebar-col table.hm-coverage-table th:nth-child(1),
.hm-sidebar-col table.hm-coverage-table td:nth-child(1){
  min-width:220px !important;
  max-width:320px !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:auto !important;
  text-align:left !important;
}

/* Colonnes numériques: compact + stable */
.hm-sidebar-col table.hm-coverage-table th:nth-child(n+2),
.hm-sidebar-col table.hm-coverage-table td:nth-child(n+2){
  width:56px !important;
  min-width:56px !important;
  max-width:56px !important;
  white-space:nowrap !important;
  text-align:center !important;
}

/* Header sidebar: icônes centrées + aucun padding “vide” */
.hm-sidebar-col .hm-coverage-table thead th{
  padding-top:4px !important;
  padding-bottom:4px !important;
  padding-left:0 !important;
  padding-right:0 !important;
  height:32px !important;

  /* on rend le th centreur */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  /* le texte de header n’est pas visible (icônes) */
  font-size:0 !important;
  line-height:1 !important;
  text-align:center !important;
}

.hm-sidebar-col .hm-coverage-table thead th > span{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
}

/* Taille icônes header */
.hm-sidebar-col .hm-coverage-table thead th i{
  font-size:18px !important;
  margin:0 !important;
  padding:0 !important;
}

/* Sécurité layout */
.hm-sidebar-col{ min-width:0 !important; }

/* Densité desktop (évite scroll vertical inutile 1980x1080) */
@media (min-width: 992px){
  .hm-main-inner{ padding:1.1rem 1.1rem .8rem 1.1rem !important; }
  .hm-sidebar-col .card.custom-card .card-header{ padding:6px 10px !important; }
  .hm-sidebar-col .card.custom-card .card-body{ padding:8px 10px !important; }
  .hm-coverage-table tbody td{
    padding-top:.16rem !important;
    padding-bottom:.16rem !important;
  }

  /* un peu plus compact */
  .hm-sidebar-col table.hm-coverage-table th:nth-child(n+2),
  .hm-sidebar-col table.hm-coverage-table td:nth-child(n+2){
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
  }
  .hm-sidebar-col table.hm-coverage-table th:nth-child(1),
  .hm-sidebar-col table.hm-coverage-table td:nth-child(1){
    min-width:210px !important;
    max-width:300px !important;
  }
}


/* =========================================================
   8) BADGES VITESSE
   ========================================================= */
/* Badges vitesse (compat) */
.hm-speed-slow,
.hm-speed-medium,
.hm-speed-fast{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
  border-radius:6px;
  font-size:.72rem !important;
  font-weight:700 !important;
  line-height:1;
  border:none;
  min-width:48px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.hm-speed-slow{ background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%); color:#fff !important; }
.hm-speed-medium{ background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%); color:#fff !important; }
.hm-speed-fast{ background:linear-gradient(135deg,#10b981 0%,#059669 100%); color:#fff !important; }

/* Sidebar — vitesse en texte coloré */
.hm-sidebar-col .hm-speed-slow,
.hm-sidebar-col .hm-speed-medium,
.hm-sidebar-col .hm-speed-fast,
.hm-sidebar-col .hm-speed-nd{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  min-width:0 !important;
  display:inline !important;
}
.hm-sidebar-col .hm-speed-slow{ color:#fecaca !important; }
.hm-sidebar-col .hm-speed-medium{ color:#fef08a !important; }
.hm-sidebar-col .hm-speed-fast{ color:#bbf7d0 !important; }
.hm-sidebar-col .hm-speed-nd{ color:var(--hm-muted) !important; }
.hm-sidebar-col .hm-speed-slow,
.hm-sidebar-col .hm-speed-medium,
.hm-sidebar-col .hm-speed-fast{
  font-weight:700 !important;
  letter-spacing:.02em;
}

/* =========================================================
   Flux Montréal — styles.css (PARTIE 2)
   ========================================================= */

/* =========================================================
   9) RÉSEAUX (Badges temps réel)
   ========================================================= */
.hm-network-list--header{ padding:.35rem .25rem .55rem; }

.hm-network-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:4px;
}

.hm-network-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background-color:var(--hm-surface);
  border-radius:.55rem;
  padding:3px 8px;
  border:1px solid rgba(15,23,42,.7);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.hm-network-main{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.hm-network-dot{
  width:10px;
  height:10px;
  min-width:10px;
  min-height:10px;
  border-radius:999px;
  box-shadow:0 0 0 0 transparent;
  transition:box-shadow .3s ease;
  display:inline-block;
  flex:0 0 auto;
}

.hm-network-dot--stm{ background:#AEAEAE; }
.hm-network-dot--stl{ background:#EED755; }
.hm-network-dot--rtl{ background:#d18937ff; }
.hm-network-dot--exo-laurentides{ background:#7ab355ff; }
.hm-network-dot--exo-lrrs{ background:#0a5c33ff; }
.hm-network-dot--exo-mrclm{ background:#A15DC1; }
.hm-network-dot--citvr{ background:#3870C4; }
.hm-network-dot--omitsju{ background:#68C2BF; }
.hm-network-dot--mrclasso{ background:#bb6767ff; }
.hm-network-dot--exo-trains{ background:#4840DC; }
.hm-network-dot--citpi{ background:#741919ff; }
.hm-network-dot--citso{ background:#082c8dff; }
.hm-network-dot--citsv{ background:#2dfa82ff; }
.hm-network-dot--citcrc{ background:#ee708fff; }

.hm-network-label{
  display:flex;
  flex-direction:column;
  gap:0px;
  min-width:0;
}

.hm-network-name,
.hm-network-sub{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.05;
}

.hm-network-name{
  font-size:.82rem;
  font-weight:600;
  color:var(--hm-text);
}
.hm-network-sub{
  font-size:.76rem;
  color:var(--hm-muted);
}

.hm-network-metrics{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.hm-network-count{
  font-size:.86rem;
  font-weight:600;
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.hm-network-count-icon{ color:var(--hm-muted); }
.hm-network-count-label{
  font-size:.74rem;
  color:var(--hm-muted);
  margin-left:2px;
  line-height:1.05;
}

.hm-network-speed-badge{
  font-size:.65rem;
  padding:2px 7px;
  border-radius:999px;
  border-width:1px;
  border-style:solid;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition:box-shadow .3s ease, background-color .2s ease, border-color .2s ease;
}

.hm-network-count-icon,
.hm-network-speed-badge i{
  font-size:.85rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.hm-speed-slow-badge{
  background:rgba(239,68,68,.377);
  border-color:rgba(248,113,113,.8);
  color:#fecaca;
}
.hm-speed-medium-badge{
  background:rgba(243,195,1,.26);
  border-color:rgba(250,204,21,.7);
  color:#fef08a;
}
.hm-speed-fast-badge{
  background:rgba(34,197,94,.301);
  border-color:rgba(74,222,128,.8);
  color:#bbf7d0;
}
.hm-speed-nd-badge{
  background:rgba(148,163,184,.12);
  border-color:rgba(148,163,184,.6);
  color:var(--hm-text);
}

@keyframes hm-dot-pulse{
  0%{ box-shadow:0 0 0 0 rgba(56,189,248,.6); transform:translateY(0); }
  50%{ box-shadow:0 0 0 4px rgba(56,189,248,0); transform:translateY(-.5px); }
  100%{ box-shadow:0 0 0 0 rgba(56,189,248,0); transform:translateY(0); }
}

@keyframes hm-badge-glow{
  0%{ box-shadow:0 0 0 0 rgba(148,163,184,0); }
  50%{ box-shadow:0 0 14px 0 rgba(148,163,184,.28); }
  100%{ box-shadow:0 0 0 0 rgba(148,163,184,0); }
}

.hm-network-row--active{
  background-color:var(--hm-surface);
  border-color:rgba(56,189,248,.45);
  transform:translateY(-.5px);
}
.hm-network-row--active .hm-network-dot{ animation:hm-dot-pulse 3.2s ease-out infinite; }
.hm-network-row--active .hm-network-speed-badge{ animation:hm-badge-glow 7s ease-in-out infinite; }

/* KPI dots */
.hm-kpi-dot{ width:8px; height:8px; border-radius:999px; flex-shrink:0; }
.hm-kpi-dot--stm{ background:#38bdf8; }
.hm-kpi-dot--stl-laval{ background:#facc15; }
.hm-kpi-dot--rtl{ background:#fb923c; }
.hm-kpi-dot--exo-laur{ background:#4ade80; }
.hm-kpi-dot--exo-lrrs{ background:#10b981; }
.hm-kpi-dot--exo-mrclm{ background:#a855f7; }
.hm-kpi-dot--exo-citvr{ background:#3b82f6; }
.hm-kpi-dot--exo-omitsju{ background:#60a5fa; }
.hm-kpi-dot--exo-mrclasso{ background:#ef4444; }
.hm-kpi-dot--exo-trains{ background:#22c55e; }

/* Badges vitesse anciens */
.th-speed-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid transparent;
}
.th-speed-badge--slow{
  background:rgba(248,113,113,.18);
  border-color:rgba(248,113,113,.55);
  color:#fecaca;
}
.th-speed-badge--medium{
  background:rgba(234,179,8,.18);
  border-color:rgba(234,179,8,.55);
  color:#facc15;
}
.th-speed-badge--fast{
  background:rgba(34,197,94,.18);
  border-color:rgba(34,197,94,.55);
  color:#bbf7d0;
}


/* =========================================================
   10) BOUTONS & CONTRÔLES
   ========================================================= */
.hm-city-selector{ position:relative; }

.hm-city-btn{
  width:100%;
  background:#1f2937;
  border:1px solid #374151;
  padding:8px 12px;
  color:var(--hm-text);
  border-radius:6px;
  font-size:.85rem;
  font-weight:500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  transition:all .15s;
}

.hm-city-btn:hover{
  background:var(--hm-surface);
  border-color:#4b5563;
  color:var(--hm-link);
}
.hm-city-btn:hover i{ color:var(--hm-link) !important; }

.hm-city-caret{
  font-size:16px;
  opacity:.75;
  transition:transform .2s ease, color .15s;
}
.hm-city-btn[aria-expanded="true"] .hm-city-caret{ transform:rotate(180deg); }

.hm-city-menu{
  background:var(--hm-surface) !important;
  border:1px solid #374151 !important;
  border-radius:6px;
}

.hm-city-menu .dropdown-item{
  color:var(--hm-text);
  font-size:.85rem;
  padding:8px 12px;
  transition:color .15s, background .15s;
}
.hm-city-menu .dropdown-item:hover{
  background:#373F4F;
  color:var(--hm-text) !important;
}
.hm-city-menu .dropdown-item.active,
.hm-city-menu .dropdown-item.active:hover,
.hm-city-menu .dropdown-item.active:focus{
  background:#373F4F !important;
  color:var(--hm-text) !important;
  border-radius:4px;
}

/* Icônes ville */
.hm-sidebar-left .hm-city-btn i,
.hm-sidebar-left .hm-city-btn:hover i,
.hm-sidebar-left .hm-city-btn[aria-expanded="true"] i,
.hm-sidebar-col .hm-city-btn i,
.hm-sidebar-col .hm-city-btn:hover i,
.hm-sidebar-col .hm-city-btn[aria-expanded="true"] i{
  color:#93c5fd !important;
}

/* Modes */
.hm-mode-btn{
  width:100%;
  background:transparent;
  border:1px solid #374151;
  color:var(--hm-text);
  padding:8px 12px;
  border-radius:6px;
  font-size:.85rem;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
  cursor:pointer;
  transition:all .15s;
}
.hm-mode-btn:hover{ background:#1f2937; border-color:#4b5563; }

.hm-mode-btn.active{
  background:#2b3545 !important;
  border-color:#4b5563 !important;
  color:var(--hm-link) !important;
}
.hm-mode-btn.active:hover{
  background:#334155 !important;
  border-color:#64748b !important;
  color:#93c5fd !important;
}
.hm-mode-btn i,
.hm-mode-btn.active i,
.hm-mode-btn:hover i,
.hm-mode-btn.active:hover i{ color:inherit !important; }

/* Toggle sidebar (flèche) */
.hm-sidebar-toggle-btn,
#hm-sidebar-toggle,
button#hm-sidebar-toggle{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:21 !important;
  width:32px !important;
  height:32px !important;
  padding:0 !important;
  border-radius:6px !important;
  background:#242a38 !important;
  background-image:none !important;
  color:var(--hm-muted) !important;
  font-weight:600 !important;
  border:1px solid var(--hm-border-strong) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:0 6px 16px rgba(0,0,0,.45) !important;
  font-size:1rem !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.hm-sidebar-toggle-btn:hover,
#hm-sidebar-toggle:hover,
button#hm-sidebar-toggle:hover{
  background:#283241 !important;
  color:#f9fafb !important;
  border-color:rgba(148,163,184,.55) !important;
}
#hm-sidebar-toggle-icon,
.hm-sidebar-toggle-btn i{ color:inherit !important; }

/* Bootstrap dropdown active override */
.dropdown-item.active,
.dropdown-item.active:hover,
.dropdown-item:active{
  background-color:#2b3545 !important;
  color:var(--hm-link) !important;
}


/* =========================================================
   11) LEAFLET & CONTRÔLES CARTE
   ========================================================= */
.leaflet-container,
.leaflet-popup,
.leaflet-popup-content,
.leaflet-tooltip,
.leaflet-control{
  font-family:var(--hm-font-global) !important;
}

.leaflet-container{
  border-radius:.75rem !important;
  overflow:hidden !important;
}

/* Guard rail popups */
.leaflet-popup .leaflet-popup-content-wrapper{ max-width:none !important; }
.leaflet-popup .leaflet-popup-content{ margin:0 !important; }

/* Contrôles Leaflet transparents */
.leaflet-control{
  background:transparent !important;
  box-shadow:none !important;
}

/* Zoom +/- */
.leaflet-control-zoom a{
  background:var(--hm-surface) !important;
  border:none !important;
  color:#fff !important;
  font-weight:600;
}
.leaflet-control-zoom a:hover{ background:#323c50 !important; }

/* Position contrôles */
.leaflet-top.leaflet-left{
  top:70px !important;
  left:18px !important;
}

/* Boutons personnalisés (droite) */
.leaflet-top.leaflet-right .leaflet-control{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}

.leaflet-top.leaflet-right .leaflet-control button,
.leaflet-top.leaflet-right .leaflet-control a{
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--hm-surface) !important;
  border:1px solid rgba(148,163,184,.8) !important;
  color:#f9fafb !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:16px;
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .12s ease;
}
.leaflet-top.leaflet-right .leaflet-control button:hover,
.leaflet-top.leaflet-right .leaflet-control a:hover{
  background:#323c50 !important;
  border-color:rgba(219,234,254,1) !important;
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(15,23,42,.55);
}

/* Flèches navigation */
.leaflet-top.leaflet-right .hm-map-arrows{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

.hm-map-arrow-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--hm-surface) !important;
  border:1px solid rgba(148,163,184,.8);
  color:var(--hm-link) !important;
  font-size:18px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background .2s, transform .1s;
}
.hm-map-arrow-btn:hover{
  background:#323c50 !important;
  transform:translateY(-1px);
}

/* Légende heatmap */
.th-legend{
  position:absolute;
  left:16px;
  bottom:16px;
  width:260px;
  padding:10px 12px;
  background-color:#242a39 !important;
  border-radius:10px;
  border:1px solid #5c5c5c;
  box-shadow:0 12px 30px rgba(0,0,0,.8);
  box-sizing:border-box;
  display:none;
}
.th-legend-title{
  font-size:12px;
  font-weight:600;
  margin-bottom:6px;
  color:var(--hm-text);
}
.th-legend-scale{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
}
.th-legend-low,
.th-legend-high{
  font-size:12px;
  color:#d1d5db;
}
.th-legend-bar{
  flex:1;
  height:6px;
  border-radius:9999px;
  background:linear-gradient(to right,#22c55e,#eab308,#f97316,#ef4444);
}
.th-legend-text{
  font-size:12px;
  color:var(--hm-muted);
  margin:0;
}

.leaflet-bottom.leaflet-left .legend,
.leaflet-control-attribution{
  background:transparent !important;
  box-shadow:none !important;
  border:none !important;
}

/* Share button */
.leaflet-control-share,
.leaflet-control-share a,
.leaflet-control-share button{
  width:36px !important;
  height:36px !important;
  border-radius:10px !important;
  background:var(--hm-surface) !important;
  border:1px solid rgba(148,163,184,.8) !important;
  color:#f9fafb !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-weight:600 !important;
  font-size:16px !important;
  cursor:pointer !important;
  transition:background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .12s ease !important;
}
.leaflet-control-share:hover,
.leaflet-control-share a:hover,
.leaflet-control-share button:hover{
  background:#323c50 !important;
  border-color:rgba(219,234,254,1) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 8px 20px rgba(15,23,42,.55) !important;
}


/* =========================================================
   12) MÉTHODOLOGIE
   ========================================================= */
.th-layout.th-layout-methodology{
  display:grid !important;
  grid-template-columns:280px minmax(0,1fr);
  gap:1.5rem;
  padding:1.5rem 2rem;
  box-sizing:border-box;
}

.th-layout.th-layout-methodology .th-sidebar-methodology{
  position:sticky;
  top:1.25rem;
  align-self:flex-start;
  max-height:calc(100vh - 2.5rem);
  overflow:hidden;
}

.th-layout.th-layout-methodology .th-sidebar-nav{
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px solid rgba(255,255,255,.06);
  max-height:320px;
  overflow-y:auto;
}

.th-layout.th-layout-methodology .th-toc{
  list-style:none;
  padding-left:0;
  margin:0;
  font-size:.82rem;
}
.th-layout.th-layout-methodology .th-toc > li{ margin-bottom:.35rem; }
.th-layout.th-layout-methodology .th-toc > li > ol{
  list-style:none;
  padding-left:.9rem;
  margin-top:.25rem;
}
.th-layout.th-layout-methodology .th-toc a{
  text-decoration:none;
  display:inline-block;
}

.th-main-methodology{
  max-width:960px;
  width:100%;
  margin:0 auto;
}

.th-main-methodology .th-card{
  margin-bottom:.75rem;
  padding:1rem 1.1rem;
}

.th-main-methodology .th-section-title{ margin-bottom:.4rem; font-size:1rem; }
.th-main-methodology .th-subsection-title{ margin:.7rem 0 .25rem; font-size:.9rem; }
.th-main-methodology .th-subsubsection-title{ margin:.6rem 0 .2rem; font-size:.84rem; }

.th-main-methodology p,
.th-main-methodology li{ font-size:.84rem; }

.th-main-methodology .th-code{ font-size:.78rem; padding:.4rem .5rem; }
.th-main-methodology .th-table{ font-size:.78rem; }

.th-methodology-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.th-methodology-logo{
  width:70px;
  height:70px;
  border-radius:12px;
}

.th-methodology-title-main{
  font-size:1.65rem;
  font-weight:700;
  letter-spacing:.03em;
}

.th-back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--hm-link);
  text-decoration:none;
  font-weight:500;
  padding:4px 6px;
  border-radius:6px;
  transition:color .15s ease, background-color .15s ease;
}
.th-back-link:hover{
  color:#dbeafe;
  background-color:var(--hm-bg);
}
.th-back-link:before{ content:"←"; opacity:.7; }

#tab-about h3{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  font-weight:500;
  color:#93c5fd;
  margin-top:14px;
  margin-bottom:6px;
}
#tab-about p:last-child{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  font-weight:500;
  color:#93c5fd;
  margin-top:4px;
  margin-bottom:0;
}


/* =========================================================
   13) UTILITAIRES / BOOTSTRAP OVERRIDES
   ========================================================= */
#hm-city-pill,
#hm-modes-pill{
  background:transparent !important;
  border:none !important;
  padding:0;
  margin:0;
  margin-left:.75rem;
  font-size:.85rem;
  font-weight:400;
  color:inherit;
}
#hm-modes-pill{ opacity:.95; }

/* Bootstrap tables inside hm-main */
.hm-main .table{
  background-color:transparent !important;
  color:var(--hm-text) !important;
}
.hm-main .table > :not(caption) > * > *{
  background-color:#111827 !important;
  border-color:rgba(148,163,184,.15) !important;
  color:var(--hm-text) !important;
}
.hm-main table thead th{
  background-color:#020617 !important;
  color:#f9fafb !important;
  border-color:rgba(148,163,184,.3) !important;
  font-weight:600;
}
.hm-main table tbody tr{ border-color:rgba(148,163,184,.1) !important; }
.hm-main table tbody tr:hover{ background-color:rgba(148,163,184,.05) !important; }
.hm-main table tbody tr:nth-child(odd)  > *{ background-color:var(--hm-surface-2) !important; }
.hm-main table tbody tr:nth-child(even) > *{ background-color:#252B38 !important; }
.hm-main table tbody tr:hover > *{ background-color:#353E4F !important; }
.hm-main table tbody td{
  border-color:rgba(1,163,109,.1) !important;
  color:var(--hm-text) !important;
}

.app-header-tabs{
  border-top:1px solid rgba(15,23,42,.85);
  background:#020617;
}


/* =========================================================
   14) PAGE ANALYSES
   ========================================================= */
.hm-analyses-container{
  padding:2rem 1.5rem;
  max-width:1400px;
  margin:0 auto;
}
.hm-analyses-header{ margin-bottom:2.5rem; }
.hm-analyses-title{
  font-size:2rem;
  font-weight:700;
  color:#f9fafb;
  margin-bottom:.75rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.hm-analyses-title i{ color:#60a5fa; }
.hm-analyses-subtitle{
  font-size:1rem;
  color:var(--hm-muted);
  margin:0;
  line-height:1.5;
}


/* =========================================================
   15) COMPOSANTS / FIXES DIVERS
   ========================================================= */
/* Pin train (map) */
.train-pin,
.train-pin::after,
.train-pin::before{ background:#1664f5 !important; }

/* Pin train header (anti-écrasement) */
.hm-train-pin{
  position:relative;
  width:24px !important;
  height:24px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 24px !important;
  flex-shrink:0 !important;
  overflow:visible !important;
}
.hm-train-pin-inner{
  width:24px !important;
  height:24px !important;
  border-radius:999px !important;
  background-color:#274F75 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
}
.hm-train-pin-inner i{
  font-size:13px !important;
  line-height:1 !important;
  display:inline-block !important;
}
.hm-train-pin::after{
  content:"";
  position:absolute;
  bottom:-7px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-style:solid;
  border-width:7px 5px 0 5px;
  border-color:#274F75 transparent transparent transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}

/* Bouton secondaire sidebar */
.hm-left-subbtn{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-weight:600;
}
.hm-left-subbtn:hover{ background:rgba(255,255,255,.10); }

/* Modal */
.hm-modal{ position:fixed; inset:0; display:none; z-index:9999; }
.hm-modal.is-open{ display:block; }
.hm-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.hm-modal__panel{
  position:absolute;
  right:16px; top:16px; bottom:16px;
  width:min(520px, calc(100vw - 32px));
  background:rgba(18,18,22,.98);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
}
.hm-modal__header{
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hm-modal__title{ font-size:16px; font-weight:800; color:#fff; }
.hm-modal__sub{ font-size:12px; opacity:.75; margin-top:2px; }
.hm-modal__close{
  border:0;
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:12px;
  padding:8px 10px;
}
.hm-modal__body{ padding:12px 16px; overflow:auto; }

/* Work items */
.hm-work-item{
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  margin-bottom:10px;
}
.hm-work-title{ font-weight:800; margin-bottom:6px; }
.hm-work-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:12px;
  opacity:.8;
}
.hm-work-summary{
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  opacity:.95;
}
.hm-work-impacts{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hm-chip{
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
}
.hm-chip__k{ opacity:.8; font-weight:700; }
.hm-chip__v{ opacity:.95; }


/* =========================================================
   16) FOOTER
   ========================================================= */
.hm-footer-desktop{ display:block; }
.hm-footer-mobile{ display:none; }

@media (max-width:768px){
  .hm-footer-desktop{ display:none; }
  .hm-footer-mobile{ display:block; }
}

.hm-footer{
  position:fixed;
  bottom:0;
  left:var(--hm-sidebar-w);
  right:0;
  height:var(--hm-footer-h);

  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;

  background:var(--hm-bg);
  border-top:1px solid var(--hm-border);

  font-size:.72rem;
  color:var(--hm-muted);

  z-index:12050;
}

.hm-footer a{
  color:#60a5fa;
  text-decoration:none;
  font-weight:500;
}
.hm-footer a:hover{ text-decoration:underline; }


/* =========================================================
   17) MOBILE (<= 991.98px) — Layout + drawers + header cleanup
   ========================================================= */
@media (max-width: 991.98px){

  :root{
    --hm-footer-h: 44px;
    --hm-gap-top: 0px;
    --hm-gap-bottom: 0px;
    --hm-mobilebar-h: 72px;      /* mis à jour par JS */
    --hm-mobilebar-z: 40000;
    --hm-overlay-z: 30000;
    --hm-drawer-z: 32000;
  }

  /* Désactiver header desktop sur mobile */
  .hm-header,
  .hm-header-nav,
  .hm-data-status-wrapper,
  .hm-indicators-handle{
    display:none !important;
  }

  /* Mobilebar */
  .hm-mobilebar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:var(--hm-mobilebar-z) !important;
    pointer-events:auto !important;

    display:flex !important;
    gap:10px;
    align-items:center;

    padding: calc(env(safe-area-inset-top) + 10px) 12px 10px !important;

    background: rgba(15,23,42,.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(148,163,184,.18);

    transform: translateZ(0);
  }

  .hm-mobilebar,
  .hm-mobilebar *{
    pointer-events:auto !important;
    touch-action: manipulation;
  }

  .hm-mobilebar-btn{
    flex:1 1 0;
    height:44px;
    border-radius:16px;
    border:1px solid rgba(148,163,184,.22);
    background: rgba(30,41,59,.55);
    color:#e5e7eb;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    font-weight:700;
    box-shadow: 0 12px 26px rgba(0,0,0,.35);
  }
  .hm-mobilebar-btn i{ font-size:18px; opacity:.95; }
  .hm-mobilebar-btn span{ font-size:.92rem; }

  .hm-mobilebar-icon{
    width:46px;
    height:44px;
    border-radius:16px;
    border:1px solid rgba(148,163,184,.22);
    background: rgba(30,41,59,.55);
    color:#e5e7eb;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    box-shadow: 0 12px 26px rgba(0,0,0,.35);
  }
  .hm-mobilebar-icon i{ font-size:20px; }

  /* Overlay drawers */
  body::before{
    content:none !important;
    display:none !important;
    pointer-events:none !important;
  }
  body.hm-mobile-menu-open::before,
  body.hm-mobile-dashboard-open::before{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    background: rgba(0,0,0,.55) !important;
    z-index: var(--hm-overlay-z) !important;
    display:block !important;
    pointer-events:auto !important;
  }

  /* Drawer gauche */
  .hm-sidebar-left{
    position:fixed !important;
    left:0;
    top:0;
    bottom:0;
    width:min(88vw, 340px);

    transform: translateX(-105%);
    transition: transform .18s ease;

    z-index: var(--hm-drawer-z) !important;
    padding-top: calc(env(safe-area-inset-top) + 10px);
  }
  body.hm-mobile-menu-open .hm-sidebar-left{ transform: translateX(0); }

  /* Drawer droite */
  .hm-sidebar-col{
    position:fixed !important;
    right:0;
    top:0;
    bottom:0;
    width:min(92vw, 520px);

    transform: translateX(105%);
    transition: transform .18s ease;

    z-index: var(--hm-drawer-z) !important;
    overflow:auto;

    padding: calc(env(safe-area-inset-top) + 12px) 12px 12px;
    background: rgba(17,24,39,.96);
    border-left: 1px solid rgba(148,163,184,.18);
    display:block !important;
  }
  body.hm-mobile-dashboard-open .hm-sidebar-col{ transform: translateX(0); }

  /* Main: sous mobilebar, au-dessus footer */
  .hm-main{
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom: var(--hm-footer-h) !important;
    overflow:hidden !important;
    padding-top: var(--hm-mobilebar-h) !important;
  }

  /* Enlever paddings bootstrap qui rétrécissent la map */
  .hm-main-inner{ padding:0 !important; }
  .hm-layout-row{
    margin:0 !important;
    --bs-gutter-x:0 !important;
    --bs-gutter-y:0 !important;
  }
  .hm-map-col,
  .hm-sidebar-col{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Map full width + coins carrés */
  .hm-map-col .card,
  .hm-map-col .card.custom-card{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    border-radius:0 !important;
    margin:0 !important;
  }

  .hm-map-wrapper{
    width:100% !important;
    border-radius:0 !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;

    height: calc(100dvh - var(--hm-mobilebar-h) - var(--hm-footer-h)) !important;
    min-height: calc(100dvh - var(--hm-mobilebar-h) - var(--hm-footer-h)) !important;

    margin-bottom:0 !important;
    position:relative !important;
    overflow:hidden !important;
  }

  .hm-map-wrapper iframe{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
    border-radius:0 !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
    z-index:1 !important;
  }

  /* Footer mobile */
  .hm-footer{ left:0 !important; right:0 !important; }
  .hm-footer-desktop{ display:none !important; }
  .hm-footer-mobile{ display:block !important; }
}

/* Mobile strict (<= 768px) */
@media (max-width: 768px){
  #hm-sidebar-toggle{ display:none !important; }
  .hm-map-overlay-header{ display:none !important; }
  .th-legend{ display:none !important; }
  .leaflet-control-zoom{ display:none !important; }
  .leaflet-control-layers{ display:none !important; }

  .hm-map-share,
  .hm-share-view,
  [data-hm-action="share"],
  .leaflet-control-share{
    display:none !important;
  }
}

/* Mobile only — fond + coins carrés (évite coins blancs) */
@media (max-width: 991.98px){
  html, body{
    background:#0b1220 !important;
    margin:0 !important;
    padding:0 !important;
  }
  #map, .map, .leaflet-container{ border-radius:0 !important; }
  .leaflet-container{
    border-radius:0 !important;
    overflow:hidden !important;
    background:#0b1220 !important;
  }
  .leaflet-pane,
  .leaflet-tile-pane,
  .leaflet-map-pane,
  .leaflet-overlay-pane,
  .leaflet-shadow-pane,
  .leaflet-marker-pane,
  .leaflet-tooltip-pane,
  .leaflet-popup-pane{
    border-radius:0 !important;
  }
}


/* =========================================================
   18) DESKTOP LAYOUT RATIO — Map / Sidebar droite (65/35)
   ========================================================= */
@media (min-width: 992px){
  .hm-layout-row{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
  }

  .hm-layout-row > .hm-map-col{
    flex: 0 0 var(--hm-split-map) !important;
    width: var(--hm-split-map) !important;
    max-width: var(--hm-split-map) !important;
    min-width: 0 !important;
  }

  .hm-layout-row > .hm-sidebar-col{
    flex: 0 0 var(--hm-split-side) !important;
    width: var(--hm-split-side) !important;
    max-width: var(--hm-split-side) !important;
    min-width: 0 !important;
  }
}

/* ==========================================================================
   HOTFIX — Coverage table header icons alignment + 1920x1080 fit
   À coller TOUT EN BAS de styles.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) HEADER: NE JAMAIS mettre display:flex sur les TH (ça casse l'alignement table)
      -> On remet les TH en table-cell et on centre via le span interne.
   -------------------------------------------------------------------------- */

.hm-sidebar-col .hm-coverage-table thead th{
  display: table-cell !important;   /* ✅ crucial: redevient cellule de table */
  vertical-align: middle !important;

  /* garde ton header compact */
  height: 32px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  text-align: center !important;

  /* tu avais font-size:0 pour cacher le texte; on le conserve */
  font-size: 0 !important;
  line-height: 1 !important;
}

/* Centre l'icône DANS le TH via un wrapper */
.hm-sidebar-col .hm-coverage-table thead th > span{
  width: 100% !important;
  height: 100% !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* Icônes: taille + pas de décalage */
.hm-sidebar-col .hm-coverage-table thead th i{
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(0) !important;
}

/* --------------------------------------------------------------------------
   2) DESKTOP 1920x1080: réduire la "hauteur consommée" (sans changer ton layout)
      -> On resserre un peu les espaces qui font dépasser une page.
   -------------------------------------------------------------------------- */

@media (min-width: 992px){

  /* un peu moins de padding global du main */
  .hm-main-inner{
    padding: 1.0rem 1.0rem .7rem 1.0rem !important;
  }

  /* cards sidebar droite légèrement plus denses */
  .hm-sidebar-col .card.custom-card{ margin-bottom: .45rem !important; }
  .hm-sidebar-col .card.custom-card .card-header{ padding: 5px 10px !important; }
  .hm-sidebar-col .card.custom-card .card-body{ padding: 7px 10px !important; }

  /* lignes tableau un peu plus fines */
  .hm-coverage-table tbody td{
    padding-top: .14rem !important;
    padding-bottom: .14rem !important;
  }

  /* (option safe) empêche des overflow bizarres en flex */
  .hm-layout-row > .hm-map-col,
  .hm-layout-row > .hm-sidebar-col{
    min-height: 0 !important;
  }
}

/* =========================================================
   Centre l’icône du header col #1 (Arrondissements/Secteur)
   ========================================================= */

.hm-sidebar-col .hm-coverage-table thead th:nth-child(1){
  position: relative !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

/* Cas 1: icône DANS un span */
.hm-sidebar-col .hm-coverage-table thead th:nth-child(1) > span{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Cas 2: icône DIRECTEMENT dans le th (sans span) */
.hm-sidebar-col .hm-coverage-table thead th:nth-child(1) > i,
.hm-sidebar-col .hm-coverage-table thead th:nth-child(1) > svg{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

/* =========================================================
   FINAL TWEAK — Menu burger + logo sur une seule ligne
   ========================================================= */

/* 1) Couleur des 3 barres du menu */
.hm-mainmenu-btn span{
  background:#60a5fa !important;
}

/* 2) Logo + texte sur UNE seule ligne */
.hm-sidebar-logo{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  white-space:nowrap !important;
}

/* 3) Ajustement fin de la taille du texte "Flux Montréal" */
.hm-sidebar-logo span{
  font-size:0.95rem !important;   /* légèrement plus petit */
  font-weight:600;
  line-height:1;
}

/* 4) Sécurité : si écran étroit, on réduit encore un peu */
@media (max-width:1100px){
  .hm-sidebar-logo span{
    font-size:0.9rem !important;
  }
}

/* =========================================================
   MOBILE HOTFIX — Forcer le header visible (sans toucher PC)
   À coller TOUT EN BAS de styles.css
   ========================================================= */
@media (max-width: 991.98px){

  /* 1) Force le header à être visible (certaines règles mobile le mettent à none/hidden/transform) */
  .hm-header{
    display:flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;

    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    height: auto !important;
    max-height: none !important;

    z-index: 65000 !important;   /* au-dessus de tout */
    pointer-events: auto !important;
  }

  /* 2) Si un parent/overlay masque le header par héritage */
  body, html{
    overflow-x: hidden;
  }

  /* 3) Sécurité: si tu as une "mobilebar" (id attendu par mobile_drawers.js) */
  #hmMobileBar,
  .hm-mobilebar{
    display:flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 65001 !important;
    pointer-events: auto !important;
  }
}

/* =========================================================
   MOBILE BAR (3 boutons) — ne touche pas au PC
   ========================================================= */
.hm-mobilebar{ display:none; }

@media (max-width: 991.98px){

  /* affiche la barre seulement mobile */
  #hmMobileBar.hm-mobilebar{
    display:flex !important;
    position:fixed !important;
    left:12px !important;
    right:12px !important;

    /* au-dessus du footer (valeur safe) */
    bottom: calc(env(safe-area-inset-bottom) + 58px) !important;

    z-index: 65001 !important;
    pointer-events: auto !important;

    gap:10px !important;
    padding:10px !important;

    border-radius:16px !important;
    border:1px solid rgba(148,163,184,.22) !important;
    background: rgba(15,23,42,.72) !important;
    backdrop-filter: blur(10px) !important;

    box-shadow: 0 18px 45px rgba(0,0,0,.55) !important;
  }

  #hmMobileBar .hm-mbar-btn{
    flex:1 1 0 !important;
    height:44px !important;

    border-radius:14px !important;
    border:1px solid rgba(148,163,184,.22) !important;
    background: rgba(30,41,59,.55) !important;
    color:#e5e7eb !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:20px !important;
    line-height:1 !important;
    cursor:pointer !important;

    transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }

  #hmMobileBar .hm-mbar-btn:active{
    transform: translateY(1px) !important;
  }

  /* feedback visuel quand un drawer est ouvert */
  body.hm-mobile-menu-open #hmMobileMenuBtn,
  body.hm-mobile-dashboard-open #hmMobileDashBtn,
  body.hm-mobile-bubbles-open #hmMobileBubblesBtn{
    background: rgba(40,50,66,.72) !important;
    border-color: rgba(148,163,184,.45) !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.40) !important;
  }
}

/* =========================================================
   MOBILEBAR — EN HAUT (3 boutons)
   À coller TOUT EN BAS de styles.css
   ========================================================= */
@media (max-width: 991.98px){
  #hmMobileBar{
    position: fixed !important;

    /* ✅ en haut */
    top: calc(env(safe-area-inset-top) + 10px) !important;
    bottom: auto !important;

    left: 12px !important;
    right: 12px !important;

    transform: none !important;
    margin: 0 !important;

    z-index: 65001 !important;
  }

  /* ✅ la map ne doit pas passer sous la barre */
  .hm-main{
    padding-top: calc(var(--hm-mobilebar-h) + env(safe-area-inset-top) + 12px) !important;
  }

  /* ✅ la map prend le reste de la hauteur */
  .hm-map-wrapper{
    height: calc(100dvh - (var(--hm-mobilebar-h) + env(safe-area-inset-top) + 12px) - var(--hm-footer-h)) !important;
    min-height: calc(100dvh - (var(--hm-mobilebar-h) + env(safe-area-inset-top) + 12px) - var(--hm-footer-h)) !important;
  }
}

/* =========================================================
   FIX FINAL — Mobilebar en haut + empêcher le gros header vide
   À coller TOUT EN BAS de styles.css
   ========================================================= */
@media (max-width: 991.98px){

  /* 1) ✅ IMPORTANT: le header desktop DOIT rester OFF sur mobile */
  .hm-header,
  .hm-header-top,
  .hm-header-bottom,
  .hm-header-nav{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* 2) ✅ Mobilebar (3 boutons) en haut */
  #hmMobileBar.hm-mobilebar{
    position:fixed !important;
    top: calc(env(safe-area-inset-top) + 10px) !important;
    bottom: auto !important;

    left:12px !important;
    right:12px !important;

    z-index: 65001 !important;
  }

  /* 3) ✅ Le contenu passe sous la barre */
  .hm-main{
    padding-top: calc(var(--hm-mobilebar-h) + env(safe-area-inset-top) + 20px) !important;
  }

  /* 4) ✅ La map prend le reste de l’écran */
  .hm-map-wrapper{
    height: calc(100dvh - (var(--hm-mobilebar-h) + env(safe-area-inset-top) + 20px) - var(--hm-footer-h)) !important;
    min-height: calc(100dvh - (var(--hm-mobilebar-h) + env(safe-area-inset-top) + 20px) - var(--hm-footer-h)) !important;
  }
}

/* =========================================================
   SANTÉ DU SYSTÈME — valeurs en TEXTE (pas de pills)
   ========================================================= */
.hm-sys-value{
  display:inline;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:.01em;
  color:#e5e7eb;
}

.hm-sys-value--ok{
  color:#bbf7d0; /* vert doux (texte seulement) */
}

.hm-sys-value--mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:700;
  color:#bae6fd; /* cyan doux */
}

.hm-sys-value--muted{
  font-weight:700;
  color:#cbd5e1; /* neutre sérieux */
}

/* =========================================================
   Bouton "DÉTAILS RÉSEAUX & API" (reste sobre)
   ========================================================= */
.hm-api-details-btn{
  width:100%;
  border:1px solid rgba(148,163,184,0.28);
  background:rgba(30,41,59,0.25);
  color:#e5e7eb;
  padding:9px 10px;
  border-radius:12px;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .12s ease;
}

.hm-api-details-btn:hover{
  background:rgba(40,50,66,0.35);
  border-color:rgba(148,163,184,0.45);
  transform:translateY(-0.5px);
}

/* =========================================================
   Alignement propre des valeurs système (droite)
   ========================================================= */

.hm-data-status-row{
  display:grid;
  grid-template-columns: 1fr 110px; /* colonne droite fixe */
  align-items:center;
}

.hm-data-status-value{
  display:flex;
  justify-content:flex-end;   /* alignement net à droite */
  align-items:center;
  text-align:right;
}

/* Valeurs système (texte simple) */
.hm-sys-value{
  font-weight:600;
  font-size:0.78rem;
  line-height:1.2;
  white-space:nowrap;
}

/* États */
.hm-sys-value--ok{
  color:#86efac;
}

.hm-sys-value--mono{
  font-variant-numeric: tabular-nums; /* ✅ chiffres alignés */
  letter-spacing:0.02em;
}

.hm-sys-value--muted{
  color:#9ca3af;
}


/* ==========================================================================
   HISTORIQUE 24H (HEADER) — v2026 (PREMIUM + RAIL + STATES)
   Dépendances:
   - HTML: #hmHist24Bar .hm-hist24-rail #hmHist24Slider #hmHist24Pill #hmHist24LiveBtn
   - JS: ajoute/enlève #hmHist24Bar.is-live et #hmHist24Bar.is-hist-on
   ========================================================================== */

/* =========================================================
   CONTAINER (premium)
   ========================================================= */
.hm-hist24{
  margin: 10px 12px 12px;
  padding: 10px 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.18);
  background: linear-gradient(180deg, rgba(30,41,59,0.55), rgba(15,23,42,0.48));
  box-shadow: 0 18px 46px rgba(15,23,42,0.55), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
}

/* =========================================================
   TOP ROW (titre + chip + bouton)
   ========================================================= */
.hm-hist24-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px; /* légèrement plus tight */
}

.hm-hist24-title{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-width:0;
  color: rgba(226,232,240,0.92);
  line-height:1;
}

.hm-hist24-title-main{
  font-size:0.74rem;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  white-space:nowrap;
}

.hm-hist24-title-sep{
  opacity:0.35;
  font-size:0.74rem;
  transform:translateY(-0.5px);
}

.hm-hist24-title-sub{
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.06em;
  color: rgba(148,163,184,0.95);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Chip (heure affichée) — ton HTML utilise hm-hist24-chip via #hmHist24Pill */
.hm-hist24-chip{
  margin-left:10px;
  flex:0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.35);
  color:#e5e7eb;
  font-weight:750;
  font-size:0.73rem;
  white-space:nowrap;
  max-width: min(360px, 42vw);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =========================================================
   TRACK + RAIL
   ========================================================= */
.hm-hist24-track{
  position:relative;
  height: 28px;
  display:flex;
  align-items:center;
}

/* Rail visible (la belle barre) */
.hm-hist24-rail{
  position:absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.20);
  background:
    linear-gradient(180deg, rgba(2,6,23,0.55), rgba(15,23,42,0.35)),
    repeating-linear-gradient(
      90deg,
      rgba(148,163,184,0.00) 0px,
      rgba(148,163,184,0.00) 9px,
      rgba(148,163,184,0.24) 9px,
      rgba(148,163,184,0.24) 10px
    );
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  pointer-events:none;

  opacity:0.75;
  filter:saturate(0.95);
  transition: opacity .22s ease, filter .22s ease, transform .22s ease, box-shadow .22s ease;
}

/* Animation légère quand historique ON */
#hmHist24Bar.is-hist-on .hm-hist24-rail{
  opacity:0.98;
  filter:saturate(1.12);
  transform: translateY(-50%) scaleY(1.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 4px rgba(59,130,246,0.08);
}

/* =========================================================
   SLIDER (range) — laisse ton thumb custom intact
   ========================================================= */
.hm-hist24-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height: 28px;
  background: transparent;
  margin:0;
  padding:0;
}
.hm-hist24-slider:focus{ outline:none; }

.hm-hist24-slider::-webkit-slider-runnable-track{ height: 28px; background: transparent; }
.hm-hist24-slider::-moz-range-track{ height: 28px; background: transparent; }

/* Thumb (gros point) */
.hm-hist24-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(226,232,240,0.85);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(148,163,184,0.65));
  box-shadow: 0 12px 22px rgba(0,0,0,0.55), 0 0 0 6px rgba(59,130,246,0.10);
  cursor: grab;
  margin-top: 3px; /* centre sur rail */
}
.hm-hist24-slider:active::-webkit-slider-thumb{ cursor: grabbing; }

.hm-hist24-slider::-moz-range-thumb{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(226,232,240,0.85);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(148,163,184,0.65));
  box-shadow: 0 12px 22px rgba(0,0,0,0.55), 0 0 0 6px rgba(59,130,246,0.10);
  cursor: grab;
}

/* =========================================================
   BOUTON CONTEXTUEL (En direct / Revenir en direct)
   ========================================================= */
.hm-hist24-live{
  appearance:none;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(30,41,59,0.26);
  color: rgba(226,232,240,0.92);
  border-radius: 12px;
  padding: 0.42rem 0.65rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.70rem;
  line-height:1;
  cursor:pointer;
  box-shadow: 0 12px 28px rgba(15,23,42,0.38);
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
  white-space:nowrap;
}

.hm-hist24-live:hover{
  transform: translateY(-1px);
  background: rgba(40,50,66,0.40);
  border-color: rgba(148,163,184,0.45);
  box-shadow: 0 16px 34px rgba(15,23,42,0.55);
}
.hm-hist24-live:active{ transform: translateY(0px); }

/* ÉTAT LIVE: vert "scan" */
#hmHist24Bar.is-live .hm-hist24-live{
  border-color: rgba(34,197,94,0.55);
  background: rgba(22,163,74,0.16);
  color: #bbf7d0;
  box-shadow: 0 12px 28px rgba(15,23,42,0.38), 0 0 0 4px rgba(34,197,94,0.10);
}
#hmHist24Bar.is-live .hm-hist24-live:hover{
  transform: translateY(-1px);
  background: rgba(22,163,74,0.22);
  border-color: rgba(34,197,94,0.70);
  box-shadow: 0 16px 34px rgba(15,23,42,0.55), 0 0 0 5px rgba(34,197,94,0.12);
}

/* ÉTAT HISTORIQUE: bleuté */
#hmHist24Bar.is-hist-on .hm-hist24-live{
  border-color: rgba(59,130,246,0.55);
  background: rgba(59,130,246,0.10);
  color: rgba(219,234,254,0.98);
  box-shadow: 0 12px 28px rgba(15,23,42,0.38), 0 0 0 4px rgba(59,130,246,0.12);
}
#hmHist24Bar.is-hist-on .hm-hist24-live:hover{
  transform: translateY(-1px);
  background: rgba(59,130,246,0.14);
  border-color: rgba(59,130,246,0.72);
  box-shadow: 0 16px 34px rgba(15,23,42,0.55), 0 0 0 5px rgba(59,130,246,0.14);
}

/* =========================================================
   RULES (collapse + spacing with bubbles)
   ========================================================= */
#hm-header.is-bubbles-collapsed #hmHist24Bar{ display:none !important; }

/* Compactage espace bulles ↔ historique */
#hm-header-bubbles-wrap{
  margin-bottom: 4px !important;
}
.hm-hist24{
  margin-top: 4px !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 768px){
  .hm-hist24{
    margin: 8px 10px 10px !important;
    padding: 10px 10px 12px !important;
    border-radius: 14px !important;
  }
  .hm-hist24-title-sub{ display:none; }
  .hm-hist24-chip{ max-width: 62vw; }
}

/* =========================================================
   FIX — espace bulles ↔ historique
   ========================================================= */

/* 1) Enlève le padding bas inutile du header */
#hm-header{
  padding-bottom: 0 !important;
}

/* 2) Supprime tout gap vertical interne éventuel */
#hm-header > *{
  margin-bottom: 0;
}

/* 3) Ajustement final ultra-fin */
#hm-header-bubbles-wrap{
  margin-bottom: 2px !important;
}

#hmHist24Bar{
  margin-top: 2px !important;
}

/* ==========================================================================
   HISTORIQUE (SIDEBAR MODAL) — v2026 PRO
   (popup Historique du menu de gauche)
   ========================================================================== */

.hm-hist-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.50);
  backdrop-filter: blur(6px);
  z-index:9998;
}

/* modal */
.hm-hist-modal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(760px, calc(100vw - 28px));
  background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(2,6,23,0.92));
  color:#e8eef6;
  border:1px solid rgba(148,163,184,0.16);
  border-radius:18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  z-index:9999;
}

/* header */
.hm-hist-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-bottom:1px solid rgba(148,163,184,0.14);
}

.hm-hist-title{
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:0.80rem;
  color:rgba(226,232,240,0.95);
}

.hm-hist-sub{
  margin-top:4px;
  font-size:0.78rem;
  color:rgba(148,163,184,0.95);
}

.hm-hist-close{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.18);
  background:rgba(255,255,255,0.06);
  color:#e8eef6;
  font-size:22px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.hm-hist-close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(148,163,184,0.30);
}

/* body */
.hm-hist-body{
  padding:14px;
}

.hm-hist-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.hm-hist-field{
  background: rgba(30,41,59,0.26);
  border:1px solid rgba(148,163,184,0.14);
  border-radius:14px;
  padding:12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.hm-hist-label{
  display:block;
  font-size:0.70rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(148,163,184,0.95);
  margin-bottom:8px;
}

.hm-hist-input{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.20);
  background: rgba(2,6,23,0.40);
  color:#e8eef6;
  padding:10px 10px;
  font-weight:700;
  outline:none;
}
.hm-hist-input:focus{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.12);
}

.hm-hist-hint{
  margin-top:8px;
  font-size:0.74rem;
  color:rgba(148,163,184,0.90);
  line-height:1.35;
}

.hm-hist-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,0.18);
  background: rgba(2,6,23,0.35);
  color:rgba(226,232,240,0.95);
  font-weight:850;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.hm-hist-mini{
  margin-top:8px;
  font-size:0.76rem;
  color:rgba(148,163,184,0.92);
}

/* actions */
.hm-hist-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

.hm-hist-btn{
  appearance:none;
  border-radius:12px;
  padding: 0.62rem 0.85rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:0.72rem;
  line-height:1;
  cursor:pointer;
  border:1px solid rgba(148,163,184,0.20);
  background: rgba(30,41,59,0.22);
  color: rgba(226,232,240,0.95);
  box-shadow: 0 14px 32px rgba(0,0,0,0.35);
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}

.hm-hist-btn:hover{
  transform: translateY(-1px);
  background: rgba(30,41,59,0.30);
  border-color: rgba(148,163,184,0.35);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.hm-hist-btn:active{ transform: translateY(0px); }

/* Primary */
.hm-hist-btn--primary{
  border-color: rgba(59,130,246,0.55);
  background: rgba(59,130,246,0.18);
  color: rgba(219,234,254,0.98);
}
.hm-hist-btn--primary:hover{
  background: rgba(59,130,246,0.24);
  border-color: rgba(59,130,246,0.70);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 5px rgba(59,130,246,0.14);
}

/* Mode button: état live/hist (piloté par JS via classes) */
.hm-hist-btn--mode.is-live{
  border-color: rgba(34,197,94,0.55);
  background: rgba(22,163,74,0.16);
  color: #bbf7d0;
}
.hm-hist-btn--mode.is-hist{
  border-color: rgba(59,130,246,0.55);
  background: rgba(59,130,246,0.10);
  color: rgba(219,234,254,0.98);
}

/* mobile */
@media (max-width: 768px){
  .hm-hist-grid{ grid-template-columns: 1fr; }
  .hm-hist-actions{ justify-content:stretch; }
  .hm-hist-btn{ flex:1 1 auto; }
}


/* Calendrier jours (dans le modal) */
.hm-hist-days{
  display:grid;
  grid-template-columns:repeat(7, minmax(0,1fr));
  gap:8px;
}

.hm-hist-day{
  appearance:none;
  border:1px solid rgba(148,163,184,0.22);
  background:rgba(30,41,59,0.35);
  color:#e5e7eb;
  border-radius:12px;
  padding:10px 6px;
  font-weight:600;
  text-align:center;
  cursor:pointer;
  transition:transform .12s ease, border-color .15s ease, background .15s ease;
}

.hm-hist-day:hover{
  transform:translateY(-1px);
  background:rgba(40,50,66,0.55);
  border-color:rgba(148,163,184,0.45);
}

.hm-hist-day.is-active{
  border-color:rgba(250,204,21,0.65);
  box-shadow:0 0 0 3px rgba(250,204,21,0.12);
}

.hm-hist-day.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none !important;
}