/* Site d'achat du transport, repris des maquettes docs/maquettes/site-*.html et billet.html : tokens --sd-* seulement, theme du
   navigateur, de 3840 px au telephone en portrait. Positions du plan : plan.css, calculee du reseau. */
@font-face { font-family: 'Manrope Repli'; src: local('Arial'); size-adjust: 101.9%; ascent-override: 104.6%; descent-override: 29.4%; line-gap-override: 0%; }
:root, .sd-paper, .sd-nuit { --sd-font-sans: 'Manrope', 'Manrope Repli', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; }
:root { --g: max(clamp(16px, 3.4vw, 49px), (100vw - 1560px) / 2); --act: var(--sd-accent); --on-act: var(--sd-on-accent); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--sd-bg); color: var(--sd-text); font-family: var(--sd-font-sans); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
main { flex: 1; display: flex; flex-direction: column; }
:focus-visible { outline: 3px solid var(--sd-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } }
.sprite { position: absolute; }
.c-1 { --c: var(--line-1); } .c-2 { --c: var(--line-2); } .c-3 { --c: var(--line-3); }

/* En-tete */
.hd { display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); min-height: 72px; padding: 0 var(--g); }
.br { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: clamp(18px, 1.4vw, 20px); text-decoration: none; color: inherit; margin-right: auto; }
.br .sd-logo { width: 32px; height: 32px; }
.br .sd-wordmark { font-size: inherit; }
.br-co { font-weight: 300; margin-left: calc(.2em - 10px); white-space: nowrap; }
.nav { display: flex; gap: clamp(8px, 1.4vw, 20px); }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 0 6px; text-decoration: none; font-weight: 700; font-size: 16px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer; border-radius: var(--sd-radius-md); }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 54px; z-index: 5; min-width: 250px; padding: 6px; border-radius: var(--sd-radius-lg); background: var(--sd-surface); box-shadow: var(--sd-shadow-3), inset 0 0 0 1px var(--sd-border); display: grid; }
.menu a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--sd-radius-md); font-weight: 700; text-decoration: none; }
.tog { width: 48px; height: 48px; border-radius: var(--sd-radius-md); display: grid; place-items: center; color: var(--sd-text-muted); }
.tog .moon { display: none; }
:root[data-theme="dark"] .tog .sun { display: none; }
:root[data-theme="dark"] .tog .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tog .sun { display: none; }
  :root:not([data-theme="light"]) .tog .moon { display: block; }
}

/* Barre de recherche : une enseigne sombre, la seule de la page */
.barw { padding: 0 var(--g); }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 10px; }
.tabs label { position: relative; display: inline-flex; align-items: center; height: 48px; padding: 0 16px; border-radius: var(--sd-radius-md); font-weight: 700; font-size: 16px; color: var(--sd-text-muted); cursor: pointer; }
.tabs input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tabs label:has(input:checked) { background: var(--sd-surface-2); color: var(--sd-text); }
.tabs label:has(input:focus-visible) { outline: 3px solid var(--sd-accent); outline-offset: 2px; }
.arh { display: none; margin-left: 8px; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.barw:has(#bar-rt:checked) .arh { display: inline; }
.bar { display: grid; grid-template-columns: minmax(150px, 1fr) clamp(120px, 14vw, 202px) minmax(150px, 1fr) minmax(130px, .72fr) auto; align-items: stretch; background: var(--sd-surface); border-radius: var(--sd-radius-lg); padding: 8px; box-shadow: var(--sd-shadow-3); }
.barw:has(#bar-rt:checked) .bar { grid-template-columns: minmax(150px, 1fr) clamp(120px, 14vw, 202px) minmax(150px, 1fr) minmax(130px, .72fr) minmax(120px, .6fr) auto; }
.fd { position: relative; display: grid; align-content: center; gap: 0; min-height: 68px; padding: 0 16px; border-radius: var(--sd-radius-md); text-align: left; min-width: 0; cursor: pointer; }
.fd:focus-within { outline: 3px solid var(--sd-accent); outline-offset: -3px; }
.fd small { font-size: 16px; font-weight: 700; color: var(--sd-text-muted); line-height: 1.3; pointer-events: none; }
.fd b { font-size: clamp(19px, 1.6vw, 23px); font-weight: 800; letter-spacing: -.015em; white-space: nowrap; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.pk.dp .fd, .pk.rt .fd { border-left: 1px solid var(--sd-border); border-radius: 0; }
.pk.dp .fd b, .pk.rt .fd b { white-space: normal; }
.rt { display: none; }
.barw:has(#bar-rt:checked) .bar .rt { display: block; }

/* Choisir sans liste native : une fenetre de grosses tuiles, chaque tuile un bouton radio du formulaire */
.pk { position: relative; min-width: 0; }
.pk > summary { list-style: none; }
.pk > summary::-webkit-details-marker { display: none; }
.pk[open] > .fd { background: var(--sd-surface-2); }
.pk-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; display: grid; gap: 12px; width: min(620px, calc(100vw - 2 * var(--g))); max-height: min(72vh, 680px); overflow-y: auto; padding: 16px; border-radius: var(--sd-radius-lg); background: var(--sd-surface); box-shadow: var(--sd-shadow-3); }
.pk.a .pk-panel { left: auto; right: 0; }
.pk.dp .pk-panel, .pk.rt .pk-panel { left: auto; right: 0; width: min(440px, calc(100vw - 2 * var(--g))); }
.pk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 22px; font-weight: 800; letter-spacing: -.015em; }
.pk-x { min-height: 48px; padding: 0 14px; border-radius: var(--sd-radius-md); background: var(--sd-surface-2); font-size: 16px; font-weight: 700; }
.pk-panel h3 { font-size: 17px; font-weight: 800; color: var(--sd-text-muted); }
.pk-find { display: grid; gap: 4px; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.pk-find[hidden] { display: none; }
.pk-find input { width: 100%; height: 52px; padding: 0 14px; border-radius: var(--sd-radius-md); border: 1px solid var(--sd-border); background: var(--sd-surface); color: var(--sd-text); font: inherit; font-size: 18px; }
.pk-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.pk-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pk-opt { position: relative; display: flex; align-items: center; min-height: 64px; padding: 8px 14px; border-radius: var(--sd-radius-md); box-shadow: inset 0 0 0 1px var(--sd-border); cursor: pointer; }
.pk-opt[hidden] { display: none; }
.pk-opt b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.pk-opt small { display: block; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); line-height: 1.25; }
.pk-opt input, .pk-day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pk-days i { font-style: normal; text-align: center; font-size: 14px; font-weight: 700; color: var(--sd-text-muted); }
.pk-day, .pk-off { position: relative; display: grid; place-items: center; min-height: 48px; border-radius: var(--sd-radius-md); font-size: 18px; font-weight: 700; }
.pk-day { box-shadow: inset 0 0 0 1px var(--sd-border); cursor: pointer; }
.pk-off { color: var(--sd-text-muted); }
.pk-opt:has(input:checked), .pk-day:has(input:checked) { background: var(--sd-accent-soft); box-shadow: inset 0 0 0 2px var(--act); }
.pk-opt:has(input:focus-visible), .pk-day:has(input:focus-visible) { outline: 3px solid var(--sd-accent); outline-offset: 2px; }
.rib { position: relative; display: grid; place-items: center; }
.rib::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 8px; margin-top: -4px; background: var(--c); border-radius: 4px; }
.rib i { position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--sd-surface); border: 5px solid var(--sd-text); z-index: 1; }
.rib i:nth-child(1) { left: 0; } .rib i:nth-child(2) { right: 0; }
.swap { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 50%; background: var(--sd-surface-2); display: grid; place-items: center; box-shadow: 0 0 0 5px var(--sd-surface); }
.swap .ic { transition: transform 180ms ease; }
.swap:active .ic { transform: rotate(180deg); }
.go { align-self: stretch; margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 68px; padding: 0 clamp(20px, 2.4vw, 35px); border-radius: var(--sd-radius-md); background: var(--act); color: var(--on-act); text-decoration: none; font-size: clamp(19px, 1.6vw, 23px); font-weight: 800; letter-spacing: -.015em; }
.go:hover, .cta:hover, .payb:hover, .btn.p:hover { filter: brightness(1.06); }

/* Accueil : le plan est le heros, la phrase vit dans son quadrant vide */
.home { flex: 1; display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 2.15fr); gap: clamp(16px, 2.4vw, 35px); padding: clamp(14px, 1.6vw, 23px) var(--g) clamp(16px, 1.6vw, 23px); align-items: center; }
.pitch h1 { font-size: clamp(40px, 4.4vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pitch .sub { margin-top: clamp(10px, 1vw, 14px); font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.deal { margin-top: clamp(18px, 2vw, 29px); display: grid; gap: 2px; }
.deal small { font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.deal strong { font-size: clamp(38px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.deal strong em { font-style: normal; font-size: .5em; font-weight: 700; letter-spacing: -.01em; margin-right: .15em; }
.deal span { font-size: 16px; font-weight: 600; color: var(--sd-text-muted); }
.why { margin-top: clamp(10px, 1vw, 14px); font-size: clamp(15px, 1.05vw, 15px); font-weight: 600; color: var(--sd-text-muted); line-height: 1.4; max-width: 34em; }
.map { position: relative; min-width: 0; width: min(100%, calc((100dvh - 290px) * 1.449)); justify-self: end; }
.mapf { position: relative; }
.lt { position: absolute; transform: translate(-50%, -50%); font-size: clamp(12px, .95vw, 14px); box-shadow: 0 0 0 3px var(--sd-bg); }
.nm { display: none; position: absolute; font-size: 13px; font-weight: 800; letter-spacing: -.005em; white-space: nowrap; transform: translate(var(--x, 0), var(--y, 0)); line-height: 1.1; }
.nm.s-top { margin-left: -16px; --x: -100%; --y: -50%; }
.nm.s-mid { margin-left: 16px; margin-top: -12px; --y: -100%; }
.nm.s-bot { margin-left: 14px; --y: -50%; }
.nm.s-lft { left: 0 !important; margin-top: -12px; --y: -100%; }
.nm.s-rgt { left: auto !important; right: 0; margin-top: 12px; }
@media (max-width: 480px) { .nm2 { max-width: 34%; white-space: normal; font-size: 12px; line-height: 1.15; } }
/* Au doigt : le nom d'une gare se touche plus grand qu'il ne se lit, sans rien deplacer. */
a.nm::after, a.nm2::after { content: ""; position: absolute; inset: -17px -6px; }
.nm2 { position: absolute; font-size: clamp(14px, 1.1vw, 16px); font-weight: 800; white-space: nowrap; transform: translate(var(--x, 0), var(--y, 0)); }
.nm2.s-top { margin-left: -3.4%; --x: -100%; --y: -50%; }
.nm2.s-mid { margin-left: -3.8%; margin-top: 3%; --x: -100%; }
.nm2.s-bot { margin-left: 3.4%; --y: -50%; }
.nm2.s-lft { left: 0 !important; margin-top: 3.2%; }
.nm2.s-rgt { left: auto !important; right: 0; margin-top: 3.2%; }
@media (max-width: 480px) { .nm2.s-mid { margin-left: 3.4%; margin-top: -3%; --x: 0; --y: -100%; } }
.pl { position: absolute; display: grid; grid-template-columns: auto auto; column-gap: 16px; align-content: center; padding: 8px 12px; border-radius: var(--sd-radius-md); background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border), var(--sd-shadow-1); text-align: left; text-decoration: none; transform: translate(var(--x, 0), var(--y, 0)); white-space: nowrap; min-height: 48px; }
.pl.s-top { margin-left: -3.4%; --x: -100%; --y: -50%; }
.pl.s-mid { margin-left: 3.8%; margin-top: -3%; --y: -100%; }
.pl.s-bot { margin-left: 3.4%; --y: -50%; }
.pl.s-lft { left: 0 !important; margin-top: 3.2%; }
.pl.s-rgt { left: auto !important; right: 0; margin-top: 3.2%; }
.pl b { font-size: clamp(15px, 1.25vw, 18px); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.pl small { grid-column: 1; font-size: clamp(13px, .95vw, 14px); font-weight: 600; color: var(--sd-text-muted); line-height: 1.25; }
.pl .pr { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; font-size: clamp(15px, 1.2vw, 17px); font-weight: 800; line-height: 1.1; }
.pl .pr em { display: block; font-style: normal; font-size: .72em; font-weight: 700; }
.pl.on { background: var(--sd-text); color: var(--sd-surface); box-shadow: var(--sd-shadow-2); }
.pl.on small { color: color-mix(in srgb, var(--sd-surface) 74%, var(--sd-text)); }
.pl.de { background: none; box-shadow: none; padding: 6px 0; }

/* Les arrets sur demande, en texte, tous en liens */
.stops { padding: clamp(24px, 3.4vw, 49px) var(--g); border-top: 1px solid var(--sd-border); }
.stops h2, .sec-h { font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stops > p { margin-top: 8px; max-width: 44em; font-size: clamp(17px, 1.2vw, 17px); font-weight: 500; color: var(--sd-text-muted); line-height: 1.45; }
.lines { margin-top: clamp(18px, 2vw, 29px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 3vw, 43px); }
.lnc h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 1.3vw, 19px); font-weight: 800; letter-spacing: -.015em; margin-bottom: 8px; }
.lnc h3 .li { font-size: .8em; }
.chain { position: relative; padding-left: 26px; }
.chain::before { content: ""; position: absolute; left: 7px; top: 24px; bottom: 24px; width: 6px; background: var(--c); border-radius: 3px; }
.chain li { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; scroll-margin-top: 80px; }
.chain li::before { content: ""; position: absolute; left: -23px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--sd-surface); border: 3px solid var(--c); box-sizing: border-box; }
.chain li.g::before { left: -26px; width: 20px; height: 20px; margin-top: -10px; border: 4px solid var(--sd-text); }
.chain li:target { background: var(--sd-accent-soft); border-radius: var(--sd-radius-sm); }
.chain a { display: flex; align-items: center; min-height: 48px; font-size: clamp(16px, 1.1vw, 16px); font-weight: 600; text-decoration: none; }
.chain .g a { font-weight: 800; }

/* Resultats et horaires : tuiles */
.res { flex: 1; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2.15fr); gap: clamp(16px, 3vw, 43px); padding: clamp(16px, 2.4vw, 32px) var(--g) clamp(24px, 3vw, 43px); align-items: start; }
.side { position: sticky; top: 16px; display: grid; gap: 12px; }
.plan--side .net-line { stroke-width: 8; }
.plan--side .net-casing { stroke-width: 28; }
.plan--side .net-trace { stroke-width: 22; }
.plan--bold .net-line { stroke-width: 9; }
.note { font-size: 16px; font-weight: 600; color: var(--sd-text-muted); line-height: 1.4; }
.note.below { margin-top: 12px; }
.lst { min-width: 0; display: grid; gap: 10px; container-type: inline-size; }
.lst h1 { font-size: clamp(30px, 3vw, 43px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.subt { font-size: 17px; font-weight: 600; color: var(--sd-text-muted); margin-bottom: 6px; }
.day { margin-top: 14px; font-size: clamp(18px, 1.25vw, 18px); font-weight: 800; letter-spacing: -.01em; }
.tl { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px clamp(16px, 2vw, 29px); align-items: center; padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.8vw, 26px); border-radius: var(--sd-radius-lg); background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); text-align: left; text-decoration: none; }
.tl.full { cursor: default; background: var(--sd-surface-2); }
.tl .ful { font-weight: 700; color: var(--sd-text-muted); white-space: nowrap; }
.tl.best { box-shadow: inset 0 0 0 2px var(--sd-text), var(--sd-shadow-2); }
.flag { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--sd-text); color: var(--sd-surface); font-size: 14px; font-weight: 800; }
.hrs { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; column-gap: clamp(12px, 1.4vw, 20px); }
.hrs strong { font-size: clamp(34px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.hrs small { grid-row: 2; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); white-space: nowrap; margin-top: 6px; }
.hrs small:last-of-type { text-align: right; }
.sch { position: relative; display: flex; align-items: center; height: 30px; }
.sch u { position: relative; flex: 1; height: 8px; display: grid; place-items: center; background: var(--c); text-decoration: none; }
.sch u:first-of-type { border-radius: 4px 0 0 4px; }
.sch u:last-of-type { border-radius: 0 4px 4px 0; }
.sch i { position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--sd-surface); border: 4px solid var(--sd-text); z-index: 1; }
.sch i:first-child { left: -2px; } .sch i:nth-child(2) { right: -2px; }
.sch .li { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; height: 22px; min-width: 34px; box-shadow: 0 0 0 3px var(--sd-surface); }
.meta { grid-column: 2; grid-row: 2; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); text-align: center; white-space: nowrap; margin-top: 6px; }
.pz { display: grid; justify-items: end; gap: 0; min-width: 124px; }
.pz strong { font-size: clamp(26px, 2.3vw, 33px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.pz em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--sd-text-muted); }
.pz span { font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.ch { display: inline-flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 8px 0 14px; border-radius: var(--sd-radius-md); background: var(--sd-surface-2); font-size: 17px; font-weight: 800; }
.best .ch { background: var(--act); color: var(--on-act); }
.mini { display: none; align-items: center; gap: 12px; margin: 2px var(--g) 0; padding: 10px 8px 10px 14px; border-radius: var(--sd-radius-lg); background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); }
.mini > span { min-width: 0; display: grid; line-height: 1.25; }
.mini b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.mini small { font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.mini a { margin-left: auto; flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--sd-radius-md); background: var(--sd-surface-2); font-weight: 800; font-size: 16px; text-decoration: none; }
.none { display: grid; justify-items: start; gap: 12px; padding: 24px; border-radius: var(--sd-radius-lg); background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); font-size: 17px; font-weight: 600; }
.box { padding: 14px 16px; border-radius: var(--sd-radius-md); background: var(--sd-accent-soft); color: var(--sd-text); font-size: 18px; font-weight: 700; line-height: 1.35; }
.home-box { margin: 12px var(--g) 0; }
.keep-n { margin-top: 12px; }
.find-l { display: none; align-items: center; min-height: 48px; margin: 8px var(--g) 0; font-size: 17px; font-weight: 700; }
.stale-kind { display: none; }
.barw:has(#bar-rt:checked) ~ .res.is-ow .stale-kind, .barw:has(#bar-ow:checked) ~ .res.is-rt .stale-kind { display: block; }
.barw:has(#bar-rt:checked) ~ .res.is-ow .fl, .barw:has(#bar-ow:checked) ~ .res.is-rt .fl { display: none; }
.tile-day { grid-column: 1 / -1; font-size: clamp(20px, 1.5vw, 22px); font-weight: 800; letter-spacing: -.015em; }
.pt { position: absolute; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; }
.pt::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 2px); z-index: 5; display: none; padding: 4px 8px; border-radius: var(--sd-radius-sm); background: var(--sd-text); color: var(--sd-surface); font-size: 14px; font-weight: 700; white-space: nowrap; transform: translateX(-50%); }
.pt:hover::after, .pt:focus-visible::after { display: block; }
.chain-go { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--sd-radius-md); background: var(--sd-surface-2); font-size: 16px; font-weight: 700; text-decoration: none; }
.pts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.back-l { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin: 0 var(--g); font-size: 17px; font-weight: 700; text-decoration: none; }
.kindw { margin-top: 6px; font-size: clamp(24px, 1.8vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.hint { font-size: 15px; font-weight: 500; color: var(--sd-text-muted); }
.rc-more { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--sd-text-muted); }
.rc-more summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.rc-l .tot { color: var(--sd-text); font-weight: 800; font-size: 1.2em; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--sd-border); }
.seat-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 16px; font-weight: 600; color: var(--sd-text-muted); }
.seat-key span { display: inline-flex; align-items: center; gap: 6px; }
.seat-key i { width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--sd-border); }
.seat-key .k-mine { background: var(--act); box-shadow: none; }
.seat-key .k-gone { background: var(--sd-surface-2); }
.wait { opacity: .72; cursor: progress; }
.cta.alt { background: var(--sd-surface-2); color: var(--sd-text); }
.alert { padding: 12px 16px; border-radius: var(--sd-radius-md); background: var(--sd-danger-soft); color: var(--sd-danger); font-weight: 700; }

/* Pied de page commun au site et au billet */
.ft { margin-top: auto; padding: clamp(24px, 3vw, 43px) var(--g) clamp(16px, 1.6vw, 23px); background: var(--sd-surface); border-top: 1px solid var(--sd-border); }
.ft-c { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: clamp(16px, 3vw, 43px); }
.ft h2 { font-size: clamp(16px, 1.05vw, 16px); font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
.ft li a { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: clamp(16px, 1vw, 16px); font-weight: 600; text-decoration: none; color: var(--sd-text-muted); }
.ft li .li { font-size: 12px; }
.ft-b { margin-top: clamp(14px, 1.6vw, 23px); padding-top: clamp(4px, .5vw, 7px); border-top: 1px solid var(--sd-border); display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; font-size: clamp(15px, .95vw, 15px); font-weight: 600; color: var(--sd-text-muted); }
.ft-b a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: underline; text-underline-offset: 3px; }
.ft-b span { margin-left: auto; }

/* Paiement */
.pm { flex: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 3.4vw, 49px); padding: clamp(10px, 1.6vw, 23px) var(--g) clamp(28px, 3.4vw, 49px); align-items: start; }
.pm h1 { font-size: clamp(34px, 3.2vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.pm .sub { margin-top: 6px; font-size: clamp(17px, 1.1vw, 17px); font-weight: 600; color: var(--sd-text-muted); }
.frm { margin-top: clamp(18px, 2vw, 29px); display: grid; gap: clamp(18px, 1.6vw, 23px); }
.frm h2 { font-size: clamp(21px, 1.4vw, 21px); font-weight: 800; letter-spacing: -.015em; margin-bottom: 8px; }
.fld { display: grid; align-content: start; gap: 4px; min-width: 0; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.fld input { width: 100%; min-width: 0; height: 56px; padding: 0 14px; border-radius: var(--sd-radius-md); border: 1px solid var(--sd-border); background: var(--sd-surface); color: var(--sd-text); font: 600 17px var(--sd-font-sans); }
.fld input::placeholder { color: var(--sd-text-muted); opacity: 1; }
.fld input:focus { outline: none; border-color: var(--act); box-shadow: var(--sd-focus-ring); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.card-f { display: grid; gap: 10px; }
.demo { font-size: 15px; font-weight: 600; color: var(--sd-text-muted); line-height: 1.4; margin-top: 10px; }
.rcp { position: sticky; top: 16px; display: grid; gap: 12px; }
.card { padding: clamp(16px, 1.4vw, 20px); border-radius: var(--sd-radius-lg); background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); }
.rc-rt { display: grid; grid-template-columns: auto minmax(50px, 1fr) auto; align-items: center; column-gap: 14px; }
.rc-rt strong { font-size: clamp(30px, 2.4vw, 35px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.rc-rt small { grid-row: 2; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); margin-top: 4px; white-space: nowrap; }
.rc-rt small:last-child { grid-column: 3; text-align: right; }
.rc-l { margin-top: 12px; display: grid; grid-template-columns: 1fr auto; row-gap: 4px; font-size: 16px; font-weight: 600; color: var(--sd-text-muted); }
.rc-l dd { text-align: right; color: var(--sd-text); font-weight: 700; }
.up h2 { font-size: clamp(21px, 1.5vw, 22px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.up .tx { margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.up ul { margin-top: 10px; display: grid; gap: 4px; }
.up li { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.up li .ic { width: 20px; height: 20px; color: var(--act); stroke-width: 2.4; }
.up .bt { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.up .bt button { min-height: 56px; padding: 6px 10px; border-radius: var(--sd-radius-md); background: var(--sd-surface-2); box-shadow: inset 0 0 0 1px var(--sd-border); font-size: 16px; font-weight: 800; line-height: 1.2; }
.payb:disabled { background: var(--sd-surface-2); color: var(--sd-text-muted); cursor: not-allowed; }
.fl { display: contents; }
.payb { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 68px; border-radius: var(--sd-radius-md); background: var(--act); color: var(--on-act); text-decoration: none; font-size: clamp(20px, 1.4vw, 20px); font-weight: 800; letter-spacing: -.015em; }
.qw { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.pa { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 72px; padding: 8px 10px 8px 14px; border-radius: 10px; background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); }
.pa.on { box-shadow: inset 0 0 0 2px var(--act); }
.pa b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.pa small { display: block; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.cnt { display: grid; grid-template-columns: 48px 32px 48px; align-items: center; text-align: center; }
.cnt button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--sd-radius-md); background: var(--sd-surface-2); }
.cnt button:disabled { color: var(--sd-text-muted); background: var(--sd-bg); cursor: not-allowed; }
.cnt .ic { width: 22px; height: 22px; }
.cnt em { font-style: normal; font-size: 21px; font-weight: 800; }
.cardn { margin-top: 8px; }
.names { margin: 12px 0 0; padding: 0; border: 0; min-width: 0; }
.names legend { padding: 0; margin-bottom: 6px; font-size: 16px; font-weight: 800; }
.names-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px 10px; }

/* Ou s'asseoir : la voiture vue de dessus de la borne. Couchee quand elle a la place, debout sur un telephone, sans colonne fixe. */
.sit { display: grid; gap: 8px; min-width: 0; container-type: inline-size; }
.sit-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sit-top h2 { margin-bottom: 0; }
.legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.leg, .car { min-width: 0; background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); border-radius: 10px; text-align: left; }
.leg { display: grid; gap: 2px; align-content: center; min-height: 64px; padding: 8px 14px; }
.leg b, .car b { display: block; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.leg b { font-size: 16px; }
.leg small, .car small { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--sd-text-muted); }
.leg[aria-pressed="true"], .car[aria-pressed="true"] { background: var(--sd-accent-soft); box-shadow: inset 0 0 0 2px var(--act); }
.leg[aria-pressed="true"] small, .car[aria-pressed="true"] small { color: var(--sd-accent-strong); }
.cars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.car { display: grid; grid-template-rows: 1fr auto; row-gap: 6px; min-height: 76px; padding: 10px 14px; }
.car b { font-size: clamp(18px, 1.2vw, 18px); }
.car strong { font-size: clamp(19px, 1.3vw, 19px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.coach { display: grid; grid-template-columns: clamp(64px, 11cqw, 110px) minmax(0, 1fr) clamp(20px, 5cqw, 52px); min-width: 0; background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); border-radius: 10px; overflow: hidden; }
.coach--r { grid-template-columns: clamp(20px, 5cqw, 52px) minmax(0, 1fr) clamp(64px, 11cqw, 110px); }
.coach-end { display: grid; align-content: center; justify-items: center; gap: 4px; padding: 6px 4px; font-size: clamp(14px, 1.7cqw, 32px); font-weight: 600; line-height: 1.15; text-align: center; color: var(--sd-text-muted); }
.coach-end:first-child { border-right: 1px solid var(--sd-border); }
.coach-end:last-child { border-left: 1px solid var(--sd-border); }
.coach--r .coach-end .ic { transform: scaleX(-1); }
.seats { --r: clamp(56px, 8cqw, 120px); --a: clamp(14px, 3cqw, 32px); display: grid; grid-auto-columns: minmax(48px, 1fr); grid-auto-rows: var(--r); gap: clamp(4px, .9cqw, 10px); min-width: 0; padding: clamp(8px, 1.6cqw, 18px); }
.seats--a0 { grid-template-rows: var(--r) var(--a) var(--r) var(--r); }
.seats--a1 { grid-template-rows: var(--r) var(--r) var(--a) var(--r) var(--r); }
.s { --sc: 1; --sl: 1; grid-column: var(--sc); grid-row: var(--sl); display: grid; align-content: center; justify-items: center; min-width: 0; padding-right: 7px; border-radius: 10px 5px 5px 10px; background: var(--sd-surface-2); box-shadow: inset 0 0 0 1px var(--sd-text-muted), inset -7px 0 0 var(--sd-text-muted); font-size: clamp(15px, 2.4cqw, 44px); font-weight: 700; line-height: 1.1; }
.s small { max-width: 100%; overflow: hidden; font-size: clamp(11px, 1.5cqw, 28px); font-weight: 700; }
.coach--r .s { padding: 0 0 0 7px; border-radius: 5px 10px 10px 5px; box-shadow: inset 0 0 0 1px var(--sd-text-muted), inset 7px 0 0 var(--sd-text-muted); }
.s.s--x { background: var(--sd-border); box-shadow: none; cursor: not-allowed; }
.s.s--on { background: var(--act); color: var(--on-act); box-shadow: none; }
.s-c1 { --sc: 1; } .s-c2 { --sc: 2; } .s-c3 { --sc: 3; } .s-c4 { --sc: 4; } .s-c5 { --sc: 5; } .s-c6 { --sc: 6; } .s-c7 { --sc: 7; } .s-c8 { --sc: 8; } .s-c9 { --sc: 9; } .s-c10 { --sc: 10; }
.s-l1 { --sl: 1; } .s-l2 { --sl: 2; } .s-l3 { --sl: 3; } .s-l4 { --sl: 4; } .s-l5 { --sl: 5; }
.coach--eco { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: clamp(14px, 3cqw, 36px); }
.eco { display: grid; gap: 4px; min-width: 0; }
.eco b { font-size: clamp(24px, 2vw, 29px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.eco span { font-size: clamp(16px, 1.05vw, 16px); font-weight: 500; color: var(--sd-text-muted); }
.sit-state { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 16px; font-weight: 600; color: var(--sd-text-muted); }
.sit-state b { font-weight: 800; color: var(--sd-text); }
@container (max-width: 559px) {
  .cars { grid-template-columns: minmax(0, 1fr); }
  .car { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  .coach, .coach--r { grid-template-columns: minmax(0, 1fr); }
  .coach-end { grid-auto-flow: column; justify-content: center; }
  .coach-end:empty { display: none; }
  .coach-end:first-child { border-right: 0; border-bottom: 1px solid var(--sd-border); }
  .coach-end:last-child { border-left: 0; border-top: 1px solid var(--sd-border); }
  .coach-end .ic { transform: rotate(90deg); }
  .coach--r .coach-end .ic { transform: rotate(-90deg); }
  .seats { grid-auto-rows: 60px; grid-template-rows: none; }
  .seats--a0 { grid-template-columns: 1fr 16px 1fr 1fr; }
  .seats--a1 { grid-template-columns: 1fr 1fr 16px 1fr 1fr; }
  .s { grid-column: var(--sl); grid-row: var(--sc); padding: 0 0 7px; border-radius: 10px 10px 5px 5px; box-shadow: inset 0 0 0 1px var(--sd-text-muted), inset 0 -7px 0 var(--sd-text-muted); font-size: 16px; }
  .s small { font-size: 12px; }
  .coach--r .s { padding: 7px 0 0; border-radius: 5px 5px 10px 10px; box-shadow: inset 0 0 0 1px var(--sd-text-muted), inset 0 7px 0 var(--sd-text-muted); }
  .coach--eco { grid-template-columns: minmax(0, 1fr); }
}
.hold { font-size: 15px; font-weight: 600; color: var(--sd-text-muted); text-align: center; }
.off-btn { justify-self: center; min-height: 48px; padding: 0 12px; font-size: 15px; font-weight: 700; color: var(--sd-text-muted); text-decoration: underline; text-underline-offset: 3px; }

/* Billet : le seul objet clair de la nuit, noir sur blanc dans les deux themes */
.sky-top { background: var(--sd-bg); color: var(--sd-text); }
.sky { padding: clamp(14px, 2.4vw, 35px) 0 clamp(120px, 14vw, 190px); }
.sky .inner { padding: 0 var(--g); }
.sky h1 { font-size: clamp(44px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.sky p { margin-top: clamp(10px, 1.2vw, 17px); font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; color: var(--sd-text-muted); max-width: 44em; line-height: 1.4; overflow-wrap: anywhere; }
.sky p b { color: var(--sd-text); font-weight: 700; }
.stack { position: relative; margin: calc(-1 * clamp(96px, 11vw, 150px)) var(--g) 0; z-index: 1; display: grid; gap: 10px; }
.tk { --stub: clamp(250px, 25vw, 360px); --notch: clamp(14px, 1.3vw, 19px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); background: var(--sd-surface); color: var(--sd-text); border-radius: var(--sd-radius-lg); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--sd-text) 45%, transparent); animation: rise 400ms cubic-bezier(.2, .7, .2, 1) both;
  -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, var(--sd-text)) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, var(--sd-text)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, transparent 98%, var(--sd-text)) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%, transparent 98%, var(--sd-text)) bottom / 100% 51% no-repeat; }
.tk-main { padding: clamp(18px, 2.2vw, 32px) clamp(20px, 2.8vw, 40px) clamp(18px, 2vw, 29px); min-width: 0; display: flex; flex-direction: column; gap: clamp(16px, 2vw, 29px); }
.tk-brand { display: flex; align-items: center; gap: 14px; font-size: clamp(15px, 1.15vw, 17px); }
.tk-co { font-weight: 300; margin-left: -.5em; }
.tk-sil { width: 30px; height: auto; color: var(--sd-text); fill: none; stroke: currentColor; stroke-width: 64; stroke-linecap: round; stroke-linejoin: round; }
.tk-route { display: grid; grid-template-columns: auto minmax(50px, 1fr) auto; align-items: end; column-gap: clamp(14px, 2vw, 29px); }
.tk-route small { display: block; font-size: clamp(15px, 1.1vw, 16px); font-weight: 600; color: var(--sd-text-muted); }
.tk-route strong { display: block; font-size: clamp(46px, 6.4vw, 92px); font-weight: 800; letter-spacing: -.045em; line-height: 1; }
.tk-route b { display: block; margin-top: 6px; font-size: clamp(19px, 2vw, 29px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; line-height: 1.1; }
.tk-end { text-align: right; }
.tk-line { position: relative; height: 14px; margin-bottom: clamp(30px, 3.1vw, 45px); border-radius: 7px; background: var(--sd-text); }
.tk-line i { position: absolute; inset: 0; border-radius: 7px; background: var(--sd-border); transform: scaleX(0); transform-origin: right; animation: fill 400ms ease-out 200ms backwards; }
.tk-line em { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--sd-surface); border: 6px solid var(--sd-text); }
.tk-line em:first-of-type { left: -3px; } .tk-line em:last-of-type { right: -3px; }
.tk-line span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(13px, 1vw, 14px); height: 28px; min-width: 92px; background: var(--sd-text); color: var(--sd-surface); box-shadow: 0 0 0 5px var(--sd-surface); }
.tk-line span b { display: inline; margin: 0 0 0 .35em; font-size: inherit; letter-spacing: 0; line-height: 1; white-space: nowrap; }
.tk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 17px) clamp(14px, 2vw, 29px); margin-top: auto; padding-top: clamp(12px, 1.4vw, 20px); border-top: 2px solid var(--sd-text); }
.tk-facts dt { font-size: clamp(14px, 1vw, 14px); font-weight: 600; color: var(--sd-text-muted); }
.tk-facts dd { font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.tk-proof { display: flex; align-items: center; gap: 10px; font-size: clamp(15px, 1.1vw, 16px); font-weight: 700; }
.tk-zone { display: inline; margin-left: .3em; font-size: .42em; font-weight: 700; letter-spacing: 0; }
.tz { display: inline; margin-left: .3em; font-size: .4em; font-weight: 700; letter-spacing: 0; color: var(--sd-text-muted); }
.tz[hidden] { display: none; }
.tz-note { display: block; grid-column: 1 / -1; margin-top: 8px; font-size: 15px; font-weight: 700; white-space: normal; }
.tk-stub { position: relative; display: grid; align-content: center; justify-items: center; gap: clamp(8px, 1vw, 14px); padding: clamp(14px, 1.6vw, 23px); text-align: center; border-left: 3px dashed var(--sd-border); }
.ticket-qr { display: block; width: min(100%, 340px); height: auto; color: var(--sd-text); }
.tk-stub p { font-size: clamp(15px, 1.1vw, 16px); font-weight: 700; line-height: 1.3; }
.tk-stub .m { font-size: clamp(14px, 1vw, 14px); color: var(--sd-text-muted); }
.tk-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.tk-pick a { display: grid; align-content: center; min-height: 64px; padding: 8px 14px; border-radius: var(--sd-radius-md); background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); text-decoration: none; }
.tk-pick a.on { box-shadow: inset 0 0 0 2px var(--act); }
.tk-pick b { font-size: 16px; font-weight: 800; }
.tk-pick small { font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.after { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 3vw, 43px); padding: clamp(24px, 3vw, 43px) var(--g) clamp(28px, 3.4vw, 49px); }
.after h2 { font-size: clamp(20px, 1.5vw, 22px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.after p { font-size: clamp(17px, 1.05vw, 17px); font-weight: 500; color: var(--sd-text-muted); line-height: 1.45; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 18px; border-radius: var(--sd-radius-md); font-weight: 800; font-size: clamp(17px, 1.05vw, 17px); background: var(--sd-surface-2); text-decoration: none; }
.btn.p { background: var(--act); color: var(--on-act); }
.rc { display: grid; grid-template-columns: 1fr auto; row-gap: 3px; font-size: clamp(16px, 1.05vw, 16px); font-weight: 600; color: var(--sd-text-muted); }
.rc dd { text-align: right; color: var(--sd-text); font-weight: 700; }
.rc .tot { color: var(--sd-text); font-weight: 800; font-size: 1.15em; padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--sd-border); }
@keyframes rise { from { transform: translateY(26px); } to { transform: none; } }
@keyframes fill { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes fillv { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* Pages de trajet, de gare et de ligne, index */
.crumb { padding: 6px var(--g) 0; font-size: 15px; font-weight: 600; color: var(--sd-text-muted); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.crumb li { display: flex; align-items: center; gap: 8px; }
.crumb li + li::before { content: "/"; color: var(--sd-text-muted); }
.crumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; text-decoration: none; }
.crumb [aria-current] { color: var(--sd-text); font-weight: 700; }
.tr-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 58px); padding: clamp(8px, 1.4vw, 20px) var(--g) clamp(24px, 3vw, 43px); align-items: center; }
.tr-top h1 { font-size: clamp(36px, 4.4vw, 63px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.tr-top .blurb { margin-top: clamp(8px, .9vw, 13px); font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; letter-spacing: -.015em; }
.tr-top .ls { margin-top: clamp(10px, 1vw, 14px); display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: clamp(16px, 1.1vw, 16px); font-weight: 700; }
.tr-top .ls a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; text-decoration: none; }
.facts { margin-top: clamp(18px, 2.2vw, 32px); display: flex; flex-wrap: wrap; gap: clamp(16px, 2.6vw, 37px); }
.facts dt { font-size: clamp(15px, 1vw, 15px); font-weight: 600; color: var(--sd-text-muted); }
.facts dd { font-size: clamp(28px, 2.6vw, 37px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.facts dd em { font-style: normal; font-size: .55em; font-weight: 700; letter-spacing: -.01em; margin-right: .15em; }
.facts .q { display: block; font-size: clamp(15px, 1vw, 15px); font-weight: 600; letter-spacing: 0; color: var(--sd-text-muted); }
.cta { margin-top: clamp(18px, 2vw, 29px); display: inline-flex; align-items: center; gap: 8px; min-height: 60px; padding: 0 24px; border-radius: var(--sd-radius-md); background: var(--act); color: var(--on-act); text-decoration: none; font-size: clamp(19px, 1.3vw, 19px); font-weight: 800; letter-spacing: -.01em; }
.none .cta { margin-top: 0; }
.hero-map { position: relative; }
.blk { padding: clamp(24px, 3vw, 43px) var(--g); border-top: 1px solid var(--sd-border); }
.blk .sec-h { margin-bottom: clamp(10px, 1.2vw, 17px); }
.blk p.lead { max-width: 44em; font-size: clamp(17px, 1.15vw, 17px); font-weight: 500; color: var(--sd-text-muted); line-height: 1.45; margin-bottom: 14px; }
.deps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 10px; container-type: inline-size; }
.deps .tl { grid-template-columns: minmax(0, 1fr) auto; }
.prices { width: 100%; border-collapse: collapse; font-size: clamp(17px, 1.15vw, 17px); }
.prices th, .prices td { padding: 12px 10px; text-align: right; border-bottom: 1px solid var(--sd-border); white-space: nowrap; }
.prices th:first-child { text-align: left; font-weight: 800; white-space: normal; }
.prices thead th { font-size: clamp(15px, 1vw, 15px); font-weight: 700; color: var(--sd-text-muted); }
.prices td { font-weight: 800; }
.prices .tw { display: block; font-size: clamp(14px, .9vw, 14px); font-weight: 600; color: var(--sd-text-muted); white-space: normal; }
.faq { display: grid; gap: 8px; max-width: 980px; }
.faq details { border-radius: var(--sd-radius-md); background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 10px 16px; font-size: clamp(17px, 1.15vw, 17px); font-weight: 800; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform 120ms ease; }
.faq details[open] summary .ic { transform: rotate(180deg); }
.faq p { padding: 0 16px 14px; font-size: clamp(17px, 1.05vw, 17px); font-weight: 500; color: var(--sd-text-muted); line-height: 1.45; }
.rts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 10px; }
.rtc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; min-height: 76px; padding: 10px 8px 10px 16px; border-radius: var(--sd-radius-md); background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); text-decoration: none; }
.rtc > span:first-child { display: grid; gap: 2px; min-width: 0; }
.rtc b { font-size: clamp(18px, 1.2vw, 18px); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.rtc small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: clamp(15px, .95vw, 15px); font-weight: 600; color: var(--sd-text-muted); line-height: 1.3; }
.rtc small .li { font-size: 12px; height: 20px; min-width: 32px; }
.rtc .p { font-size: clamp(19px, 1.3vw, 19px); font-weight: 800; letter-spacing: -.015em; white-space: nowrap; text-align: right; }
.rtc .p em { display: block; font-style: normal; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--sd-text-muted); line-height: 1; }
.grp + .grp { margin-top: clamp(20px, 2.4vw, 35px); }
.grp h2 { font-size: clamp(22px, 1.7vw, 24px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 10px; }
.dep-r { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 72px; padding: 8px 8px 8px 16px; border-radius: var(--sd-radius-md); background: var(--sd-surface); box-shadow: inset 0 0 0 1px var(--sd-border); text-decoration: none; }
.dep-r strong { font-size: clamp(24px, 1.9vw, 27px); font-weight: 800; letter-spacing: -.025em; }
.dep-r .li { font-size: 13px; }
.dep-r span.w { display: grid; min-width: 0; line-height: 1.25; }
.dep-r span.w b { font-size: clamp(17px, 1.15vw, 17px); font-weight: 800; letter-spacing: -.01em; }
.dep-r span.w small { font-size: clamp(15px, .95vw, 15px); font-weight: 600; color: var(--sd-text-muted); }
.idx { padding: clamp(8px, 1.4vw, 20px) var(--g) clamp(28px, 3.4vw, 49px); }
.idx h1 { font-size: clamp(36px, 4.4vw, 63px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.idx > p { margin: clamp(8px, .9vw, 13px) 0 clamp(20px, 2.4vw, 35px); max-width: 44em; font-size: clamp(17px, 1.2vw, 17px); font-weight: 500; color: var(--sd-text-muted); line-height: 1.45; }
.narrow .frm { margin-top: 0; max-width: clamp(320px, 33vw, 475px); }
.prose h2 { font-size: clamp(21px, 1.4vw, 21px); font-weight: 800; letter-spacing: -.015em; margin: clamp(16px, 1.6vw, 23px) 0 6px; }
.prose > p + p { margin-top: 0; }
.closed { flex: 1; display: grid; justify-items: start; align-content: center; gap: 12px; padding: clamp(24px, 4vw, 58px) var(--g); }
.closed h1 { font-size: clamp(32px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; }
.closed p { max-width: 44em; font-size: clamp(17px, 1.2vw, 17px); font-weight: 500; color: var(--sd-text-muted); line-height: 1.45; }
.closed .cta { margin-top: 8px; }
.sil { width: clamp(64px, 6vw, 86px); height: auto; color: var(--sd-border); fill: none; stroke: currentColor; stroke-width: 64; stroke-linecap: round; stroke-linejoin: round; }

@container (max-width: 860px) {
  .tl { grid-template-columns: minmax(0, 1fr) auto; }
  .hrs { grid-column: 1 / -1; }
  .hrs small:last-of-type { grid-column: 3; text-align: right; }
  .hrs .meta { grid-column: 1 / 4; grid-row: 3; text-align: left; white-space: normal; margin-top: 8px; line-height: 1.35; }
  .pz { grid-template-columns: auto auto auto; justify-content: start; justify-items: start; align-items: baseline; gap: 6px; padding-top: 10px; border-top: 1px solid var(--sd-border); }
  .ch { align-self: end; }
}
@container (max-width: 560px) {
  .tl { grid-template-columns: minmax(0, 1fr); }
  .hrs { column-gap: 10px; }
  .pz { grid-template-columns: auto auto 1fr; }
  .pz span { justify-self: end; }
  .ch { justify-self: stretch; justify-content: center; }
}
@media (max-width: 1180px) {
  .bar, .barw:has(#bar-rt:checked) .bar { grid-template-columns: minmax(0, 1fr) 172px minmax(0, 1fr); }
  .bar .dp { grid-column: 1 / 4; border-left: 0; border-top: 1px solid var(--sd-border); }
  .barw:has(#bar-rt:checked) .bar .dp { grid-column: 1; }
  .bar .rt { grid-column: 2 / 4; border-top: 1px solid var(--sd-border); }
  .go { grid-column: 1 / 4; margin: 8px 0 0; min-height: 60px; }
}
@media (max-width: 980px) {
  /* Le code passe sous le titre : c'est ce qu'on cherche dans un train */
  .tk { --cut: 400px; grid-template-columns: minmax(0, 1fr);
    -webkit-mask: radial-gradient(circle var(--notch) at 0 var(--cut), transparent 98%, var(--sd-text)) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut), transparent 98%, var(--sd-text)) right / 51% 100% no-repeat;
    mask: radial-gradient(circle var(--notch) at 0 var(--cut), transparent 98%, var(--sd-text)) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% var(--cut), transparent 98%, var(--sd-text)) right / 51% 100% no-repeat; }
  .tk-stub { order: -1; height: 400px; border-left: 0; border-bottom: 3px dashed var(--sd-border); align-content: center; }
  .ticket-qr { width: min(70vw, 270px); }
  .tk-route strong { font-size: clamp(46px, 13vw, 84px); }
  .tk-route b { font-size: clamp(17px, 4vw, 26px); }
  .tk-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .home, .res, .tr-top, .pm { grid-template-columns: minmax(0, 1fr); }
  .map { width: 100%; }
  .side { position: static; order: 2; }
  .rcp { position: static; order: -1; }
  .pitch { order: -1; }
  .pitch h1 .dk { display: none; }
  .barw.can-fold { display: none; }
  .mini { display: flex; }
}
@media (max-width: 640px) {
  .hd { min-height: 60px; }
  .nav { display: none; }
  .menu { display: block; }
  .tabs { margin-top: 2px; }
  .bar, .barw:has(#bar-rt:checked) .bar { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 6px; }
  .bar .pk { grid-column: 1 / 3; }
  .bar .fd { min-height: 72px; padding-left: 44px; border-left: 0; }
  .bar .pk.a .fd { border-top: 1px solid var(--sd-border); border-radius: 0; }
  .barw:has(#bar-rt:checked) .bar .pk[open] { grid-column: 1 / 3; }
  .bar:has(.pk[open]) .rib { display: none; }
  .pk-panel { position: static; width: auto; max-height: none; padding: 10px 4px 14px; box-shadow: none; }
  .pk.dp .pk-panel, .pk.rt .pk-panel { width: auto; }
  .rib { position: absolute; left: 12px; right: 0; top: 40px; height: 72px; pointer-events: none; display: block; }
  .rib::before { left: 8px; right: auto; width: 8px; top: 0; bottom: 0; height: auto; margin: 0; }
  .rib i { left: 1px !important; right: auto !important; }
  .rib i:nth-child(1) { top: 0; } .rib i:nth-child(2) { top: 100%; }
  .swap { position: absolute; right: 16px; top: 50%; margin-top: -26px; pointer-events: auto; }
  .bar .pk.dp .fd, .bar .pk.rt .fd { padding-left: 16px; }
  .bar .pk.dp .fd { border-left: 0; }
  .barw:has(#bar-rt:checked) .bar .dp { grid-column: 1; }
  .bar .rt { grid-column: 2; }
  .bar .pk.rt .fd { border-left: 1px solid var(--sd-border); }
  .go { grid-column: 1 / 3; min-height: 60px; margin: 6px 0 0; }
  .nm { display: block; }
  .pl { position: static; transform: none; width: 100%; margin: 0 !important; background: none; grid-template-columns: minmax(0, 1fr) auto; box-shadow: none; border-radius: 0; padding: 10px 0; border-top: 1px solid var(--sd-border); }
  .pl.de { display: none; }
  .pl.on { background: none; color: inherit; box-shadow: inset 3px 0 0 var(--sd-text); padding-left: 12px; border-top: 1px solid var(--sd-border); }
  .pl.on small { color: var(--sd-text-muted); }
  .pl b, .pl .pr { font-size: 18px; }
  .pl small { font-size: 15px; }
  .deal { margin-top: 12px; }
  .hrs strong { font-size: 38px; }
  .find-l { display: flex; }
  .ft-b span { margin-left: 0; min-height: 48px; display: inline-flex; align-items: center; }
  .rtc { grid-template-columns: minmax(0, 1fr) auto; padding-right: 14px; }
  .rtc .ic { display: none; }
  .dep-r { grid-template-columns: auto auto minmax(0, 1fr); padding-right: 14px; }
  .dep-r > .ic { display: none; }
}
@media (max-width: 620px) {
  /* Telephone : le trajet du billet passe a la verticale */
  .tk-route { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 16px; align-items: start; }
  .tk-route > div:first-child { grid-column: 2; grid-row: 1; }
  .tk-end { grid-column: 2; grid-row: 2; text-align: left; }
  .tk-line { grid-column: 1; grid-row: 1 / 3; width: 12px; height: auto; justify-self: center; align-self: stretch; margin: 10px 0 24px; }
  .tk-line i { transform: scaleY(0); transform-origin: bottom; animation-name: fillv; }
  .tk-line em { left: 50% !important; right: auto !important; margin: 0 0 0 -13px; width: 26px; height: 26px; border-width: 5px; }
  .tk-line em:first-of-type { top: -2px; }
  .tk-line em:last-of-type { top: auto; bottom: -2px; }
  .tk-line span { min-width: 0; font-size: 12px; height: 24px; }
  .tk-line span b { display: none; }
  .tk-route strong { font-size: 64px; }
  .tk-route b { font-size: 24px; white-space: normal; }
}

/* Imprimer : le billet seul, sur une page, toujours noir sur blanc */
@media print {
  @page { margin: 12mm; }
  html, :root[data-theme] { color-scheme: light; }
  html, body { background: none; min-height: 0; display: block; }
  .tk, .tk * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sky-top, .sky, .after, .ft, .tk-pick { display: none; }
  .stack { margin: 0; }
  .tk { --stub: 62mm; grid-template-columns: minmax(0, 1fr) var(--stub); box-shadow: none; animation: none; -webkit-mask: none; mask: none; border: 1px solid var(--sd-text); break-inside: avoid; }
  .tk-main { padding: 7mm; gap: 6mm; }
  .tk-stub { order: 0; height: auto; padding: 5mm; border-bottom: 0; border-left: 2px dashed var(--sd-text-muted); }
  .ticket-qr { width: 100%; }
  .tk-route { grid-template-columns: auto minmax(30px, 1fr) auto; grid-template-rows: auto; column-gap: 5mm; row-gap: 0; align-items: end; }
  .tk-route > div:first-child { grid-column: auto; grid-row: auto; }
  .tk-end { grid-column: auto; grid-row: auto; text-align: right; }
  .tk-route strong { font-size: 40pt; }
  .tk-route b { font-size: 15pt; }
  .tk-line { grid-column: auto; grid-row: auto; width: auto; height: 14px; margin: 0 0 10mm; }
  .tk-line i { display: none; }
  .tk-line em { top: 50% !important; bottom: auto !important; margin: -13px 0 0; width: 26px; height: 26px; }
  .tk-line em:first-of-type { left: -3px !important; }
  .tk-line em:last-of-type { left: auto !important; right: -3px !important; }
  .tk-line span { min-width: 0; font-size: 11pt; }
  .tk-line span b { display: none; }
  .tk-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; }
  .tk-facts dd { font-size: 13pt; white-space: normal; }
}

.my-code { align-items: center; gap: 12px; padding: 32px var(--g); text-align: center; }
.my-code .code { width: min(100%, 420px); padding: 12px; background: var(--sd-surface); }
.my-code .code svg { display: block; width: 100%; height: auto; }