/* =========================================================
   Flux Montréal — styles.css (DESKTOP ONLY)
   CLEAN / DEDUP / ORDERED — SINGLE SOURCE OF TRUTH
   - Aucun patch mobile (mobile.css gère tout le mobile)
   - Table coverage: texte jamais vertical + scroll horizontal
   - Header icons centrées (sans casser le layout table)
   ========================================================= */


/* =========================================================
   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);
}

/* Logo + texte sur UNE seule ligne */
.hm-sidebar-logo{
  display:flex !important;
  flex-direction:row;
  align-items:center !important;
  justify-content:center;
  text-decoration:none;
  color:#f9fafb;
  padding:1rem;
  gap:8px !important;
  white-space:nowrap !important;
}
.hm-sidebar-logo img{
  width:48px;
  height:48px;
  border-radius:8px;
  margin:0;
}
.hm-sidebar-logo span{
  font-size:0.95rem !important;
  font-weight:600;
  line-height:1;
  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;
}

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


/* =========================================================
   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;
  padding-bottom:0 !important;
}

.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.1rem 1.1rem .8rem 1.1rem !important; }

/* 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 possible */
  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;
}


/* =========================================================
   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é) — DESKTOP SAFE
   - texte secteur jamais vertical
   - scroll horizontal (table-responsive)
   - header icons centrées sans casser le layout table
   ========================================================= */

/* Cards compact (sidebar droite) */
.hm-sidebar-col .card.custom-card{
  margin-bottom:.45rem !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:5px 10px !important; font-size:.78rem !important; }
.hm-sidebar-col .card-body{ padding:7px 10px !important; }

/* 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);
}
.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 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:.14rem .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) */
.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 */
.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; }

/* Sidebar droite: table peut dépasser pour déclencher le scroll */
.hm-sidebar-col table.hm-coverage-table{
  table-layout:auto !important;
  width:max-content !important;
  min-width:100% !important;
  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:210px !important;
  max-width:300px !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:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  white-space:nowrap !important;
  text-align:center !important;
}

/* IMPORTANT: ne jamais mettre display:flex sur les TH (ça casse le layout table)
   -> Centre via span interne, en gardant table-cell */
.hm-sidebar-col .hm-coverage-table thead th{
  display:table-cell !important;
  vertical-align:middle !important;

  height:32px !important;
  padding-top:4px !important;
  padding-bottom:4px !important;
  padding-left:0 !important;
  padding-right:0 !important;

  text-align:center !important;

  /* cache le texte si header = icônes */
  font-size:0 !important;
  line-height:1 !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;
  margin:0 !important;
}
.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;
}

/* Header colonne PIN : icône propre (sans décaler le tableau) */
.hm-coverage-table thead th.hm-th-pin{
  text-align:center !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
}
.hm-sidebar-col .hm-coverage-table thead th.hm-th-pin{
  font-size:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.hm-coverage-table thead th.hm-th-pin > span{
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
}
.hm-coverage-table thead th.hm-th-pin i{
  font-size:16px !important;
  line-height:1 !important;
  transform:translateY(0) !important;
}

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


/* =========================================================
   8) BADGES VITESSE
   ========================================================= */
.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;
}


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

.hm-network-list{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 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;
}

/* Taille uniforme des icônes dans les compteurs + badges vitesse */
.hm-network-count i,
.hm-network-speed-badge i{
  font-size: 1.05rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Micro tweak: l’icône de compteur reste bien centrée avec le chiffre */
.hm-network-count{
  gap: 8px;                    /* un peu plus d’air */
}

.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:not(.hm-bus-popup):not(.hm-train-popup):not(.hm-bixi-popup):not(.hm-entraves-popup)
  .leaflet-popup-content-wrapper{
  max-width:none !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; }

.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) SANTÉ DU SYSTÈME — valeurs en TEXTE (NO EMPTY SPACE)
   ========================================================= */
.hm-data-status-row{
  display:grid;
  grid-template-columns: 1fr auto;  /* <-- au lieu de 1fr 110px */
  align-items:center;
  column-gap:10px;
}

.hm-data-status-value{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  text-align:right;
  min-width:0;
}

/* Si tu as un “placeholder”/spacer HTML qui traîne, kill switch */
.hm-data-status-spacer,
.hm-sys-spacer{
  display:none !important;
}


/* =========================================================
   17) HISTORIQUE 24H (HEADER) — CLEAN PACK v2026
   - Un seul style (no patchs/doublons)
   - Wrapper flat + fine séparatrice
   - Selects compacts + flèche desktop
   - "Instant analysé" = capsule (OFF par défaut)
   ========================================================= */

/* Kill switch anti-doublons (anciens pseudo-elements) */
#hmHist24Pill::before,
#hmHist24Pill::after,
#hmHist24Stamp::before,
#hmHist24Stamp::after,
#hmHist24InstantPill::before,
#hmHist24InstantPill::after{
  content:none !important;
}

/* Wrapper flat + séparation */
#hmHist24Bar.hm-hist24{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;

  margin:0 12px 6px !important;
  padding:10px 0 6px !important;

  position:relative !important;
}
#hmHist24Bar.hm-hist24::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important; right:0 !important;
  top:0 !important;
  height:1px !important;
  background: linear-gradient(
    90deg,
    rgba(148,163,184,0.00),
    rgba(148,163,184,0.22),
    rgba(148,163,184,0.00)
  ) !important;
  opacity:.9 !important;
}

/* Top row */
#hmHist24Bar .hm-hist24-top{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin:0 0 6px 0 !important;
  padding:0 !important;
  gap:12px !important;
}

#hmHist24Bar .hm-hist24-title{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
}
#hmHist24Bar .hm-hist24-title-main{
  font-size:0.72rem !important;
  letter-spacing:.16em !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  color:rgba(226,232,240,0.92) !important;
  white-space:nowrap !important;
}
#hmHist24Bar .hm-hist24-title-sub{
  font-family:var(--hm-font-global) !important;
  font-size:0.72rem !important;
  font-weight:800 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  color:rgba(148,163,184,0.92) !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:44vw !important;
}

/* Séparateur "—" plus visible (si présent) */
.hm-hist24-title-sep{
  opacity:0.88 !important;
  color:rgba(226,232,240,0.80) !important;
  text-shadow:0 1px 0 rgba(0,0,0,0.35) !important;
}

/* CTA live */
#hmHist24Bar #hmHist24LiveBtn.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:999px !important;
  padding:6px 12px !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase;
  font-size:0.70rem !important;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(15,23,42,0.16);
  transition:transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
#hmHist24Bar #hmHist24LiveBtn.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.22);
}

/* States (si ton JS toggle .is-live / .is-hist-on) */
#hmHist24Bar.is-live #hmHist24LiveBtn.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.18), 0 0 0 4px rgba(34,197,94,0.10);
}
#hmHist24Bar.is-hist-on #hmHist24LiveBtn.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.18), 0 0 0 4px rgba(59,130,246,0.12);
}

/* Row selects */
#hmHist24Bar .hm-hist24-date{ margin:0 0 6px 0 !important; padding:0 !important; }
#hmHist24Bar .hm-hist24-pickers{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}

#hmHist24Bar .hm-hist24-select{
  height:30px !important;
  padding:2px 10px !important;
  border-radius:999px !important;

  border:1px solid rgba(148,163,184,0.22) !important;
  background:rgba(30,41,59,0.26) !important;
  color:rgba(226,232,240,0.92) !important;

  font-family:var(--hm-font-global) !important;
  font-weight:900 !important;
  font-size:0.78rem !important;
  letter-spacing:.02em !important;

  box-shadow:0 12px 28px rgba(15,23,42,0.16),
             inset 0 1px 0 rgba(255,255,255,0.05) !important;

  outline:none !important;
  appearance:none !important;
}
#hmHist24Bar .hm-hist24-select:hover{
  background:rgba(40,50,66,0.40) !important;
  border-color:rgba(148,163,184,0.45) !important;
  transform:translateY(-0.5px);
}
#hmHist24Bar .hm-hist24-select:focus{
  border-color:rgba(59,130,246,0.55) !important;
  box-shadow:0 0 0 4px rgba(59,130,246,0.12),
             0 12px 28px rgba(15,23,42,0.22) !important;
}
#hmHist24Bar .hm-hist24-select option{
  background:#1f283b !important;
  color:#e5e7eb !important;
  font-weight:700 !important;
}

/* Instant analysé capsule (OFF par défaut) */
#hmHist24Stamp.hm-hist24-stamp{
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  height:32px !important;
  padding:8px 14px !important;
  border-radius:999px !important;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.02)),
    rgba(15,23,42,0.55) !important;

  border:1px solid rgba(148,163,184,0.28) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 12px 26px rgba(0,0,0,0.45) !important;

  backdrop-filter: blur(6px);
  white-space:nowrap !important;
}
#hmHist24Bar.has-stamp #hmHist24Stamp.hm-hist24-stamp{ display:inline-flex !important; }

#hmHist24Stamp .hm-hist24-stamp-label{
  font-family: var(--hm-font-global) !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(226,232,240,0.72) !important;

  line-height: 1 !important;
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle !important;
  white-space:nowrap !important;
  margin:0 !important;
  padding:0 !important;
}
#hmHist24Stamp #hmHist24Pill.hm-hist24-chip{
  font-family: var(--hm-font-global) !important;
  font-variant-numeric: tabular-nums !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(226,232,240,0.72) !important;

  line-height: 1 !important;
  display:inline-flex !important;
  align-items:center !important;
  vertical-align:middle !important;
  white-space:nowrap !important;

  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#hmHist24Stamp .hm-hist24-stamp-label,
#hmHist24Stamp #hmHist24Pill{ transform:none !important; }

#hmHist24Bar.has-stamp #hmHist24Stamp.hm-hist24-stamp:hover{
  background:rgba(40,50,66,0.40) !important;
  border-color:rgba(59,130,246,0.55) !important;
  transform:translateY(-0.5px);
}

/* Track spacing */
#hmHist24Bar .hm-hist24-track{
  margin-top:4px !important;
  padding:0 0 2px 0 !important;
}

/* Rules (collapse + spacing with bubbles) */
#hm-header.is-bubbles-collapsed #hmHist24Bar{ display:none !important; }
#hm-header.is-hist24-collapsed #hmHist24Bar{ display:none !important; }
#hm-header-bubbles-wrap{ margin-bottom:2px !important; }

/* DESKTOP — flèche custom pour les selects Historique */
@media (min-width: 992px){
  #hmTopbarHistory select.hm-hist-select,
  #hmHist24Bar select.hm-hist24-select{
    -webkit-appearance:none !important;
    appearance:none !important;
    padding-right:34px !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(229,231,235,0.92)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
    background-size:16px 16px !important;
  }
  #hmTopbarHistory select.hm-hist-select::-ms-expand,
  #hmHist24Bar select.hm-hist24-select::-ms-expand{ display:none !important; }
}

/* =====================================================================
   HIST24 — Desktop Pro 2026 (SINGLE SOURCE OF TRUTH)
   - Rail premium + micro ticks
   - Marks visibles + active glow
   - Slider invisible (interaction) + thumb glass
   - Pulse rail (via .is-animating + #hmHist24Pulse optionnel)
   ===================================================================== */
@media (min-width: 992px){

  #hmHist24Bar{
    position: relative !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #hmHist24Bar .hm-hist24-date{
    display:block !important;
    width:100% !important;
  }

  #hmHist24Bar .hm-hist24-pickers{
    width:100% !important;
    display:flex !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:6px 8px !important;
  }

  #hmHist24Bar .hm-hist24-track{
    width:100% !important;
    margin-top:10px !important;
    height:34px !important;
    position:relative !important;
    display:block !important;
  }

  /* Rail: premium 12px centré */
  #hmHist24Bar .hm-hist24-rail{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    height:12px !important;
    border-radius:999px !important;
    border:1px solid rgba(148,163,184,0.26) !important;

    background:
      linear-gradient(180deg, rgba(2,6,23,0.62), rgba(15,23,42,0.38)) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      0 10px 24px rgba(0,0,0,0.35),
      0 0 0 4px rgba(59,130,246,0.06) !important;

    overflow: hidden !important;
    z-index: 1 !important;
  }

  /* Micro ticks “always on” */
  #hmHist24Bar .hm-hist24-rail::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(148,163,184,0.00) 0px,
        rgba(148,163,184,0.00) 10px,
        rgba(148,163,184,0.20) 10px,
        rgba(148,163,184,0.20) 11px
      );
    opacity: 0.95;
    pointer-events:none;
  }

  /* Scan highlight subtil */
  #hmHist24Bar .hm-hist24-rail::after{
    content:"";
    position:absolute;
    inset:-40% -20%;
    background: linear-gradient(
      120deg,
      rgba(59,130,246,0.00) 42%,
      rgba(59,130,246,0.12) 50%,
      rgba(59,130,246,0.00) 58%
    );
    transform: translateX(-35%);
    opacity: 0.55;
    pointer-events:none;
  }

  /* Marks */
  #hmHist24Marks.hm-hist24-marks{
    position:absolute !important;
    left:10px !important;
    right:10px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    height:12px !important;
    pointer-events:none !important;
    z-index: 3 !important;
  }

  #hmHist24Marks .hm-hist24-mark{
    position:absolute !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;

    width:4px !important;
    height:10px !important;
    border-radius:999px !important;

    background: rgba(226,232,240,0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 8px 18px rgba(0,0,0,0.35) !important;

    opacity: 0.92 !important;
    transition: transform .14s ease, height .14s ease, background .18s ease, box-shadow .18s ease !important;
  }

  #hmHist24Marks .hm-hist24-mark::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    width:1px;
    height:70%;
    border-radius:999px;
    background: rgba(255,255,255,0.60);
    opacity: 0.60;
  }

  #hmHist24Marks .hm-hist24-mark.active{
    height:12px !important;
    background: rgba(59,130,246,0.95) !important;
    box-shadow:
      0 0 0 2px rgba(59,130,246,0.22),
      0 0 18px rgba(59,130,246,0.38),
      0 10px 18px rgba(0,0,0,0.40) !important;
    animation: hmMarkPop .26s ease-out both !important;
  }

  @keyframes hmMarkPop{
    0%   { transform:translate(-50%,-50%) scaleY(.75); }
    60%  { transform:translate(-50%,-50%) scaleY(1.18); }
    100% { transform:translate(-50%,-50%) scaleY(1); }
  }

  /* Pulse rail */
  #hmHist24Bar.is-animating .hm-hist24-rail{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      inset 0 -1px 0 rgba(0,0,0,0.38),
      0 12px 28px rgba(0,0,0,0.40),
      0 0 0 6px rgba(59,130,246,0.10),
      0 0 18px rgba(59,130,246,0.22) !important;
  }

  #hmHist24Pulse.hm-hist24-pulse{
    position:absolute !important;
    left:0 !important; right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    height:12px !important;
    border-radius:999px !important;
    pointer-events:none !important;
    opacity:0 !important;
    z-index: 2 !important;
  }
  #hmHist24Bar.is-animating #hmHist24Pulse{
    animation: hmRailPulse .35s ease-out both !important;
  }
  @keyframes hmRailPulse{
    0%   { opacity:0; box-shadow:0 0 0 0 rgba(59,130,246,0.00); }
    25%  { opacity:1; box-shadow:0 0 0 6px rgba(59,130,246,0.10); }
    100% { opacity:0; box-shadow:0 0 0 18px rgba(59,130,246,0.00); }
  }

  /* Slider: interaction au-dessus */
  #hmHist24Slider.hm-hist24-slider{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    width:100% !important;
    height:12px !important;
    margin:0 !important;
    padding:0 !important;

    background:transparent !important;
    outline:none !important;
    cursor:pointer !important;

    -webkit-appearance:none !important;
    appearance:none !important;

    z-index: 4 !important;
  }

  #hmHist24Slider.hm-hist24-slider::-webkit-slider-runnable-track{
    height:12px !important;
    background:transparent !important;
  }
  #hmHist24Slider.hm-hist24-slider::-moz-range-track{
    height:12px !important;
    background:transparent !important;
  }

  /* Thumb glass (WebKit) */
  #hmHist24Slider.hm-hist24-slider::-webkit-slider-thumb{
    -webkit-appearance:none !important;
    appearance:none !important;

    width:24px !important;
    height:24px !important;
    border-radius:999px !important;

    margin-top:-6px !important;

    border:1px solid rgba(219,234,254,0.70) !important;
    background:
      radial-gradient(circle at 30% 30%,
        rgba(255,255,255,0.90),
        rgba(219,234,254,0.85) 28%,
        rgba(59,130,246,0.88) 60%,
        rgba(37,99,235,1) 100%) !important;

    box-shadow:
      0 16px 32px rgba(0,0,0,0.58),
      0 0 0 7px rgba(59,130,246,0.12),
      inset 0 1px 0 rgba(255,255,255,0.30) !important;

    transition: transform .12s ease, box-shadow .18s ease, filter .18s ease !important;
  }
  #hmHist24Slider.hm-hist24-slider:active::-webkit-slider-thumb{
    transform: scale(1.06) !important;
    filter: saturate(1.12) !important;
    box-shadow:
      0 20px 38px rgba(0,0,0,0.62),
      0 0 0 8px rgba(34,197,94,0.14),
      inset 0 1px 0 rgba(255,255,255,0.34) !important;
  }

  /* Thumb glass (Firefox) */
  #hmHist24Slider.hm-hist24-slider::-moz-range-thumb{
    width:24px !important;
    height:24px !important;
    border-radius:999px !important;
    border:1px solid rgba(219,234,254,0.70) !important;

    background:
      radial-gradient(circle at 30% 30%,
        rgba(255,255,255,0.90),
        rgba(219,234,254,0.85) 28%,
        rgba(59,130,246,0.88) 60%,
        rgba(37,99,235,1) 100%) !important;

    box-shadow:
      0 16px 32px rgba(0,0,0,0.58),
      0 0 0 7px rgba(59,130,246,0.12),
      inset 0 1px 0 rgba(255,255,255,0.30) !important;
  }

  /* Keep glow while interacting */
  #hmHist24Slider.hm-hist24-slider:active ~ .hm-hist24-rail,
  #hmHist24Slider.hm-hist24-slider:focus ~ .hm-hist24-rail,
  #hmHist24Slider.hm-hist24-slider:focus-visible ~ .hm-hist24-rail{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.07),
      inset 0 -1px 0 rgba(0,0,0,0.38),
      0 12px 28px rgba(0,0,0,0.40),
      0 0 0 6px rgba(59,130,246,0.12),
      0 0 22px rgba(59,130,246,0.26) !important;
    border-color: rgba(59,130,246,0.38) !important;
  }
  #hmHist24Slider.hm-hist24-slider:active ~ .hm-hist24-rail::after,
  #hmHist24Slider.hm-hist24-slider:focus ~ .hm-hist24-rail::after{
    opacity:0.75 !important;
  }
}


/* =========================================================
   18) FOOTER (DESKTOP) — SINGLE SOURCE
   ========================================================= */
.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;
  gap:10px;

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

  font-size:.72rem;
  line-height:1;
  color:rgba(229,231,235,.78);
  z-index:12050;
}

.hm-footer-sep{
  opacity:.55;
  font-weight:900;
  transform:translateY(-.5px);
}

.hm-footer a,
.hm-footer-link{
  color:#93c5fd;
  text-decoration:none;
  font-weight:800;
}
.hm-footer a:hover,
.hm-footer-link:hover{
  text-decoration:underline;
}


/* =========================================================
   19) 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;
    min-height: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;
    min-height:0 !important;
  }
}


/* =========================================================
   KPI TITLE — EXACT "Analyse du réseau à un instant donné"
   (Inter / 11.52px / 800 / uppercase / tracking)
   ========================================================= */
.hm-kpi-title{
  font-family: var(--hm-font-global) !important;
  font-size: 11.52px !important;
  font-weight: 800 !important;
  letter-spacing: 1.152px !important;
  line-height: 17.28px !important;
  text-transform: uppercase !important;

  color: rgba(148, 163, 184, 0.92) !important;

  display:block !important;
  margin:0 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* =========================================================
   TITRE ANALYTIQUE — style "AFFICHAGE"
   ========================================================= */
.hm-analytics-title{
  font-family: var(--hm-font-global) !important;
  font-size: 11.2px !important;
  font-weight: 600 !important;
  letter-spacing: 0.896px !important;
  line-height: 16.8px !important;
  text-transform: uppercase !important;
  color: var(--hm-muted) !important;

  display: block;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* FIX — centre parfaitement l’icône Zone/Pin même si elle n’est pas dans le span */
.hm-sidebar-col .hm-coverage-table thead th .hm-th-zone-pin{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  margin:0 !important;
  line-height:1 !important;
  display:inline-block !important;
}

/* =========================================================
   KILL: ligne "incomplète" venant du Hist24 (separator top)
   ========================================================= */
#hmHist24Bar.hm-hist24::before{
  content: none !important;
  display: none !important;
  background: none !important;
  height: 0 !important;
}

/* =========================================================
   DIVIDER UNIQUE sous bulles (FULL 100vw) — SINGLE SOURCE
   ========================================================= */

/* On tue toutes les séparations potentielles autour */
.hm-header,
.hm-header-top,
.hm-header-bottom,
#hm-header-bubbles-wrap{
  border-top:none !important;
  border-bottom:none !important;
  box-shadow:none !important;
  background-image:none !important;
}

/* La seule ligne autorisée */
#hm-header-bubbles-wrap{
  position:relative !important;
  overflow:visible !important;
}

#hm-header-bubbles-wrap::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  bottom:-1px !important;

  width:100vw !important;
  height:1px !important;
  background:rgba(148,163,184,0.22) !important;

  pointer-events:none !important;
  z-index:999999 !important;
}

/* Kill pseudo-elements qui pourraient redessiner une ligne */
#hm-header-bubbles-wrap::before,
.hm-header::before,
.hm-header::after,
.hm-header-top::before,
.hm-header-top::after,
.hm-header-bottom::before,
.hm-header-bottom::after{
  content:none !important;
}

.hm-title-inline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size:11px;          /* ✅ -1px (était 12px) */
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#E5E7EB;
}

.hm-title-inline i{
  font-size:14px;          /* ✅ optionnel: -1px (était 15px) */
  line-height:1;
  opacity:.95;
}


/* =========================================================
   Titre discret (sans icône, sans gras)
   ========================================================= */
.hm-title-muted{
  font-weight:500 !important;
  letter-spacing:.04em;
  opacity:.85;
}

.hm-title-muted i{
  display:none !important;
}

/* =========================================================
   Historique — titre NON gras (texte + icône)
   ========================================================= */
#hmHist24Bar .hm-hist24-title .hm-title-inline{
  font-weight:400 !important;
}

#hmHist24Bar .hm-hist24-title .hm-title-inline i{
  font-weight:400 !important;
}

/* =========================================================
   HEADER BUBBLES — force grid full-width (DESKTOP)
   ========================================================= */

#hm-header-bubbles-wrap{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

/* Le conteneur qui contient TES .hm-network-row */
#hm-header-bubbles-wrap .hm-network-list--header,
#hm-header-bubbles-wrap .hm-network-list{
  width: 100% !important;
  max-width: none !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important; /* 5 par rangée */
  grid-auto-rows: auto !important;
  grid-auto-flow: row dense !important;

  justify-content: stretch !important;
  align-content: start !important;
}

/* =========================================================
   HEADER BUBBLES — responsive desktop grid
   5 → 4 → 3 colonnes
   ========================================================= */

#hm-header-bubbles-wrap .hm-network-list--header,
#hm-header-bubbles-wrap .hm-network-list{
  display: grid !important;
  width: 100% !important;
  max-width: none !important;

  /* default = grands écrans */
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  grid-auto-flow: row dense !important;
  gap: 6px !important;
}

/* ↓ Écrans moyens (ex: 1600px–1300px) → 4 bulles */
@media (max-width: 1600px){
  #hm-header-bubbles-wrap .hm-network-list--header,
  #hm-header-bubbles-wrap .hm-network-list{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ↓ Écrans plus étroits (ex: 1299px–992px) → 3 bulles */
@media (max-width: 1300px){
  #hm-header-bubbles-wrap .hm-network-list--header,
  #hm-header-bubbles-wrap .hm-network-list{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.hm-mode-btn i[class^="ri-"],
.hm-mode-btn i[class*=" ri-"]{
  font-family:"remixicon" !important;
  font-size:18px !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* FIX SAFE: ne pas toucher au "content" des RemixIcon */
i[class^="ri-"],
i[class*=" ri-"]{
  font-family:"remixicon" !important;
  font-style:normal !important;
  font-weight:normal !important;
  line-height:1 !important;
}

i[class^="ri-"]::before,
i[class*=" ri-"]::before{
  /* NE PAS définir content ici */
  display:inline-block !important;
  font-family:"remixicon" !important;
  font-style:normal !important;
  font-weight:normal !important;
  speak:none;
}