/* Variables historiques remappées sur les design tokens (voir tokens.css).
   On garde les noms (--citea, --ink…) pour ne pas toucher 1400 lignes d'un coup ;
   la refonte progressive migre vers les tokens directement. */
:root {
  --citea: var(--brand);
  --citea-dark: var(--brand-600);
  --alert: var(--warn);
  /* --ok / --late / --early / --sel / --cars : définis dans tokens.css */
  --ink: var(--n-800);
  --muted: var(--n-500);
  --line: var(--n-150);
  --bg: var(--n-0);
  /* Surfaces flottantes (clair) — le dark les redéfinit plus bas */
  --surface: var(--n-0);
  --surface-2: var(--n-50);
}

* { box-sizing: border-box; }

/* L'attribut HTML `hidden` doit toujours l'emporter sur les display:flex/block ci-dessous */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

/* Header — barre de marque. Profondeur par dégradé + ombre token (plus de bleu plat). */
#app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-3) 0 var(--s-4);
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
  color: #fff;
  box-shadow: var(--e2);
}
.brand { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fz-md); min-width: 0; }
.brand-name strong { font-weight: 700; }
.brand-name { font-weight: 400; white-space: nowrap; letter-spacing: -.01em; }
/* Nom complet par défaut ; sigle ODM en en-tête étroit pour ne pas écraser le statut */
.brand-short { display: none; font-weight: 800; letter-spacing: .02em; }
@media (max-width: 430px) {
  .brand-long { display: none; }
  .brand-short { display: inline; }
}
/* Point de marque = pouls « vivant » quand le temps réel rentre (classe .live posée
   par map.js sur réception de /vehicles ; absent = pas d'animation). */
.brand-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28);
}
.brand-dot.live { animation: brandpulse 2.4s var(--ease-in-out) infinite; }
@keyframes brandpulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,.06); }
}
@media (prefers-reduced-motion: reduce) { .brand-dot.live { animation: none; } }

.header-right { display: flex; align-items: center; gap: var(--s-2); }
/* Famille de boutons d'en-tête unifiée (favori, lignes, thème, itinéraire) */
.fav-btn, .lines-btn, .theme-btn, .itin-btn {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  border: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: var(--fz-md); line-height: 1;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.fav-btn:hover, .lines-btn:hover, .theme-btn:hover, .itin-btn:hover { background: rgba(255,255,255,.24); }
.fav-btn:active, .lines-btn:active, .theme-btn:active, .itin-btn:active { transform: scale(.92); background: rgba(255,255,255,.3); }
.fav-btn { color: #ffd54a; }
.fav-btn.on { background: rgba(255,213,74,.22); }
/* Pictogramme « plan du réseau » (3 barres) du bouton lignes */
.lines-btn span {
  width: 16px; height: 12px;
  background:
    linear-gradient(#fff,#fff) 0 0/16px 2px no-repeat,
    linear-gradient(#fff,#fff) 0 5px/16px 2px no-repeat,
    linear-gradient(#fff,#fff) 0 10px/16px 2px no-repeat;
}
.status { display: flex; align-items: center; gap: 6px; font-size: var(--fz-sm); opacity: .95; }
.conn-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #b8c4d0; transition: background var(--dur-2) var(--ease-out);
}
.conn-dot.ok { background: #5dff9c; box-shadow: 0 0 0 3px rgba(93,255,156,.18); }
.conn-dot.error { background: #ff6b6b; }
.conn-dot.stale { background: #ffd54a; }
/* Fraîcheur temps réel (P2.1) : âge de la dernière position, discret à côté de l'état */
.conn-fresh { font-size: 11px; opacity: .8; white-space: nowrap; }
.conn-fresh.stale { color: #ffd54a; opacity: 1; }
.conn-fresh:empty { display: none; }
@media (max-width: 360px) { .conn-fresh { display: none; } }

/* Carte */
#map {
  position: absolute;
  top: 52px; left: 0; right: 0; bottom: 0;
  z-index: 1;
}

/* Marqueurs bus : petite icône de bus (carrosserie = couleur de ligne) + n° de ligne */
.bus-marker {
  position: relative;
  width: 30px; height: 32px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.bus-marker svg { display: block; }
.bus-label {
  position: absolute; left: 0; right: 0; top: 12px;
  text-align: center;
  color: #fff; font-weight: 700; font-size: 11px; line-height: 1;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  pointer-events: none;
}
.me-marker {
  width: 16px; height: 16px;
  background: var(--citea);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(0,85,164,.25);
}

/* Chip alertes flottant : compact, top-droite (ne vole plus une bande d'écran).
   Tap → overlay de la liste complète. */
.alert-chip {
  position: fixed;
  top: 114px; right: 10px;
  /* Sous les panneaux contextuels (trip-bar/line-bar 1082, fiche 1095, itin 1096) :
     quand un panneau couvre le chip, ses boutons reçoivent les clics (pas le chip). */
  z-index: 1079;
  display: inline-flex; align-items: center; gap: 7px;
  max-width: min(62vw, 320px);
  padding: 7px 12px 7px 9px;
  border: none; cursor: pointer;
  background: var(--alert); color: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--e2);
  font-family: inherit; font-size: var(--fz-sm); font-weight: 600;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.alert-chip:hover { box-shadow: var(--e3); }
.alert-chip:active { transform: scale(.96); }
.alert-chip-ico { display: inline-flex; flex: none; }
.alert-chip-count {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: rgba(255,255,255,.25); border-radius: var(--r-pill);
  font-size: 11px; font-weight: 800;
}
.alert-chip-text {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert-chip:not([hidden]) { animation: surf-pop var(--dur-3) var(--ease-spring); }
@media (prefers-reduced-motion: reduce) { .alert-chip:not([hidden]) { animation: none; } }
/* Sur très petit écran, on garde l'icône + le compte, on masque le texte */
@media (max-width: 380px) { .alert-chip-text { display: none; } }

/* Panneau arrêt */
.stop-panel {
  position: fixed;
  z-index: 1095;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: var(--e3);
}
@media (min-width: 769px) {
  .stop-panel { top: 52px; right: 0; bottom: 0; width: 360px; }
}
@media (max-width: 768px) {
  /* Mode une main : la fiche arrêt devient une demi-feuille en bas de l'écran →
     contenu et actions dans la zone du pouce, la carte reste visible au-dessus. */
  .stop-panel {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; max-width: none;
    height: 58vh; max-height: 58vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -3px 16px rgba(0,0,0,.22);
    padding-top: 6px;   /* place pour la poignée */
  }
  /* Poignée d'affordance (demi-feuille) en haut de la fiche */
  .stop-panel::before {
    content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 2px; background: #cfd6dd;
  }
}
.stop-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.stop-panel-head h2 { margin: 0; font-size: 17px; color: var(--citea-dark); flex: 1; min-width: 0; }
/* Étoile favori (fiche arrêt + panneau ligne) */
.star-btn {
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #cfd6dd; padding: 0 6px;
}
.star-btn.on { color: var(--alert); }
.star-on-dark { color: rgba(255,255,255,.45); }
.star-on-dark.on { color: #ffd54a; }
.stop-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; }

.dep-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.dep-line {
  min-width: 36px;
  text-align: center;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  background: var(--citea);
  border-radius: 8px;
  padding: 5px 7px;
  font-size: var(--fz-sm);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}
.dep-mid { min-width: 0; }
.dep-dir { font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-sched { font-size: 12px; color: var(--muted); }
.dep-time { text-align: right; font-weight: 600; font-size: 15px; }
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  color: #fff;
}
.badge.on_time { background: var(--ok); }
.badge.delayed { background: var(--late); }
.badge.early { background: var(--early); }

/* Sections par sens dans la fiche arrêt */
.dep-section + .dep-section { border-top: 6px solid var(--line); }
.dep-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 6px;
  background: #f6f8fa;
  position: sticky; top: 0; z-index: 1;
}
.sec-letter {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--alert); color: #fff; font-weight: 700; font-size: 12px;
}
.sec-dir {
  font-size: 13px; font-weight: 700; color: var(--citea-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sec-empty { padding: 10px 16px; }

/* Message pédagogique sobre quand le temps réel est incomplet (horaires théoriques,
   aucun passage annoncé…). Ton neutre et rassurant — bleu info, jamais l'orange des
   alertes trafic. */
.rt-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 8px 12px 0; padding: 9px 11px;
  background: #eef3f8; border: 1px solid #d6e1ec; border-left: 3px solid var(--citea);
  border-radius: 8px; font-size: 12.5px; line-height: 1.4; color: #3a4757;
}
.rt-note-ico { flex: none; color: var(--citea); font-weight: 700; }
.rt-note:empty { display: none; }
/* Variante du message sur le fond foncé du panneau du bus suivi */
.ts-note { opacity: .9; font-size: 12px; line-height: 1.35; }
.ts-note .ts-ico { color: #ffd54a; }

/* Overlay alertes */
.overlay {
  position: fixed; inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.overlay-card {
  background: #fff;
  width: 100%; max-width: 520px;
  max-height: 80vh;
  border-radius: var(--r-sheet);
  box-shadow: var(--e3);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.overlay-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--alert);
  color: #fff;
}
.overlay-head h2 { margin: 0; font-size: 17px; }
.alerts-list { overflow-y: auto; padding: 8px 0; }
.alert-item { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.alert-item h3 { margin: 0 0 4px; font-size: 15px; }
.alert-item p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.alert-routes { display: flex; flex-wrap: wrap; gap: 5px; }
.alert-route-chip {
  font-size: 11px; font-weight: 700; color: #fff;
  background: var(--citea); padding: 2px 7px; border-radius: 4px;
}

/* Boutons */
.icon-btn {
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: inherit;
  padding: 0 4px;
}
.locate-btn {
  position: fixed;
  bottom: 20px; right: 16px;
  z-index: 1080;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--citea);
  cursor: pointer;
  box-shadow: var(--e2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-1) var(--ease-out);
}
.locate-btn:active { transform: scale(.92); }

.muted { color: var(--muted); font-size: 14px; padding: 0 16px; }

/* Recherche d'arrêt */
.search-bar {
  position: fixed;
  top: 62px; left: 10px; right: 10px;
  z-index: 1086;
  display: flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 8px 0 14px;
  background: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--e2);
}
@media (min-width: 769px) { .search-bar { max-width: 420px; } }
body.has-alert .search-bar { top: 98px; }
.search-icon { color: var(--muted); font-size: 19px; line-height: 1; }
.search-input {
  flex: 1; min-width: 0; height: 100%;
  border: none; outline: none; background: transparent;
  font-size: 16px; color: var(--ink);
}
/* Le champ de recherche ne prend pas l'anneau magenta global (qui formait un
   rectangle « double champ ») ; on indique le focus par un halo bleu sur la barre. */
.search-input:focus-visible { outline: none; }
.search-bar:focus-within { box-shadow: 0 0 0 2px var(--citea), 0 2px 10px rgba(0,0,0,.22); }
/* Masque le bouton « effacer » natif des champs type=search (on a déjà notre ×). */
.search-input::-webkit-search-cancel-button { display: none; }
.search-clear {
  background: none; border: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--muted); padding: 0 4px;
}
.search-results {
  list-style: none; margin: 6px 0 0; padding: 4px 0;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-radius: var(--r-card);
  box-shadow: var(--e3);
  max-height: 52vh; overflow-y: auto;
}
.search-results li {
  padding: 12px 14px; cursor: pointer;
  font-size: 15px; border-bottom: 1px solid var(--line);
}
.search-results li:last-child { border-bottom: none; }
.search-results li.active, .search-results li:hover { background: #eef4fb; }
.search-results .sr-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }
.search-results .sr-empty { padding: 12px 14px; color: var(--muted); font-size: 14px; }

/* Suggestions à champ vide : en-têtes de section + actions rapides (À proximité, récents) */
.sr-suggest-head {
  padding: 9px 14px 4px !important; border-bottom: none !important;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); cursor: default;
}
.sr-quick, .sr-recent { display: flex; align-items: center; gap: 11px; }
.sr-quick-ico {
  flex: none; width: 34px; height: 34px; border-radius: var(--r-ctl);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--citea);
}
.sr-recent .sr-quick-ico { background: var(--surface-2, #f4f6f9); color: var(--muted); }
.sr-quick .sr-main, .sr-recent .sr-main { display: flex; flex-direction: column; min-width: 0; }

/* Arrêts sur la carte (visibles à fort zoom) */
.stop-dot {
  width: 11px; height: 11px;
  background: #fff; border: 3px solid var(--citea);
  border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* Grappe d'arrêts (regroupement au dézoom / « Arrêts » en vue large) : un disque
   compté qui s'ouvre au zoom → la carte ne croule plus sous des centaines de pastilles. */
.stop-cluster, .cars-cluster, .libelo-cluster {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid #fff;
  color: #fff; font-weight: 800; font-size: 12px; line-height: 1;
  box-shadow: 0 1px 5px rgba(0,0,0,.4); cursor: pointer;
}
.stop-cluster { background: var(--citea); }
.cars-cluster { background: var(--cars); border-radius: 8px; }
.libelo-cluster { background: #5aae2a; }
/* Marqueur "ton arrêt" sur le tracé d'une course — bien visible (halo + nom) */
.stop-pin {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: #fff; border: 4px solid var(--ok);
  border-radius: 50%; color: var(--ok); font-size: 16px;
  box-shadow: 0 0 0 4px rgba(26,138,58,.25), 0 1px 5px rgba(0,0,0,.4);
}
/* Étiquette permanente du nom de "ton arrêt" */
.stop-pin-tip {
  background: var(--ok); color: #fff; border: none;
  font-weight: 700; font-size: 12px; padding: 3px 8px;
  border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.35); white-space: nowrap;
}
.stop-pin-tip.leaflet-tooltip-top::before { border-top-color: var(--ok); }

/* Arrêts desservis le long d'une course — cliquables pour suivre l'arrivée à
   cet arrêt. Les arrêts déjà passés par le bus sont atténués. */
.trip-stop {
  width: 15px; height: 15px;
  background: #fff; border: 3px solid var(--citea-dark);
  border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.4);
  cursor: pointer; transition: transform .1s;
}
.trip-stop:hover { transform: scale(1.35); }
.trip-stop.passed { opacity: .4; }

/* Flux animé sur le trajet restant : pointillés blancs qui "coulent" du bus vers
   le terminus → on lit immédiatement le sens de circulation (avant/après l'arrêt). */
.trip-flow {
  stroke-dasharray: 9 17;
  animation: tripflow 1.1s linear infinite;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.55));
}
@keyframes tripflow { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .trip-flow { animation: none; } }

/* Flux de marche : chevrons verts qui défilent vers la destination (sens lisible),
   distincts du flux blanc des bus. Tirets longs espacés → effet « pas qui avancent ». */
.walk-flow {
  stroke-dasharray: 1 13;
  stroke-linecap: round;
  animation: walkflow 0.9s linear infinite;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.4));
}
@keyframes walkflow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) { .walk-flow { animation: none; } }

/* Repère d'un quai sélectionné (recherche) : pin "goutte" + halo pulsé + lettre A/B */
.quai-pin { position: relative; width: 30px; height: 38px; }
.quai-pin-dot {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--alert); border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
}
.quai-pin-dot::after { /* pointe vers le bas */
  content: ""; position: absolute; bottom: -7px; left: 50%; margin-left: -6px;
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 9px solid #fff;
}
.quai-pin-label { color: #fff; font-weight: 700; font-size: 14px; line-height: 1; }
.quai-pin::before { /* halo statique discret (plus de clignotement) */
  content: ""; position: absolute; top: -1px; left: -1px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(232,115,12,.22); z-index: -1;
}
.term-pin {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--citea-dark); border: 3px solid #fff;
  border-radius: 4px; color: #fff; font-size: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* Marqueur bus orienté selon le cap — flèche de direction agrandie (plus lisible) */
.bus-wrap { position: relative; width: 34px; height: 34px; }
.bus-dir { position: absolute; inset: 0; pointer-events: none; }
.bus-arrow {
  position: absolute; left: 50%; top: -9px; margin-left: -9px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 16px solid var(--citea-dark);
  filter: drop-shadow(0 1px 1px rgba(255,255,255,.7));
}
.bus-wrap .bus-marker { position: absolute; left: 2px; top: 1px; }

/* Bus à l'arrêt : icône simplement un peu atténuée, aucun signal animé (moins brouillon) */
.bus-wrap.is-stopped .bus-marker { opacity: .9; }

/* Bus du trajet sélectionné : flèche magenta pointant le bus par le haut
   (couleur absente des lignes) → repérage immédiat, sans entourage lourd. */
.bus-top-arrow {
  position: absolute; left: 50%; top: -18px; margin-left: -7px;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid var(--sel);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
  pointer-events: none;
}
.bus-wrap.is-active .bus-marker { filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }

/* Lien "suivre le bus" dans la fiche arrêt */
.dep-row.live { cursor: pointer; }
.dep-row.live:active { background: #eef4fb; }
.dep-follow { display: block; font-size: 11px; font-weight: 600; color: var(--citea); margin-top: 3px; }

/* Passage SUPPRIMÉ (GTFS-RT canceled/skipped) : honnêteté temps réel — on ne masque
   pas, on barre. Heure rayée, badge orange « supprimé », passage non suivable. */
.dep-row.canceled .dep-time, .dep-row.canceled .dep-sched,
.xp-row.canceled .xp-dest, .xp-row.canceled .xp-meta { text-decoration: line-through; }
.dep-row.canceled, .xp-row.canceled { opacity: .82; cursor: default; }
.badge.canceled-chip { background: var(--late); text-decoration: none; }
.dep-cancel-note { display: block; font-size: 11px; font-weight: 700; color: var(--late); margin-top: 3px; }
.xp-eta-cancel { display: block; font-size: 12px; font-weight: 800; color: var(--late); text-transform: uppercase; letter-spacing: .03em; }

/* Panneau du bus suivi : titre + infos (vitesse, arrivée, nb d'arrêts) + légende.
   Sur le côté (desktop, haut-droite) ; carte de bas de page sur mobile. */
.trip-bar {
  position: fixed;
  z-index: 1082;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px;
  background: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-700) 100%); color: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--e3);
}
@media (min-width: 769px) {
  .trip-bar { top: 64px; right: 12px; width: 312px; }
  body.has-alert .trip-bar { top: 104px; }
}
.trip-bar-top { display: flex; align-items: flex-start; gap: 10px; }
.trip-bar-label { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.3; }

/* Infos du bus suivi */
.trip-stats { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.ts-row { display: flex; align-items: flex-start; gap: 7px; line-height: 1.35; }
.ts-ico { flex: none; width: 18px; text-align: center; }
.ts-min { font-size: var(--fz-lg); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ts-sched { font-size: 11px; color: #cdd9e8; }
.ts-hint { opacity: .85; font-style: italic; }
.ts-term { opacity: .9; }
.trip-close {
  flex: none; width: 28px; height: 28px;
  background: rgba(255,255,255,.22); border: none; color: #fff;
  border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer;
}
/* Bouton « réduire / agrandir » des panneaux bleus (bus suivi + vue ligne) :
   replie le contenu en une petite barre → la carte redevient visible sans perdre
   le suivi du bus ni le tracé de la ligne. */
.panel-collapse {
  flex: none; width: 28px; height: 28px;
  background: rgba(255,255,255,.22); border: none; color: #fff;
  border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer;
}
.trip-bar.collapsed .trip-stats,
.trip-bar.collapsed .trip-legend,
.line-bar.collapsed .line-bar-body { display: none; }
/* Réduit : largeur au contenu (petite pastille) au lieu de la pleine colonne */
.trip-bar.collapsed, .line-bar.collapsed { width: auto; max-width: 78vw; }
.trip-bar.collapsed .trip-bar-label { cursor: pointer; }
.line-bar.collapsed .line-bar-title { cursor: pointer; }
.trip-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; opacity: .95; }
.tl-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tl-sw { width: 16px; height: 0; display: inline-block; border-top: 3px solid #fff; }
.tl-done { border-top: 3px dotted #cfd6dd; }
.tl-hi { border-top: 5px solid var(--line-color, #8fb7e0); }   /* bus → ton arrêt (couleur ligne, épais) */
.tl-aftersw { border-top: 4px solid var(--line-color, #cfd6dd); opacity: .5; }   /* après l'arrêt : plein atténué */
.tl-restsw { border-top: 4px solid var(--line-color, #8fb7e0); }
/* sens du bus : pointillés blancs sur la couleur de ligne (comme le flux animé) */
.tl-flowsw {
  height: 5px; border-top: none; border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, #fff 0 4px, transparent 4px 9px),
    var(--line-color, #8fb7e0);
}
/* Légende adaptative : avec arrêt → parcouru/vers arrêt/après ; sans arrêt → trajet restant */
.trip-legend .tl-rest { display: none; }
.trip-bar.no-stop .tl-tostop,
.trip-bar.no-stop .tl-after { display: none; }
.trip-bar.no-stop .tl-rest { display: inline-flex; }

/* Indicateur de confiance temps réel : petite puce + libellé, discret.
   - live      : vert (bus localisé GPS)
   - predicted : orange (prévision sans suivi)
   - scheduled : gris (horaire théorique) */
.conf {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; margin-top: 4px; white-space: nowrap;
  padding: 2px 8px 2px 7px; border-radius: var(--r-pill);
  letter-spacing: .01em;
}
.conf-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* Live : le point « bat » (le mouvement = signal d'honnêteté : ce qui vit bouge) */
.conf-live { color: var(--ok); background: var(--ok-100); }
.conf-live .conf-dot { background: var(--ok); animation: confpulse 2s var(--ease-in-out) infinite; }
@keyframes confpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(26,138,58,.45); }
  70%      { box-shadow: 0 0 0 5px rgba(26,138,58,0); }
}
@media (prefers-reduced-motion: reduce) { .conf-live .conf-dot { animation: none; box-shadow: 0 0 0 3px rgba(26,138,58,.16); } }
.conf-predicted { color: var(--alert); background: var(--warn-100); }
.conf-predicted .conf-dot { background: var(--alert); }
.conf-scheduled { color: var(--muted); background: var(--n-100); }
.conf-scheduled .conf-dot { background: var(--n-400); }
/* Variante sur fond foncé (panneau du bus suivi) */
.trip-stats .conf { font-size: 11px; }
.trip-stats .conf-live { color: #7ef0a3; }
.trip-stats .conf-predicted { color: #ffc17a; }
.trip-stats .conf-scheduled { color: #c2ccd8; }

/* ===== Skeletons de chargement & états vides/erreur ===== */
.skeleton { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.sk-row {
  display: grid; grid-template-columns: 40px 1fr 52px; align-items: center; gap: var(--s-3);
  background: var(--surface, #fff); border-radius: var(--r-card); padding: var(--s-3);
  box-shadow: var(--e1);
}
.sk-bar { height: 12px; border-radius: var(--r-pill); background: var(--n-150); }
.sk-badge { height: 34px; border-radius: 8px; background: var(--n-150); }
.sk-eta { height: 26px; border-radius: 8px; background: var(--n-150); }
.sk-bar.w70 { width: 70%; }
.sk-bar.w45 { width: 45%; margin-top: 7px; height: 10px; }
/* Shimmer : balayage lumineux (coupé en reduced-motion) */
.sk-bar, .sk-badge, .sk-eta {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) { .sk-bar, .sk-badge, .sk-eta { animation: none; } }
body.dark .sk-bar, body.dark .sk-badge, body.dark .sk-eta { background-color: var(--surface-2); }

.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-2); padding: var(--s-6) var(--s-4); color: var(--muted);
}
.empty-state svg { color: var(--n-300); }
.empty-state .es-title { font-size: var(--fz-base); font-weight: 700; color: var(--ink); }
.empty-state .es-sub { font-size: var(--fz-sm); line-height: var(--lh-base); max-width: 30ch; }
.empty-state.error svg { color: var(--late); }

/* Bloc express : les 3 prochains passages, gros compte à rebours (mobile-first).
   Hiérarchie : l'ETA domine, la ligne (badge couleur) ancre, la destination suit. */
.stop-express {
  padding: var(--s-3);
  background: linear-gradient(180deg, var(--brand-100) 0%, rgba(231,240,249,0) 100%);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.stop-express-title {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--citea-dark); opacity: .85;
}
.xp-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s-3);
  background: var(--surface, #fff); border-radius: var(--r-card); padding: var(--s-3);
  box-shadow: var(--e1);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.xp-row.live { cursor: pointer; }
.xp-row.live:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.xp-row.live:active { transform: scale(.99); }
.xp-line { min-width: 36px; padding: 5px 7px; font-size: var(--fz-sm); }
.xp-mid { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.xp-dest {
  font-size: var(--fz-base); font-weight: 700; color: var(--ink); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xp-meta { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.xp-eta { text-align: right; line-height: 1; min-width: 50px; }
.xp-eta-num { display: block; font-size: var(--fz-xl); font-weight: 800; color: var(--citea-dark); letter-spacing: -.02em; }
.xp-eta-num.soon { color: var(--late); }
.xp-eta-unit { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }
/* Passage déjà parti (P2.2) : atténué, plus suivable */
.xp-row.gone { opacity: .5; }
.xp-row.gone .xp-eta-num { color: var(--muted); }

/* Bouton "Mon arrêt" : pilule centrée en bas, bien visible sur mobile */
.mystop-btn {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 20px; z-index: 1081;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px;
  border: none; border-radius: var(--r-pill);
  background: var(--citea); color: #fff;
  font-size: var(--fz-base); font-weight: 700;
  box-shadow: var(--e2);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.mystop-btn:active { background: var(--citea-dark); transform: translateX(-50%) scale(.96); }
.mystop-ico { font-size: 16px; line-height: 1; }

/* Toast : message transitoire centré au-dessus du bouton "Mon arrêt" */
.toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 74px; z-index: 1300;
  background: rgba(26,26,26,.92); color: #fff;
  padding: 10px 16px; border-radius: 20px;
  font-size: 14px; max-width: 84vw; text-align: center;
  box-shadow: 0 3px 12px rgba(0,0,0,.3);
}

/* Mobile : barre de recherche compacte ; tracé relevé au-dessus du zoom/localisation */
@media (max-width: 768px) {
  .search-bar { top: 60px; height: 40px; gap: 6px; padding: 0 6px 0 10px; border-radius: 8px; }
  .search-icon { font-size: 17px; }
  .search-input { font-size: 15px; }
  body.has-alert .search-bar { top: 92px; }
  /* Mobile : panneau du bus suivi en carte à droite (sous la recherche), la
     carte reste visible/zoomable à gauche. */
  .trip-bar {
    top: 108px; right: 8px; left: auto; bottom: auto;
    width: 72vw; max-width: 300px;
    max-height: calc(100vh - 124px); overflow-y: auto;
  }
  body.has-alert .trip-bar { top: 140px; }
}

/* ============================================================
   P1 — favoris, vue ligne, alertes contextualisées
   ============================================================ */

/* Pastille de ligne cliquable (fiche arrêt / express) → ouvre la vue ligne */
.dep-line[data-line] { cursor: pointer; }

/* Bloc d'alertes contextualisées (fiche arrêt + panneau ligne).
   Vide → conteneur sans rendu (pas de bruit visuel). */
.stop-alerts:empty { display: none; }
.ctx-alerts {
  margin: 8px 12px 0; padding: 9px 11px;
  background: #fff6ec; border: 1px solid #f4d3ad; border-left: 4px solid var(--alert);
  border-radius: 8px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.ctx-alerts:active { background: #fdeedd; }
.ctx-alert-item { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.35; color: #7a4a12; }
.ctx-alert-ico { flex: none; color: var(--alert); font-size: 13px; }
.ctx-alert-txt { min-width: 0; }
/* Variante du bloc dans le panneau ligne (fond foncé) */
.line-bar-body .ctx-alerts {
  margin: 4px 0 0; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25);
  border-left-color: #ffb968;
}
.line-bar-body .ctx-alert-item { color: #ffe6cc; }
.line-bar-body .ctx-alert-ico { color: #ffb968; }

/* Panneau Vue ligne — même emplacement/style que le panneau du bus suivi
   (les deux sont mutuellement exclusifs). */
.line-bar {
  position: fixed;
  z-index: 1082;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px;
  background: linear-gradient(160deg, var(--brand-600) 0%, var(--brand-700) 100%); color: #fff;
  border-radius: var(--r-card);
  box-shadow: var(--e3);
}
@media (min-width: 769px) {
  .line-bar { top: 64px; right: 12px; width: 312px; }
  body.has-alert .line-bar { top: 104px; }
}
@media (max-width: 768px) {
  .line-bar {
    top: 108px; right: 8px; left: auto; bottom: auto;
    width: 72vw; max-width: 300px;
    max-height: calc(100vh - 124px); overflow-y: auto;
  }
  body.has-alert .line-bar { top: 140px; }
}
.line-bar-top { display: flex; align-items: center; gap: 9px; }
.line-bar-badge {
  flex: none; min-width: 34px; text-align: center;
  font-weight: 700; color: #fff; background: var(--citea);
  border-radius: 6px; padding: 4px 7px; font-size: 14px;
}
.line-bar-title { flex: 1; font-size: 14px; font-weight: 600; }
.line-bar-body { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.ls-row { display: flex; align-items: center; gap: 7px; line-height: 1.35; }
.ls-ico { flex: none; width: 18px; text-align: center; }
.ls-state {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 2px 9px; border-radius: 11px;
}
.ls-ok { background: rgba(125,240,163,.18); color: #7ef0a3; }
.ls-warn { background: rgba(255,193,122,.2); color: #ffc17a; }

/* Résultat de recherche « ligne » (au-dessus des arrêts) */
.search-results li.sr-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-line-badge {
  flex: none; min-width: 30px; text-align: center;
  font-weight: 700; color: #fff; border-radius: 5px; padding: 3px 6px; font-size: 13px;
}

/* Feuille des favoris (réutilise l'overlay) — tableau de bord en cartes */
.fav-head { background: var(--citea); }
.fav-list { overflow-y: auto; padding: var(--s-2) var(--s-3) var(--s-4); }
.fav-section { padding: var(--s-2) 0; }
.fav-section-title {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: var(--s-2) var(--s-1) var(--s-1);
}
.fav-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3); cursor: pointer; margin-bottom: var(--s-2);
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--e1);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.fav-row:hover { transform: translateY(-1px); box-shadow: var(--e2); }
.fav-row:active { transform: scale(.99); }
.fav-row-main { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fz-base); font-weight: 600; min-width: 0; }
.fav-ico {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-ctl);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2, #f4f6f9); color: var(--muted);
}
/* « Reprendre » : carte proéminente (accent marque) en tête */
.fav-resume { background: linear-gradient(180deg, var(--brand-100) 0%, var(--surface, #fff) 100%); border-color: var(--brand-200); }
.fav-resume .fav-ico { background: var(--brand); color: #fff; }
.fav-row-txt { display: flex; flex-direction: column; min-width: 0; }
.fav-row-name { font-weight: 700; }
.fav-row-sub { font-size: 12px; font-weight: 500; color: var(--muted); }
.fav-line-badge {
  flex: none; min-width: 34px; text-align: center;
  font-weight: 800; color: #fff; border-radius: 7px; padding: 4px 7px; font-size: var(--fz-sm);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}
.fav-del {
  flex: none; background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--n-300); padding: 0 6px;
  transition: color var(--dur-1) var(--ease-out);
}
.fav-del:hover, .fav-del:active { color: var(--late); }
.fav-empty { padding: var(--s-5) var(--s-3); line-height: 1.5; text-align: center; }

/* ============================================================
   P2.3 — Accessibilité : anneaux de focus clavier visibles
   ============================================================ */
/* Un focus clavier net partout (souris/tactile non affectés grâce à :focus-visible) */
:focus-visible {
  outline: 3px solid var(--sel);
  outline-offset: 2px;
}
/* Éléments interactifs custom (rôle bouton) : focus net même à l'intérieur d'une ligne */
.dep-line[data-line]:focus-visible,
.dep-row.live:focus-visible,
.xp-row.live:focus-visible,
.fav-row:focus-visible {
  outline: 3px solid var(--citea);
  outline-offset: -3px;
  border-radius: 6px;
}
/* Le bus suivi / la ligne sont sur fond foncé → anneau clair plus lisible */
.line-bar :focus-visible,
.trip-bar :focus-visible { outline-color: #fff; }

/* ============================================================
   P3 — corridor de ligne (liste d'arrêts) + plan du réseau
   ============================================================ */
/* Arrêts ordonnés par sens dans le panneau ligne (P3.1) */
.ls-dir { margin-top: 8px; }
.ls-dir-head {
  font-size: 12px; font-weight: 700; color: #cdd9e8;
  margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ls-stops {
  list-style: none; margin: 0; padding: 0;
  max-height: 160px; overflow-y: auto;
  border-left: 2px solid rgba(255,255,255,.25); padding-left: 8px;
}
.ls-stop {
  padding: 5px 7px; font-size: 12.5px; color: #eaf1fa;
  border-radius: 6px; cursor: pointer;
}
.ls-stop:hover, .ls-stop:active { background: rgba(255,255,255,.13); }

/* Plan du réseau : feuille de toutes les lignes (P3.3, réutilise l'overlay) */
.lines-head { background: var(--citea); }
/* Filtre (P3.4) : champ collé sous l'en-tête, la liste défile en dessous */
.lines-filter-wrap { padding: 8px 12px; border-bottom: 1px solid var(--line); flex: none; }
.lines-filter {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 9px;
  font-size: 15px; color: var(--ink); background: #f6f8fa; outline: none;
}
.lines-filter:focus { border-color: var(--citea); background: #fff; }
.lines-list { overflow-y: auto; padding: 6px 0 12px; }
/* Sections régulières / scolaires (P3.4) */
.lines-section-title {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 5px; background: #f6f8fa;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.lines-count {
  font-weight: 700; color: #fff; background: var(--muted);
  border-radius: 9px; padding: 0 7px; font-size: 11px; letter-spacing: 0;
}
.lines-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; cursor: pointer; border-bottom: 1px solid var(--line);
}
.lines-row:active { background: #eef4fb; }
.lines-badge {
  flex: none; min-width: 38px; text-align: center;
  font-weight: 700; color: #fff; border-radius: 5px; padding: 4px 7px; font-size: 14px;
}
.lines-name {
  font-size: 14px; color: var(--ink); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lines-empty { padding: 18px 16px; }

/* ============================================================
   Multi-réseau — sélecteur Citea / Cars Drôme + arrêts & fiche théorique
   ============================================================ */

/* Contrôles de carte (réseaux + affichage) : colonne compacte sous la recherche.
   Sous le dropdown de résultats (z plus bas) → masqués pendant une recherche active. */
.map-controls {
  position: fixed;
  top: 114px; left: 10px; z-index: 1080;
  display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start;
  max-width: calc(100vw - 20px);
}

/* Indice « zoomez pour voir les arrêts » : pilule flottante discrète, centrée en bas.
   Affichée uniquement quand « Arrêts » est actif et la vue trop large (cf. map.js). */
.stops-zoom-hint {
  position: fixed; z-index: 1080;
  left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(20, 28, 40, .82); color: #fff;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--e2); backdrop-filter: blur(4px);
  pointer-events: none;
}
.stops-zoom-hint[hidden] { display: none; }
body.dark .stops-zoom-hint { background: rgba(8, 12, 20, .9); }

/* Bouton Calques : FAB carré arrondi, ouvre le panneau réseaux + affichage */
.layers-btn {
  width: 44px; height: 44px; border-radius: var(--r-ctl);
  border: none; cursor: pointer;
  background: #fff; color: var(--citea);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--e2);
  transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.layers-btn:active { transform: scale(.92); }
.layers-btn.on { color: var(--citea-dark); background: var(--brand-100); }

/* Panneau Calques : carte flottante avec sections titrées */
.layers-panel {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-3);
  background: #fff; border-radius: var(--r-card);
  box-shadow: var(--e3);
  animation: surf-pop var(--dur-2) var(--ease-out);
}
.layers-panel[hidden] { display: none; }
.layers-section { display: flex; flex-direction: column; gap: var(--s-2); }
.layers-section-title {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
/* Dans le panneau, les groupes n'ont plus leur ombre de chip flottant (le panneau la porte) */
.layers-panel .net-switch,
.layers-panel .display-toggles { box-shadow: none; background: var(--surface-2, #f4f6f9); width: 100%; }
.layers-panel .net-opt, .layers-panel .disp-opt { flex: 1; }
@media (prefers-reduced-motion: reduce) { .layers-panel { animation: none; } }

/* Réseaux : interrupteurs indépendants (Citea / Cars Drôme) — segmented control */
.net-switch, .display-toggles {
  display: inline-flex; gap: 3px; padding: 4px;
  background: #fff; border-radius: var(--r-ctl);
  box-shadow: var(--e2);
}
.net-opt {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 12px; border: none; background: transparent;
  border-radius: 7px; cursor: pointer; color: var(--muted); line-height: 1.12;
  opacity: .6;   /* réseau décoché : atténué */
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              opacity var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.net-opt:active { transform: scale(.95); }
.net-opt-name { font-size: 12px; font-weight: 800; letter-spacing: -.01em; }
.net-opt-sub { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; font-weight: 700; }
.net-opt.on { color: #fff; opacity: 1; }
.net-opt[data-net-toggle="citea"].on { background: var(--citea); box-shadow: var(--e1); }
.net-opt[data-net-toggle="cars"].on { background: var(--cars); box-shadow: var(--e1); }
.net-opt:focus-visible { outline: 3px solid var(--sel); outline-offset: 1px; }

/* Affichage : bascules « Bus » / « Arrêts » */
.disp-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border: none; background: transparent;
  border-radius: 7px; cursor: pointer; color: var(--muted);
  font-size: 12px; font-weight: 700; line-height: 1; opacity: .65;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
              opacity var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.disp-opt:active { transform: scale(.95); }
.disp-ico { display: inline-flex; }
.disp-ico svg { display: block; }
.disp-opt.on { background: var(--citea); color: #fff; opacity: 1; box-shadow: var(--e1); }
.disp-opt:focus-visible { outline: 3px solid var(--sel); outline-offset: 1px; }

/* Arrêt Cars Drôme sur la carte : carré teal (forme + couleur distinctes du rond
   bleu Citea) → en mode « Les deux » on distingue les arrêts des deux réseaux. */
.cars-stop-dot {
  width: 11px; height: 11px;
  background: #fff; border: 3px solid var(--cars);
  border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Station Libélo (vélo libre-service) : pastille verte ronde avec pictogramme vélo */
.libelo-stop-dot {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 11px; line-height: 1;
  background: #5aae2a; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
/* Popup d'une station Libélo : nom + dispo + actions itinéraire */
.libelo-pop-name { font-weight: 800; font-size: 14px; }
.libelo-pop-sub { font-size: 12px; color: var(--muted); margin: 2px 0 8px; }
.libelo-pop-actions { display: flex; gap: 6px; }
.libelo-pop-actions button {
  flex: 1; border: 1px solid #5aae2a; background: #5aae2a; color: #fff;
  font-weight: 700; font-size: 12px; padding: 5px 8px; border-radius: var(--r-pill);
  cursor: pointer;
}
.libelo-pop-actions button:first-child { background: #fff; color: #3f7d1c; }

/* Bandeau « horaires théoriques » en tête de la fiche arrêt Cars Drôme.
   Teal réseau, distinct du bleu info et de l'orange alertes : on signale sans alarmer. */
.theo-badge {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 12px 4px; padding: 8px 11px;
  background: #e7f6f6; border: 1px solid #b8e2e2; border-left: 3px solid var(--cars);
  border-radius: 8px; font-size: 12.5px; line-height: 1.35; font-weight: 600; color: #0a5f5f;
}
.theo-badge-ico { flex: none; font-size: 14px; }

/* Passage théorique : pas de couleur d'état (ni vert ni rouge), heure en gris neutre.
   Aucune notion de ponctualité n'est inventée pour un réseau sans temps réel. */
.dep-row.theo { cursor: default; }
.theo-time { color: var(--muted); font-weight: 600; }
.dep-day { display: block; font-size: 11px; font-weight: 600; color: var(--cars); margin-top: 1px; }

/* Étiquette de réseau dans les résultats de recherche (mode « Les deux ») */
.sr-net {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: middle;
}
.sr-net-citea { background: #e6eff7; color: var(--citea); }
.sr-net-cars { background: #e7f6f6; color: #0a5f5f; }

/* Arrêts desservis par un trajet THÉORIQUE Cars (cliquables → durée jusqu'à eux). */
.cars-trip-stop {
  width: 14px; height: 14px;
  background: #fff; border: 3px solid var(--cars);
  border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.4);
  cursor: pointer; transition: transform .1s;
}
.cars-trip-stop:hover { transform: scale(1.3); }
.cars-trip-stop.target {
  border-color: var(--citea-dark); background: #e7f6f6;
  box-shadow: 0 0 0 4px rgba(14,149,148,.25), 0 1px 4px rgba(0,0,0,.4);
}

/* Panneau « trajet théorique » Cars : variante teal du panneau bus suivi. */
.trip-bar.theo { background: #0a5f5f; }
/* Flash quand un nouvel arrêt d'arrivée est sélectionné (surtout utile panneau réduit). */
@keyframes trip-updated-flash {
  0%   { box-shadow: 0 3px 14px rgba(0,0,0,.32); }
  25%  { box-shadow: 0 0 0 3px #7ffffd, 0 0 16px rgba(14,149,148,.7); }
  60%  { box-shadow: 0 0 0 2px #3ee0dc, 0 0 8px rgba(14,149,148,.35); }
  100% { box-shadow: 0 3px 14px rgba(0,0,0,.32); }
}
.trip-bar.trip-updated { animation: trip-updated-flash .75s ease-out; }
.ts-theo-note { opacity: .95; font-size: 12px; line-height: 1.35; }
.ts-theo-note .ts-ico { color: #aee9e6; }
.ts-theo-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,.18); color: #d7f3f1;
}
/* Lien « voir le trajet » dans une ligne théorique (teal, distinct du bleu « suivre » live). */
.theo-follow { display: block; font-size: 11px; font-weight: 600; color: var(--cars); margin-top: 3px; }

/* Œil de filtre carte par ligne (plan ☰) : focalise l'affichage des bus sur des lignes. */
.lines-eye {
  flex: none; margin-left: auto;
  width: 34px; height: 30px; border: none; border-radius: 8px;
  background: #eef1f5; color: var(--muted); cursor: pointer;
  font-size: 14px; line-height: 1;
}
.lines-eye.on { background: rgba(26,138,58,.16); color: var(--ok); }
.lines-eye.off { background: #f1f3f6; color: #b9c0c9; }
.lines-eye:focus-visible { outline: 3px solid var(--citea); outline-offset: -2px; }
.lines-filter-status {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 9px 16px; background: #eef5ff; border-bottom: 1px solid var(--line);
  font-size: 13px; color: var(--ink);
}
.lines-show-all {
  flex: none; border: 1px solid var(--citea); background: #fff; color: var(--citea);
  border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.lines-show-all:active { background: #eef4fb; }

/* Arrêt EN AMONT du départ dans un trajet théorique Cars : grisé, non sélectionnable
   (une arrivée doit toujours être en aval → pas d'« arrivée avant départ »). */
.cars-trip-stop.upstream {
  opacity: .35; border-color: #b3bcc6; cursor: default;
}

/* Poignée de la fiche arrêt (mobile uniquement) : barre grise tactile en haut. */
.stop-handle { display: none; }
/* Fiche réduite : on masque le corps ; sur mobile la feuille se rétracte au bandeau. */
.stop-panel.collapsed .stop-body { display: none; }
.stop-panel.collapsed .stop-express,
.stop-panel.collapsed .theo-badge,
.stop-panel.collapsed .stop-alerts { display: none; }
.stop-panel.collapsed #stop-name { cursor: pointer; }

/* Note « trajet théorique » en tête du panneau ligne Cars. */
.ls-theo { color: #d7f3f1; font-size: 12px; line-height: 1.35; }
.ls-theo .ls-ico { color: #aee9e6; }

/* Notifications locales (notify.js) — cloche « prévenez-moi » dans le panneau de suivi.
   Le panneau de suivi est sur fond bleu foncé → bouton clair lisible. */
.notif-bell-row { margin-top: 2px; }
.notif-bell {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: #fff;
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.notif-bell:active { background: rgba(255,255,255,.22); }
.notif-bell.on { background: #ffd54a; border-color: #ffd54a; color: #5a4500; }
.notif-bell-ico, .bell-ico, .fav-ico { display: inline-flex; align-items: center; line-height: 1; }
.notif-bell:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Cloche « prévenez-moi » dans le bloc « Prochains passages » de la fiche arrêt. */
.xp-bell {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  border: 1px solid #d6e1ec; background: #f2f7fc; color: var(--citea);
  border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.xp-bell.on { background: #ffd54a; border-color: #ffd54a; color: #5a4500; }
.xp-bell:focus-visible { outline: 2px solid var(--citea); outline-offset: 1px; }

/* Réglage « alertes favoris » dans la feuille des favoris (fond clair). */
.notif-row { align-items: center; }
/* Seuil « me prévenir X min avant » : trois chips exclusifs. */
.notif-thr-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 4px 2px; flex-wrap: wrap;
}
.notif-thr-label { font-size: 13px; color: var(--ink); }
.notif-thr-chips { display: flex; gap: 6px; }
.notif-thr-chip {
  border: 1px solid #d6e1ec; background: #fff; color: var(--citea-dark);
  border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.notif-thr-chip.on { background: var(--citea); border-color: var(--citea); color: #fff; }
.notif-thr-chip:focus-visible { outline: 2px solid var(--citea); outline-offset: 1px; }

/* ===== Itinéraire A→B (itinerary.js) ===== */
/* .itin-btn : style unifié avec les autres boutons d'en-tête (voir .fav-btn & co.) */

.itin-panel {
  position: fixed; z-index: 1096; background: #fff;
  display: flex; flex-direction: column; box-shadow: -2px 0 12px rgba(0,0,0,.18);
}
@media (min-width: 769px) { .itin-panel { top: 52px; right: 0; bottom: 0; width: 380px; } }
@media (max-width: 768px) {
  .itin-panel {
    top: auto; right: 0; left: 0; bottom: 0; width: 100%;
    height: 70vh; max-height: 70vh; border-radius: 16px 16px 0 0;
    box-shadow: 0 -3px 16px rgba(0,0,0,.22);
  }
}
.itin-head { padding: 12px 14px; gap: 6px; }
.itin-head h2 { margin: 0; font-size: 17px; color: var(--citea-dark); flex: 1; }
.itin-panel.collapsed .itin-head h2 { flex: none; }
.itin-mini {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--citea-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#itin-collapse { transition: transform .15s ease; }
.itin-panel.collapsed #itin-collapse { transform: rotate(180deg); }
/* Réduit : on masque le formulaire et la liste → la carte redevient visible. */
.itin-panel.collapsed .itin-form,
.itin-panel.collapsed .itin-search-bar,
.itin-panel.collapsed .itin-output { display: none; }
@media (max-width: 768px) {
  .itin-panel.collapsed { height: auto; max-height: none; }
}
/* Le mini-résumé n'apparaît que réduit ; en grand, le titre prend la largeur. */
.itin-panel:not(.collapsed) .itin-mini { display: none; }

/* Barre compacte « A → B · Modifier » : remplace le formulaire une fois l'itinéraire
   trouvé (mobile) pour rendre toute la hauteur aux résultats. Repli du FORMULAIRE seul,
   distinct du repli total (.collapsed) qui masque aussi les résultats. */
.itin-panel.compact-form .itin-form { display: none; }
/* Visibilité pilotée par l'attribut [hidden] en JS (cf. [hidden]{display:none!important}). */
.itin-search-bar {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 28px); margin: 4px 14px 8px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f7f9fb;
  cursor: pointer; font-family: inherit; text-align: left;
}
.itin-search-bar .itin-dot { width: 18px; height: 18px; font-size: 10px; }
.itin-sb-pts { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: var(--n-800); white-space: nowrap; overflow: hidden; }
.itin-sb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.itin-sb-arrow { flex: none; color: var(--muted); margin: 0 2px; }
.itin-sb-edit { flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 700; color: var(--citea); }
body.dark .itin-search-bar { background: var(--surface-2); color: var(--ink); }
body.dark .itin-sb-pts { color: var(--ink); }
body.dark .itin-sb-edit { color: #7fb6e8; }

.itin-form { padding: 4px 14px 10px; border-bottom: 1px solid var(--line); }
.itin-field { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.itin-dot {
  flex: none; width: 22px; height: 22px; border-radius: 50%; color: #fff;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.itin-dot-a { background: #1a8a3a; }
.itin-dot-b { background: var(--citea-dark); }
.itin-input {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 10px; background: #f7f9fb;
}
.itin-input:focus { outline: none; border-color: var(--citea); background: #fff; }
.itin-geo {
  flex: none; width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--citea);
  display: inline-flex; align-items: center; justify-content: center;
}
.itin-geo:active { background: #eef4fb; }
.itin-results-list {
  position: absolute; top: 100%; left: 30px; right: 0; z-index: 5;
  margin: 2px 0 0; padding: 0; list-style: none; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.16);
  max-height: 240px; overflow-y: auto;
}
.itin-results-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; cursor: pointer; font-size: 14px;
}
.itin-results-list li:hover, .itin-results-list li.active { background: #eef4fb; }
.itin-sg-net { font-size: 11px; padding: 1px 6px; border-radius: 4px; }
.sr-net-citea { background: #e6eff7; color: var(--citea); }
.sr-net-cars { background: #e1f3f2; color: var(--cars); }
.sr-net-both { background: #ede8f5; color: #5a3b9a; }
.sr-net-addr { background: #fdeede; color: var(--alert); }

/* Suggestions de l'itinéraire : lieux enregistrés (Maison/Travail), récents, en-têtes. */
.itin-sg-ico { flex: none; display: inline-flex; color: var(--citea); }
.itin-sg-ico.muted { color: var(--muted); }
.itin-sg-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.itin-sg-tag { flex: none; font-size: 11px; color: var(--muted); }
.itin-results-list li.itin-sg-header {
  padding: 7px 12px 3px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); cursor: default; background: transparent;
}
.itin-results-list li.itin-sg-header:hover { background: transparent; }
.itin-results-list li.itin-sg-hint {
  padding: 8px 12px; font-size: 12.5px; color: var(--citea-dark); background: #eef4fb; cursor: default;
}
.itin-results-list li.itin-sg-hint:hover { background: #eef4fb; }
.itin-sg-clear {
  flex: none; border: none; background: transparent; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.itin-sg-clear:hover { color: var(--alert); }
.itin-sg-set .itin-sg-plus { flex: none; color: var(--citea); font-weight: 700; font-size: 16px; }

.itin-row2 { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.itin-swap {
  flex: none; width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--citea-dark);
  display: inline-flex; align-items: center; justify-content: center;
}
.itin-time-lbl { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; flex: 1; }
.itin-go {
  flex: none; background: var(--citea); color: #fff; border: none; border-radius: 10px;
  padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.itin-go:active { background: var(--citea-dark); }

.itin-output { flex: 1; overflow-y: auto; padding: var(--s-3) var(--s-4); }
.itin-empty { font-size: 14px; }
/* Résumé = carte d'en-tête de l'itinéraire choisi */
.itin-summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  background: linear-gradient(180deg, var(--brand-100) 0%, rgba(231,240,249,0) 100%);
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
}
.itin-sum-times { font-size: var(--fz-md); color: var(--ink); font-variant-numeric: tabular-nums; }
.itin-sum-times b { color: var(--citea-dark); }
.itin-sum-dur { font-size: var(--fz-base); font-weight: 800; color: var(--citea-dark); white-space: nowrap; }

/* Timeline verticale : rail coloré (couleur de ligne) entre les nœuds horaires. */
.itin-legs { display: flex; flex-direction: column; }
.itin-leg {
  display: grid; grid-template-columns: 22px 1fr; column-gap: var(--s-3);
  padding: 0; border-top: none;
}
.itin-rail { position: relative; display: flex; flex-direction: column; align-items: center; }
.itin-rail-dot {
  flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--leg-color, var(--citea)); z-index: 1;
}
.itin-rail-bar { flex: 1; width: 5px; min-height: 22px; border-radius: 3px; background: var(--leg-color, var(--citea)); }
.itin-rail.walk { padding: 2px 0; }
.itin-rail-bar.dashed { width: 0; background: none; border-left: 3px dotted var(--n-300); border-radius: 0; min-height: 26px; }
.itin-leg-ico { flex: none; display: inline-flex; align-items: center; color: var(--muted); }

.itin-leg-walk { color: var(--muted); font-size: var(--fz-sm); }
.itin-walk-row { display: flex; align-items: center; gap: 7px; padding: 6px 0; min-height: 30px; }
.itin-leg-badge {
  flex: none; min-width: 32px; height: 26px; padding: 0 7px; border-radius: 7px;
  color: #fff; font-weight: 800; font-size: var(--fz-sm); display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}
.itin-leg-body { display: flex; flex-direction: column; min-width: 0; font-size: var(--fz-base); padding-bottom: var(--s-2); }
.itin-node { display: flex; align-items: baseline; gap: 9px; min-height: 24px; }
.itin-time { flex: none; min-width: 44px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.itin-stop { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.itin-leg-info { display: flex; align-items: center; gap: var(--s-2); padding: 6px 0; flex-wrap: wrap; }
.itin-leg-meta { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.itin-leg-head { color: var(--ink); font-weight: 600; }
.itin-leg-stops { color: var(--muted); }
/* Étiquettes posées sur la carte (identifient chaque tronçon sans survol). */
.itin-map-badge {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  color: #fff; font-weight: 800; font-size: 12px; line-height: 1;
  padding: 4px 7px; border-radius: 7px; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.itin-map-walk {
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  background: #fff; color: #5b6873; font-weight: 700; font-size: 11px; line-height: 1;
  padding: 3px 7px; border-radius: 7px; border: 1px solid #cfd6dd;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.itin-theo { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #e1f3f2; color: var(--cars); font-weight: 700; }
.itin-sched { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #eef3f8; color: var(--citea); font-weight: 700; }
.itin-rt { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #e6f7ec; color: #1a8a3a; font-weight: 700; }

/* Vélo Libélo : dispo factuelle (au moment du calcul) + état « inconnu » honnête */
.itin-bike-avail { font-size: 12px; font-weight: 700; color: #4a8f1f; white-space: nowrap; }
.itin-bike-unknown { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #f3eee3; color: #8a6d2a; font-weight: 700; }
body.dark .itin-bike-avail { color: #8fd45e; }
body.dark .itin-bike-unknown { background: #3a2e12; color: #f0c468; }

/* Perturbations : chip + texte d'alerte sur un tronçon (informer, sans l'écarter) */
.itin-leg-alert { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 4px 0 2px; }
.itin-disrupt-chip {
  font-size: 10px; padding: 1px 7px; border-radius: 4px; font-weight: 800; white-space: nowrap;
  background: #fdecd8; color: var(--alert, #E8730C);
}
.itin-disrupt-txt { font-size: 11.5px; color: var(--muted); min-width: 0; }
.itin-leg-transit.disrupted { --leg-color: var(--alert, #E8730C); }
/* Note globale : ligne suspendue écartée du calcul */
.itin-avoided {
  margin: 0 0 8px; padding: 7px 10px; border-radius: var(--r-2, 8px);
  background: #fdecd8; color: #8a4b08; font-size: 12.5px; font-weight: 600;
  border-left: 3px solid var(--alert, #E8730C);
}
.itin-cars-note { font-size: 11.5px; margin: 8px 2px 0; line-height: 1.4; }
body.dark .itin-disrupt-chip { background: #4a3210; color: #f5b66a; }
body.dark .itin-avoided { background: #3a2a12; color: #f0c089; }

/* Pins de l'itinéraire sur la carte */
.itin-start, .itin-end {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--citea-dark); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 13px;
}
.itin-start { background: #1a8a3a; }
.itin-board { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid var(--citea-dark); }
.notif-sub { color: var(--muted, #6b7682); font-weight: 400; }
.notif-switch {
  flex: none; width: 40px; height: 23px; border-radius: 999px;
  background: #cfd6dd; position: relative; transition: background .15s;
}
.notif-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s;
}
.notif-switch.on { background: var(--citea); }
.notif-switch.on::after { transform: translateX(17px); }

/* Panneau RÉDUIT (bus suivi / vue ligne / trajet Cars) : minimal — juste « Ligne XX »
   (ou la pastille de ligne) + les boutons. Aucun détail superflu, à toute taille d'écran. */
.trip-bar.collapsed, .line-bar.collapsed {
  width: auto; max-width: 60vw; padding: 8px 11px;
}
/* Réduit, le titre ligne devient « Ligne XX » (cf. setBarText) — reste cliquable pour
   ré-agrandir ; pas de display:none (sinon plus de cible tactile). */

/* Mobile : contrôles calés sous la barre de recherche compacte */
@media (max-width: 768px) {
  .map-controls { top: 106px; }
  body.has-alert .map-controls { top: 138px; }

  /* Poignée tactile : remplace l'ancienne barre décorative (::before). */
  .stop-panel::before { display: none; }
  .stop-panel { padding-top: 0; }
  .stop-handle {
    display: block; position: relative; flex: none;
    height: 24px; cursor: grab; touch-action: none;
  }
  .stop-handle::before {
    content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 5px; border-radius: 3px; background: #cfd6dd;
  }
  /* Bottom sheet à 3 crans : peek (.collapsed) · half (défaut 58vh) · full (.sheet-full).
     Le drag suit le doigt (hauteur inline + .dragging coupe la transition) puis snap. */
  .stop-panel { transition: height var(--dur-3) var(--ease-spring); }
  .stop-panel.sheet-full { height: 90vh; max-height: 90vh; }
  .stop-panel.dragging { transition: none; }
  /* Fiche arrêt réduite → ne reste que la poignée + le bandeau (nom), la carte est pleine. */
  .stop-panel.collapsed { height: auto; max-height: none; }

  /* Ouvert : on garde la taille/contenu d'origine (lisible). Réduit reste compact. */
  .trip-bar.collapsed, .line-bar.collapsed { max-width: 56vw; padding: 7px 10px; }
}

/* ===== Boutons d'en-tête : thème + partage ===== */
/* .theme-btn : style unifié avec les autres boutons d'en-tête (voir .fav-btn & co.) */

/* Bouton « partager » dans les en-têtes de panneaux (fiche arrêt, bus, ligne, itinéraire) */
.share-btn {
  background: none; border: none; cursor: pointer; color: var(--citea);
  line-height: 1; padding: 4px 6px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.share-btn.share-on-dark { color: rgba(255,255,255,.85); }
.share-btn:active { opacity: .6; transform: scale(.9); }

/* ===== Sélecteurs Jour / Heure de l'itinéraire (menus déroulants) ===== */
.itin-sel {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 8px;
  background: #fff; color: var(--ink); appearance: auto;
}
.itin-sel:focus-visible { outline: 2px solid var(--citea); outline-offset: 1px; }
.itin-go-full { width: 100%; margin-top: 8px; text-align: center; }
/* Filtre PMR : case « trajets accessibles en fauteuil » sous les menus jour/heure */
.itin-pmr-toggle {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-size: 13px; color: var(--ink); cursor: pointer; user-select: none;
}
.itin-pmr-toggle input { width: 17px; height: 17px; accent-color: var(--citea); cursor: pointer; }
.itin-pmr-ico { color: var(--citea-dark); font-size: 15px; }
body.dark .itin-pmr-toggle { color: var(--ink); }
body.dark .itin-pmr-ico { color: #7fb6e8; }
/* Fix « cadre violet » : les champs/menus de l'itinéraire prennent l'anneau bleu de
   l'app, pas l'anneau magenta global (réservé au suivi de bus sur la carte). */
.itin-form :focus-visible { outline-color: var(--citea); }

/* ===== Options d'itinéraire (plusieurs départs proposés) ===== */
.itin-options { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); margin-bottom: var(--s-3); }
.itin-opt {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 8px 12px; cursor: pointer;
  background: #fff; font-family: inherit; color: var(--ink); white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.itin-opt:active { transform: scale(.97); }
.itin-opt.sel { border-color: var(--citea); background: var(--brand-100); box-shadow: inset 0 0 0 1px var(--citea); }
.itin-opt-times { font-size: var(--fz-base); font-weight: 800; color: var(--citea-dark); font-variant-numeric: tabular-nums; }
.itin-opt-meta { font-size: 11px; color: var(--muted); font-weight: 600; }
.itin-opt:focus-visible { outline: 2px solid var(--citea); outline-offset: 1px; }
/* Bus suivant, inline à côté du départ (même ligne/sens à cet arrêt) */
.itin-next { font-size: 12px; color: var(--muted); white-space: nowrap; }


/* ===== Accessibilité PMR ===== */
.dep-pmr, .itin-pmr { font-size: 12px; white-space: nowrap; }
.dep-pmr.ok, .itin-pmr.ok { color: var(--ok); }
.dep-pmr.no, .itin-pmr.no { color: var(--muted); }
.stop-access {
  display: flex; align-items: center; gap: 6px; margin: 6px 16px 2px;
  padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
}
.stop-access.ok { background: #e7f6ec; color: #156c30; }
.stop-access.no { background: #f1f3f5; color: var(--muted); }

/* ===== Mode sombre ===== */
/* On remappe le fond/texte/lignes + les surfaces ; les bleus de marque restent des
   FONDS à texte blanc (lisibles sur sombre). Seuls les textes bleu foncé passent en
   bleu clair. La carte Leaflet (tuiles claires) est assombrie par filtre CSS. */
body.dark {
  --ink: #e8edf2;
  --muted: #9aa7b4;
  --line: #2b3440;
  --bg: #10151b;
  --surface: #1b232c;
  --surface-2: #242e39;
}
body.dark { background: var(--bg); color: var(--ink); }

/* Tuiles de carte assombries (sans changer de fournisseur de tuiles) */
/* Filtre sombre des tuiles raster : UNIQUEMENT en repli (sans fond GL). Avec MapLibre
   GL, le mode sombre est un vrai style vectoriel natif → pas de filtre. */
body.dark.map-raster .leaflet-tile { filter: brightness(0.65) invert(1) contrast(0.92) hue-rotate(180deg) saturate(0.75); }
body.dark .leaflet-container { background: #0c1116; }
body.dark .leaflet-popup-content-wrapper,
body.dark .leaflet-popup-tip { background: var(--surface); color: var(--ink); }
body.dark .leaflet-bar a,
body.dark .leaflet-control-attribution { background: var(--surface); color: var(--muted); }
body.dark .leaflet-bar a { border-bottom-color: var(--line); }

/* Surfaces (panneaux, overlays, cartes, champs) */
body.dark .stop-panel,
body.dark .itin-panel,
body.dark .overlay-card { background: var(--surface); color: var(--ink); }
body.dark .search-bar,
body.dark .search-results,
body.dark .itin-results-list,
body.dark .lines-list .lines-row,
body.dark .stop-express,
body.dark .itin-opt { background: var(--surface); color: var(--ink); }
body.dark .layers-btn,
body.dark .layers-panel,
body.dark .locate-btn,
body.dark .mystop-btn { background: var(--surface); color: var(--ink); }
body.dark .layers-btn { color: #7fb6e8; }
body.dark .layers-btn.on { background: var(--surface-2); }
body.dark .mystop-btn { background: var(--citea); color: #fff; }
body.dark .itin-input,
body.dark .itin-sel,
body.dark .itin-geo,
body.dark .itin-swap,
body.dark .lines-filter { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
body.dark .itin-input:focus,
body.dark .itin-sel:focus,
body.dark .lines-filter:focus { background: var(--surface-2); }
body.dark .toast { background: rgba(20,26,33,.96); color: var(--ink); }
body.dark .net-switch,
body.dark .display-toggles { background: var(--surface-2); }

/* Hovers/actifs clairs → variantes sombres */
body.dark .search-results li.active,
body.dark .search-results li:hover,
body.dark .itin-results-list li:hover,
body.dark .itin-results-list li.active,
body.dark .dep-row.live:active,
body.dark .lines-row:active,
body.dark .fav-row:active,
body.dark .itin-geo:active { background: var(--surface-2); }
body.dark .itin-opt.sel { background: #11314f; }
body.dark .itin-sg-ico { color: #7fb6e8; }
body.dark .itin-results-list li.itin-sg-hint,
body.dark .itin-results-list li.itin-sg-hint:hover { background: var(--surface-2); color: var(--ink); }
body.dark .itin-results-list li.itin-sg-header:hover { background: transparent; }
body.dark .stop-access.no { background: var(--surface-2); }

/* Bordures de séparation */
body.dark .dep-row,
body.dark .alert-item,
body.dark .itin-leg,
body.dark .stop-panel-head,
body.dark .overlay-head { border-color: var(--line); }

/* Textes bleu foncé (titres, accents) → bleu clair lisible sur sombre */
body.dark .stop-panel-head h2,
body.dark .itin-head h2,
body.dark .stop-express-title,
body.dark .xp-eta-num,
body.dark .itin-sum-dur,
body.dark .itin-sum-times b,
body.dark .itin-mini,
body.dark .itin-opt-times,
body.dark .sec-dir,
body.dark .dep-follow,
body.dark .rt-note-ico { color: #7fb6e8; }
body.dark .itin-map-walk { background: var(--surface); color: var(--ink); border-color: var(--line); }
body.dark .rt-note { background: #16202b; }
body.dark .itin-leg-walk { color: var(--muted); }

/* ===== Barre unifiée « Où aller ? » — résultats : chip itinéraire + adresses ===== */
.search-results li.sr-stop { display: flex; align-items: center; gap: 8px; }
.sr-stop .sr-main { flex: 1; min-width: 0; }
.sr-itin {
  flex: none; width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--citea);
  font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.sr-itin:hover { background: #eef4fb; }
.sr-addr .sr-sub { color: var(--alert); }

/* Bouton « me recentrer » remonté au-dessus de la fiche/itinéraire RÉDUIT (mobile) →
   on ne le perd plus derrière la barre réduite. */
@media (max-width: 768px) {
  body.panel-collapsed #locate-btn { bottom: 78px; z-index: 1100; }
}

/* ===== Bouton « Horaires de la semaine » (fiche arrêt) ===== */
.schedule-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px 16px 4px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--citea); border-radius: 8px; background: #fff;
  color: var(--citea); font-family: inherit; font-size: 13px; font-weight: 600;
}
.schedule-btn-ico { display: inline-flex; align-items: center; }
.schedule-btn:hover { background: #eef5ff; }
.schedule-btn:focus-visible { outline: 2px solid var(--citea); outline-offset: 1px; }
/* Deux accès horaires côte à côte (semaine / aujourd'hui) */
.stop-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 16px 4px; }
.stop-actions .schedule-btn { margin: 0; }

/* ===== Tableau « tous les passages du jour » (chronologique, théorique) ===== */
.allday-body { padding: var(--s-3) var(--s-4); overflow-y: auto; }
.allday-row {
  display: grid; grid-template-columns: 54px auto 1fr; align-items: center; gap: 10px;
  padding: 8px 4px; border-bottom: 1px solid var(--line);
}
.allday-time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.allday-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 800;
}
.allday-dir { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
/* Passage déjà passé (par rapport à l'heure courante) : atténué, mais conservé. */
.allday-row.past { opacity: .45; }
.allday-row.past .allday-time { text-decoration: line-through; }

/* ===== Overlay horaires de la semaine ===== */
.schedule-head { background: var(--citea); color: #fff; }
.schedule-days {
  display: flex; gap: var(--s-2); overflow-x: auto;
  padding: var(--s-3); border-bottom: 1px solid var(--line); flex: none;
}
.sched-day {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 56px; padding: 8px 10px; cursor: pointer; font-family: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.sched-day:active { transform: scale(.95); }
.sched-day.sel { border-color: var(--citea); background: var(--brand-100); box-shadow: inset 0 0 0 1px var(--citea); }
.sched-day:focus-visible { outline: 2px solid var(--citea); outline-offset: 1px; }
.sched-day-name { font-size: var(--fz-sm); font-weight: 800; text-transform: capitalize; }
.sched-day-date { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.schedule-body { overflow-y: auto; padding: var(--s-3) var(--s-4); }
/* Note « théorique » : encart teal (même langage que la fiche Cars) */
.sched-note {
  font-size: 12px; color: var(--cars-600, #0a7574); margin-bottom: var(--s-3);
  background: var(--cars-100, #e2f4f3); border: 1px solid #b8e2e2; border-left: 3px solid var(--cars);
  border-radius: 8px; padding: 8px 11px;
}
.sched-net + .sched-net { margin-top: var(--s-5); }
/* En-tête de réseau collant en haut du scroll */
.sched-net-title {
  position: sticky; top: -1px; z-index: 2;
  font-size: var(--fz-sm); font-weight: 800; margin-bottom: var(--s-2);
  padding: 4px 10px; border-radius: var(--r-pill); display: inline-flex; color: #fff;
  box-shadow: var(--e1);
}
.sched-net-citea { background: var(--citea); }
.sched-net-cars { background: var(--cars); }
.sched-group {
  padding: var(--s-3); margin-bottom: var(--s-2);
  background: var(--surface, #fff); border: 1px solid var(--line); border-radius: var(--r-card);
}
.sched-group-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.sched-badge {
  flex: none; min-width: 34px; text-align: center; color: #fff; font-weight: 800;
  font-size: var(--fz-sm); padding: 4px 7px; border-radius: 7px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
}
.sched-dir { font-size: var(--fz-sm); font-weight: 600; color: var(--ink); min-width: 0; }
.sched-times { display: flex; flex-wrap: wrap; gap: 6px; }
.sched-time {
  font-size: var(--fz-sm); font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--surface-2, #f1f4f8); color: var(--ink);
  border-radius: 8px; padding: 4px 8px;
}
.sched-loading, .sched-empty { padding: var(--s-3) 0; }

/* Dark mode — résultats, bouton & overlay horaires */
body.dark .sr-itin { background: var(--surface-2); color: #7fb6e8; border-color: var(--line); }
body.dark .schedule-btn { background: var(--surface-2); color: #7fb6e8; border-color: var(--line); }
body.dark .sched-day { background: var(--surface-2); color: var(--ink); }
body.dark .sched-day.sel { background: #11314f; }
body.dark .sched-time { background: var(--surface-2); }

/* ===== Itinéraire : bascule Partir à / Arriver avant ===== */
.itin-mode {
  display: flex; margin: 2px 0 8px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 9px;
}
.itin-mode-opt {
  flex: 1; padding: 8px 6px; border: none; cursor: pointer;
  background: #fff; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 600;
}
.itin-mode-opt.sel { background: var(--citea); color: #fff; }
.itin-mode-opt:focus-visible { outline: 2px solid var(--citea); outline-offset: -2px; }
.itin-arriveby {
  font-size: 12px; color: var(--citea-dark); background: #eef5ff;
  border-radius: 6px; padding: 5px 9px; margin-bottom: 8px;
}
/* Bus suivant (même ligne/sens) sous un tronçon — repère discret pour correspondance serrée */
.itin-leg-next { font-size: 12px; color: var(--muted); margin-top: 2px; }
body.dark .itin-leg-next { color: var(--muted); }

body.dark .itin-mode-opt { background: var(--surface-2); color: var(--muted); }
body.dark .itin-mode-opt.sel { background: var(--citea); color: #fff; }
body.dark .itin-arriveby { background: #11314f; color: #7fb6e8; }

/* =========================================================================
   PHASE 2 — Motion des surfaces (animations d'entrée)
   -------------------------------------------------------------------------
   Les surfaces se révèlent avec un mouvement bref depuis le bord concerné :
   le geste indique d'où vient la surface (sens de navigation lisible).
   Animations d'ENTRÉE seulement (les panneaux togglent l'attribut [hidden],
   qui retire l'élément du flux → l'apparition rejoue l'animation). Tout est
   coupé en prefers-reduced-motion.
   ========================================================================= */
@keyframes surf-rise { from { opacity: 0; transform: translateY(10px); }   to { opacity: 1; transform: none; } }
@keyframes surf-right{ from { opacity: 0; transform: translateX(18px); }   to { opacity: 1; transform: none; } }
@keyframes surf-up   { from { transform: translateY(100%); }               to { transform: none; } }
@keyframes surf-pop  { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* Panneaux latéraux (desktop) : glissent depuis la droite */
@media (min-width: 769px) {
  .stop-panel:not([hidden]),
  .itin-panel:not([hidden]) { animation: surf-right var(--dur-3) var(--ease-out); }
}
/* Demi-feuilles (mobile) : montent depuis le bas */
@media (max-width: 768px) {
  .stop-panel:not([hidden]),
  .itin-panel:not([hidden]) { animation: surf-up var(--dur-3) var(--ease-out); }
}
/* Panneaux flottants bleus (bus suivi, vue ligne) : montée douce */
.trip-bar:not([hidden]),
.line-bar:not([hidden]) { animation: surf-rise var(--dur-3) var(--ease-out); }

/* Overlays modaux : backdrop en fondu + carte qui éclot */
.overlay:not([hidden]) { animation: backdrop-in var(--dur-2) var(--ease-out); }
.overlay:not([hidden]) .overlay-card { animation: surf-pop var(--dur-3) var(--ease-spring); }

/* Résultats de recherche : éclosion rapide */
.search-results:not([hidden]) { animation: surf-pop var(--dur-2) var(--ease-out); }

/* Toast : montée + fondu */
.toast:not([hidden]) { animation: surf-rise var(--dur-2) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .stop-panel:not([hidden]), .itin-panel:not([hidden]),
  .trip-bar:not([hidden]), .line-bar:not([hidden]),
  .overlay:not([hidden]), .overlay:not([hidden]) .overlay-card,
  .search-results:not([hidden]), .toast:not([hidden]) { animation: none; }
}

/* Badges de ligne : léger liseré → restent visibles même si la couleur GTFS est
   claire/blanche (lignes scolaires Cars en #FFFFFF). Le texte s'adapte via CITEA.textOn(). */
.itin-leg-badge, .dep-line, .sched-badge, .fav-line-badge, .sr-line-badge, .lines-badge,
.itin-map-badge, #line-bar-badge {
  border: 1px solid rgba(0,0,0,.12);
}

/* Chip « scolaire · réservé » : service Cars non ouvert au grand public.
   Ton ambre sobre, distinct du teal « théorique » et de l'orange des alertes trafic. */
.resv-chip {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 10px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: #fbe8cf; color: #8a5a00; border: 1px solid #f0d49a;
  white-space: nowrap;
}
body.dark .resv-chip { background: #3a2e12; color: #f0c468; border-color: #5a4716; }