/* Stories d'un transport : l'attente à l'arrêt (toutes les lignes qui mènent à la descente,
   sur la carte et en liste) et le trajet à bord (les arrêts, le voyageur, la carte).
   Voir docs/PAGES.md (3 bis) et docs/DESIGN.md. Seuls transform, opacity et
   stroke-dashoffset s'animent ; tout reste lisible sans mouvement. */

/* Cartes des deux stories --------------------------------------------------------------- */

.tc { display: block; width: 100%; height: 100%; background: var(--papier); }
.tc .fond-rue { stroke: var(--blanc); }
.tc .fond-rue-grande { stroke-width: 6; }
.tc .fond-rue-moyenne { stroke-width: 4; }
.tc .fond-rue-petite { stroke-width: 2.6; }
.tc .fond-rue-fine { stroke-width: 1.4; }
.tc .fond-rue-sentier, .tc .fond-rue-marches { stroke-width: .9; }
.tc-nom-rue, .tc-lieu {
  font-family: var(--texte);
  font-weight: 700;
  fill: var(--gris);
  text-anchor: middle;
  dominant-baseline: central;
  paint-order: stroke;
  stroke: var(--papier);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.tc-nom-rue { font-size: 8.5px; opacity: .8; }
.tc-lieu { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.tc-lieu-4, .tc-lieu-5 { font-size: 13px; fill: var(--encre); }

/* Zoom de la carte (static/js/carte-transport.js, cadrer) : les traits et les points gardent
   leur taille à l'écran. */
.tc-bout circle, .tc-arret { transform-box: fill-box; transform-origin: center; scale: var(--u, 1); }

/* Le tracé prévu (sans JavaScript), remplacé par ceux de toutes les lignes. */
.tc-trace {
  fill: none;
  stroke-width: calc(5 * var(--u, 1));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: og-trace 1.2s var(--ease-trace) .15s both;
}
.tc-trace:not([stroke]) { stroke: var(--outremer); }
.tc-trace.est-remplace { opacity: 0; transition: opacity .4s; }

/* Toutes les lignes de l'attente : celle choisie au premier plan, les autres en retrait. */
.tc-option polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tc-option-bord { stroke: var(--blanc); stroke-width: calc(9 * var(--u, 1)); }
.tc-option-trait { stroke-width: calc(5 * var(--u, 1)); stroke-dasharray: 1; stroke-dashoffset: 1; animation: og-trace 1.1s var(--ease-trace) both; }
.tc-option:nth-child(2) .tc-option-trait { animation-delay: .1s; }
.tc-option:nth-child(3) .tc-option-trait { animation-delay: .2s; }
.tc-option:nth-child(n+4) .tc-option-trait { animation-delay: .3s; }
.tc-option-approche { stroke-width: calc(2.5 * var(--u, 1)); stroke-dasharray: calc(2 * var(--u, 1)) calc(6 * var(--u, 1)); opacity: 0; transition: opacity .4s; }
.tc-option { transition: opacity .45s var(--ease-out); }
.a-un-choix .tc-option:not(.est-choisi) { opacity: .26; }
.tc-option.est-choisi .tc-option-approche { opacity: .9; }
.tc-option.est-choisi .tc-option-trait { stroke-width: calc(6.5 * var(--u, 1)); }

/* Montée (l'arrêt où l'on attend, avec son onde) et descente. */
.tc-bout circle { stroke-width: 4; }
.tc-montee circle { fill: var(--encre); stroke: var(--signal); }
.tc-montee .tc-onde { fill: var(--signal); stroke: none; transform-box: fill-box; transform-origin: center; animation: og-onde 2.4s ease-out infinite; }
.tc-descente circle { fill: var(--blanc); stroke: var(--encre); transform-box: fill-box; transform-origin: center; animation: og-rebond .5s var(--ease-pop) 1s both; }

/* Véhicules : une pilule au numéro de la ligne, qui roule vers l'arrêt. */
.tc-vehicule { cursor: pointer; }
.tc-vehicule-corps { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease-pop); filter: drop-shadow(0 2px 3px rgb(14 18 51 / .35)); }
.tc-vehicule rect { stroke: var(--blanc); stroke-width: 2.5; }
.tc-vehicule text { font-family: var(--titre); font-size: 11.5px; font-weight: 800; font-stretch: 84%; pointer-events: none; }
.tc-vehicule:not(.est-choisi) .tc-vehicule-corps { transform: scale(.82); }
.a-un-choix ~ .tc-vehicules .tc-vehicule:not(.est-choisi), .tc-vehicules .tc-vehicule:not(.est-choisi) { opacity: .78; }
.tc-vehicule-onde { opacity: 0; transform-box: fill-box; transform-origin: center; }
.tc-vehicule.est-choisi .tc-vehicule-onde { animation: og-onde 1.8s ease-out infinite; }
.tc-vehicule.est-choisi .tc-vehicule-corps { transform: scale(1.12); }

/* Le voyageur sur la carte « à bord » ; estimé d'après l'horaire : un rond creux. */
.tc-moi[hidden] { display: none; }
.tc-moi { transition: transform 1s var(--ease-out); }
.tc-moi-halo { fill: var(--outremer); opacity: .18; transform-box: fill-box; transform-origin: center; animation: og-moi 1.6s ease-in-out infinite alternate; }
.tc-moi-point { fill: var(--outremer); stroke: var(--blanc); stroke-width: 3.5; }
.tc-moi.est-estime .tc-moi-point { fill: var(--blanc); stroke: var(--outremer); stroke-dasharray: 4 3; }
.tc-arret { fill: var(--blanc); stroke: var(--encre); stroke-width: 2.5; transition: opacity .4s, fill .3s; }
.tc-arret.est-passe { opacity: .35; }
.tc-arret.est-prochain { fill: var(--signal); stroke-width: 3; }
.tc-etiquette { pointer-events: none; animation: og-fondu .4s ease-out both; transition: transform .6s var(--ease-out); }
.tc-etiquette rect { fill: var(--encre); }
.tc-etiquette text { fill: var(--blanc); font-family: var(--texte); font-size: 11.5px; font-weight: 700; }

@keyframes og-moi { to { transform: scale(1.35); } }

/* Attente ----------------------------------------------------------------------------- */

.story-attente { grid-template-rows: auto minmax(0, 1fr) auto auto; background: var(--papier); }
.story-attente .story-tete {
  --story-texte: var(--blanc);
  --story-doux: rgb(255 255 255 / .82);
  --story-voile: rgb(255 255 255 / .28);
  color: var(--blanc);
  background: linear-gradient(to bottom, rgb(14 18 51 / .82), rgb(14 18 51 / .45) 70%, transparent);
  padding-bottom: 22px;
}
/* La carte occupe tout ce que la feuille laisse libre, sous l'en-tête ; la feuille la
   recouvre de quelques pixels, comme posée dessus. */
.attente-carte { position: relative; z-index: 0; grid-row: 1 / 3; grid-column: 1; min-height: 0; }
.attente-carte .tc { position: absolute; inset: 0; }
.attente-carte .carte-attribution, .bord-carte .carte-attribution { top: auto; left: auto; right: 10px; bottom: 34px; }
.story-attente .story-tete { grid-row: 1; grid-column: 1; }
.attente-feuille {
  grid-row: 3;
  position: relative;
  z-index: 2;
  display: grid;
  gap: 8px;
  max-height: 62dvh;
  margin: -26px 8px 0;
  padding: 10px 16px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 28px;
  background: var(--blanc);
  color: var(--encre);
  box-shadow: 0 -10px 46px rgb(14 18 51 / .2);
  animation: og-feuille .55s var(--ease-out) both;
  scrollbar-width: none;
}
.attente-poignee { justify-self: center; display: grid; place-items: center; width: 88px; height: 26px; margin: -6px 0 -4px; padding: 0; border: 0; border-radius: 13px; background: none; cursor: grab; touch-action: none; }
.attente-poignee .feuille-poignee { transition: width .35s var(--ease-pop), background .2s; }
.attente-poignee:hover .feuille-poignee, .attente-poignee:focus-visible .feuille-poignee { width: 56px; background: var(--filet-fort); }
.attente-poignee:focus-visible { outline: 3px solid var(--outremer); outline-offset: 2px; }

/* Feuille réduite : la course choisie seule, la carte prend la place. */
.attente-feuille.est-reduite { gap: 4px; padding-bottom: 10px; overflow: hidden; }
.attente-feuille.est-reduite :is(.attente-etat, .option:not(.est-choisie), .option-plus, .attente-quai, .story-alerte) { display: none; }
.attente-feuille.est-reduite .attente-titre { font-size: clamp(20px, 5.6vw, 26px); }
.attente-feuille.est-reduite .option { animation: og-apparait .35s var(--ease-out) both; }
.attente-feuille.est-reduite .option-tete { cursor: pointer; }
.attente-feuille > * { transition: opacity .25s; }
.attente-sur { color: var(--gris); }
.attente-pin { position: relative; width: 10px; height: 10px; border: 2.5px solid var(--signal); border-radius: 50%; background: var(--encre); }
.attente-pin::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: var(--signal); opacity: .5; animation: og-onde 2.4s ease-out infinite; }
.attente-titre {
  margin: 0;
  font-size: clamp(26px, 7.4vw, 36px);
  font-stretch: 96%;
  line-height: 1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.attente-titre span { background: linear-gradient(var(--signal), var(--signal)) 0 92% / 100% 6px no-repeat; }
.attente-etat { margin: 0; font-size: 13px; font-weight: 600; color: var(--gris); }
.attente-etat:empty { display: none; }
.attente-etat.est-direct::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #1BAE6E; vertical-align: middle; animation: og-pulse 1s ease-in-out infinite alternate; }

/* Une carte par ligne et par direction ; la choisie s'ouvre sur ses informations. */
.attente-options { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.option {
  --accent: var(--encre);
  position: relative;
  border: 1px solid var(--filet);
  border-radius: 20px;
  background: var(--blanc);
  transition: border-color .3s, box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
  animation: og-apparait .5s var(--ease-out) both;
  animation-delay: calc(var(--rang, 0) * 60ms);
}
.option::before {
  content: "";
  position: absolute;
  left: -1px; top: 14px; bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--signal);
  transform: scaleY(0);
  transition: transform .4s var(--ease-pop);
}
.option.est-choisie { border-color: var(--encre); box-shadow: 0 14px 34px -18px rgb(14 18 51 / .55); }
.option.est-choisie::before { transform: scaleY(1); }
.option-tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  border: 0;
  border-radius: 20px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.option-tete:focus-visible { outline: 3px solid var(--outremer); outline-offset: 2px; }
.option-ligne .pastille { transform-origin: left center; transition: transform .35s var(--ease-pop); }
.option.est-choisie .option-ligne .pastille { transform: scale(1.12); }
.option-vers { display: grid; gap: 2px; min-width: 0; }
.option-direction { overflow: hidden; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.option-meta { font-size: 13px; font-weight: 600; color: var(--gris); font-variant-numeric: tabular-nums; }
.option-badge { justify-self: start; padding: 1px 8px; border-radius: 999px; background: var(--badge-duree-bg); color: var(--badge-duree-fg); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.option-quand { display: grid; justify-items: end; gap: 1px; text-align: right; }
.option-quand strong { font-family: var(--titre); font-size: 24px; font-weight: 800; font-stretch: 82%; line-height: 1; font-variant-numeric: tabular-nums; }
.option-quand small { font-size: 12px; font-weight: 700; color: var(--gris); font-variant-numeric: tabular-nums; }
.option-quand small.est-temps-reel { color: #0B8A55; }
.option-quand small.est-temps-reel::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: currentColor; vertical-align: 1px; animation: og-pulse 1s ease-in-out infinite alternate; }

/* Le dépliant : sa hauteur suit son contenu (grille 0fr → 1fr), sans animer de hauteur. */
.option-plus { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out); }
.option.est-choisie .option-plus { grid-template-rows: 1fr; }
.option-plus-dedans { display: grid; gap: 12px; min-height: 0; overflow: hidden; padding: 0 14px; opacity: 0; transition: opacity .3s, padding .45s var(--ease-out); }
.option.est-choisie .option-plus-dedans { padding: 0 14px 14px; opacity: 1; }
.option-passages { display: flex; flex-wrap: wrap; gap: 6px; }
.option-passage {
  min-height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--filet-fort);
  border-radius: 999px;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 800;
  font-stretch: 86%;
  font-variant-numeric: tabular-nums;
  transition: background .2s, border-color .2s, transform .25s var(--ease-pop);
}
.option-passage:active { transform: scale(.94); }
.option-passage[aria-pressed="true"] { border-color: var(--encre); background: var(--encre); color: var(--blanc); }
.option-passage.est-temps-reel::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: #1BAE6E; vertical-align: 3px; }
.option-faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; margin: 0; }
.option-faits div { display: grid; gap: 1px; padding: 9px 10px; border-radius: 14px; background: var(--papier); }
.option-faits dd { margin: 0; font-family: var(--titre); font-size: 17px; font-weight: 800; font-stretch: 86%; font-variant-numeric: tabular-nums; }
.option-faits dt { overflow: hidden; font-size: 11.5px; font-weight: 600; color: var(--gris); white-space: nowrap; text-overflow: ellipsis; }
.attente-quai { --story-texte: var(--encre); --story-doux: var(--gris); --story-voile: var(--papier); }
.story-attente .story-pied { grid-row: 4; color: var(--encre); }
.story.story-attente .story-nav-avant { background: var(--encre); color: var(--blanc); }
.story.story-attente .story-nav-arriere { color: var(--encre); }
.story.story-attente .story-nav { box-shadow: 0 2px 12px rgb(14 18 51 / .12); }
.story.story-attente .story-nav-arriere { background: var(--blanc); }

/* À bord ------------------------------------------------------------------------------ */

.bord { justify-content: flex-start; gap: 12px; padding-top: 4px; }
.bord .story-numero { font-size: clamp(52px, 17vw, 92px); }
.bord .story-numero-moyen { font-size: clamp(44px, 14vw, 76px); }
.bord-prochain {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--story-voile);
}
.bord-prochain-titre { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--story-doux); }
.bord-prochain strong { grid-column: 1 / -1; font-family: var(--titre); font-size: clamp(24px, 7vw, 32px); font-weight: 800; font-stretch: 90%; line-height: 1.05; text-wrap: balance; }
.bord-prochain-meta { grid-column: 1 / -1; font-family: var(--titre); font-size: 20px; font-weight: 800; font-stretch: 86%; font-variant-numeric: tabular-nums; color: var(--signal); }
.story-clair .bord-prochain-meta { color: inherit; }
.bord-prochain-fin { grid-column: 1 / -1; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--story-doux); }
.bord-source { grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: var(--story-doux); }

/* Arrêts | Carte : une pastille glisse sous le choix. */
.bord-vues { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; background: var(--story-voile); }
.bord-vue {
  position: relative;
  z-index: 1;
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--story-texte);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  transition: color .3s;
}
.bord-vue[aria-pressed="true"] { color: var(--encre); }
.bord-vue-curseur { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--blanc); box-shadow: 0 6px 18px -10px rgb(14 18 51 / .6); transition: transform .45s var(--ease-swap); }
.bord[data-vue="carte"] .bord-vue-curseur { transform: translateX(100%); }

/* Les arrêts : sept à l'écran, la liste défile ; le voyageur glisse sur le rail. */
.bord-liste {
  --ligne: 48px;
  position: relative;
  max-height: calc(var(--ligne) * 7);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}
.bord-liste::-webkit-scrollbar, .attente-feuille::-webkit-scrollbar { display: none; }
.bord-liste[hidden], .bord-carte[hidden] { display: none; }
.bord-arrets { position: relative; margin: 0; padding: 0; list-style: none; }
.bord-arrets::before { content: ""; position: absolute; left: 13px; top: calc(var(--ligne) / 2); bottom: calc(var(--ligne) / 2); width: 4px; margin-left: -2px; border-radius: 2px; background: var(--story-texte); opacity: .4; transform-origin: top; animation: og-rail .8s var(--ease-trace) .2s both; }
.bord-arret {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: var(--ligne);
  transition: opacity .45s;
  animation: og-apparait .45s var(--ease-out) both;
}
.bord-arret:nth-child(2) { animation-delay: .04s; }
.bord-arret:nth-child(3) { animation-delay: .08s; }
.bord-arret:nth-child(4) { animation-delay: .12s; }
.bord-arret:nth-child(5) { animation-delay: .16s; }
.bord-arret:nth-child(6) { animation-delay: .2s; }
.bord-arret:nth-child(n+7) { animation-delay: .24s; }
.bord-point { justify-self: center; width: 14px; height: 14px; border: 3px solid var(--story-texte); border-radius: 50%; background: var(--story-fond, transparent); }
.bord-arret.est-montee .bord-point, .bord-arret.est-descente .bord-point { width: 20px; height: 20px; border-width: 4px; }
.bord-arret.est-descente .bord-point { background: var(--story-texte); }
.bord-nom { overflow: hidden; font-size: 16px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; transition: transform .35s var(--ease-out); }
.bord-arret.est-descente .bord-nom, .bord-arret.est-montee .bord-nom { font-weight: 800; }
.bord-heure { font-family: var(--titre); font-size: 16px; font-weight: 800; font-stretch: 84%; font-variant-numeric: tabular-nums; color: var(--story-doux); }
.bord-arret.est-passe { opacity: .42; }
.bord-arret.est-ici .bord-nom, .bord-arret.est-prochain .bord-nom { font-weight: 800; transform: translateX(3px); }
.bord-arret.est-prochain .bord-point { border-color: var(--signal); }
.bord-moi {
  position: absolute;
  top: 0;
  left: 13px;
  z-index: 2;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3.5px solid var(--encre);
  border-radius: 50%;
  background: var(--signal);
  transform: translateY(var(--y, 0));
  transition: transform .9s var(--ease-out);
}
.bord-moi::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: var(--signal); opacity: .35; animation: og-moi 1.4s ease-in-out infinite alternate; }
.bord-moi[hidden] { display: none; }

.bord-carte { position: relative; height: min(56dvh, 520px); overflow: hidden; border-radius: 24px; background: var(--papier); box-shadow: 0 16px 40px -20px rgb(0 0 0 / .5); animation: og-carte-ouvre .5s var(--ease-out) both; }
.bord-carte .tc { height: 100%; }
.bord-carte .carte-attribution { bottom: 8px; }
.bord-sortie { color: var(--story-texte); }
@keyframes og-carte-ouvre { from { transform: scale(.96); opacity: 0; } }

@media (max-height: 700px) {
  .bord-liste { --ligne: 42px; }
  .bord .story-numero { font-size: clamp(40px, 13vw, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .tc-montee .tc-onde, .attente-pin::after, .tc-vehicule.est-choisi .tc-vehicule-onde, .tc-moi-halo, .bord-moi::after { animation: none; opacity: 0; }
  .bord-moi, .tc-moi, .tc-etiquette, .option-plus, .option-plus-dedans, .bord-vue-curseur { transition: none; }
}