/* Transports S33D : surcharges et composants propres au site, au-dessus de socle/socle.css. */

:root {
  --flap-haut: #142242;
  --flap-bas: #0f1a35;
  --flap-trait: rgba(2, 5, 12, .85);
  --flap-texte: var(--ambre-400);
  --flap-texte-doux: var(--ambre-300);
  --tableau-fond: #050b18;
  --tableau-bord: rgba(124, 168, 240, .14);
  --tableau-rang: rgba(124, 168, 240, .07);
  --etat-ok: #3fd18a;
  --etat-retard: #ff9a3c;
  --etat-supprime: #ff7262;
  --etat-prevu: var(--texte-nuit-3);
  --rang-h: 62px;
  --ombre-tableau: 0 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(124, 168, 240, .1);
}

body.s3-nuit { background: var(--nuit-900); }
main { display: block; }
.t-discret { color: var(--texte-nuit-3); font-size: .92em; }
body:not(.s3-nuit) .t-discret { color: var(--encre-3); }
svg.i.petite { width: 1em; height: 1em; }

/* ── Héros de nuit ─────────────────────────────────────────────── */
.t-heros { position: relative; isolation: isolate; overflow: hidden; color: var(--texte-nuit); background: radial-gradient(130% 100% at 70% 0%, #0d2147 0%, #060d1c 55%, var(--nuit-950) 100%); }
.t-heros-fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.t-heros-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .62; }
.t-trainees { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.t-heros-voile { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(3, 6, 13, .55) 0%, rgba(3, 6, 13, .2) 35%, rgba(5, 9, 15, .82) 82%, var(--nuit-900) 100%),
  linear-gradient(90deg, rgba(3, 6, 13, .78) 0%, rgba(3, 6, 13, .25) 60%, rgba(3, 6, 13, 0) 100%); }
.t-heros-contenu { position: relative; padding-top: clamp(22px, 3.4vw, 40px); padding-bottom: clamp(96px, 9vw, 132px); }
.t-heros-ligne { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); margin-top: 18px; }
.t-titre { font: 700 clamp(2.1rem, 5.2vw, 4.4rem)/1 var(--titre); letter-spacing: -.035em; overflow-wrap: anywhere; text-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.t-heros-infos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0 0; color: var(--texte-nuit-2); font-size: 15px; }
.t-heros-infos a { color: var(--texte-nuit) !important; text-decoration: underline; text-decoration-color: rgba(143, 200, 255, .45); text-underline-offset: 3px; }
.t-heros-infos a:hover { text-decoration-color: #fff; }
.t-heros-infos .i { color: var(--azur-300); }
.t-heros-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.t-heros-actions .s3-btn[aria-pressed="true"] { background: linear-gradient(180deg, var(--ambre-300), var(--ambre-400)); }
.t-heros-actions .s3-btn[aria-pressed="true"] svg.i { fill: currentColor; }
.t-embleme.grand { width: clamp(64px, 7vw, 88px); height: clamp(64px, 7vw, 88px); border-radius: clamp(18px, 2vw, 26px); }
.t-embleme.grand svg.i { width: 44%; height: 44%; }
.t-embleme.petit { width: 36px; height: 36px; border-radius: 11px; }
.t-embleme.petit svg.i { width: 18px; height: 18px; }
.t-embleme.moyen { width: 48px; height: 48px; border-radius: 15px; }
.t-embleme.moyen svg.i { width: 22px; height: 22px; }

/* Fil d'Ariane */
.t-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--texte-nuit-3); }
.t-fil li { display: inline-flex; align-items: center; }
.t-fil li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.t-fil a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-nuit-2) !important; }
.t-fil a:hover { color: #fff !important; }
.t-fil [aria-current] { color: var(--texte-nuit); }

.t-corps { position: relative; z-index: 2; }
.t-section { padding-top: clamp(40px, 5.4vw, 72px); }
.t-section .s3-section-tete p { color: var(--texte-nuit-3); }
body:not(.s3-nuit) .t-section .s3-section-tete p { color: var(--encre-3); }
.t-section h2 { font-size: clamp(1.45rem, 2.4vw, 2rem); }

/* ── Pastilles de ligne ────────────────────────────────────────── */
.pastille {
  --fond: #4d5566; --encre-p: #fff;
  display: inline-grid; place-items: center; min-width: 2.35em; height: 1.85em; padding: 0 .5em; border-radius: .42em;
  font: 800 15px/1 var(--titre); letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--fond); color: var(--encre-p) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 16px -10px var(--fond);
  transition: transform .2s var(--ease), box-shadow .2s;
}
a.pastille:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 10px 22px -10px var(--fond); }
.pastille.p-metro { border-radius: 999px; min-width: 1.85em; padding: 0 .42em; }
.pastille.p-tram { border-radius: .3em; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pastille.p-train { border-radius: .3em; }
.pastille.p-bateau, .pastille.p-cable { border-radius: .8em .3em; }
.pastille.grande { font-size: clamp(28px, 4vw, 44px); border-radius: .3em; }
.pastille.grande.p-metro { border-radius: 999px; }
.pastille.bascule { animation: t-bascule .42s var(--ease); }
@keyframes t-bascule { 0% { transform: perspective(300px) rotateX(0); } 45% { transform: perspective(300px) rotateX(-90deg); } 55% { transform: perspective(300px) rotateX(90deg); } 100% { transform: perspective(300px) rotateX(0); } }
.t-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.t-pastilles .pastille { min-height: 36px; height: auto; padding-top: 6px; padding-bottom: 6px; }
.t-pastilles a.pastille { min-height: 44px; min-width: 44px; }

/* ── Tableau des départs ───────────────────────────────────────── */
.tableau {
  --u: 21px;
  position: relative; margin-top: -84px; border-radius: var(--rayon-l); overflow: hidden;
  background: linear-gradient(180deg, #0a142b 0%, var(--tableau-fond) 120px);
  box-shadow: var(--ombre-tableau); color: var(--texte-nuit);
}
.tableau::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(90% 60% at 10% 0%, rgba(255, 199, 87, .07), transparent 55%), radial-gradient(70% 50% at 100% 0%, rgba(47, 139, 255, .1), transparent 60%); }
.tableau-tete { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 22px 26px 16px; border-bottom: 1px solid var(--tableau-bord); }
.tableau-sur { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 12px/1 var(--corps); letter-spacing: .2em; text-transform: uppercase; color: var(--flap-texte); }
.tableau-titre h2 { font: 700 clamp(1.25rem, 2.2vw, 1.75rem)/1.1 var(--titre); letter-spacing: -.02em; }
.tableau-sous { margin: 6px 0 0; color: var(--texte-nuit-3); font-size: 14px; }
.tableau-horloge { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.horloge { display: inline-flex; align-items: center; font-size: 24px; }
.horloge .sep { width: .34em; text-align: center; color: var(--flap-texte); font: 700 1em/1 var(--titre); opacity: .8; }
.tableau-date { font-size: 12.5px; color: var(--texte-nuit-3); letter-spacing: .04em; text-transform: capitalize; }

.tableau-filtres { position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 26px; border-bottom: 1px solid var(--tableau-bord); background: rgba(10, 22, 46, .35); }
.tableau-filtres .s3-pastille { min-height: 44px; padding: 0 14px; font-weight: 600; }
.tableau-filtres .s3-pastille svg.i { width: 1.1em; height: 1.1em; }
.tableau-filtres .s3-pastille .n { font-size: 12px; color: var(--texte-nuit-3); font-variant-numeric: tabular-nums; }
.tableau-filtres .s3-pastille[aria-pressed="true"] .n { color: #dbefff; }
.tableau-filtres .separateur { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--tableau-bord); }
.tableau-filtres .pastille { pointer-events: none; font-size: 13px; }
.filtre-ligne { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 6px; border-radius: 12px; border: 1px solid transparent; background: transparent; transition: background .2s, border-color .2s; }
.filtre-ligne:hover { background: rgba(47, 139, 255, .12); }
.filtre-ligne[aria-pressed="true"] { border-color: rgba(255, 199, 87, .7); background: rgba(255, 199, 87, .12); }

.tableau-cols, .rang { display: grid; grid-template-columns: calc(var(--u) * 5) calc(var(--u) * 4.2) minmax(0, 1fr) calc(var(--u) * 2.6) calc(var(--u) * 6.8) calc(var(--u) * 7.4); align-items: center; column-gap: calc(var(--u) * .7); padding: 0 26px; }
.tableau.sans-quai .tableau-cols, .tableau.sans-quai .rang { grid-template-columns: calc(var(--u) * 5) calc(var(--u) * 4.2) minmax(0, 1fr) calc(var(--u) * 6.8) calc(var(--u) * 7.4); }
.tableau.sans-quai .col-quai { display: none; }
.tableau-cols { height: 38px; font: 700 11px/1 var(--corps); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-nuit-3); border-bottom: 1px solid var(--tableau-bord); }
.tableau-rangs { position: relative; margin: 0; padding: 0; list-style: none; }
.rang { position: relative; min-height: var(--rang-h); border-bottom: 1px solid var(--tableau-bord); font-size: var(--u); }
.rang:nth-child(even) { background: var(--tableau-rang); }
.rang.est-filtre { display: none; }
.rang .col-ligne { display: flex; }
.rang .col-ligne .pastille { font-size: 16px; min-height: 34px; }
.rang a.pastille, .tableau-tard a.pastille { position: relative; }
.rang a.pastille::after, .tableau-tard a.pastille::after { content: ""; position: absolute; inset: -6px -6px; }
.rang .col-quai, .rang .col-dans, .rang .col-heure { display: flex; align-items: center; }
.rang .col-dans { justify-content: flex-start; gap: 4px; white-space: nowrap; }
.dans-v { display: inline-flex; align-items: center; white-space: nowrap; }
.rang .col-etat { font: 600 14px/1.25 var(--corps); color: var(--etat-prevu); }
.rang.s-heure .col-etat, .rang.s-avance .col-etat { color: var(--etat-ok); }
.rang.s-retard .col-etat { color: var(--etat-retard); }
.rang.s-supprime .col-etat { color: var(--etat-supprime); }
.rang.s-supprime .panneau-t { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--etat-supprime); }
.rang.s-supprime .col-heure .volet-c, .rang.s-supprime .col-heure .t-heure { color: var(--etat-supprime); }
.rang .etat { display: inline-flex; align-items: center; gap: 7px; }
.rang .etat::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.rang.s-theorique .etat::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.rang.s-heure .etat::before, .rang.s-retard .etat::before { animation: s3-pouls 1.8s infinite; }
.rang .prevue { display: block; margin-top: 2px; font: 600 12px/1 var(--corps); color: var(--texte-nuit-3); text-decoration: line-through; }
.rang .col-heure { flex-direction: column; align-items: flex-start; justify-content: center; }
.t-heure { font: 700 1em/1 var(--titre); color: var(--flap-texte); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.dest-info { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--corps); color: var(--texte-nuit-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-info .etat-court { font-weight: 600; }
.rang.s-heure .etat-court { color: var(--etat-ok); }
.rang.s-retard .etat-court { color: var(--etat-retard); }
.rang.s-supprime .etat-court { color: var(--etat-supprime); }
.rang .unite { font: 600 .6em/1 var(--corps); color: var(--flap-texte-doux); margin: 0 .2em 0 .1em; text-transform: lowercase; letter-spacing: .02em; }
.rang .proche { color: var(--flap-texte); animation: t-clignote 1.2s ease-in-out infinite; }
@keyframes t-clignote { 50% { opacity: .45; } }
.rang.est-arrive { animation: t-arrive .5s var(--ease) both; }
@keyframes t-arrive { from { opacity: 0; transform: perspective(600px) rotateX(-70deg); transform-origin: top; } to { opacity: 1; transform: none; } }

/* Volets : une palette par caractère, deux moitiés et un trait au milieu */
.volets { display: inline-flex; align-items: center; }
.volets .sep { display: inline-block; width: .34em; text-align: center; font: 700 1em/1.32em var(--titre); color: var(--flap-texte); opacity: .85; }
.volet {
  position: relative; display: inline-block; width: .74em; height: 1.32em; margin-right: .07em; border-radius: .14em;
  background: linear-gradient(180deg, var(--flap-haut) 0 50%, var(--flap-bas) 50% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 0 rgba(0, 0, 0, .7), 0 3px 8px -4px rgba(0, 0, 0, .9);
  font: 700 1em/1.32em var(--titre); text-align: center; color: var(--flap-texte); font-variant-numeric: tabular-nums;
  overflow: hidden; perspective: 240px;
}
.volet::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: var(--flap-trait); z-index: 3; }
.volet.vide { background: linear-gradient(180deg, #101c37 0 50%, #0c1630 50% 100%); }
.volet-c, .volet-moitie > span { display: block; height: 1.32em; }
.volet-moitie { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; z-index: 2; backface-visibility: hidden; }
.volet-moitie.haut { top: 0; background: var(--flap-haut); transform-origin: 50% 100%; }
.volet-moitie.bas { top: 50%; background: var(--flap-bas); transform-origin: 50% 0; }
.volet-moitie.bas > span { margin-top: -.66em; }
.volet-moitie.tombe { animation: t-tombe var(--d, 90ms) ease-in forwards; }
.volet-moitie.leve { transform: rotateX(90deg); animation: t-leve var(--d, 90ms) ease-out var(--d, 90ms) forwards; }
@keyframes t-tombe { to { transform: rotateX(-90deg); filter: brightness(.6); } }
@keyframes t-leve { to { transform: rotateX(0); } }

/* Panneau : la destination bascule d'un bloc */
.panneau { position: relative; display: block; min-width: 0; perspective: 600px; }
.panneau-t { display: block; font: 600 1em/1.25 var(--titre); color: #f6efe2; letter-spacing: .005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; }
.panneau .panneau-moitie { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--tableau-fond); backface-visibility: hidden; z-index: 2; }
.panneau .panneau-moitie > span { display: block; font: 600 1em/1.25 var(--titre); color: #f6efe2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; }
.panneau .panneau-moitie.haut { top: 0; transform-origin: 50% 100%; border-bottom: 1px solid var(--flap-trait); }
.panneau .panneau-moitie.bas { top: 50%; transform-origin: 50% 0; }
.panneau .panneau-moitie.bas > span { transform: translateY(-50%); }
.panneau .panneau-moitie.tombe { animation: t-tombe 150ms ease-in forwards; }
.panneau .panneau-moitie.leve { transform: rotateX(90deg); animation: t-leve 150ms ease-out 150ms forwards; }
.rang:nth-child(even) .panneau .panneau-moitie { background: #0b1222; }

.tableau-vide { padding: 34px 26px; text-align: center; color: var(--texte-nuit-2); }
.tableau-vide p { margin: 0 0 14px; font: 600 18px/1.4 var(--titre); }
.tableau-tard { display: inline-grid; gap: 10px; margin: 0; padding: 0; list-style: none; text-align: left; }
.tableau-tard li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--texte-nuit-2); }
.tableau-tard b { color: var(--flap-texte); font-family: var(--titre); }
.tableau-pied { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 26px; font-size: 13px; color: var(--texte-nuit-3); }
.tableau-etat { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tableau-etat .s3-direct { color: var(--etat-ok); }
.tableau-etat .maj { color: var(--texte-nuit-2); font-variant-numeric: tabular-nums; }
.tableau-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tableau-actions .s3-btn-petit { min-height: 44px; }
.tableau-bandeau { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 10px 26px; background: rgba(247, 173, 43, .1); border-top: 1px solid rgba(247, 173, 43, .25); color: var(--ambre-300); font: 600 14px/1.3 var(--corps); }
.tableau-bandeau b { flex: none; padding: 4px 9px; border-radius: 6px; background: var(--ambre-400); color: #1d1100; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.tableau-bandeau .defile { flex: 1; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.tableau-bandeau .defile span { display: inline-block; padding-left: 100%; animation: t-defile var(--duree-defile, 28s) linear infinite; }
@keyframes t-defile { to { transform: translateX(-100%); } }

/* Mode écran : plein écran, gros caractères, horloge */
.tableau.est-ecran { position: fixed; inset: 0; z-index: 200; margin: 0; border-radius: 0; display: flex; flex-direction: column; --rang-h: calc((100vh - 15.5vh) / var(--rangs-ecran, 10)); background: var(--tableau-fond); }
.tableau.est-ecran .tableau-tete { padding: 2.4vh 3vw; }
.tableau.est-ecran .tableau-titre h2 { font-size: clamp(28px, 4.4vh, 64px); }
.tableau.est-ecran .tableau-sur { font-size: clamp(12px, 1.6vh, 22px); }
.tableau.est-ecran .horloge { font-size: clamp(28px, 5.2vh, 76px); }
.tableau.est-ecran .tableau-date { font-size: clamp(13px, 1.8vh, 24px); }
.tableau.est-ecran .tableau-filtres, .tableau.est-ecran [data-plus], .tableau.est-ecran [data-ecran] { display: none; }
.tableau.est-ecran .tableau-cols { height: 4.4vh; padding: 0 3vw; font-size: clamp(11px, 1.5vh, 20px); }
.tableau.est-ecran { --u: clamp(18px, calc(var(--rang-h) * .4), 54px); }
.tableau.est-ecran .rang { padding: 0 3vw; min-height: var(--rang-h); }
.tableau.est-ecran .rang .col-ligne .pastille { font-size: .8em; min-height: 1.6em; }
.tableau.est-ecran .rang .col-etat { font-size: calc(var(--u) * .56); }
.tableau.est-ecran .tableau-rangs { flex: 1; overflow: hidden; }
.tableau.est-ecran .tableau-pied { padding: 1.4vh 3vw; font-size: clamp(12px, 1.5vh, 20px); }
.tableau.est-ecran .rang .dest-info { font-size: .5em; }
.tableau.est-ecran.cache-curseur, .tableau.est-ecran.cache-curseur * { cursor: none !important; }
.tableau-sortir { display: none; }
.tableau.est-ecran .tableau-sortir { display: inline-flex; }
html.ecran-ouvert { overflow: hidden; }
html.ecran-ouvert .s3-barre { visibility: hidden; }
html.ecran-ouvert .t-corps { z-index: 300; }

/* ── Alertes ───────────────────────────────────────────────────── */
.t-alertes { display: grid; gap: 10px; margin-top: 22px; }
.t-alerte { border-radius: var(--rayon); background: linear-gradient(180deg, rgba(247, 173, 43, .1), rgba(247, 173, 43, .05)); border: 1px solid rgba(247, 173, 43, .28); }
.t-alerte.forte { background: linear-gradient(180deg, rgba(255, 114, 98, .14), rgba(255, 114, 98, .06)); border-color: rgba(255, 114, 98, .4); }
.t-alerte summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; cursor: pointer; list-style: none; font-weight: 600; color: var(--texte-nuit); }
.t-alerte summary::-webkit-details-marker { display: none; }
.t-alerte summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; flex: none; border-right: 2px solid var(--texte-nuit-3); border-bottom: 2px solid var(--texte-nuit-3); transform: rotate(45deg); transition: transform .2s; }
.t-alerte[open] summary::after { transform: rotate(-135deg); }
.t-alerte summary small { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: 12px; color: var(--texte-nuit-2); }
.t-alerte-titre { flex: 1; min-width: 0; }
.t-alerte-corps { padding: 0 16px 14px 64px; color: var(--texte-nuit-2); font-size: 15px; }
.t-alerte-corps p { white-space: pre-line; }

/* ── Lignes d'un arrêt, groupes par réseau ─────────────────────── */
.t-reseaux-arret { display: grid; gap: 12px; }
.t-reseau-lignes { display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 14px 24px; align-items: start; padding: 18px 20px; border-radius: var(--rayon); background: var(--verre); border: 1px solid var(--trait-nuit-doux); }
.t-reseau-nom { display: flex; flex-direction: column; gap: 6px; }
.t-reseau-nom a { font: 700 16px/1.25 var(--titre); color: var(--texte-nuit) !important; }
.t-reseau-nom a:hover { color: var(--azur-300) !important; }
.t-plus { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--azur-300); font-size: 14px; }

/* ── Plan et alentours ─────────────────────────────────────────── */
.t-deux { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.t-carte { position: relative; height: 380px; border-radius: var(--rayon-l); overflow: hidden; background: #081123; border: 1px solid var(--trait-nuit); box-shadow: var(--ombre-nuit); }
.t-carte.large { height: 460px; }
.t-carte .maplibregl-ctrl-attrib { font-size: 11px; background: rgba(5, 10, 20, .7); color: var(--texte-nuit-3); }
.t-carte .maplibregl-ctrl-attrib a { color: var(--texte-nuit-2); }
.t-carte .maplibregl-ctrl-group { background: rgba(10, 22, 46, .9); border: 1px solid var(--trait-nuit); box-shadow: none; }
.t-carte .maplibregl-ctrl-group button { width: 36px; height: 36px; }
.t-carte .maplibregl-ctrl-group button + button { border-top: 1px solid var(--trait-nuit); }
.t-carte .maplibregl-ctrl-icon { filter: invert(1) brightness(1.4); }
.maplibregl-popup-content { background: rgba(7, 15, 32, .96) !important; color: var(--texte-nuit); border: 1px solid var(--trait-nuit); border-radius: 12px !important; padding: 10px 14px !important; font: 600 14px/1.3 var(--corps); }
.maplibregl-popup-tip { border-top-color: rgba(7, 15, 32, .96) !important; border-bottom-color: rgba(7, 15, 32, .96) !important; }
.maplibregl-popup-content a { color: var(--azur-300); }
.t-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.t-liste a.t-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 14px; background: var(--verre); border: 1px solid var(--trait-nuit-doux); color: var(--texte-nuit) !important; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.t-liste a.t-item:hover { border-color: rgba(143, 200, 255, .4); background: var(--verre-fort); transform: translateX(3px); }
.t-item-nom { font-weight: 600; flex: 1; min-width: 0; }
.t-item-nom small { display: block; font-weight: 500; color: var(--texte-nuit-3); font-size: 13px; margin-top: 2px; }
.t-item-icones { display: inline-flex; gap: 4px; color: var(--azur-300); }
.t-item-dist { flex: none; font: 700 14px/1 var(--titre); color: var(--flap-texte); font-variant-numeric: tabular-nums; }

/* Sources */
.t-sources { margin-top: clamp(40px, 5vw, 64px); padding: 22px 24px; border-radius: var(--rayon-l); background: rgba(10, 22, 46, .4); border: 1px solid var(--trait-nuit-doux); font-size: 14px; color: var(--texte-nuit-3); }
.t-sources-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--texte-nuit-2); }
.t-sources-tete h2 { font: 700 16px/1.2 var(--titre); }
.t-sources ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.t-sources b { color: var(--texte-nuit-2); }
.t-sources a { text-decoration: underline; text-decoration-color: rgba(143, 200, 255, .35); text-underline-offset: 3px; }

/* Bulle d'information */
.t-toast { position: fixed; left: 50%; bottom: 28px; z-index: 400; transform: translateX(-50%); padding: 12px 20px; border-radius: 999px; background: rgba(7, 15, 32, .96); border: 1px solid rgba(255, 199, 87, .45); color: var(--texte-nuit); font-weight: 600; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .9); animation: s3-pop .25s var(--ease); }

/* ── Accueil ───────────────────────────────────────────────────── */
.t-accueil-heros { min-height: min(860px, calc(100vh - var(--barre))); display: flex; align-items: center; }
.t-accueil-heros .t-heros-image { opacity: .38; }
.t-accueil-grille { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 64px); padding-top: clamp(36px, 6vw, 80px); padding-bottom: clamp(110px, 10vw, 150px); }
.t-accueil-texte { position: relative; z-index: 2; }
.t-accueil-texte .s3-titre-affiche { margin: 18px 0 18px; font-size: clamp(2.4rem, 4.4vw, 4.3rem); }
.t-accueil-texte .s3-chapeau { margin-bottom: 26px; }
.t-accueil-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.t-chiffres { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px clamp(18px, 3vw, 40px); margin-top: 34px; }
.t-chiffres .s3-chiffre-valeur { font-size: clamp(1.4rem, 2.3vw, 2rem); color: #fff; }
.t-france { position: relative; aspect-ratio: 1 / 1.02; width: 100%; max-width: 680px; justify-self: end; }
.t-france canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.t-france-legende { position: absolute; left: 4%; bottom: 3%; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--texte-nuit-3); }
.t-france-legende span { display: inline-flex; align-items: center; gap: 6px; }
.t-france-legende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.t-france-chargement { position: absolute; inset: 0; display: grid; place-items: center; color: var(--texte-nuit-3); font-size: 14px; }
.t-france-ville { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font: 700 12px/1 var(--titre); letter-spacing: .02em; color: var(--texte-nuit); white-space: nowrap; text-shadow: 0 2px 8px #000; opacity: 0; transition: opacity .4s; }
.t-france-ville.est-active { opacity: 1; color: var(--ambre-300); }

.t-vitrine-onglets { display: flex; gap: 6px; padding: 12px 26px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--tableau-bord); background: rgba(10, 22, 46, .35); }
.t-vitrine-onglets::-webkit-scrollbar { display: none; }
.t-onglet { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--trait-nuit); background: transparent; color: var(--texte-nuit-2); font: 600 14px/1 var(--corps); overflow: hidden; }
.t-onglet:hover { color: #fff; border-color: rgba(143, 200, 255, .45); }
.t-onglet[aria-selected="true"] { color: #1d1100; background: var(--ambre-400); border-color: var(--ambre-400); }
.t-onglet .progression { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(29, 17, 0, .45); transform-origin: left; transform: scaleX(0); }
.t-onglet[aria-selected="true"] .progression.est-active { animation: t-progression var(--rotation, 12s) linear forwards; }
@keyframes t-progression { to { transform: scaleX(1); } }
.t-vitrine-pause { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border-radius: 50%; border: 1px solid var(--trait-nuit); background: transparent; color: var(--texte-nuit-2); }
.t-vitrine-pause:hover { color: #fff; border-color: rgba(143, 200, 255, .45); }
.t-vitrine .tableau { margin-top: 0; }
.t-vitrine-lien { display: inline-flex; align-items: center; gap: 8px; color: var(--azur-300); font-weight: 600; }

.t-accueil-section { padding-top: clamp(48px, 6vw, 88px); }
.t-accueil-section .s3-section-tete { justify-content: space-between; flex-wrap: wrap; }
.t-accueil-section .s3-section-tete > div { flex: 1; min-width: 240px; }
.t-tete-avec-embleme { display: flex; align-items: center; gap: 16px; }

/* Favoris */
.t-favoris-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.t-favori { position: relative; padding: 18px 18px 12px; border-radius: var(--rayon-l); background: linear-gradient(180deg, #0b1630, var(--tableau-fond)); border: 1px solid var(--tableau-bord); box-shadow: var(--ombre-nuit); }
.t-favori-tete { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.t-favori-tete a { flex: 1; min-width: 0; font: 700 17px/1.2 var(--titre); color: var(--texte-nuit) !important; }
.t-favori-tete a small { display: block; margin-top: 3px; font: 500 13px/1.2 var(--corps); color: var(--texte-nuit-3); }
.t-favori-retirer { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -8px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--texte-nuit-3); }
.t-favori-retirer:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.mini { margin: 0; padding: 0; list-style: none; }
.mini li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 46px; border-top: 1px solid var(--tableau-bord); font-size: 15px; }
.mini .pastille { font-size: 13px; }
.mini .mini-dest { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f6efe2; font-weight: 600; }
.mini .mini-dest small { display: block; color: var(--texte-nuit-3); font-weight: 500; font-size: 12px; }
.mini .mini-quand { font-size: 16px; display: flex; align-items: center; }
.mini .mini-vide { display: block; padding: 12px 0; color: var(--texte-nuit-3); grid-template-columns: 1fr; }
.mini .s-supprime .mini-dest { text-decoration: line-through; color: var(--etat-supprime); }
.mini .s-retard .mini-dest small b { color: var(--etat-retard); }
.mini .s-heure .mini-dest small b { color: var(--etat-ok); }

/* Autour de moi : radar */
.t-autour { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.t-radar { position: relative; aspect-ratio: 1; width: 100%; max-width: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 139, 255, .14) 0%, rgba(10, 22, 46, .6) 60%, rgba(5, 9, 15, .9) 100%); box-shadow: inset 0 0 0 1px rgba(143, 200, 255, .2), 0 30px 80px -30px rgba(47, 139, 255, .5); overflow: hidden; }
.t-radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background:
  radial-gradient(circle, transparent 24.5%, rgba(143, 200, 255, .16) 25%, transparent 25.6%, transparent 49.5%, rgba(143, 200, 255, .16) 50%, transparent 50.6%, transparent 74.5%, rgba(143, 200, 255, .16) 75%, transparent 75.6%),
  linear-gradient(90deg, transparent calc(50% - .5px), rgba(143, 200, 255, .12) 50%, transparent calc(50% + .5px)),
  linear-gradient(0deg, transparent calc(50% - .5px), rgba(143, 200, 255, .12) 50%, transparent calc(50% + .5px)); }
.t-radar-balai { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 199, 87, .0) 0deg, rgba(255, 199, 87, .0) 300deg, rgba(255, 199, 87, .35) 358deg, rgba(255, 199, 87, .0) 360deg); animation: t-balai var(--periode, 4s) linear infinite; }
@keyframes t-balai { to { transform: rotate(360deg); } }
.t-radar-moi { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--azur-400); box-shadow: 0 0 0 5px rgba(47, 139, 255, .25), 0 0 18px var(--azur-400); }
.t-radar-point { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ambre-400); box-shadow: 0 0 12px var(--ambre-400); opacity: .35; animation: t-ping var(--periode, 4s) linear infinite; animation-delay: var(--retard, 0s); }
.t-radar-point.f-train { background: #fff2cc; }
@keyframes t-ping { 0% { opacity: 1; transform: scale(1.5); } 30% { opacity: .55; transform: scale(1); } 100% { opacity: .35; transform: scale(1); } }
.t-radar-echelle { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); font-size: 11.5px; color: var(--texte-nuit-3); letter-spacing: .06em; }
.t-autour-liste { display: grid; gap: 12px; }
.t-autour-etat { color: var(--texte-nuit-2); }
.t-proche { padding: 14px 16px 6px; border-radius: var(--rayon); background: linear-gradient(180deg, #0b1630, var(--tableau-fond)); border: 1px solid var(--tableau-bord); }
.t-proche-tete { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.t-proche-tete a { flex: 1; min-width: 0; font: 700 16px/1.2 var(--titre); color: var(--texte-nuit) !important; }
.t-proche-tete a small { display: block; font: 500 13px/1.3 var(--corps); color: var(--texte-nuit-3); margin-top: 2px; }

/* Réseaux (accueil et liste) */
.t-nationaux { display: flex; flex-wrap: wrap; gap: 10px; }
.t-national { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--verre); border: 1px solid var(--trait-nuit); color: var(--texte-nuit) !important; font-weight: 600; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.t-national:hover { border-color: rgba(255, 199, 87, .55); background: var(--verre-fort); transform: translateY(-2px); }
.t-national .s3-direct { font-size: 0; gap: 0; }
.t-grille-reseaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.t-carte-reseau { position: relative; display: flex; flex-direction: column; height: 100%; padding: 0 0 16px; border-radius: var(--rayon-l); overflow: hidden; background: linear-gradient(180deg, rgba(22, 46, 92, .5), rgba(10, 22, 46, .5)); border: 1px solid var(--trait-nuit); color: var(--texte-nuit) !important; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.t-carte-reseau:hover { transform: translateY(-4px); border-color: rgba(143, 200, 255, .4); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(143, 200, 255, .15); }
.t-rubans { display: flex; height: 8px; }
.t-rubans span { flex: 1; background: var(--c); }
.t-rubans.vide span { background: linear-gradient(90deg, var(--azur-700), var(--azur-400), var(--ambre-400)); }
.t-carte-reseau .corps { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 0; flex: 1; }
.t-carte-reseau .nom { font: 700 17px/1.2 var(--titre); letter-spacing: -.01em; }
.t-carte-reseau .zone { font-size: 13.5px; color: var(--texte-nuit-3); line-height: 1.35; }
.t-carte-reseau .bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--texte-nuit-2); }
.t-carte-reseau .modes { display: inline-flex; gap: 6px; color: var(--azur-300); }
.t-carte-reseau .modes svg.i { width: 18px; height: 18px; }
.t-carte-reseau .rt { position: absolute; top: 20px; right: 16px; }
.t-carte-reseau .rt .s3-direct { font-size: 11px; }
.t-carte-reseau .pastilles-mini { display: flex; flex-wrap: wrap; gap: 4px; }
.t-carte-reseau .pastilles-mini i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.t-lien-fleche { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--azur-300) !important; }
.t-lien-fleche:hover { color: #fff !important; }

/* Filtres de la liste des réseaux */
.t-filtres { position: sticky; top: var(--barre); z-index: 30; padding: 14px 0; background: rgba(5, 9, 15, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--trait-nuit-doux); }
.t-filtres-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.t-filtres .s3-champ { flex: 1; min-width: 220px; max-width: 360px; }
.t-filtres .s3-champ input { height: 44px; }
.t-filtres-groupe { display: flex; flex-wrap: wrap; gap: 6px; }
.t-filtres .s3-pastille { min-height: 44px; }
.t-filtres select { min-height: 44px; padding: 0 36px 0 14px; border-radius: 999px; border: 1px solid var(--trait-nuit); background: rgba(16, 36, 74, .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fc8ff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; color: var(--texte-nuit); appearance: none; -webkit-appearance: none; }
.t-filtres select option { background: var(--nuit-850); }
.t-compte { margin: 18px 0 14px; color: var(--texte-nuit-3); font-size: 14px; }

/* ── Ligne : schéma façon plan de métro ────────────────────────── */
.t-ligne-heros .pastille.grande { --lueur: var(--fond); box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 60px -10px var(--lueur), 0 20px 40px -20px #000; }
.t-ligne-terminus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; font: 600 clamp(1rem, 1.6vw, 1.25rem)/1.3 var(--titre); color: var(--texte-nuit); }
.t-ligne-terminus svg.i { color: var(--ambre-400); }
.t-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }
.t-stats div { display: flex; flex-direction: column; gap: 2px; }
.t-stats b { font: 700 22px/1 var(--titre); color: #fff; font-variant-numeric: tabular-nums; }
.t-stats span { font-size: 12.5px; color: var(--texte-nuit-3); }
.t-ligne-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: clamp(24px, 4vw, 56px); align-items: start; }
.t-plan { --ligne: #2f8bff; position: relative; margin: 0; padding: 18px 8px 18px 0; list-style: none; }
.t-plan-rang { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; min-height: 56px; height: 56px; }
.t-plan-rang svg.voie { width: 48px; height: 56px; overflow: visible; }
.t-plan-rang svg.voie path { fill: none; stroke: var(--ligne); stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ligne) 60%, transparent)); }
.t-plan-rang svg.voie circle { fill: var(--nuit-900); stroke: var(--ligne); stroke-width: 3.5; }
.t-plan-rang.corresp svg.voie circle { fill: #fff; stroke: var(--nuit-950); stroke-width: 3; }
.t-plan-rang.terminus svg.voie circle { fill: #fff; stroke: var(--ligne); stroke-width: 5; }
.t-plan-rang.est-choisi svg.voie circle { fill: var(--ambre-400); stroke: #fff; }
.t-plan-arret { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-left: 6px; }
.t-plan-lien { display: flex; flex-direction: column; justify-content: center; min-height: 56px; min-width: 0; color: inherit !important; }
.t-plan-nom { display: inline-flex; align-items: center; gap: 8px; min-height: 26px; max-width: 100%; border: 0; background: none; padding: 0; text-align: left; font: 600 16px/1.2 var(--titre); color: var(--texte-nuit); }
.t-plan-lien:hover .t-plan-nom span { color: var(--ambre-300); }
.t-plan-nom span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-plan-rang.terminus .t-plan-nom { font-weight: 800; font-size: 17px; color: #fff; }
.t-plan-nom:hover span { color: var(--ambre-300); }
.t-plan-rang.est-choisi .t-plan-nom span { color: var(--ambre-300); }
.t-plan-nom .sens { flex: none; font: 600 11px/1 var(--corps); padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--texte-nuit-3); }
.t-plan-cor { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; margin-top: 3px; }
.t-plan-cor .pastille { font-size: 11px; height: 19px; min-width: 22px; padding: 0 .4em; border-radius: 5px; }
.t-plan-cor .pastille.p-metro { border-radius: 999px; }
.t-plan-cor .reste { font-size: 11.5px; color: var(--texte-nuit-3); align-self: center; padding-left: 2px; }
.t-plan-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.t-plan-colonnes h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 4px; }
.t-cote { position: sticky; top: calc(var(--barre) + 16px); display: grid; gap: 16px; }
.t-panneau { padding: 20px; border-radius: var(--rayon-l); background: linear-gradient(180deg, #0b1630, var(--tableau-fond)); border: 1px solid var(--tableau-bord); box-shadow: var(--ombre-nuit); }
.t-panneau h2, .t-panneau h3 { font: 700 18px/1.2 var(--titre); margin-bottom: 4px; }
.t-panneau .t-discret { margin: 0 0 12px; }
.t-sens-onglets { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.t-sens-onglets button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--trait-nuit); background: transparent; color: var(--texte-nuit-2); font-weight: 600; font-size: 14px; text-align: left; }
.t-sens-onglets button[aria-selected="true"] { background: rgba(255, 199, 87, .14); border-color: rgba(255, 199, 87, .6); color: var(--ambre-300); }
.t-grille-horaires { display: grid; gap: 2px; max-height: 420px; overflow: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--nuit-600) transparent; }
.t-grille-horaires div { display: grid; grid-template-columns: 2.6em 1fr; gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.t-grille-horaires div:nth-child(odd) { background: rgba(124, 168, 240, .05); }
.t-grille-horaires div.est-maintenant { background: rgba(255, 199, 87, .12); box-shadow: inset 3px 0 0 var(--ambre-400); }
.t-grille-horaires b { font: 800 16px/1 var(--titre); color: var(--flap-texte); }
.t-grille-horaires span { color: var(--texte-nuit-2); font-size: 14.5px; word-spacing: .35em; line-height: 1.6; }
.t-nuage { display: flex; flex-wrap: wrap; gap: 8px; }
.t-nuage a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--verre); border: 1px solid var(--trait-nuit-doux); color: var(--texte-nuit-2) !important; font-size: 14px; }
.t-nuage a:hover { border-color: rgba(143, 200, 255, .45); color: #fff !important; }
.t-nuage a small { margin-left: 6px; color: var(--texte-nuit-3); font-variant-numeric: tabular-nums; }

/* ── Réseau ────────────────────────────────────────────────────── */
.t-groupe { margin-top: 26px; }
.t-groupe-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.t-groupe-tete h3 { font: 700 20px/1.2 var(--titre); }
.t-groupe-tete span { color: var(--texte-nuit-3); font-size: 14px; }
.t-lignes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.t-lignes-grille a { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 12px; border-radius: 14px; background: var(--verre); border: 1px solid var(--trait-nuit-doux); color: var(--texte-nuit-2) !important; font-size: 14px; line-height: 1.3; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.t-lignes-grille a:hover { border-color: color-mix(in srgb, var(--fond) 70%, white 10%); background: var(--verre-fort); transform: translateY(-2px); }
.t-lignes-grille .pastille { flex: none; }
.t-lignes-grille .trajet { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.t-fiche { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 0; padding: 22px 24px; border-radius: var(--rayon-l); background: rgba(10, 22, 46, .4); border: 1px solid var(--trait-nuit-doux); font-size: 14.5px; }
.t-fiche dt { color: var(--texte-nuit-3); }
.t-fiche dd { margin: 0; color: var(--texte-nuit); }
.t-fiche a { text-decoration: underline; text-decoration-color: rgba(143, 200, 255, .35); text-underline-offset: 3px; }

/* ── Pages de jour (données) ───────────────────────────────────── */
.t-jour { color: var(--encre); background: var(--glace); }
.t-texte { max-width: 760px; }
.t-texte h2 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 1.8em 0 .6em; }
.t-texte p, .t-texte li { color: var(--encre-2); font-size: 16.5px; line-height: 1.7; }
.t-texte li + li { margin-top: .4em; }
.t-texte code { font-family: var(--mono); font-size: .88em; padding: 1px 6px; border-radius: 6px; background: var(--glace-2); color: var(--encre); }
.t-jour a { color: var(--azur-700); }
.t-jour .s3-table th { color: var(--encre-2); }
.t-jour .s3-chiffre-libelle { color: var(--encre-2); }
.t-texte a { text-decoration: underline; text-decoration-color: var(--azur-200); text-underline-offset: 3px; }
.t-api { display: grid; gap: 8px; margin: 1em 0; padding: 0; list-style: none; }
.t-api li { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 6px 18px; padding: 12px 14px; border-radius: 12px; background: var(--blanc); border: 1px solid var(--trait); margin: 0 !important; }
.t-api code { background: none; padding: 0; color: var(--azur-700); font-weight: 600; overflow-wrap: anywhere; }
.t-jour .s3-table-cadre { max-height: 680px; overflow: auto; }
.t-jour .s3-table th { position: sticky; top: 0; z-index: 1; }
.t-jour .t-filtre-table { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.t-jour .t-filtre-table input { height: 44px; min-width: min(100%, 320px); padding: 0 16px; border-radius: 999px; border: 1px solid var(--trait-fort); background: var(--blanc); color: var(--encre); }
.t-jour .t-filtre-table input:focus { outline: none; border-color: var(--azur-400); box-shadow: 0 0 0 4px rgba(47, 139, 255, .18); }
.t-jour .s3-carte { color: var(--encre); }
.t-chiffres-jour { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 26px 0 8px; }
.t-chiffres-jour .s3-carte { padding: 18px; }

/* ── Commune ───────────────────────────────────────────────────── */
.t-commune-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.t-arrets-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }

/* ── Introuvable ───────────────────────────────────────────────── */
.t-introuvable { min-height: calc(100vh - var(--barre) - 200px); display: grid; place-items: center; padding: 56px 0; }
.t-introuvable .tableau { margin: 0 auto; max-width: 880px; width: 100%; }
.t-introuvable .tableau-vide { padding: 30px 26px 10px; }

/* ── Adaptations ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tableau { --u: 19px; }
  .tableau-cols, .rang { padding: 0 20px; }
  .t-ligne-corps { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
}
@media (max-width: 960px) {
  .t-accueil-grille { grid-template-columns: 1fr; padding-bottom: 120px; }
  .t-heros-ligne .s3-surtitre { white-space: normal; border-radius: 12px; line-height: 1.35; padding-top: 6px; padding-bottom: 6px; }
  .t-france { justify-self: center; max-width: 560px; margin-top: -10px; }
  .t-deux, .t-autour, .t-commune-grille, .t-ligne-corps { grid-template-columns: 1fr; }
  .t-cote { position: static; }
  .t-radar { margin: 0 auto; max-width: 340px; }
  .t-reseau-lignes { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --rang-h: 66px; }
  .tableau { margin-top: -64px; border-radius: 20px; }
  .tableau-tete { padding: 18px 16px 12px; align-items: flex-start; }
  .tableau-filtres, .tableau-pied, .t-vitrine-onglets { padding-left: 16px; padding-right: 16px; }
  .tableau-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tableau-filtres::-webkit-scrollbar { display: none; }
  .tableau-filtres > * { flex: none; }
  .horloge { font-size: 17px; }
  .tableau-cols { display: none; }
  .tableau { --u: 17px; }
  .tableau .rang, .tableau.sans-quai .rang { grid-template-columns: 3.2em minmax(0, 1fr) auto; grid-template-areas: "ligne dest dans"; column-gap: 12px; padding: 8px 16px; }
  .rang .col-heure, .rang .col-quai, .rang .col-etat { display: none; }
  .rang .col-ligne { grid-area: ligne; }
  .rang .col-dest { grid-area: dest; }
  .rang .col-dans { grid-area: dans; justify-content: flex-end; }
  .rang .col-ligne .pastille { font-size: 14px; min-height: 30px; min-width: 2.4em; }
  .panneau-t, .panneau .panneau-moitie > span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  .panneau .panneau-moitie > span { display: block; }
  .t-heros-actions .s3-btn span { font-size: 14px; }
  .t-heros-actions { gap: 8px; }
  .t-heros-actions .s3-btn { padding: 0 16px; }
  .t-chiffres { grid-template-columns: repeat(2, auto); }
  .t-filtres { position: static; }
  .t-filtres .s3-champ { max-width: none; flex-basis: 100%; }
  .t-filtres-groupe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; padding-bottom: 2px; }
  .t-filtres-groupe::-webkit-scrollbar { display: none; }
  .t-filtres-groupe > * { flex: none; }
  .t-fiche { grid-template-columns: 1fr; gap: 2px; }
  .t-fiche dd { margin-bottom: 10px; }
  .t-api li { grid-template-columns: 1fr; }
  .t-alerte-corps { padding-left: 16px; }
  .t-plan-colonnes { grid-template-columns: 1fr; }
  .t-carte { height: 300px; }
  .t-carte.large { height: 340px; }
  .tableau.est-ecran { --u: clamp(16px, 5vw, 30px); }
  .tableau.est-ecran .rang, .tableau.est-ecran.sans-quai .rang { grid-template-columns: 3.4em minmax(0, 1fr) auto; }
}
@media (min-width: 761px) {
  .dest-info { display: none; }
  .tableau.est-ecran .dest-info { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .t-radar-balai { animation: none; opacity: .5; }
  .t-radar-point { animation: none; opacity: 1; }
  .rang .proche { animation: none; }
  .tableau-bandeau .defile span { animation: none; padding-left: 0; white-space: normal; }
  .tableau-bandeau .defile { white-space: normal; mask-image: none; }
}

/* Accueil : le premier bloc chevauche le héros */
.t-corps-accueil { margin-top: -104px; }
.t-corps-accueil > .t-favoris { padding-top: 0; }
.t-corps-accueil > .t-favoris:not([hidden]) + .t-vitrine { margin-top: 48px; }
.t-select { width: 100%; min-height: 44px; margin: 0 0 10px; padding: 0 36px 0 14px; border-radius: 12px; border: 1px solid var(--trait-nuit); background: rgba(16, 36, 74, .5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fc8ff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; color: var(--texte-nuit); appearance: none; -webkit-appearance: none; font-weight: 600; }
.t-select option { background: var(--nuit-850); }
.t-heros-court .t-heros-contenu { padding-bottom: clamp(36px, 4.6vw, 64px); }
.t-rubans-heros { height: 6px; max-width: 520px; margin-top: 22px; border-radius: 999px; overflow: hidden; box-shadow: 0 0 24px -6px rgba(255, 199, 87, .4); }
.t-filtre-lignes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.t-filtre-lignes .s3-champ { flex: 1; min-width: 240px; max-width: 460px; }
.t-filtre-lignes .s3-champ input { height: 46px; }
.t-filtre-lignes .t-discret { margin: 0; }

/* ── Relevé de retard ──────────────────────────────────────────── */
.t-releve-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 26px; max-width: 760px; padding: 16px; border-radius: var(--rayon-l); background: rgba(10, 22, 46, .55); border: 1px solid var(--trait-nuit); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.t-releve-champ { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; min-width: 0; }
.t-releve-champ.t-releve-date { flex: 0 1 190px; }
.t-releve-champ label { font: 600 12px/1 var(--corps); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-nuit-2); }
.t-releve-champ input { height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid rgba(143, 200, 255, .3); background: rgba(16, 36, 74, .7); color: var(--texte-nuit); font: 500 16px/1 var(--corps); color-scheme: dark; min-width: 0; width: 100%; }
.t-releve-champ input:focus { outline: none; border-color: rgba(143, 200, 255, .65); box-shadow: 0 0 0 4px rgba(47, 139, 255, .22); }
.t-releve-form .s3-btn { height: 48px; }
.t-releve h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0 0 16px; }
.t-releve .t-section:first-child { padding-top: 8px; }
.t-releve-vide { color: var(--encre-2); max-width: 70ch; line-height: 1.6; }
.t-releve-note { color: var(--encre-3); font-size: 14px; margin: -6px 0 14px; max-width: 80ch; }
.t-releve-table td, .t-releve-table th[scope="row"] { vertical-align: middle; }
.t-releve-table th[scope="row"] { font-weight: 600; color: var(--encre); text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--glace-2); text-transform: none; letter-spacing: 0; font-size: 14.5px; background: none; white-space: normal; }
.t-releve-table tr.supprimee td, .t-releve-table tr.supprimee th[scope="row"] { color: var(--encre-3); }
.t-releve-table tr.supprimee th[scope="row"] a { text-decoration: line-through; }
.t-releve-table tr.fort { background: #fff6f4; }
.t-releve-table .pastille { vertical-align: middle; }
.t-releve-reseau { display: block; color: var(--encre-3); font-size: 12.5px; margin-top: 2px; }
.t-releve-quand { color: var(--encre-3); font-size: 13px; white-space: nowrap; }
.t-releve-etat { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 700 13px/1.3 var(--corps); background: #e9f7ef; color: #146c3a; white-space: nowrap; }
.t-releve-etat.moyen { background: #fff3dc; color: #8a5300; }
.t-releve-etat.fort { background: #ffe5e0; color: #a3271a; }
.t-releve-etat.supprime { background: #2a3140; color: #fff; }
.t-rouge { color: #b3261e; }
.t-releve-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.t-releve-imprime { display: none; }
.t-releve-lignes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.t-releve-lignes a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--trait); color: var(--encre) !important; }
.t-releve-lignes a:hover { border-color: var(--azur-200); }
.t-releve-lignes span { display: flex; flex-direction: column; min-width: 0; }
.t-releve-lignes small { color: var(--encre-3); }

/* ── Suivi par courriel ────────────────────────────────────────── */
.t-suivi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px 28px; align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: clamp(18px, 2.4vw, 26px); border-radius: var(--rayon-l); background: linear-gradient(180deg, rgba(22, 46, 92, .5), rgba(10, 22, 46, .42)); border: 1px solid var(--trait-nuit); color: var(--texte-nuit); }
.t-suivi h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin: 0; }
.t-suivi h2 svg.i { color: var(--ambre-400); flex: none; }
.t-suivi-texte p { margin: 8px 0 0; color: var(--texte-nuit-2); line-height: 1.55; }
.t-suivi-form { display: flex; gap: 10px; flex-wrap: wrap; }
.t-suivi-form input[type="email"] { flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(143, 200, 255, .3); background: rgba(16, 36, 74, .7); color: var(--texte-nuit); font: 500 15px/1 var(--corps); }
.t-suivi-form input[type="email"]:focus { outline: none; border-color: rgba(143, 200, 255, .65); box-shadow: 0 0 0 4px rgba(47, 139, 255, .22); }
.t-suivi-form .s3-btn { height: 44px; }
.t-suivi-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.t-suivi-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--texte-nuit-3); line-height: 1.5; }
.t-jour .t-suivi { background: var(--blanc); border-color: var(--trait); color: var(--encre); box-shadow: var(--ombre-jour); }
.t-jour .t-suivi-texte p { color: var(--encre-2); }
.t-jour .t-suivi-note { color: var(--encre-3); }
.t-jour .t-suivi-form input[type="email"] { background: var(--blanc); border-color: var(--trait-fort); color: var(--encre); }
.t-suivis ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; max-width: 760px; }
.t-suivis li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--trait); }
.t-suivis li span { display: flex; flex-direction: column; }
.t-suivis li small { color: var(--encre-3); font-size: 13px; }
@media (max-width: 760px) {
  .t-suivi { grid-template-columns: 1fr; }
  .t-releve-champ.t-releve-date { flex: 1 1 100%; }
  .t-releve-form .s3-btn { width: 100%; justify-content: center; }
  .t-releve-arrets th:nth-child(4), .t-releve-arrets td:nth-child(4), .t-releve-arrets th:nth-child(2), .t-releve-arrets td:nth-child(2),
  .t-releve-arrets th:nth-child(7), .t-releve-arrets td:nth-child(7) { display: none; }
  .t-releve-arrets th, .t-releve-arrets td, .t-releve-arrets th[scope="row"] { padding: 9px 8px; }
}

@media print {
  .s3-barre, .s3-pied, .s3-horizon, .t-heros-fond, .t-releve-form, .t-releve-actions, .t-suivi, .t-fil, .t-embleme, .t-toast, .s3-saut { display: none !important; }
  body, .t-jour, .t-heros { background: #fff !important; color: #000 !important; }
  .t-heros-contenu { padding: 0 0 8px !important; }
  .t-titre { font-size: 22pt !important; text-shadow: none !important; color: #000 !important; }
  .s3-surtitre, .s3-chapeau { color: #000 !important; background: none !important; border: 0 !important; padding: 0 !important; }
  .t-releve-imprime { display: block; font-size: 9pt; color: #333; margin: 0 0 8px; }
  .s3-table-cadre { max-height: none !important; overflow: visible !important; border-color: #999; }
  .s3-table th { position: static !important; }
  .s3-table th, .s3-table td, .t-releve-table th[scope="row"] { padding: 4px 6px; font-size: 9pt; }
  .t-releve-table tr.fort { background: none; }
  .t-releve-table tr { break-inside: avoid; }
  .t-chiffres-jour { grid-template-columns: repeat(3, 1fr); }
  .s3-carte { box-shadow: none !important; border-color: #999 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  .t-section { padding-top: 14px !important; }
}
.t-releve-depart { display: block; margin-top: 3px; font-size: 12px; color: var(--encre-3); white-space: nowrap; }