/* =============================================================
   Style de la carte
   Toutes les couleurs sont regroupées ici, en haut du fichier.
   ============================================================= */
:root {
  --nuit: #0B1E2D;       /* couleur de la marque : logo, tableau des gares */
  --encre: #14324A;      /* textes principaux */
  --doux: #5D7385;       /* textes secondaires */
  --panneau: #FFFFFF;
  --trait: #E2E8EE;
  --survol: #EEF3F7;
  --voie: #8FA6B8;
  --ok: #1B76B3;         /* à l'heure */
  --leger: #F08C00;      /* petit retard */
  --fort: #D32F2F;       /* gros retard */
  --prevu: #6F8597;      /* sans info en direct */
  --ombre: 0 12px 40px rgba(11, 30, 45, .22);
  --chiffres: 'Barlow Condensed', 'Barlow', 'Arial Narrow', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --encre: #E6EEF4;
    --doux: #93A9BA;
    --panneau: #10212F;
    --trait: #22384A;
    --survol: #18304A;
    --voie: #4F6A80;
    --ombre: 0 12px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
/* Sur iPhone, la page entière ne doit jamais glisser vers le haut (elle cachait l'heure) */
body { position: fixed; inset: 0; width: 100%; overscroll-behavior: none; }
body {
  font-family: 'Barlow', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--encre); background: var(--nuit);
  -webkit-font-smoothing: antialiased;
}
#carte { position: absolute; inset: 0; background: var(--survol); }
.fond-satellite #carte { background: var(--nuit); }
.masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--leger); outline-offset: 2px; }
svg { stroke-linecap: round; stroke-linejoin: round; }

/* ----- Écran d'ouverture ----- */
.ouverture {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-content: center; justify-items: center; gap: 4px;
  background: var(--nuit); color: #fff;
  transition: opacity .5s ease, visibility .5s;
}
.ouverture.cache { opacity: 0; visibility: hidden; }
.ouverture img { margin-bottom: 14px; }
.ouverture-nom { margin: 0; font-family: var(--chiffres); font-size: 2.4rem; font-weight: 700; letter-spacing: .02em; }
.ouverture-slogan { margin: 0; color: #93A9BA; }

/* ----- Le panneau : feuille à glisser (mobile), colonne (ordinateur) ----- */
.feuille {
  position: fixed; z-index: 1000;
  left: 0; right: 0; bottom: 0;
  /* Le panneau a toujours la hauteur "plein écran" : on le fait glisser
     vers le bas pour le réduire (plus fluide que de changer sa taille). */
  height: var(--hauteur-pleine, 90vh);
  transform: translate3d(0, var(--decalage, 70vh), 0);
  will-change: transform;
  overflow-y: hidden; overscroll-behavior: contain;
  background: var(--panneau);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--ombre);
  padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  touch-action: pan-x;
}
.feuille.pleine { overflow-y: auto; touch-action: pan-y; }
.feuille.glisse { transition: none; }
.poignee {
  position: sticky; top: 0; z-index: 2;
  margin: 0 -20px; height: 44px; /* zone assez grande pour le pouce */
  display: grid; place-items: center;
  background: var(--panneau); cursor: grab; touch-action: none;
}
.poignee span { width: 46px; height: 5px; border-radius: 3px; background: var(--trait); transition: width .2s; }
.feuille.glisse .poignee span { width: 60px; background: var(--doux); }

@media (min-width: 760px) {
  .feuille, .feuille.reduite, .feuille.pleine {
    top: 16px; left: 16px; bottom: 16px; right: auto;
    width: 390px; height: auto; overflow-y: auto;
    transform: none; touch-action: auto;
    border-radius: 20px; padding: 22px 24px 24px;
  }
  .poignee { display: none; }
}

/* ----- En-tête : logo, nom, indicateur en direct ----- */
.marque { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.marque img { border-radius: 9px; flex: none; }
h1 { margin: 0; font-family: var(--chiffres); font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: .01em; }
h2 { margin: 4px 0 2px; font-size: 1.45rem; font-weight: 700; line-height: 1.2; }
.direct { margin: 3px 0 0; display: flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--doux); }
.point-direct { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--prevu); flex: none; }
.direct.actif .point-direct { background: var(--ok); }
.direct.actif .point-direct::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--ok); animation: pulsation 2s ease-out infinite;
}
.direct.panne .point-direct { background: var(--fort); }
@keyframes pulsation { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

.resume { margin: 6px 0 14px; color: var(--doux); font-size: 1.02rem; min-height: 1.4em; }
.resume strong { color: var(--encre); font-weight: 600; }
.sous-titre { margin: 0 0 14px; color: var(--doux); }
.etat { margin: 14px 0 0; font-size: .85rem; color: var(--fort); }

/* ----- Chargement : barres qui scintillent ----- */
.squelette {
  display: inline-block; height: .9em; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(90deg, var(--survol) 25%, var(--trait) 50%, var(--survol) 75%);
  background-size: 300% 100%; animation: scintille 1.4s linear infinite;
}
@keyframes scintille { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ----- Recherche ----- */
.recherche { position: relative; }
.loupe { position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; fill: none; stroke: var(--doux); stroke-width: 2.2; pointer-events: none; }
.recherche input {
  width: 100%; padding: 12px 14px 12px 40px;
  font: inherit; font-size: 1rem; color: var(--encre);
  background: var(--survol); border: 1.5px solid transparent; border-radius: 12px;
}
.recherche input:focus { outline: none; border-color: var(--doux); background: var(--panneau); }
.resultats { list-style: none; margin: 6px 0 0; padding: 0; }
.resultats button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: none; font-size: 1rem; }
.resultats button:hover, .resultats button:focus-visible { background: var(--survol); }
.vide { color: var(--doux); padding: 12px 0; list-style: none; }

/* ----- Légende ----- */
.legende { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; font-size: .9rem; color: var(--doux); }
.legende li { display: flex; align-items: center; gap: 8px; }
.legende .train { min-width: 24px; }
.legende .train { position: static; transform: none; flex: none; }

/* ----- Réglage : trains sans info en direct ----- */
.interrupteur { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: .92rem; color: var(--doux); cursor: pointer; }
.interrupteur input { width: 18px; height: 18px; accent-color: var(--ok); }

/* ----- Les trains sur la carte : pastille + flèche de direction ----- */
.leaflet-div-icon.icone-train { background: none; border: none; }
.train-icone { position: relative; width: 0; height: 0; color: var(--ok); }
/* Paquet de trains au même endroit : les autres pastilles, rangées derrière */
.icone-train.dessous .train {
  transform: translate(calc(-50% + var(--rang) * 5px), calc(-50% - var(--rang) * 5px)) scale(.9);
  pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.icone-train.dessous .train > :not(.compte), .icone-train.dessous .cap, .icone-train.dessous .train::after { visibility: hidden; }
.icone-train .train { transition: transform .2s ease-out; }
/* Le petit chiffre sur la pastille de devant */
.train .compte { position: absolute; top: -8px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: #0B1E2D; color: #fff; border: 1.5px solid #fff;
  font: 700 10px/13px var(--chiffres); font-style: normal; text-align: center; box-sizing: border-box; }
.train .compte:empty { display: none; }
.zoom-loin .train-icone:not(.choisi) .train .compte { display: none; }
/* La petite liste pour choisir un train dans le paquet */
.choix-paquet { position: absolute; z-index: 800; min-width: 210px; max-width: 280px; padding: 6px;
  background: var(--panneau); color: var(--encre); border: 1px solid var(--trait); border-radius: 14px;
  box-shadow: var(--ombre); }
.choix-paquet .choix-titre { margin: 4px 8px 6px; font-size: 12px; font-weight: 600; color: var(--doux); }
.choix-paquet ul { list-style: none; margin: 0; padding: 0; }
.choix-paquet button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 8px;
  border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.choix-paquet button:hover, .choix-paquet button:focus-visible { background: var(--survol); outline: none; }
.choix-paquet .train.mini { position: static; transform: none; flex: none; min-width: 26px; height: 22px; padding: 0 5px; cursor: inherit; }
.choix-paquet .choix-texte { display: flex; flex-direction: column; min-width: 0; }
.choix-paquet .choix-texte strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.choix-paquet .choix-texte small { font-size: 12px; color: var(--doux); }
@media (prefers-reduced-motion: reduce) { .train-icone, .icone-train .train { transition: none; } }
.train-icone.leger { color: var(--leger); }
.train-icone.fort { color: var(--fort); }
.train-icone.prevu { color: var(--prevu); }
.cap {
  position: absolute; left: -18px; top: -18px; width: 36px; height: 36px;
  transform: rotate(var(--cap, 0deg));
  pointer-events: none;
}
.cap.inconnu { display: none; }
/* la pointe, devant le train */
.cap::before {
  content: ''; position: absolute; left: 12px; top: -4px;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-bottom: 8px solid currentColor;
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9));
}
/* la traînée, derrière le train */
.cap::after {
  content: ''; position: absolute; left: 16px; top: 28px; width: 4px; height: 20px;
  border-radius: 2px; background: linear-gradient(currentColor, transparent); opacity: .55;
}
.train {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 24px; height: 22px; padding: 0 5px;
  border-radius: 11px; border: 2px solid #fff;
  color: #fff; font-family: var(--chiffres); font-weight: 700; font-size: 12px; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 5px rgba(0,0,0,.4);
  transform: translate(-50%, -50%);
  white-space: nowrap; cursor: pointer;
}
.train b { font-weight: 700; }
.train .coche { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.zoom-loin .train-icone:not(.choisi) .train .coche { display: none; }
/* Le mini train : même couleur que le texte de la pastille */
.train .glyphe { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.train.prevu { color: var(--prevu); }
/* Vue très éloignée : simple rond coloré, sans le dessin ni le chiffre */
.zoom-loin .train-icone:not(.choisi) .train { min-width: 14px; width: 14px; height: 14px; padding: 0; }
.zoom-loin .train-icone:not(.choisi) .train .glyphe,
.zoom-loin .train-icone:not(.choisi) .train b { display: none; }
.zoom-loin .train-icone:not(.choisi) .cap { transform: rotate(var(--cap, 0deg)) scale(.8); }
.train.ok { background: var(--ok); }
.train.leger { background: var(--leger); color: #14324A; }
.train.fort { background: var(--fort); }
.train.prevu { background: #fff; border: 2px dashed var(--prevu); }
.train-icone.choisi .train { min-width: 32px; height: 28px; border-radius: 14px; font-size: 14px; border-width: 3px; padding: 0 7px; box-shadow: 0 0 0 5px rgba(11, 30, 45, .35), 0 2px 8px rgba(0,0,0,.4); }
.train-icone.choisi .cap { transform: rotate(var(--cap, 0deg)) scale(1.35); }

/* Train plus en retard qu'annoncé : anneau orange qui pulse, pas de flèche */
.train-icone.attente .cap { display: none; }
.train.attente::after {
  content: ''; position: absolute; inset: -6px; border-radius: 14px;
  border: 2px solid var(--leger); animation: pulsation 1.6s ease-out infinite;
}
.legende .train.attente { position: relative; }
.legende .train.attente::after { inset: -4px; }

/* Info en direct ancienne (plus de 5 min) : pastille estompée */
.train-icone.ancien { opacity: .55; }
.train-icone.ancien.choisi { opacity: 1; }

/* ----- Boutons de la carte, regroupés ----- */
.commandes {
  display: flex; flex-direction: column;
  background: var(--panneau); border-radius: 14px; box-shadow: var(--ombre); overflow: hidden;
  margin-top: calc(12px + env(safe-area-inset-top, 0px)) !important; margin-right: 12px !important;
}
.commandes button {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; background: none; color: var(--encre);
}
.commandes button + button { border-top: 1px solid var(--trait); }
.commandes button.separe { border-top: 6px solid var(--survol); }
.commandes button:hover { background: var(--survol); }
.commandes svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.commandes button[aria-pressed="true"] { color: var(--ok); }

/* ----- Noms des gares : discrets mais lisibles ----- */
.leaflet-div-icon.etiquette-gare { background: none; border: none; }
.etiquette-gare span {
  position: absolute; left: 8px; top: 0; transform: translateY(-50%);
  white-space: nowrap; cursor: pointer;
  font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--encre); opacity: .8;
  -webkit-text-stroke: 2.5px var(--panneau); paint-order: stroke fill;
}
.etiquette-gare.niveau-1 span { font-size: 12.5px; font-weight: 600; opacity: .9; left: 9px; }
.etiquette-gare.niveau-3 span { font-size: 11px; opacity: .7; }
.etiquette-gare span:hover { opacity: 1; }
.fond-satellite .etiquette-gare span {
  color: #fff; opacity: .85;
  -webkit-text-stroke: 2.5px rgba(8, 22, 34, .6); text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.fond-satellite .etiquette-gare.niveau-3 span { opacity: .75; }

/* ----- Retour, suivre ----- */
.retour { border: 0; background: none; padding: 6px 0; color: var(--doux); font-size: .95rem; }
.retour::before { content: '‹'; margin-right: 6px; font-size: 1.2rem; }
.suivre {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 4px 0 18px; padding: 10px 18px;
  border: 1.5px solid var(--encre); border-radius: 999px; background: none; font-weight: 600;
}
.suivre svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.suivre[aria-pressed="true"] { background: var(--encre); color: var(--panneau); }

.statut { margin: 0 0 10px; font-size: 1.05rem; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 7px; font-weight: 600; font-size: .88rem; color: #fff; white-space: nowrap; }
.badge.ok { background: var(--ok); }
.badge.leger { background: var(--leger); color: #14324A; }
.badge.fort { background: var(--fort); }
.badge.prevu { background: transparent; color: var(--doux); box-shadow: inset 0 0 0 1.5px var(--trait); }

/* ----- Onglets Départs / Arrivées ----- */
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 12px 0; padding: 4px; border-radius: 12px; background: var(--survol); }
.onglets button { padding: 9px 0; border: 0; border-radius: 9px; background: none; font-weight: 600; color: var(--doux); }
.onglets button[aria-selected="true"] { background: var(--panneau); color: var(--encre); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* ----- Tableau de la gare, façon panneau d'affichage ----- */
.tableau { background: var(--nuit); color: #fff; border-radius: 14px; padding: 4px 14px 8px; }
.tableau-entete {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 12px;
  padding: 10px 0 8px; font-size: .78rem; color: #7F97AA; border-bottom: 1px solid rgba(255,255,255,.1);
}
.departs { list-style: none; margin: 0; padding: 0; }
.departs li + li { border-top: 1px solid rgba(255,255,255,.08); }
.departs .ligne-depart {
  display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 12px;
  width: 100%; padding: 11px 0; border: 0; background: none; text-align: left; color: #fff; border-radius: 8px;
}
.departs button.ligne-depart:hover { background: rgba(255,255,255,.06); }
.departs .heure { font-family: var(--chiffres); font-size: 1.6rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.departs .heure s { display: block; margin-top: 3px; font-size: .95rem; font-weight: 500; color: #7F97AA; }
.departs .heure.barre { text-decoration: line-through; color: #7F97AA; }
.departs .dest { font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.departs .dest small { display: block; font-weight: 400; font-size: .85rem; color: #93A9BA; margin-top: 2px; }
.departs li.supprime .dest { color: #93A9BA; }
.departs .badge.prevu { color: #93A9BA; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.departs .vide { color: #93A9BA; padding: 16px 0; }
.departs li.maj { animation: eclat 1.6s ease-out; }
@keyframes eclat { from { background: rgba(240, 140, 0, .28); } to { background: transparent; } }
.departs .ligne-squelette { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; padding: 14px 0; }
.tableau .squelette { height: 1.1em; background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.06) 75%); background-size: 300% 100%; }

/* ----- Choix de l'heure de départ ----- */
.choix-depart { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.choix-depart-titre { font-size: .88rem; color: var(--doux); margin-right: 2px; }
.puce {
  position: relative; display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid var(--trait); background: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--encre); cursor: pointer;
}
.puce[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--panneau); }
.puce:disabled { opacity: .35; cursor: default; }
/* Sélecteur jour + heure */
.selecteur-heure { margin: -4px 0 16px; padding: 12px; border-radius: 14px; background: var(--survol); }
.selecteur-titre { margin: 2px 0 8px; font-size: .85rem; font-weight: 600; color: var(--doux); }
.choix-jours { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; scrollbar-width: none; }
.choix-jours::-webkit-scrollbar { display: none; }
.choix-jours .puce { flex: none; white-space: nowrap; }
.choix-heures { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.choix-heures .puce { justify-content: center; padding: 8px 0; font-family: var(--chiffres); font-variant-numeric: tabular-nums; }

/* Séparateur de jour dans les listes de trains */
.departs .separateur-jour {
  padding: 12px 0 6px; font-family: var(--chiffres); font-size: .85rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: #9CC8EA; border-top: 1px solid rgba(255,255,255,.18);
}
.departs .separateur-jour + li { border-top: 0; }

/* ----- Trajets avec correspondance ----- */
.trajets .correspondance > .ligne-depart .dest small::before { content: "⇄ "; color: #9CC8EA; }
.trajets .correspondance > .ligne-depart::after {
  content: ""; grid-column: 1 / -1; justify-self: center; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid #7F97AA; border-bottom: 2px solid #7F97AA; transform: rotate(45deg); transition: transform .2s;
}
.trajets .correspondance.ouvert > .ligne-depart::after { transform: rotate(-135deg); margin-top: 0; }
.alerte-correspondance { margin: -4px 0 10px; padding: 7px 10px; border-radius: 8px; font-size: .86rem; line-height: 1.35; }
.alerte-correspondance.juste { background: rgba(240, 140, 0, .18); color: #FFC872; }
.alerte-correspondance.rate { background: rgba(211, 47, 47, .22); color: #FF9C9C; }
.etapes { list-style: none; margin: 0 0 10px; padding: 4px 0 4px 12px; border-left: 2px solid rgba(255,255,255,.18); }
.etapes > li + li { border-top: 0; }
.etapes .etape {
  display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 10px;
  width: 100%; padding: 8px 6px; border: 0; border-radius: 8px; background: rgba(255,255,255,.05); text-align: left; color: #fff;
}
.etapes button.etape:hover { background: rgba(255,255,255,.1); }
.heures-etape { font-family: var(--chiffres); font-weight: 600; font-size: 1.05rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.lieux-etape { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.lieux-etape small { display: block; font-weight: 400; font-size: .8rem; color: #93A9BA; }
.etapes .changement { padding: 8px 4px; font-size: .86rem; color: #9CC8EA; }
.etapes .changement::before { content: "⇄ "; }

/* ----- Choix de la langue ----- */
.langues { display: flex; justify-content: center; gap: 6px; margin: 14px 0 0; }
.langues button {
  padding: 5px 11px; border: 1.5px solid var(--trait); border-radius: 999px; background: none;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--doux); cursor: pointer;
}
.langues button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--panneau); }

.plus { width: 100%; margin-top: 10px; padding: 11px; border: 1.5px solid var(--trait); border-radius: 12px; background: none; font-weight: 600; }
.plus:hover { background: var(--survol); }

/* ----- Parcours du train ----- */
.infos-train { margin: -2px 0 12px; font-size: .93rem; color: var(--doux); }
.infos-train p { margin: 4px 0; }
.infos-train strong { color: var(--encre); }
.alerte-texte { color: var(--fort); }
/* Train sans info en direct ou en retard : « sois attentif » */
.avis-attention {
  margin: 4px 0 10px; padding: 10px 12px 10px 38px; position: relative;
  border-radius: 10px; background: rgba(240, 140, 0, .14); color: var(--encre); font-size: .92rem; line-height: 1.4;
}
.avis-attention::before {
  content: "!"; position: absolute; left: 11px; top: 10px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--leger); color: #14324A; font-weight: 800; font-size: .8rem;
}
.departs .a-verifier { color: #FFC872; }
/* Fraîcheur de l'info en direct : point vert (< 2 min), orange (< 5 min), rouge */
.fraicheur { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.fraicheur.frais { background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46,158,91,.18); animation: pouls-direct 2s ease-in-out infinite; }
.fraicheur.moyen { background: #F08C00; }
.fraicheur.vieux { background: #D32F2F; }
@keyframes pouls-direct { 50% { box-shadow: 0 0 0 5px rgba(46,158,91,0); } }
@media (prefers-reduced-motion: reduce) { .fraicheur.frais { animation: none; } }
.source-direct { color: var(--doux); font-size: .85em; }
.parcours { list-style: none; margin: 0; padding: 0; }
.parcours li { position: relative; display: grid; grid-template-columns: 54px 22px 1fr; column-gap: 6px; align-items: start; min-height: 44px; }
.parcours .heures { font-family: var(--chiffres); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.parcours .heures s { display: block; font-size: .85rem; font-weight: 500; color: var(--doux); }
.parcours .rail { position: relative; height: 100%; }
.parcours .rail::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 4px; background: var(--trait); }
.parcours li:first-child .rail::before { top: 6px; }
.parcours li:last-child .rail::before { bottom: auto; height: 6px; }
.parcours .rail::after { content: ''; position: absolute; left: 4px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--panneau); border: 3px solid var(--voie); }
.parcours .nom { padding-left: 4px; padding-top: 1px; }
.parcours li.passe { color: var(--doux); }
.parcours li.passe .rail::before { background: var(--encre); opacity: .5; }
.parcours li.passe .rail::after { border-color: var(--encre); background: var(--encre); opacity: .5; }
.parcours li.actuel .nom, .parcours li.prochain .nom { font-weight: 700; }
.parcours li.actuel .rail::after { border-color: var(--encre); background: var(--ok); width: 18px; height: 18px; left: 2px; top: 1px; }
.parcours li.prochain .rail::after { border-color: var(--encre); }
.parcours li.saute .nom { text-decoration: line-through; color: var(--doux); }
.parcours li.saute .nom small { display: block; text-decoration: none; color: var(--fort); font-size: .8rem; }
.parcours li.saute .rail::after { border-style: dashed; }

/* ----- Gare la plus proche, infos trafic, toutes les gares ----- */
.proche { margin: 0 0 12px; }
.proche button { width: 100%; text-align: left; padding: 10px 12px; border: 1.5px solid var(--trait); border-radius: 12px; background: none; font-size: .95rem; }
.proche button:hover { background: var(--survol); }
.alertes { margin: 18px 0 4px; }
.alertes h3 { margin: 0 0 8px; font-size: 1rem; }
.alerte { margin: 0 0 8px; padding: 10px 12px; border-left: 4px solid var(--leger); border-radius: 0 10px 10px 0; background: var(--survol); font-size: .92rem; }
.alerte summary { cursor: pointer; font-weight: 600; line-height: 1.35; }
.alerte p { margin: 8px 0 0; line-height: 1.45; }
.alerte .fin { color: var(--doux); font-size: .85rem; }
.toutes-gares { margin: 16px 0 0; border-top: 1px solid var(--trait); padding-top: 12px; }
.toutes-gares summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.toutes-gares h4 { margin: 14px 0 4px; font-size: .85rem; color: var(--doux); }
.toutes-gares ul { list-style: none; margin: 0; padding: 0; }
.toutes-gares li button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; font-size: .95rem; }
.toutes-gares li button:hover { background: var(--survol); }

/* ----- Carte ----- */
.leaflet-container { font-family: inherit; }
.leaflet-tooltip { font-family: inherit; font-weight: 600; }
.leaflet-control-attribution { font-size: 10px; }
/* Crédits repliés sur téléphone : un petit « i », qui s'ouvre au toucher */
.leaflet-control-attribution.repliable {
  margin: calc(8px + env(safe-area-inset-top, 0px)) 0 0 10px !important;
  width: 26px; height: 26px; padding: 0; overflow: hidden; border-radius: 13px;
  color: transparent; background: rgba(255,255,255,.85) !important; cursor: pointer; position: relative;
}
.leaflet-control-attribution.repliable a { color: transparent; }
.leaflet-control-attribution.repliable::before {
  content: "i"; position: absolute; inset: 0; display: grid; place-items: center;
  font: italic 700 14px/1 Georgia, serif; color: #14324A;
}
.leaflet-control-attribution.repliable.ouverte {
  width: auto; max-width: calc(100vw - 90px); height: auto; padding: 6px 10px; border-radius: 10px; color: #14324A;
}
.leaflet-control-attribution.repliable.ouverte a { color: #1B76B3; }
.leaflet-control-attribution.repliable.ouverte::before { content: none; }

/* ----- Fond Plan IGN en mode sombre : on inverse les couleurs du plan ----- */
@media (prefers-color-scheme: dark) {
  .fond-plan .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92); }
}
.fond-plan #carte { background: var(--survol); }

/* ----- Favoris ----- */
.favoris { margin: 0 0 14px; }
.favoris h3, .mon-trajet h3 { margin: 0 0 8px; font-size: 1rem; }
.favoris ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.favoris button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border: 1.5px solid var(--trait); border-radius: 999px; background: none; font-size: .92rem; font-weight: 500;
}
.favoris button:hover { background: var(--survol); }
.favoris svg { width: 15px; height: 15px; fill: var(--leger); stroke: none; }

/* ----- Mon trajet ----- */
.mon-trajet { margin: 0 0 16px; padding: 14px; border-radius: 14px; background: var(--survol); }
.champs-trajet { position: relative; display: grid; gap: 8px; padding-right: 48px; }
.champ { position: relative; }
.champ label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .85rem; font-weight: 600; color: var(--doux); pointer-events: none; }
.champ input {
  /* place pour « De », « From » ou « Da » devant la gare, dans toutes les langues */
  width: 100%; padding: 11px 12px 11px 58px; font: inherit; font-size: 1rem; color: var(--encre);
  background: var(--panneau); border: 1.5px solid transparent; border-radius: 10px;
}
.champ input:focus { outline: none; border-color: var(--doux); }
.inverser {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: var(--panneau);
}
.inverser svg { width: 20px; height: 20px; fill: none; stroke: var(--encre); stroke-width: 2; }
.suggestions {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 4px; border-radius: 12px;
  background: var(--panneau); box-shadow: var(--ombre);
}
.suggestions:empty { display: none; }
.suggestions button { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: none; }
.suggestions button:hover, .suggestions button:focus-visible { background: var(--survol); }
.bouton-trajet {
  width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: 10px;
  background: var(--nuit); color: #fff; font-weight: 700; font-size: 1rem;
}
@media (prefers-color-scheme: dark) { .bouton-trajet { background: #E6EEF4; color: var(--nuit); } }
.erreur-champ { margin: 8px 0 0; font-size: .85rem; color: var(--fort); }

/* ----- Titre avec étoile ----- */
.titre-avec-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.etoile { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--survol); }
.etoile svg { width: 22px; height: 22px; fill: none; stroke: var(--doux); stroke-width: 1.8; }
.etoile[aria-pressed="true"] svg { fill: var(--leger); stroke: var(--leger); }
.lien-action { margin: 2px 0 4px; padding: 4px 0; border: 0; background: none; color: var(--ok); font-weight: 600; }

/* ----- Résultats de trajet dans le tableau ----- */
.tableau-entete-trajet, .trajets .ligne-depart { grid-template-columns: 62px 1fr auto; }
.trajets .duree { font-size: .85rem; color: #93A9BA; }
.liens-legaux { margin: 18px 0 0; font-size: .82rem; color: var(--doux); }
.liens-legaux.credits-createurs + .liens-legaux { margin-top: 4px; }
.liens-legaux a { color: var(--doux); }

/* ----- Actions d'un train : suivre, partager ----- */
.actions-train { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 18px; }
/* Icône au-dessus du mot : le texte tient en entier dans toutes les langues
   (« Condividi », « Segnala »...) au lieu d'être coupé */
.actions-train .suivre { margin: 0; flex-direction: column; justify-content: center; gap: 3px;
  padding: 8px 4px; min-width: 0; height: auto; min-height: 56px; border-radius: 14px; font-size: .85rem; line-height: 1.15; }
.actions-train .suivre span { white-space: normal; text-align: center; overflow-wrap: anywhere; }
.accessibilite { color: var(--doux); }
p.accessibilite { margin: 2px 0 6px; font-size: .9rem; }

/* ----- Signaler un problème ----- */
.signaler { margin: 22px 0 6px; border-top: 1px solid var(--trait); padding-top: 14px; }
.signaler summary { cursor: pointer; color: var(--doux); font-size: .93rem; }
.signaler fieldset { border: 0; margin: 12px 0 8px; padding: 0; display: grid; gap: 8px; }
.signaler label { display: flex; align-items: center; gap: 10px; font-size: .95rem; cursor: pointer; }
.signaler input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0;
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--doux); background: transparent; display: grid; place-items: center;
}
.signaler input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); transform: scale(0); transition: transform .15s; }
.signaler input[type="radio"]:checked { border-color: var(--ok); }
.signaler input[type="radio"]:checked::before { transform: scale(1); }
.signaler textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: .95rem; color: var(--encre);
  background: var(--survol); border: 1.5px solid transparent; border-radius: 10px; resize: vertical;
}
.signaler textarea:focus { outline: none; border-color: var(--doux); }
.lien-absent {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 16px 0 4px; padding: 11px 12px;
  background: none; border: 1px dashed var(--trait); border-radius: 12px;
  color: var(--doux); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
}
.lien-absent:hover, .lien-absent:focus-visible { border-color: var(--doux); color: inherit; }
.lien-absent svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.formulaire-absent { border-top: 0; padding-top: 4px; display: grid; gap: 12px; }
.formulaire-absent .champ { position: relative; display: grid; gap: 5px; }
.formulaire-absent .champ label { position: static; transform: none; font-size: .88rem; color: var(--doux); }
.formulaire-absent .champ input { padding-left: 12px; }
.etat-signaler { margin: 10px 0 0; font-size: .92rem; color: var(--ok); }

/* ----- Message flottant ----- */
.message-flottant {
  position: fixed; z-index: 2000; left: 50%; transform: translateX(-50%);
  top: calc(60px + env(safe-area-inset-top, 0px));
  max-width: min(90vw, 420px); padding: 11px 16px; border-radius: 12px;
  background: var(--nuit); color: #fff; box-shadow: var(--ombre); font-size: .95rem; text-align: center;
}

/* ----- Encadré "problèmes sur ta recherche" ----- */
.trafic-recherche { margin: 10px 0 12px; padding: 12px 14px; border-radius: 12px; font-size: .93rem; }
.trafic-recherche.ok { background: var(--survol); }
.trafic-recherche.probleme { background: var(--survol); border: 2px solid var(--leger); }
.titre-trafic { margin: 0; display: flex; align-items: center; gap: 9px; font-weight: 700; }
.trafic-recherche.ok .titre-trafic { font-weight: 600; color: var(--doux); }
.trafic-recherche.probleme .pastille-trafic { background: var(--leger); box-shadow: 0 0 0 3px rgba(240,140,0,.25); }
.trafic-recherche ul { margin: 8px 0 0; padding-left: 20px; }
.trafic-recherche li { margin: 2px 0; }
.trafic-recherche .alerte { margin: 10px 0 0; background: var(--panneau); }

/* ----- État du trafic : étiquette en haut de la carte ----- */
.etat-trafic {
  position: fixed; z-index: 1001;
  top: calc(12px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--panneau); color: var(--encre); box-shadow: var(--ombre);
  font-size: .92rem; font-weight: 600; white-space: nowrap;
}
.pastille-trafic { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.etat-trafic.perturbe .pastille-trafic { background: var(--leger); box-shadow: 0 0 0 3px rgba(240,140,0,.25); }
.etat-trafic:hover { background: var(--survol); }
@media (min-width: 760px) {
  .etat-trafic { left: 422px; transform: none; }
}

/* Un élément caché reste caché, même s'il a un display: flex */
[hidden] { display: none !important; }

/* Résumé trafic sur l'accueil du panneau */
.resume-trafic {
  display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 0 0 14px;
  padding: 11px 14px; text-align: left;
  border: 0; border-left: 4px solid var(--leger); border-radius: 0 12px 12px 0; background: var(--survol);
  font-size: .92rem;
}
.resume-trafic strong { font-size: .98rem; }
.resume-trafic span { color: var(--doux); }

/* Page Infos trafic */
.groupe-pratiques { margin-top: 18px; border-top: 1px solid var(--trait); padding-top: 12px; }
.groupe-pratiques > summary { cursor: pointer; list-style: none; display: grid; gap: 2px; }
.groupe-pratiques > summary::-webkit-details-marker { display: none; }
.groupe-pratiques > summary strong::before { content: "▸ "; color: var(--doux); }
.groupe-pratiques[open] > summary strong::before { content: "▾ "; }
.groupe-pratiques > summary small { color: var(--doux); font-size: .85rem; }
.alerte.pratique { border-left-color: var(--doux) !important; }
.bloc-trafic { margin: 18px 0 0; }
.bloc-trafic h3 { margin: 0 0 8px; font-size: 1.02rem; }
.vide-trafic { margin: 0; color: var(--doux); font-size: .92rem; }
.liste-trafic { list-style: none; margin: 0; padding: 0; }
.liste-trafic li + li { border-top: 1px solid var(--trait); }
.ligne-trafic {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  width: 100%; padding: 10px 2px; border: 0; background: none; text-align: left; color: inherit;
}
button.ligne-trafic:hover { background: var(--survol); }
.ligne-trafic small { display: block; color: var(--doux); font-size: .85rem; margin-top: 2px; }
.heure-trafic { font-family: var(--chiffres); font-size: 1.15rem; font-weight: 600; }
.voir { color: var(--ok); font-weight: 600; font-size: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .feuille, .ouverture { transition: none; }
  .squelette, .direct.actif .point-direct::after, .departs li.maj, .train.attente::after { animation: none; }
}

/* Badge « Bêta » à côté du nom */
.badge-beta {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px; vertical-align: middle;
  font-family: var(--chiffres, inherit); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #0B1E2D; background: #9CC8EA; line-height: 1.4;
}

/* ----- Infos des voyageurs (comme Waze) ----- */
.voyageurs { margin: 16px 0 6px; padding: 12px; border-radius: 14px; background: var(--survol); }
.voyageurs h3 { margin: 0 0 8px; font-size: 1rem; }
.liste-voyageurs { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.vide-voyageurs { font-size: .88rem; color: var(--doux); }
.info-voyageur { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start;
  padding: 10px; border-radius: 12px; background: var(--panneau); border-left: 4px solid var(--prevu); }
.info-voyageur.confirme { border-left-color: var(--leger); }
.icone-voyageur { font-size: 1.25rem; line-height: 1.3; }
.texte-voyageur { display: flex; flex-direction: column; min-width: 0; }
.texte-voyageur strong { font-size: .95rem; }
.texte-voyageur small { font-size: .8rem; color: var(--doux); }
.texte-voyageur .moi-voyageur { color: var(--ok); font-weight: 600; }
.votes-voyageur { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.votes-voyageur button { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--trait);
  background: none; color: var(--encre); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.votes-voyageur button[aria-pressed="true"] { background: var(--encre); color: var(--panneau); border-color: var(--encre); }
.bouton-voyageur { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
  padding: 10px 12px; border-radius: 12px; border: 1.5px dashed var(--doux); background: none; color: var(--encre);
  font: inherit; font-weight: 600; cursor: pointer; }
.bouton-voyageur svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.bouton-voyageur:disabled { opacity: .5; cursor: default; }
.choix-titre-voyageur { margin: 4px 0 8px; font-weight: 600; }
.grille-voyageur { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.type-voyageur { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px;
  padding: 8px 6px; border-radius: 12px; border: 1.5px solid var(--trait); background: var(--panneau); color: var(--encre);
  font: inherit; font-size: .86rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; }
.type-voyageur span { font-size: 1.4rem; }
.type-voyageur:active { transform: scale(.97); }
.note-voyageur { margin: 10px 0 6px; font-size: .78rem; color: var(--doux); }
.annuler-voyageur { width: 100%; min-height: 40px; border: 0; background: none; color: var(--doux); font: inherit; font-weight: 600; cursor: pointer; }
#trafic-voyageurs .icone-voyageur { min-width: 28px; font-size: 1.05rem; }

/* Le petit « ! » sur la carte : orange = confirmé, gris = pas encore confirmé */
.badge-voyageur { position: absolute; top: -8px; left: -8px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #fff; background: var(--prevu); color: #fff; box-sizing: border-box;
  font: 800 11px/13px var(--chiffres); font-style: normal; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.badge-voyageur.confirme { background: var(--leger); color: #14324A; }
.zoom-loin .train-icone:not(.choisi) .badge-voyageur { width: 10px; height: 10px; top: -5px; left: -5px; font-size: 0; }
.icone-train.dessous .badge-voyageur { visibility: hidden; }
.leaflet-div-icon.gare-voyageur { background: none; border: none; }
.gare-voyageur .badge-voyageur { top: -26px; left: 4px; width: 18px; height: 18px; font-size: 12px; line-height: 15px; cursor: pointer; }

.vide-heures { grid-column: 1 / -1; margin: 4px 0; font-size: .9rem; color: var(--doux); }