/* Inter (licence SIL OFL 1.1, fonts/Inter-OFL.txt), servie par le site : le meme rendu sur Mac,
   Windows et Android. Variable (100-900), jeu latin (accents, œ, espaces fines). En attendant
   qu'elle arrive, la police du systeme (swap) : le texte ne disparait jamais. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Le design du site. Une seule police (celle du systeme), une seule couleur d'accent, des surfaces
   calmes ; les couleurs ne disent que l'etat d'un train : vert a l'heure, orange en retard,
   rouge supprime ou tres en retard. Clair et sombre suivent le reglage de l'appareil. */

:root {
  --fond: #ffffff;
  --surface: #f5f5f7;
  --surface-2: #ffffff;
  --trait: rgba(0, 0, 0, 0.09);
  --texte: #1d1d1f;
  --second: #6e6e73;
  --discret: #6e6e73;
  --accent: #0071e3;
  --accent-fond: rgba(0, 113, 227, 0.1);
  --retard: #b85400;
  --retard-fond: #fff1e0;
  --grave: #c9001b;
  --grave-fond: #ffebee;
  --ok: #1a7f37;
  --ok-fond: #e8f5ec;
  --neutre-fond: #efeff2;
  --vig-jaune: #f5c400;
  --vig-orange: #ff8a00;
  --vig-rouge: #e5262f;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06);
  --rayon: 18px;
  --barre: 52px;
  --police: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #000000;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --trait: rgba(255, 255, 255, 0.12);
    --texte: #f5f5f7;
    --second: #a1a1a6;
    --discret: #8e8e93;
    --accent: #2997ff;
    --accent-fond: rgba(41, 151, 255, 0.16);
    --retard: #ffb340;
    --retard-fond: #3a2a12;
    --grave: #ff6961;
    --grave-fond: #3d1518;
    --ok: #30d158;
    --ok-fond: #10301a;
    --neutre-fond: #2c2c2e;
    --ombre: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 17px/1.47 var(--police); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--fond); padding: 8px 12px; border-radius: 8px; }
.evitement:focus { left: 8px; }
[hidden] { display: none !important; }
time, .h, .tag, .reponse-heure, .avis-valeur { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ la barre */
.barre {
  position: sticky; top: 0; z-index: 20; height: var(--barre);
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--trait);
}
.barre-dedans { height: 100%; display: flex; align-items: center; gap: 20px; padding: 0 20px; }
/* sur grand ecran, le logo s'aligne sur le texte de la colonne (48 px), pas au centre */
@media (min-width: 1000px) { .barre-dedans { padding: 0 48px; gap: 28px; } }
/* accueil : « a l'heure » efface puis « en retard » tape, un caractere a la fois */
.tape-curseur { display: inline-block; width: 0.07em; height: 0.95em; margin-left: 0.04em; vertical-align: -0.08em; background: var(--accent); animation: tape-cligne 1s steps(1) infinite; }
.tape-retard { color: var(--retard); }
@keyframes tape-cligne { 50% { opacity: 0; } }
.barre-accueil { display: flex; align-items: center; gap: 7px; color: var(--texte); }
.barre-accueil:hover { text-decoration: none; }
.barre-symbole { display: block; width: 24px; height: 24px; }
.barre-nom { font-size: 21px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.barre-liens { display: flex; gap: 22px; font-size: 14px; white-space: nowrap; }
@media (max-width: 480px) { .barre-dedans { gap: 16px; padding: 0 16px; } .barre-liens { gap: 16px; } .barre-lien-secondaire { display: none; } }
.barre-liens a { color: var(--second); }
.barre-liens a[aria-current] { color: var(--texte); font-weight: 600; }
.barre-liens a:hover { color: var(--texte); text-decoration: none; }
.icone { display: block; }
.bandeau { background: var(--retard-fond); color: var(--retard); font-size: 14px; padding: 10px 20px; text-align: center; }

/* ------------------------------------------------------------------ mise en page */
.page { max-width: 720px; margin: 0 auto; padding: 28px 20px 72px; }
.page-texte { max-width: 680px; }
.colonne { min-width: 0; }
.colonne-carte { display: none; }
.bloc-carte-mobile:empty { display: none; }
.bloc-carte-mobile { margin: 24px -20px 0; }
.bloc-carte-mobile .carte { height: 440px; border-radius: 0; }
@media (min-width: 1000px) {
  .page-carte { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
  .page-carte .colonne { padding: 36px 48px 72px; }
  .colonne-carte { display: block; position: sticky; top: var(--barre); height: calc(100vh - var(--barre)); border-left: 1px solid var(--trait); }
  .colonne-carte .carte { height: 100%; border-radius: 0; }
  .bloc-carte-mobile { display: none; }
}
@media (min-width: 1400px) { .page-carte { grid-template-columns: 680px minmax(0, 1fr); } }

.bloc { margin-top: 44px; }
.bloc > h2, .bloc > summary h2, .texte-section h2, .maintenant h2 {
  font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; margin-bottom: 14px;
}
.h2-date { font-weight: 400; color: var(--second); font-size: 17px; letter-spacing: -0.01em; margin-left: 6px; }
.note { margin-top: 36px; font-size: 13px; color: var(--discret); }
.vide { color: var(--second); padding: 8px 0; }
.liste-detail { color: var(--second); }
.rouge { color: var(--grave); }

/* ------------------------------------------------------------------ accueil */
.accueil-tete { padding-top: 12px; }
.accueil-titre { font-size: 40px; line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; }
.accueil-chapeau { margin-top: 12px; font-size: 19px; color: var(--second); line-height: 1.4; max-width: 34em; }
@media (max-width: 600px) { .accueil-titre { font-size: 32px; } .accueil-chapeau { font-size: 17px; } }

.trajet-form { position: relative; margin-top: 28px; display: grid; gap: 10px; }
.trajet-form-grand { background: var(--surface); padding: 14px; border-radius: 22px; }
.champ { position: relative; background: var(--surface-2); border-radius: 14px; border: 1px solid var(--trait); }
.trajet-form-grand .champ { border-color: transparent; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.champ label { position: absolute; left: 16px; top: 9px; font-size: 12px; font-weight: 600; color: var(--second); pointer-events: none; }
.champ input { width: 100%; border: 0; background: none; padding: 27px 16px 10px; font-size: 18px; border-radius: 14px; outline: none; }
.champ:focus-within { box-shadow: 0 0 0 3px var(--accent-fond); border-color: var(--accent); }
.champ input::placeholder { color: var(--discret); }
.inverser { position: absolute; right: 30px; top: 52px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--trait); background: var(--surface-2); color: var(--accent); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.trajet-form:not(.trajet-form-grand) .inverser { right: 14px; top: 40px; }
.bouton { margin-top: 4px; border: 0; border-radius: 14px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 600; padding: 15px 20px; cursor: pointer; }
.bouton:hover { filter: brightness(1.08); }
.bouton-discret { border: 0; background: var(--accent-fond); color: var(--accent); border-radius: 999px; padding: 7px 16px; font-weight: 600; font-size: 15px; cursor: pointer; }
.suggestions { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: var(--surface-2); border-radius: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.16); border: 1px solid var(--trait); max-height: 340px; overflow: auto; }
.suggestion { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.suggestion[aria-selected="true"], .suggestion:hover { background: var(--accent-fond); }
.suggestion-nom { font-weight: 500; }
.suggestion-detail { color: var(--second); font-size: 14px; white-space: nowrap; }
.numero-form { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 15px; color: var(--second); }
.numero-ligne { display: inline-flex; gap: 8px; }
.gare-form { margin-top: 10px; }
.gare-champ { position: relative; display: inline-block; }
.gare-form .gare-champ input { width: 220px; }
.gare-form .suggestions { right: auto; min-width: 300px; }
.numero-form input { width: 96px; border: 1px solid var(--trait); background: var(--surface-2); border-radius: 10px; padding: 6px 10px; font-size: 16px; }

.maintenant { margin-top: 44px; }
.maintenant-chiffres { font-size: 17px; color: var(--second); }
.maintenant-chiffres b { color: var(--texte); font-weight: 600; }
.maintenant-liste { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--trait); }
.maintenant-liste li a { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--trait); color: var(--texte); }
.maintenant-liste li a:hover { text-decoration: none; background: var(--surface); }
.maintenant-liste b { font-weight: 600; }
.maintenant-liste span { color: var(--second); font-size: 15px; }
.lien-fleche { display: inline-block; margin-top: 16px; font-weight: 500; }
.lien-reseau { margin-top: 28px; }
.lien-fleche::after { content: " ›"; }

/* ------------------------------------------------------------------ le train */
.train-nom { font-size: 15px; color: var(--second); }
.train-nom b { color: var(--texte); font-weight: 600; }
.train-titre { margin-top: 4px; font-size: 32px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; }
.train-etat { margin-top: 10px; font-size: 16px; display: flex; align-items: center; gap: 8px; color: var(--texte); }
.avertissement { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: var(--grave-fond); color: var(--grave); font-size: 15px; }
.avertissement-ok { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: var(--ok-fond); color: var(--ok); font-size: 15px; }
.avertissement a { color: inherit; font-weight: 600; text-decoration: underline; }
.train-etat-supprime { color: var(--grave); font-weight: 600; }
.train-etat-inconnu, .train-etat-arrive { color: var(--second); }
.vif { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; animation: vif 2s infinite; }
@keyframes vif { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .vif { animation: none; } }

.reponse { margin-top: 22px; padding: 16px; border-radius: 22px; background: var(--surface); }
.reponse-libelle { font-size: 15px; color: var(--second); }
.reponse-heure { font-size: 64px; line-height: 1; font-weight: 700; letter-spacing: -0.045em; margin-top: 10px; }
.reponse-heure-retard { color: var(--retard); }
.reponse-heure-supprime { color: var(--grave); font-size: 44px; letter-spacing: -0.03em; }
.reponse-sous { margin-top: 6px; color: var(--second); }
.reponse-sous s { color: var(--discret); }
@media (max-width: 600px) { .reponse { padding: 14px 12px; margin-left: -4px; margin-right: -4px; } .reponse-heure { font-size: 56px; } }
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.avis-valeur { white-space: nowrap; }
@media (max-width: 600px) {
  .avis { gap: 6px; }
  .avis-qui { font-size: 12px; line-height: 1.3; min-height: 2.6em; }
  .avis-valeur { font-size: 18px; letter-spacing: -0.03em; }
  .avis-detail { font-size: 12px; }
}
.avis-qui { font-size: 13px; color: var(--second); }
.avis-valeur { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; margin-top: 2px; }
.avis-nous .avis-valeur { color: var(--accent); }
.aide { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: var(--neutre-fond); color: var(--second); font: 600 11px/1 var(--police); cursor: help; vertical-align: 1px; }
.aide-bulle { position: absolute; z-index: 10; bottom: calc(100% + 8px); left: 50%; width: 230px; margin-left: -115px; padding: 10px 12px; border-radius: 12px; background: var(--texte); color: var(--fond); font: 400 13px/1.4 var(--police); text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,0.2); opacity: 0; visibility: hidden; transition: opacity 0.15s; pointer-events: none; }
.aide:hover .aide-bulle, .aide:focus-visible .aide-bulle, .aide.ouverte .aide-bulle { opacity: 1; visibility: visible; }
/* cachee, la bulle ne doit occuper aucune place (elle faisait deborder la page sur telephone) */
.aide-bulle { display: none; }
.aide:hover .aide-bulle, .aide:focus-visible .aide-bulle, .aide.ouverte .aide-bulle { display: block; }
.aide::before { content: ""; position: absolute; inset: -14px; }  /* cible de 44 px au doigt */
@media (max-width: 600px) {
  .aide-bulle { position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; width: auto; margin: 0; z-index: 50; }
}
.avis-fort { color: var(--retard); }
.avis-vide { color: var(--discret) !important; }
.avis-detail { font-size: 13px; color: var(--second); margin-top: 2px; }
.axe { margin: 22px 0 0; }
.axe svg { display: block; width: 100%; height: auto; overflow: visible; }
.axe-rail { stroke: var(--trait); stroke-width: 2; }
.axe-trait { stroke: var(--discret); stroke-width: 1; }
.axe-heure { font-size: 12px; fill: var(--discret); }
.axe-bande { fill: var(--accent); opacity: 0.2; }
.axe-nous { fill: var(--accent); }
.axe-prevu { stroke: var(--second); stroke-width: 1.5; stroke-dasharray: 2 3; }
.axe-sncf { fill: var(--surface-2); stroke: var(--texte); stroke-width: 2; }
.axe-etiquette { font-size: 12px; fill: var(--second); }
.axe-etiquette-nous { fill: var(--accent); font-weight: 600; }
.reponse-phrase { margin-top: 16px; font-size: 16px; }
.index-bloc h2 { font-size: 20px; }
.index-liste { list-style: none; margin: 0; padding: 0; columns: 2 220px; column-gap: 28px; }
.index-liste li { break-inside: avoid; padding: 5px 0; }
.index-detail { font-size: 13px; color: var(--second); }
.compensation { margin: 8px 4px 0; font-size: 13px; line-height: 1.5; color: var(--second); }
.compensation b { color: var(--texte); font-weight: 600; }
.reponse-resume { margin: 10px 4px 0; font-size: 13px; line-height: 1.5; color: var(--second); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.duo-carte { background: var(--surface-2); border-radius: 16px; padding: 14px 16px 15px; }
.duo-qui { font-size: 13px; color: var(--second); display: flex; align-items: center; gap: 4px; }
.duo-heure { margin-top: 4px; font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.duo-retard { color: var(--retard); }
.duo-nous .duo-heure { color: var(--accent); }
/* la fourchette « 16:28 – 16:47 » : meme graisse, un peu plus petite pour tenir dans la carte */
.duo-fourchette { font-size: 34px; white-space: nowrap; }
.duo-tiret { margin: 0 0.12em; font-weight: 400; opacity: 0.6; }
.duo-a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.duo-vide { color: var(--discret) !important; }
.duo-detail { margin-top: 4px; font-size: 14px; color: var(--second); font-variant-numeric: tabular-nums; }
.duo-detail b { color: var(--retard); font-weight: 600; }
.risque { margin-top: 12px; font-size: 14px; color: var(--second); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.risque b { color: var(--texte); font-weight: 700; }
.risque-fort b { color: var(--retard); }
@media (max-width: 600px) { .duo-heure { font-size: 32px; } .duo-carte { padding: 12px 12px 13px; } .duo-qui { font-size: 12px; } .duo-fourchette { font-size: 28px; } .duo-haute { display: block; } .duo-tiret { display: none; } .duo-a { position: static; width: auto; height: auto; clip: auto; font-size: 17px; font-weight: 500; opacity: 0.75; } }
.reponse-suite { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--trait); display: flex; align-items: center; gap: 10px; }
.reponse-suite span:first-child { flex: 1; color: var(--second); }
.descente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -2px 0 14px; font-size: 15px; color: var(--second); }
.descente select { border: 1px solid var(--trait); background: var(--surface-2); color: var(--texte); border-radius: 10px; padding: 7px 30px 7px 12px; cursor: pointer; font-weight: 600; font-size: 16px; max-width: 100%; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--second) 50%), linear-gradient(135deg, var(--second) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }

.pourquoi { margin-bottom: 12px; }
.source { color: var(--discret); font-size: 14px; }

.problemes { list-style: none; margin: 0; padding: 0; }
.probleme { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--trait); }
.probleme:first-child { border-top: 0; padding-top: 2px; }
.probleme-icone { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.probleme-sncf { background: var(--grave-fond); color: var(--grave); }
.probleme-orange { background: var(--retard-fond); color: var(--retard); }
.probleme-ok { background: var(--ok-fond); color: var(--ok); }
.probleme-titre { font-weight: 600; }
.probleme-texte { margin-top: 4px; font-size: 15px; }
.probleme-texte-simple { margin-top: 4px; font-size: 15px; color: var(--second); }
.probleme-detail { margin-top: 3px; font-size: 14px; color: var(--second); }
.probleme-effet { margin-top: 6px; font-size: 15px; }
.problemes-gare { margin-top: 20px; padding: 6px 16px; background: var(--surface); border-radius: var(--rayon); }
.problemes-gare .probleme:first-child { padding-top: 12px; }
.puce-vig { width: 32px; height: 32px; border-radius: 10px; display: inline-block; position: relative; flex: none; }
.puce-vig::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; }
.puce-vig-jaune { background: color-mix(in srgb, var(--vig-jaune) 22%, transparent); }
.puce-vig-jaune::after { background: var(--vig-jaune); }
.puce-vig-orange { background: color-mix(in srgb, var(--vig-orange) 20%, transparent); }
.puce-vig-orange::after { background: var(--vig-orange); }
.puce-vig-rouge { background: color-mix(in srgb, var(--vig-rouge) 18%, transparent); }
.puce-vig-rouge::after { background: var(--vig-rouge); }
small .puce-vig, .maintenant-liste .puce-vig { width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
small .puce-vig::after, .maintenant-liste .puce-vig::after { inset: 0; }

.trains-voie, .liste-simple { list-style: none; margin: 10px 0 0; padding: 0; }
.trains-voie li a, .liste-simple li > a, .liste-simple li > span { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; color: var(--texte); border-bottom: 1px solid var(--trait); font-size: 15px; }
.liste-simple li > a > span:first-child { flex: 1; }
.trains-voie li a:hover, .liste-simple li a:hover { text-decoration: none; color: var(--accent); }
.js [data-plus-liste]:not(.deplie) > [data-plus-item] { display: none; }
.plus { margin-top: 6px; border: 0; background: none; color: var(--accent); font-size: 15px; font-weight: 500; padding: 8px 0; cursor: pointer; }
.plus:hover { text-decoration: underline; }

/* les annonces SNCF, sous l'encart : une ligne repliee (« changee N fois »), la liste au toucher */
.annonces-bloc { margin: 12px 0 0; border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.annonces-ligne { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; font-size: 15px; }
.annonces-bloc .annonces-ligne { margin: 0; cursor: pointer; list-style: none; }
.annonces-bloc .annonces-ligne::-webkit-details-marker { display: none; }
.annonces-ligne > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.annonces-sous { font-size: 13px; color: var(--second); }
.annonces-badge { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--retard-fond); color: var(--retard); font-weight: 700; font-size: 14px; }
.annonces-badge-calme { background: var(--neutre-fond); color: var(--second); }
.annonces-ligne .chevron { flex: none; color: var(--discret); transition: transform 0.15s; }
.annonces-bloc[open] .chevron { transform: rotate(90deg); }
.annonces-liste { list-style: none; margin: 0; padding: 4px 14px 10px; border-top: 1px solid var(--trait); }
.annonces-liste li { display: grid; grid-template-columns: 52px 18px 1fr; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.annonces-liste time { color: var(--second); }
.annonces-liste .annonce-sens { text-align: center; font-weight: 700; }
.annonce-retard { color: var(--retard); }
.annonce-ok { color: var(--ok); }
.annonce-maintenant { font-weight: 600; }
.annonces { list-style: none; margin: 0; padding: 0; }
.annonces li { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 7px 0; }
.annonces time { color: var(--second); }
.annonces .hausse { color: var(--retard); }

.arrets { list-style: none; margin: 0; padding: 0; }
.arret { display: grid; grid-template-columns: 64px 20px 1fr auto; column-gap: 12px; align-items: start; min-height: 58px; }
.arret-heure { text-align: right; font-size: 16px; padding-top: 1px; }
.arret-heure .h { display: flex; flex-direction: column; align-items: flex-end; }
.arret-rail { position: relative; align-self: stretch; }
.arret-rail::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 4px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.arret-passe .arret-rail::before { background: var(--trait); }
.arret:first-child .arret-rail::before { top: 10px; }
.arret:last-child .arret-rail::before { bottom: auto; height: 10px; }
.arret-rond { position: absolute; left: 2px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--fond); border: 3px solid var(--accent); z-index: 1; }
.arret-passe .arret-rond { border-color: var(--discret); }
.arret-ici .arret-rond { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-fond); }
.arret-train { position: absolute; left: 0; top: 38px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--fond); box-shadow: 0 0 0 1px var(--accent); z-index: 2; }
.arret-nom { padding-bottom: 16px; }
.arret-nom a { color: var(--texte); font-weight: 500; }
.arret-passe .arret-nom a { color: var(--second); font-weight: 400; }
.arret-supprime .arret-nom a { text-decoration: line-through; }
.bloc-arrets { margin-top: 28px; }
.arret-hors .arret-nom a, .arret-hors .arret-heure { color: var(--discret); font-weight: 400; }
.arret-hors .arret-rail::before { background: var(--trait); }
.arret-hors .arret-rond { border-color: var(--trait); width: 12px; height: 12px; left: 4px; top: 6px; border-width: 2px; }
.arret-montee .arret-nom a, .arret-descente .arret-nom a { font-weight: 700; }
.arret-montee .arret-rond, .arret-descente .arret-rond { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-fond); }
.arret-vous { color: var(--accent) !important; font-weight: 600; }
.arret-estime { color: var(--accent) !important; }
.arret-nom small { display: block; color: var(--second); font-size: 13px; margin-top: 1px; }


/* le parcours : les arrets en points, le train entre deux ; defile en largeur, avec les noms */
.parcours { margin-top: 18px; }
.parcours-defile { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; margin: 0 -4px; padding: 0 4px 6px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
.parcours-ligne { list-style: none; margin: 0; padding: 0 52px; display: flex; min-width: 100%; width: max-content; }
.pa { flex: 1 0 104px; position: relative; height: 70px; }
.pa:last-child { flex: 0 0 0; }
.pa::after { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 4px; background: color-mix(in srgb, var(--accent) 35%, transparent); }
.pa:last-child::after { display: none; }
.pa-passe::after { background: var(--trait); }
.pa-en-cours::after { background: linear-gradient(90deg, var(--trait) var(--f), color-mix(in srgb, var(--accent) 35%, transparent) var(--f)); }
.parcours-perso .pa-hors::after, .parcours-perso .pa:not(.pa-hors):has(+ .pa-hors)::after { background: none; border-top: 2px dashed var(--trait); height: 0; top: 12px; }
.pa-point { position: absolute; left: 0; top: 13px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--fond); border: 3px solid var(--accent); z-index: 1; }
.pa-passe .pa-point { border-color: var(--discret); }
.pa-cle .pa-point { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
.pa-hors .pa-point { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 2px; border-color: var(--discret); }
.pa-supprime .pa-point { border-style: dashed; border-color: var(--grave); }
.pa-ici .pa-point { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-fond); }
.pa-train { position: absolute; left: var(--f); top: 13px; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); border: 3px solid var(--fond); box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px var(--accent-fond); z-index: 2; }
.pa-texte { position: absolute; left: 0; top: 26px; width: 96px; margin-left: -48px; text-align: center; display: grid; gap: 1px; color: var(--texte); font-size: 12.5px; line-height: 1.25; }
.pa-texte:hover { text-decoration: none; }
.pa-texte:hover .pa-nom { text-decoration: underline; }
.pa-nom { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-h { color: var(--second); font-variant-numeric: tabular-nums; font-size: 12px; }
.pa-passe .pa-texte, .pa-hors .pa-texte { color: var(--discret); }
.pa-cle .pa-nom { font-weight: 700; }
.pa-supprime .pa-nom { text-decoration: line-through; }
.parcours-prochain { margin-top: 8px; font-size: 15px; }
.parcours-prochain .vif { display: inline-block; margin-right: 8px; vertical-align: 1px; }
.pa-f1 { --f: 5%; }
.pa-f2 { --f: 10%; }
.pa-f3 { --f: 15%; }
.pa-f4 { --f: 20%; }
.pa-f5 { --f: 25%; }
.pa-f6 { --f: 30%; }
.pa-f7 { --f: 35%; }
.pa-f8 { --f: 40%; }
.pa-f9 { --f: 45%; }
.pa-f10 { --f: 50%; }
.pa-f11 { --f: 55%; }
.pa-f12 { --f: 60%; }
.pa-f13 { --f: 65%; }
.pa-f14 { --f: 70%; }
.pa-f15 { --f: 75%; }
.pa-f16 { --f: 80%; }
.pa-f17 { --f: 85%; }
.pa-f18 { --f: 90%; }
.pa-f19 { --f: 95%; }

/* ------------------------------------------------------------------ heures et etats */
.h-retard { color: var(--retard); font-weight: 600; }
.h-prevu { color: var(--discret); font-size: 0.8em; text-decoration: line-through; }
.tag { display: inline-block; flex: none; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.35; }
.tag-ok { background: var(--ok-fond); color: var(--ok); }
.tag-retard { background: var(--retard-fond); color: var(--retard); }
.tag-supprime { background: var(--grave-fond); color: var(--grave); }
.tag-prevu, .tag-inconnu { background: var(--neutre-fond); color: var(--second); font-weight: 500; }

/* ------------------------------------------------------------------ listes de trains */
.courses { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.course { border-bottom: 1px solid var(--trait); }
.course-lien { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 4px; color: var(--texte); }
.course-lien:hover { text-decoration: none; background: var(--surface); }
.course-heures { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 10px; }
.course-heures .h { display: inline-flex; align-items: baseline; gap: 6px; }
.course-arr { font-weight: 400; color: var(--second); }
.course-arr .h-retard { color: var(--retard); }
.course-fleche { color: var(--discret); font-weight: 400; }
.course-etat { justify-self: end; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.course-estime { font-size: 12px; color: var(--accent); font-weight: 600; }
.course-detail { grid-column: 1 / -1; font-size: 14px; color: var(--second); }
.course-lieu { grid-column: 1 / -1; font-size: 16px; font-weight: 500; }
.course-supprime .course-heures { color: var(--discret); text-decoration: line-through; }
.course-inconnu .course-heures { color: var(--second); }
/* gare : une ligne d'horaire dense — heure | provenance ou destination | etat */
.courses-gare .course-lien { grid-template-columns: 4.6em 1fr auto; gap: 1px 12px; padding: 9px 4px 9px 10px; align-items: baseline; }
.courses-gare .course-heures { grid-row: 1 / 3; font-size: 17px; align-self: start; }
.courses-gare .course-heures .h { flex-direction: column; gap: 0; }
.courses-gare .h-prevu { font-size: 13px; font-weight: 400; color: var(--discret); }
.courses-gare .course-lieu { grid-column: 2; font-size: 15px; }
.courses-gare .course-etat { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.courses-gare .course-detail { grid-column: 2; font-size: 13px; }
.course-attendu { box-shadow: inset 3px 0 0 var(--retard); background: var(--retard-fond); }
.course-attendu-texte { color: var(--retard); font-weight: 600; }
@media (max-width: 600px) { .course-gares { display: none; } }

.modifier { margin-bottom: 18px; }
.modifier summary { cursor: pointer; color: var(--accent); font-size: 15px; font-weight: 500; list-style: none; }
.modifier summary::-webkit-details-marker { display: none; }
.trajet-titre { font-size: 32px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; }
.trajet-resume { margin-top: 8px; color: var(--second); }

.repli > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary h2 { margin: 0; }
.repli .chevron { color: var(--discret); transition: transform 0.2s; }
.repli[open] .chevron { transform: rotate(90deg); }
.repli[open] > summary { margin-bottom: 14px; }

/* accueil : une carte, trois recherches (trajet, numero, gare) en onglets */
.recherche { margin-top: 28px; background: var(--surface); padding: 6px 14px 14px; border-radius: 22px; }
.recherche .onglets-boutons { display: flex; width: 100%; box-sizing: border-box; margin-top: 8px; background: var(--neutre-fond); }
.recherche .onglets-boutons button { flex: 1; padding: 8px 6px; white-space: nowrap; }
.recherche .trajet-form-grand { background: none; padding: 0; margin-top: 12px; }
.recherche.onglets-actifs .onglet { margin-top: 0; }
.recherche .gare-form { margin-top: 12px; }
.recherche .gare-form .suggestions { right: 0; min-width: 0; }
.recherche:not(.onglets-actifs) .onglet + .onglet { margin-top: 18px; }
/* onglets de la gare (controle segmente) */
.gare-tete + .bloc-carte-mobile, .onglets { margin-top: 24px; }
.onglets-boutons { display: inline-flex; background: var(--surface); border-radius: 10px; padding: 3px; gap: 2px; }
.onglets-boutons button { border: 0; background: none; padding: 7px 18px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--second); cursor: pointer; }
.onglets-boutons button[aria-selected="true"] { background: var(--surface-2); color: var(--texte); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.onglets-actifs .onglet-titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.onglets-actifs .onglet { margin-top: 16px; }
.onglet-titre { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 12px; }

.lignes-etat { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.bloc-premier { margin-top: 28px; }
.page-large { max-width: 1180px; }
.deux-colonnes { display: grid; grid-template-columns: 1fr; column-gap: 56px; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bloc-aide { margin: -6px 0 14px; font-size: 14px; color: var(--second); }
.ligne-incident { color: var(--grave); }
.ligne-incident b { font-weight: 600; }
.ligne-etat > a, .ligne-etat > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--trait); color: var(--texte); }
.ligne-etat > a:hover { text-decoration: none; background: var(--surface); }
.ligne-nom { font-weight: 600; }
.ligne-pastille { justify-self: end; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ligne-normal .ligne-pastille { background: var(--ok-fond); color: var(--ok); }
.ligne-retards .ligne-pastille { background: var(--retard-fond); color: var(--retard); }
.ligne-perturbe .ligne-pastille { background: var(--grave-fond); color: var(--grave); }
.ligne-vide .ligne-pastille { background: var(--neutre-fond); color: var(--second); font-weight: 500; }
.ligne-vide .ligne-nom { color: var(--second); font-weight: 500; }
.ligne-detail { grid-column: 1 / -1; font-size: 14px; color: var(--texte); }
.ligne-detail-calme { color: var(--second); }
.incidents { list-style: none; margin: 0; padding: 0; }
.incident { padding: 18px 0; border-top: 1px solid var(--trait); scroll-margin-top: calc(var(--barre) + 12px); }
.incident:first-child { border-top: 0; padding-top: 0; }

/* ------------------------------------------------------------------ la carte */
.carte { position: relative; width: 100%; height: 420px; background: var(--surface); overflow: hidden; }
.carte-fond, .carte-fond.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte-sans-js { position: absolute; inset: 0; display: grid; place-items: center; color: var(--second); }
.carte-legende { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: grid; gap: 4px; padding: 9px 12px; border-radius: 12px; font-size: 12px; color: var(--second); background: color-mix(in srgb, var(--fond) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ombre); }
.carte-legende span { display: flex; align-items: center; gap: 8px; }
.leg { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.leg-trace { background: var(--accent); }
.leg-fait { background: #a1a1a8; }
.leg-hors { background: repeating-linear-gradient(90deg, #a1a1a8 0 3px, transparent 3px 6px); height: 3px; }
.leg-vig { height: 10px; background: color-mix(in srgb, var(--vig-orange) 35%, transparent); border: 1px solid var(--vig-orange); }
.leg-ok, .leg-retard, .leg-grave { width: 10px; height: 10px; border-radius: 50%; }
.leg-ok { background: #1d8a3f; } .leg-retard { background: #d26a00; } .leg-grave { background: #d70015; }
@media (max-width: 999px) { .carte-legende { font-size: 11px; padding: 7px 10px; } }
.marqueur-train { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); }
.marqueur-train::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, transparent); z-index: -1; animation: vif-carte 2.4s infinite; }
@keyframes vif-carte { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .marqueur-train::after { animation: none; } }
.marqueur-fleche { position: absolute; left: 50%; top: -13px; margin-left: -6px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid var(--accent); }
.maplibregl-popup-content { border-radius: 14px !important; padding: 0 !important; box-shadow: 0 8px 30px rgba(0,0,0,0.2) !important; background: var(--surface-2) !important; }
.maplibregl-popup-tip { border-top-color: var(--surface-2) !important; border-bottom-color: var(--surface-2) !important; }
.bulle { display: grid; gap: 2px; padding: 12px 14px; color: var(--texte); font: 14px/1.35 var(--police); }
.bulle:hover { text-decoration: none; }
.bulle span { color: var(--second); }
.bulle .bulle-retard { color: var(--texte); font-weight: 600; }
.bulle .bulle-lien { color: var(--accent); margin-top: 4px; font-weight: 500; }
.maplibregl-ctrl-attrib { font-size: 11px; }

/* ------------------------------------------------------------------ pages de texte */
.texte-tete { margin-bottom: 8px; }
.chapeau { margin-top: 12px; font-size: 19px; color: var(--second); }
.texte-section { margin-top: 40px; }
.texte-section p + p, .texte-section p + details, .texte-section details + p { margin-top: 12px; }
.texte-essentiel { font-size: 19px; font-weight: 500; }
.liste { padding-left: 20px; } .liste li + li { margin-top: 8px; }
.tableau { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.tableau caption { text-align: left; color: var(--second); padding-bottom: 8px; }
.tableau th, .tableau td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau thead th { color: var(--second); font-weight: 500; }
.groupe { margin: 0; }
.groupe-ligne { display: grid; grid-template-columns: 200px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.groupe-ligne dt { color: var(--second); } .groupe-ligne dd { margin: 0; }
.a-completer { color: var(--retard); font-style: italic; }
.contact { margin-top: 28px; display: grid; gap: 16px; }
.contact-champ { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.contact-champ small { font-weight: 400; color: var(--second); }
.contact-champ input, .contact-champ textarea { font: inherit; font-weight: 400; font-size: 17px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface-2); color: var(--texte); resize: vertical; }
.contact-champ input:focus, .contact-champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-fond); }
.contact .bouton { justify-self: start; padding: 13px 28px; }
.erreur { max-width: 560px; }
.erreur .trajet-form { margin-top: 28px; }
.erreur-retour { margin-top: 24px; }

.chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.chiffre { background: var(--surface); border-radius: var(--rayon); padding: 20px; }
.chiffre-valeur { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--accent); }
.chiffre-valeur span { font-size: 20px; letter-spacing: -0.02em; font-weight: 600; }
.chiffre-texte { margin-top: 10px; font-size: 15px; color: var(--second); }
@media (max-width: 600px) { .chiffres { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ le pied */
.pied { border-top: 1px solid var(--trait); background: var(--surface); color: var(--second); font-size: 12px; }
.pied-dedans { max-width: 1600px; margin: 0 auto; padding: 22px 20px 34px; display: grid; gap: 8px; }
.pied-fraicheur { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pied-liens { display: flex; gap: 18px; }
.pied-liens a { color: var(--second); }
.page-carte ~ .pied { position: relative; z-index: 1; }

/* page d'un train : un peu d'air entre les blocs (titre, frise, prochain arret, reponse, annonces,
   resume, dedommagement) */
.train-tete .train-titre { margin-top: 4px; }
.train-tete .parcours { margin-top: 26px; }
.parcours-prochain { margin-top: 14px; }
.reponse { margin-top: 30px; }
.annonces-bloc, .annonces-ligne { margin-top: 18px; }
.reponse-resume { margin-top: 16px; }
.compensation { margin-top: 12px; }

/* le risque : le libelle a gauche, le chiffre a droite (il ne passe jamais seul a la ligne) */
.risque { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 6px; }
.risque-libelle { flex: 0 1 auto; }
@media (max-width: 600px) { .risque-libelle { flex: 1; } }
.risque b { white-space: nowrap; }

/* le niveau du risque, a cote du pourcentage */
.niveau { flex: none; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.niveau-faible { background: var(--ok-fond); color: var(--ok); }
.niveau-modere { background: var(--retard-fond); color: var(--retard); }
.niveau-eleve { background: var(--grave-fond); color: var(--grave); }
.risque b.pourcent-faible { color: var(--ok); }
.risque b.pourcent-modere { color: var(--retard); }
.risque b.pourcent-eleve { color: var(--grave); }