/* Ciel du soir : bleu nuit, bleu ciel, coucher de soleil, cartes en verre.
   Le tableau des départs garde son allure d'afficheur (noir et jaune).
   Animations : uniquement transform et opacity (gérées par la carte graphique), lentes ou sur
   place, en pause hors écran, coupées si le visiteur a demandé moins de mouvement. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --bg: #060a17;
  --card: rgb(17 24 50 / 0.72);
  --field: rgb(7 11 26 / 0.62);
  --line: rgb(150 172 255 / 0.14);
  --line-strong: rgb(150 172 255 / 0.3);
  --fg: #eef2ff;
  --muted: #9ba8cc;
  --sky: #5ec8ff;
  --sunset: #ff9966;
  --coral: #ff7e6b;
  --gold: #ffd27a;
  --mint: #5eead4;
  --violet: #a78bfa;
  --danger: #ff9a9a;
  --amber: #ffb81c;     /* jaune de l'afficheur */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --stub: 13.5rem;
  --fly: 44s;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color: var(--fg);
  scroll-padding-top: 5.5rem;
  overflow-x: clip;
}
/* Très grands écrans : tout est en rem, la page grandit avec l'écran au lieu de flotter au milieu */
@media (min-width: 2000px) { html { font-size: 18px; } }
@media (min-width: 2600px) { html { font-size: 22px; } }
@media (min-width: 3400px) { html { font-size: 27px; } }

body { margin: 0; min-height: 100dvh; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 0.4rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: min(100% - 2.5rem, 72rem); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 48rem); }

/* ── Décor ── */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #050816 0%, #0a1026 55%, #140f2d 100%); }
.aurora { position: absolute; border-radius: 50%; opacity: 0.8; will-change: transform;
  background: radial-gradient(closest-side, var(--c), transparent); }
.aurora-a { width: 62vw; height: 62vw; max-width: 62rem; max-height: 62rem; left: -14vw; top: -20vw;
  --c: rgb(56 152 255 / 0.42); animation: drift-a 30s ease-in-out infinite; }
.aurora-b { width: 54vw; height: 54vw; max-width: 54rem; max-height: 54rem; right: -16vw; top: 16vh;
  --c: rgb(255 138 92 / 0.3); animation: drift-b 36s ease-in-out infinite; }
.aurora-c { width: 48vw; height: 48vw; max-width: 48rem; max-height: 48rem; left: 22vw; bottom: -26vw;
  --c: rgb(150 110 255 / 0.3); animation: drift-c 42s ease-in-out infinite; }
@keyframes drift-a { 50% { transform: translate(8vw, 6vh) scale(1.1); } }
@keyframes drift-b { 50% { transform: translate(-9vw, 9vh) scale(0.92); } }
@keyframes drift-c { 50% { transform: translate(6vw, -8vh) scale(0.95); } }
.stars { position: absolute; inset: 0; opacity: 0.75; animation: twinkle 7s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 14%, #fff, transparent), radial-gradient(1px 1px at 19% 32%, #cfe3ff, transparent),
    radial-gradient(1.4px 1.4px at 31% 9%, #fff, transparent), radial-gradient(1px 1px at 44% 24%, #ffe9c4, transparent),
    radial-gradient(1.2px 1.2px at 57% 12%, #fff, transparent), radial-gradient(1px 1px at 68% 30%, #cfe3ff, transparent),
    radial-gradient(1.4px 1.4px at 79% 8%, #fff, transparent), radial-gradient(1px 1px at 91% 22%, #ffe9c4, transparent),
    radial-gradient(1px 1px at 14% 52%, #fff, transparent), radial-gradient(1.2px 1.2px at 86% 47%, #fff, transparent),
    radial-gradient(1px 1px at 36% 66%, #cfe3ff, transparent), radial-gradient(1.2px 1.2px at 72% 71%, #fff, transparent); }
.stars-b { animation-delay: -3.5s; animation-duration: 9s; opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 4% 38%, #fff, transparent), radial-gradient(1.2px 1.2px at 25% 18%, #fff, transparent),
    radial-gradient(1px 1px at 38% 41%, #cfe3ff, transparent), radial-gradient(1.2px 1.2px at 51% 5%, #fff, transparent),
    radial-gradient(1px 1px at 63% 44%, #ffe9c4, transparent), radial-gradient(1.2px 1.2px at 74% 19%, #fff, transparent),
    radial-gradient(1px 1px at 96% 36%, #fff, transparent), radial-gradient(1px 1px at 47% 58%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 11% 78%, #fff, transparent), radial-gradient(1px 1px at 89% 84%, #cfe3ff, transparent); }
@keyframes twinkle { from { opacity: 0.3; } to { opacity: 0.85; } }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 120% 90% at 50% 35%, transparent 55%, rgb(4 6 16 / 0.8) 100%); }

/* ── Verre ──
   Sans filtre de flou (flouter une grande carte au-dessus d'un fond animé divise la fluidité
   par deux) : fond translucide, reflet en haut, et un liseré qui passe du bleu ciel au
   coucher de soleil. Seul le menu, petit, garde un vrai flou. */
.glass, .box, .ticket, .card {
  border: 1px solid transparent; border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgb(27 38 80 / 0.74), rgb(13 19 43 / 0.82)) padding-box,
    linear-gradient(140deg, rgb(94 200 255 / 0.42), rgb(150 172 255 / 0.12) 38%, rgb(150 172 255 / 0.1) 62%, rgb(255 153 102 / 0.34)) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 2rem 4rem -2.5rem rgb(0 0 0 / 0.8);
}
.glass { border-radius: 1.5rem; }
/* Halo qui suit le pointeur */
.spot, .ticket { position: relative; isolation: isolate; }
.spot::before, .ticket::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
  background: radial-gradient(24rem circle at var(--mx, 50%) var(--my, 50%), rgb(94 200 255 / 0.12), transparent 60%); }
.spot:hover::before, .ticket:hover::before { opacity: 1; }

/* ── Boutons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 3rem; padding: 0 1.4rem;
  border-radius: 0.9rem; font-weight: 620; font-size: 0.97rem; white-space: nowrap; transition: filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; }
.btn-primary { color: #2a1206; background: linear-gradient(135deg, #ffcf7a, #ff9966 52%, #ff7e8a);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0.9rem 2.4rem -0.9rem rgb(255 140 96 / 0.75); }
.btn-primary:hover { filter: brightness(1.07) saturate(1.05); }
/* Tout ce qui touche au train est vert menthe */
.panel-rail .btn-primary, .ticket-rail .btn-primary { color: #032129; background: linear-gradient(135deg, #8df5df, #5eead4 45%, #5ec8ff);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 0.9rem 2.4rem -0.9rem rgb(94 234 212 / 0.6); }
.btn-ghost { border: 1px solid var(--line-strong); background: rgb(150 172 255 / 0.07); }
.btn-ghost:hover { background: rgb(150 172 255 / 0.14); }
.btn-sm { min-height: 2.5rem; padding: 0 1rem; font-size: 0.9rem; border-radius: 0.75rem; }
.btn-lg { min-height: 3.4rem; padding: 0 1.8rem; font-size: 1.05rem; }
.btn-icon { width: 3rem; padding: 0; flex: none; }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--sky); font-size: 0.9rem; font-weight: 540; }
.link:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.linklike { color: var(--muted); font-size: 0.86rem; text-decoration: underline; text-underline-offset: 0.2em; }
.linklike:hover { color: var(--fg); }
.linklike.danger:hover { color: var(--danger); }

/* ── Navigation ── */
.nav { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line);
  background: rgb(6 10 23 / 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.12rem; font-weight: 520; letter-spacing: -0.02em; }
.brand b { font-weight: 720; background: linear-gradient(90deg, var(--gold), var(--sunset)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Nom du site flouté sur les pages vues sans être connecté (le texte dessous est un faux mot) */
.blur { display: inline-block; filter: blur(0.3em); user-select: none; pointer-events: none; }
.brand-mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 0.7rem; color: #06101f;
  background: linear-gradient(135deg, #8fdcff, #5ec8ff 50%, #7b9bff); box-shadow: 0 0 1.4rem -0.3rem var(--sky); }
.brand-mark .icon, .brand-mark svg { fill: currentColor; stroke: none; width: 1.15rem; height: 1.15rem; }
.nav-links { display: none; gap: 1.8rem; font-size: 0.92rem; color: var(--muted); }
.nav-links a { transition: color 0.3s ease; }
.nav-links a:hover { color: var(--fg); }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-end { display: flex; align-items: center; gap: 1rem; }
.clock { display: none; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .clock { display: block; } }
.who { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.3rem; padding: 0 0.85rem; border: 1px solid var(--line-strong); border-radius: 99px; background: rgb(150 172 255 / 0.07); font-size: 0.86rem; transition: background-color 0.3s ease; }
.who:hover { background: rgb(150 172 255 / 0.14); }
.who span { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .who span { max-width: 5.5rem; } }
/* À côté du nom : accès à l'administration (propriétaire du site) et déconnexion rapide */
.nav-me { display: flex; align-items: center; gap: 0.4rem; }
.nav-ico { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid var(--line-strong); border-radius: 50%; background: rgb(150 172 255 / 0.07); color: var(--muted); transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.nav-ico:hover { color: var(--fg); background: rgb(150 172 255 / 0.14); }
.nav-ico .icon { width: 1rem; height: 1rem; }
#nav-admin { color: var(--gold); }
.nav-out:hover { color: var(--danger); border-color: rgb(255 154 154 / 0.4); background: rgb(255 154 154 / 0.1); }
.who .icon { color: var(--sky); }

/* ── Hero ── */
.hero { position: relative; padding-top: 3.8rem; }
@media (min-width: 1020px) { .hero { padding-top: 7.2rem; } }
.hero-in { position: relative; z-index: 1; display: grid; gap: 2.8rem; align-items: center; }
@media (min-width: 1020px) { .hero-in { grid-template-columns: minmax(0, 1fr) auto; gap: 3.5rem; align-items: start; min-height: 27rem; } .hero-text { padding-top: 0.6rem; } }
.chip { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.28rem 0.9rem 0.28rem 0.3rem; border-radius: 99px;
  border: 1px solid var(--line); background: rgb(17 24 50 / 0.7); font-size: 0.84rem; color: var(--muted); }
.chip-tag { padding: 0.12rem 0.6rem; border-radius: 99px; background: rgb(94 234 212 / 0.14); color: var(--mint); font-weight: 560; font-size: 0.78rem; }
h1 { margin-top: 1.5rem; font-size: clamp(2.7rem, 6.6vw, 4.5rem); font-weight: 660; line-height: 1.03; letter-spacing: -0.045em; }
/* À côté du tableau, le titre tient sur deux lignes */
@media (min-width: 1020px) { h1 { font-size: clamp(2.5rem, 4.1vw, 3.8rem); } .sunset { white-space: nowrap; } }
@media (min-width: 2000px) { h1 { font-size: 3.8rem; } }
.sunset { background: linear-gradient(95deg, var(--gold) 5%, var(--sunset) 48%, #ff7eb0 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { margin-top: 1.4rem; max-width: 34rem; font-size: 1.1rem; color: var(--muted); }
.proofs { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.6rem; font-size: 0.88rem; color: var(--muted); }
.proofs li { display: inline-flex; align-items: center; gap: 0.45rem; }
.proofs .icon { color: var(--mint); }
@media (max-width: 699px) { .lead { font-size: 1rem; } }

/* Trajectoire : une parabole exacte (la courbe ci-dessous = le mouvement de l'avion) */
.sky { position: absolute; left: 50%; top: 1rem; width: min(100% - 2rem, 84rem); aspect-ratio: 12 / 1; transform: translateX(-50%); pointer-events: none; }
.arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc path { fill: none; stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.pin { position: absolute; bottom: 0; width: 0.55rem; height: 0.55rem; margin: 0 0 -0.275rem -0.275rem; border-radius: 50%; }
.pin::after { content: ""; position: absolute; inset: -0.5rem; border-radius: 50%; border: 1px solid currentColor; opacity: 0; animation: ping 5s ease-out infinite; }
.pin-a { left: 0; color: var(--sky); background: currentColor; box-shadow: 0 0 1rem currentColor; }
.pin-b { left: 100%; color: var(--sunset); background: currentColor; box-shadow: 0 0 1rem currentColor; }
.pin-b::after { animation-delay: -2.5s; }
@keyframes ping { 0% { opacity: 0.7; transform: scale(0.4); } 60%, 100% { opacity: 0; transform: scale(1.5); } }
.flight, .flight-y { position: absolute; inset: 0; will-change: transform; }
.flight { animation: fly-x var(--fly) linear infinite; }
.flight-y { animation: fly-y var(--fly) linear infinite; }
.flight-r { position: absolute; left: 0; bottom: 0; width: 1.9rem; height: 1.9rem; margin: 0 0 -0.95rem -0.95rem; animation: fly-r var(--fly) linear infinite; }
.plane { display: block; width: 100%; height: 100%; transform: rotate(45deg); fill: #fff; stroke: none; filter: drop-shadow(0 0 0.5rem rgb(94 200 255 / 0.85)); }
.trail { position: absolute; right: 62%; top: 50%; width: 8rem; height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5)); }
@keyframes fly-x {
  0% { transform: translateX(0); opacity: 0; }
  6%, 94% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
/* Montée puis descente « quadratiques » : avec l'avance régulière ci-dessus, cela trace la parabole */
@keyframes fly-y {
  0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
  50% { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
  100% { transform: translateY(0); }
}
/* Inclinaison = pente de la parabole (hauteur = 1/12 de la largeur : l'arc passe au-dessus du titre) */
@keyframes fly-r {
  0% { transform: rotate(-18.4deg); } 12.5% { transform: rotate(-14deg); } 25% { transform: rotate(-9.5deg); }
  37.5% { transform: rotate(-4.8deg); } 50% { transform: rotate(0deg); } 62.5% { transform: rotate(4.8deg); }
  75% { transform: rotate(9.5deg); } 87.5% { transform: rotate(14deg); } 100% { transform: rotate(18.4deg); }
}
.cloud { position: absolute; width: 16rem; height: 3.2rem; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.08), transparent); animation: cloud 70s ease-in-out infinite alternate; }
.cloud-a { left: 12%; top: 40%; }
.cloud-b { left: 58%; top: 120%; width: 22rem; animation-duration: 90s; animation-direction: alternate-reverse; }
@keyframes cloud { from { transform: translateX(-3rem); } to { transform: translateX(5rem); } }

/* Tableau des départs à palettes : un afficheur noir et jaune, dans un cadre de verre */
.board-frame { width: 100%; max-width: 36rem; padding: 0.45rem; border: 1px solid transparent; border-radius: 1.4rem;
  background:
    linear-gradient(180deg, rgb(27 38 80 / 0.74), rgb(13 19 43 / 0.82)) padding-box,
    linear-gradient(140deg, rgb(94 200 255 / 0.5), rgb(150 172 255 / 0.12) 40%, rgb(255 184 28 / 0.45)) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 2.5rem 5rem -2.5rem rgb(0 0 0 / 0.85), 0 0 5rem -2rem rgb(255 184 28 / 0.22); }
.board { padding: 1rem 1rem 0.9rem; border-radius: 1rem; background: #08090c; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05); }
.board-head { display: flex; align-items: baseline; gap: 0.7rem; padding-bottom: 0.7rem; border-bottom: 1px solid #2a2e35; }
.board-title { font: 700 0.95rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.board-sub { font: 500 0.72rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: #a39f95; }
.board-led { margin-left: auto; align-self: center; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #4ade9b; box-shadow: 0 0 0.6rem #4ade9b; animation: led 2.4s ease-in-out infinite; }
@keyframes led { 50% { opacity: 0.25; } }
.board-cols, .board-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: center; }
.board-ico { align-self: center; width: 1.05rem; height: 1.05rem; fill: var(--amber); stroke: none; transform: rotate(45deg); }
.board-cols { padding: 0.55rem 0 0.35rem; font: 500 0.66rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #a39f95; }
.board-cols span:last-child { text-align: right; }
.board-rows { display: grid; gap: 0.3rem; min-height: 13.2rem; }
.board-row { width: 100%; padding: 0.1rem 0; text-align: left; font: 600 0.9rem var(--mono); color: #f2ede2; border-radius: 3px; }
.board-row:hover .flap { background: #262a31; }
.cells { display: flex; gap: 1px; overflow: hidden; }
.flap { position: relative; flex: none; display: grid; place-items: center; width: 1.3ch; height: 1.85em; background: #1a1d21; border-radius: 2px; text-transform: uppercase; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #08090c; opacity: 0.85; }
.cells-price .flap, .cells-time .flap { color: var(--amber); }
.board-cols .col-date { width: calc(5 * (1.3ch + 1px)); font-size: 0.66rem; }
.board-note { margin-top: 0.8rem; font-size: 0.74rem; line-height: 1.45; color: #a39f95; }
@media (max-width: 560px) { .col-date, .cells-date, .col-flight, .cells-flight { display: none; } .board-cols, .board-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.45rem; } .board-row { font-size: 0.74rem; } .board { padding: 0.8rem 0.7rem; } .board-frame { padding: 0.35rem; } }

/* Écran de gare : le moniteur bleu des halls, heures en jaune, destination en blanc */
.screen { border-radius: 1rem; overflow: hidden; background: #15181d; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06); }
.screen-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.8rem; padding: 0.6rem 1rem; background: linear-gradient(180deg, #eef1f5, #cdd3db); color: #18202f; }
.screen-title { font-size: 1.05rem; font-weight: 720; letter-spacing: -0.015em; }
.screen-sub { font-size: 0.78rem; font-style: italic; color: #4a5568; }
.screen-clock { margin-left: auto; padding: 0.05rem 0.5rem; border-radius: 0.3rem; background: #18202f; color: #fff; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.screen-body { position: relative; padding-right: 2.3rem; background: linear-gradient(180deg, #2157c4, #143f9c); }
.screen-rows { display: grid; min-height: 15.5rem; align-content: start; }
.screen-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; width: 100%; padding: 0.42rem 0.9rem; text-align: left; color: #fff; transition: background-color 0.3s ease; }
.screen-rows li:nth-child(even) .screen-row { background: rgb(255 255 255 / 0.08); }
.screen-row:hover { background: rgb(255 255 255 / 0.18) !important; }
.screen-row time { font-size: 1.12rem; font-weight: 720; color: #ffe14d; font-variant-numeric: tabular-nums; }
.screen-row b { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-row small { display: block; font-size: 0.72rem; color: #c3d4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-row em { font-style: normal; font-size: 1.02rem; font-weight: 720; white-space: nowrap; font-variant-numeric: tabular-nums; }
.screen-row em i { font-style: normal; font-size: 0.7em; font-weight: 500; color: #c3d4ff; margin-right: 0.25em; }
.screen-row em .icon { width: 0.85em; height: 0.85em; vertical-align: -0.08em; color: #c3d4ff; }
.screen-side { position: absolute; right: 0; top: 0; bottom: 0; width: 2.3rem; display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg);
  background: rgb(255 255 255 / 0.12); color: rgb(255 255 255 / 0.5); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.screen-foot { display: flex; gap: 1.1rem; padding: 0.4rem 1rem; background: #1b1f25; color: #c2c8d2; font-size: 0.7rem; }
.screen-foot-end { margin-left: auto; }
.screen .board-note { margin: 0; padding: 0.65rem 1rem 0.8rem; background: #15181d; color: #a8b0bd; }
.screen-empty { padding: 1.2rem 0.9rem; color: #c3d4ff; font-size: 0.9rem; }

/* Horizon : le train, ou l'avion qui décolle */
.rail { position: relative; height: 11.6rem; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(#000 78%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent), linear-gradient(#000 78%, transparent);
  mask-composite: intersect; }
.sun { position: absolute; right: 16%; bottom: 2.2rem; width: 26rem; height: 13rem;
  background: radial-gradient(closest-side at 50% 100%, rgb(255 170 110 / 0.5), rgb(255 126 138 / 0.16) 55%, transparent); }
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 7rem; }
.hill-far { fill: #121c42; }
.hill-near { fill: #0c1432; }
.track { position: absolute; left: 0; right: 0; bottom: 2.2rem; height: 0.3rem; border-top: 1px solid rgb(170 190 255 / 0.55);
  background: repeating-linear-gradient(90deg, rgb(170 190 255 / 0.3) 0 0.14rem, transparent 0.14rem 1rem); }
.train-run { position: absolute; inset: 0; will-change: transform; animation: train-x 56s linear -12s infinite; }
.train { position: absolute; left: 0; bottom: 2.25rem; width: 25rem; height: auto; display: block; filter: drop-shadow(0 0.25rem 0.6rem rgb(0 0 0 / 0.5)); animation: fade 0.9s ease both; }
.beam { position: absolute; left: 24.5rem; bottom: 2.5rem; width: 8rem; height: 1.5rem; clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%);
  background: linear-gradient(90deg, rgb(255 226 166 / 0.4), transparent); }
@keyframes train-x { from { transform: translateX(-27rem); } to { transform: translateX(100%); } }

/* Le décor suit l'onglet. Côté avion : l'avion sur sa trajectoire, et en bas une piste d'où un
   avion décolle. Côté train : plus d'avion, la voie ferrée et son train. */
.sky { transition: opacity 0.6s ease, visibility 0.6s; }
.hero[data-mode="rail"] .sky { opacity: 0; visibility: hidden; }
.hero[data-mode="rail"] .sky * { animation-play-state: paused; }
.hero[data-mode="rail"] .takeoff, .hero[data-mode="air"] .train-run { display: none; }
.hero[data-mode="air"] .track { height: 0.2rem; border-top-color: rgb(170 190 255 / 0.4);
  background: repeating-linear-gradient(90deg, rgb(255 210 122 / 0.8) 0 0.35rem, transparent 0.35rem 2.6rem); }
/* Roulage qui accélère, nez qui se lève, montée, train d'atterrissage rentré : trois mouvements
   simples (avance, hauteur, inclinaison) superposés */
.takeoff, .takeoff-y { position: absolute; inset: 0; will-change: transform; }
.takeoff { animation: roll 15s linear infinite; }
.takeoff-y { animation: climb 15s linear infinite; }
.takeoff-r { position: absolute; left: 0; bottom: 2.08rem; width: 11rem; transform-origin: 58% 90%; animation: nose-up 15s linear infinite; }
.jet { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0.25rem 0.6rem rgb(0 0 0 / 0.5)); }
.gear { animation: gear-up 15s linear infinite; }
.beacon { animation: led 1.3s ease-in-out infinite; }
@keyframes roll {
  0% { transform: translateX(6%); animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.6); }
  74%, 100% { transform: translateX(104%); }
}
@keyframes climb {
  0%, 40% { transform: translateY(0); animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.6); }
  74%, 100% { transform: translateY(-6.2rem); }
}
@keyframes nose-up {
  0% { transform: rotate(0deg); opacity: 0; }
  5% { opacity: 1; }
  36% { transform: rotate(0deg); }
  46% { transform: rotate(-11deg); }
  68% { opacity: 1; }
  74%, 100% { transform: rotate(-11deg); opacity: 0; }
}
@keyframes gear-up { 0%, 47% { opacity: 1; } 53%, 100% { opacity: 0; } }

/* ── Carte de recherche ── */
.desk { padding-bottom: 5rem; }
.search { position: relative; z-index: 5; padding: 1rem; }
@media (min-width: 700px) { .search { padding: 1.4rem; } }
.tabs { display: flex; gap: 0.25rem; padding: 0.3rem; border-radius: 1.05rem; border: 1px solid var(--line); background: var(--field); }
.tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.7rem; border-radius: 0.8rem;
  font-size: 0.93rem; font-weight: 540; color: var(--muted); transition: color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); background: rgb(94 200 255 / 0.13); box-shadow: inset 0 0 0 1px rgb(94 200 255 / 0.38), 0 0 1.5rem -0.5rem rgb(94 200 255 / 0.6); }
.tab[aria-selected="true"] .icon { color: var(--sky); }
@media (max-width: 640px) { .tab { font-size: 0.8rem; gap: 0.35rem; flex-direction: column; height: 3.4rem; } .tab-long { display: none; } }

.panel { margin-top: 1.1rem; display: grid; gap: 0.9rem; animation: fade 0.5s ease both; }
.subpanel { display: grid; gap: 0.9rem; animation: fade 0.5s ease both; }
@keyframes fade { from { opacity: 0; } }
.route { position: relative; display: grid; gap: 0.9rem; }
.grid-4 { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) {
  .route { grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0.6rem; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field input, .field select { min-width: 0; }
.field > span { font-size: 0.78rem; font-weight: 560; letter-spacing: 0.02em; color: var(--muted); }
.field em { font-style: normal; opacity: 0.7; font-weight: 400; }
.field input, .field select, .ask textarea {
  width: 100%; height: 3rem; padding: 0 0.9rem; border-radius: 0.8rem; border: 1px solid var(--line); background: var(--field);
  font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.field select { appearance: none; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ba8cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 1.1rem; }
.field select option { background: #111936; }
.field input::placeholder, .ask textarea::placeholder { color: rgb(155 168 204 / 0.6); }
.field input:hover, .field select:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .ask textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgb(94 200 255 / 0.2); }
.field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(255 154 154 / 0.16); }
.field-inline { grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; }
.field-inline select { height: 2.4rem; font-size: 0.9rem; border-color: transparent; background-color: transparent; }
@media (max-width: 699px) { .field input[type="date"], .field input[type="month"] { padding: 0 0.55rem; font-size: 0.95rem; } }
.swap { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-bottom: 0.2rem; border-radius: 50%; color: var(--muted);
  border: 1px solid var(--line); background: var(--field); transition: color 0.3s ease, border-color 0.3s ease; }
.swap:hover { color: var(--fg); border-color: var(--line-strong); }
@media (max-width: 699px) { .swap { position: absolute; right: 0.6rem; top: calc(50% + 0.65rem); transform: translateY(-50%) rotate(90deg); z-index: 2; background: #111936; margin: 0; } }
.panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; }
.panel-foot .btn { flex: 1 1 14rem; }
@media (min-width: 700px) { .panel-foot .btn { flex: none; } }
.mini { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.hint { display: flex; gap: 0.5rem; align-items: flex-start; max-width: 36rem; font-size: 0.86rem; color: var(--muted); }
.hint .icon { margin-top: 0.15rem; color: var(--sky); }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--muted); }
.quick button { padding: 0.3rem 0.75rem; border-radius: 99px; border: 1px solid var(--line); background: rgb(150 172 255 / 0.06); text-align: left;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; }
.quick button:hover { color: var(--fg); border-color: var(--line-strong); background: rgb(150 172 255 / 0.12); }
/* Avion ou train, dans le calendrier */
.seg { display: inline-flex; justify-self: start; gap: 0.2rem; padding: 0.25rem; border: 1px solid var(--line); border-radius: 99px; background: var(--field); }
.seg button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 1rem; border-radius: 99px; font-size: 0.9rem; font-weight: 540; color: var(--muted); transition: color 0.3s ease, background-color 0.3s ease; }
.seg button[aria-pressed="true"] { color: var(--fg); background: rgb(94 200 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(94 200 255 / 0.38); }
.seg button[aria-pressed="true"] .icon { color: var(--sky); }

/* Suggestions sous un champ */
.combo { position: relative; }
.combo-list { position: absolute; z-index: 30; top: calc(100% + 0.35rem); left: 0; right: 0; max-height: 19rem; overflow: auto; padding: 0.3rem;
  border-radius: 0.9rem; border: 1px solid var(--line-strong); background: #111936; box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.8); animation: fade 0.3s ease both; }
.combo-opt { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0.7rem; border-radius: 0.6rem; cursor: pointer; }
.combo-opt[aria-selected="true"], .combo-opt:hover { background: rgb(94 200 255 / 0.13); }
.combo-opt small { display: block; color: var(--muted); font-size: 0.8rem; }
.combo-opt code { font: 600 0.78rem var(--mono); padding: 0.15rem 0.45rem; border-radius: 0.4rem; background: rgb(150 172 255 / 0.12); color: var(--sky); }

/* Demande libre */
.chat { display: grid; gap: 0.7rem; max-height: 26rem; overflow: auto; }
.chat:empty { display: none; }
.msg { max-width: 88%; padding: 0.75rem 1rem; border-radius: 1rem; font-size: 0.96rem; animation: fade 0.5s ease both; overflow-wrap: anywhere; }
.msg-user { justify-self: end; background: rgb(94 200 255 / 0.14); border: 1px solid rgb(94 200 255 / 0.3); border-bottom-right-radius: 0.3rem; }
.msg-bot { justify-self: start; background: rgb(150 172 255 / 0.07); border: 1px solid var(--line); border-bottom-left-radius: 0.3rem; }
.msg p + p, .msg ul, .msg ol, .msg p + ul { margin-top: 0.55rem; }
.msg ul, .msg ol { padding-left: 1.2rem; display: grid; gap: 0.25rem; }
.msg ul { list-style: disc; } .msg ol { list-style: decimal; }
.msg a { color: var(--sky); text-decoration: underline; text-underline-offset: 0.2em; }
.msg-meta { margin-top: 0.5rem; font-size: 0.78rem; color: var(--muted); }
.ask { display: flex; gap: 0.6rem; align-items: flex-end; }
.ask textarea { height: auto; min-height: 3rem; padding: 0.75rem 0.9rem; resize: vertical; }

/* ── Résultats ── */
.results { margin-top: 1.8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; animation: fade 0.6s ease both; scroll-margin-top: 5rem; }
.res-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem 1.5rem; padding: 0 0.3rem; }
.res-head h2 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 660; letter-spacing: -0.03em; line-height: 1.12; }
.res-head h2 i { font-style: normal; padding: 0 0.2em; color: var(--sunset); }
.res-meta { margin-top: 0.3rem; color: var(--muted); font-size: 0.92rem; }

/* Trois repères en tête des résultats */
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); overflow: hidden; }
.strip > div { position: relative; padding: 0.9rem 1.1rem; }
.strip > div + div { border-left: 1px solid var(--line); }
@media (max-width: 560px) { .strip > div + div { border-left: 0; border-top: 1px solid var(--line); } }
.strip small { display: block; color: var(--muted); font-size: 0.78rem; }
.strip b { font-size: 1.3rem; font-weight: 680; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.strip span { color: var(--muted); font-size: 0.86rem; }
.strip .good b { color: var(--mint); }

/* Jauge : où se situe le prix du jour par rapport à d'habitude */
.gauge { padding: 1rem 1.1rem 0.9rem; }
.gauge-title { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: baseline; font-size: 0.95rem; }
.gauge-title b { font-weight: 640; }
.gauge-title span { color: var(--muted); font-size: 0.88rem; }
.gauge .btn { margin-top: 0.2rem; }
.gauge-bar { position: relative; height: 0.5rem; margin: 2rem 0 1.5rem; border-radius: 99px; background: rgb(150 172 255 / 0.12); }
.gauge-usual { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); border-radius: 99px; background: linear-gradient(90deg, rgb(94 200 255 / 0.55), rgb(167 139 250 / 0.55)); }
.gauge-mark { position: absolute; top: -0.4rem; bottom: -0.4rem; left: calc(var(--x) * 1%); width: 4px; margin-left: -2px; border-radius: 2px; background: var(--gold); box-shadow: 0 0 0.8rem var(--gold); }
.gauge-mark span, .gauge-low span { position: absolute; left: 50%; white-space: nowrap; transform: translateX(-50%); font-size: 0.76rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gauge-mark span { bottom: calc(100% + 0.25rem); color: var(--gold); }
.gauge-low { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: 2px; background: var(--muted); }
.gauge-low span { top: calc(100% + 0.35rem); color: var(--muted); font-weight: 500; }
.gauge-mark.edge-l span, .gauge-low.edge-l span { left: 0; transform: none; }
.gauge-mark.edge-r span, .gauge-low.edge-r span { left: auto; right: 0; transform: none; }
.tone-good .gauge-title b { color: var(--mint); } .tone-bad .gauge-title b { color: var(--coral); }

.notice { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.9rem 1.1rem; font-size: 0.93rem; color: var(--muted); }
.notice .icon { margin-top: 0.15rem; color: var(--sky); }
.notice b { color: var(--fg); font-weight: 600; }
.notice-warn .icon { color: var(--gold); }
.notice-error .icon { color: var(--danger); }
.notice .quick { border: 0; padding-top: 0.6rem; }

/* Billet à souche */
.ticket { display: grid; grid-template-columns: minmax(0, 1fr); }
.ticket-main { padding: 1.1rem 1.25rem 1.2rem; min-width: 0; }
.ticket-stub { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 1rem; padding: 1rem 1.25rem; border-top: 1px dashed var(--line-strong); }
/* Les deux encoches de la perforation */
.ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; width: 1rem; height: 1rem; border-radius: 50%; background: #0a1026; box-shadow: inset 0 0 0 1px var(--line-strong); top: -0.5rem; }
.ticket-stub::before { left: -0.55rem; } .ticket-stub::after { right: -0.55rem; }
.ticket-more { display: grid; gap: 0.6rem; padding: 1rem 1.25rem 1.1rem; border-top: 1px solid var(--line); animation: fade 0.5s ease both; }
@media (min-width: 760px) {
  .ticket { grid-template-columns: minmax(0, 1fr) var(--stub); }
  .ticket-stub { flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; border-top: 0; border-left: 1px dashed var(--line-strong); }
  .ticket-stub::before { left: -0.5rem; top: -0.55rem; } .ticket-stub::after { left: -0.5rem; right: auto; top: auto; bottom: -0.55rem; }
  .ticket-more { grid-column: 1 / -1; }
}
.ticket-top { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: center; margin-bottom: 0.7rem; font-size: 0.86rem; color: var(--muted); }
.ticket-top b { color: var(--fg); font-weight: 600; }
.ticket-top code { font: 500 0.78rem var(--mono); letter-spacing: 0.02em; }
.ticket-top .icon { color: var(--mint); }
.ticket h3 { font-size: 1.18rem; font-weight: 640; letter-spacing: -0.02em; }
.badge { display: inline-flex; align-items: center; padding: 0.15rem 0.6rem; border-radius: 99px; font-size: 0.74rem; font-weight: 600; }
.badge-go { background: rgb(94 234 212 / 0.14); color: var(--mint); }
.badge-sky { background: rgb(94 200 255 / 0.14); color: var(--sky); }
.badge-amber { background: rgb(255 210 122 / 0.14); color: var(--gold); }
.badge-dim { background: rgb(150 172 255 / 0.1); color: var(--muted); }
/* Pastille « direct » ou « avec escale / correspondance » : un point de couleur et un mot */
.way { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.65rem 0.15rem 0.5rem; border: 1px solid currentColor; border-radius: 99px; font-size: 0.74rem; font-weight: 650; }
.way::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
.way-direct { color: var(--mint); background: rgb(94 234 212 / 0.1); }
.way-stop { color: var(--gold); background: rgb(255 210 122 / 0.1); }
/* « Et en avion ? » / « Et en train ? » : la comparaison entre les deux, lancée à la demande */
.versus { display: grid; gap: 0.8rem; padding: 0.95rem 1.1rem; }
.versus-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.versus-head b { font-weight: 620; }
.versus-head p { color: var(--muted); font-size: 0.88rem; }
.versus-out { display: grid; gap: 0.45rem; animation: fade 0.5s ease both; }
.versus-out:empty { display: none; }
.versus-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-size: 0.93rem; color: var(--muted); }
.versus-line > .icon { color: var(--sky); }
.versus-line.is-rail > .icon { color: var(--mint); }
.versus-line b { color: var(--fg); font-weight: 620; }
.versus-verdict { padding: 0.6rem 0.8rem; border-left: 3px solid var(--gold); border-radius: 0 0.6rem 0.6rem 0; background: rgb(255 210 122 / 0.06); font-size: 0.92rem; }
.versus-out .btn { justify-self: start; margin-top: 0.2rem; }
/* Train : trains directs du jour et affluence */
.svc-box { display: grid; gap: 0.25rem; margin-top: 0.55rem; }
.svc { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.55rem; color: var(--muted); font-size: 0.88rem; }
.svc-box .svc { margin-top: 0; }
.svc .icon { margin-top: 0.15rem; width: 1em; height: 1em; color: var(--mint); }
.svc-dot { flex: none; width: 0.5rem; height: 0.5rem; margin: 0.42rem 0.25rem 0; border-radius: 50%; background: currentColor; }
.svc-warn .icon { color: var(--gold); }
.svc-busy { color: var(--gold); } .svc-mid { color: var(--sky); } .svc-calm { color: var(--mint); }
.leg { display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: center; }
.leg-end b { display: block; font-size: 1.5rem; font-weight: 680; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.leg-end sup { font-size: 0.55em; color: var(--gold); margin-left: 0.15em; }
.leg-end small { color: var(--muted); font-size: 0.82rem; font-weight: 560; letter-spacing: 0.04em; }
.leg-end:last-child { text-align: right; }
.leg-mid { text-align: center; font-size: 0.8rem; color: var(--muted); min-width: 0; }
.leg-line { position: relative; height: 1px; margin: 0.4rem 0; background: repeating-linear-gradient(90deg, var(--line-strong) 0 0.3rem, transparent 0.3rem 0.6rem); }
.leg-line .icon { position: absolute; left: 50%; top: 50%; width: 1rem; height: 1rem; transform: translate(-50%, -50%) rotate(45deg); fill: var(--sky); stroke: none; }
.direct { color: var(--mint); font-weight: 560; } .stops { color: var(--gold); font-weight: 560; }

/* Frise de la journée : le vol posé sur 24 heures (escales hachurées) */
.dayline { position: relative; height: 2.05rem; margin-top: 1rem; }
.dl-track, .dl-seg, .dl-lay { position: absolute; top: 0.15rem; height: 0.5rem; border-radius: 99px; }
.dl-track { left: 0; right: 0; background: rgb(150 172 255 / 0.1); }
.dl-seg, .dl-lay { left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); min-width: 4px; }
.dl-seg { background: linear-gradient(90deg, var(--sky), var(--sunset)); box-shadow: 0 0 0.7rem -0.1rem rgb(94 200 255 / 0.7); }
.dl-lay { border-radius: 0; background: repeating-linear-gradient(-45deg, rgb(255 210 122 / 0.75) 0 2px, transparent 2px 5px); }
.dl-tick { position: absolute; top: 0; left: calc(var(--x) * 1%); width: 1px; height: 0.8rem; background: var(--line-strong); }
.dl-tick span { position: absolute; top: 0.95rem; left: 0; transform: translateX(-50%); font-size: 0.68rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-tick:first-of-type span { transform: none; } .dl-tick.last span { transform: translateX(-100%); }

.amount { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.amount i { font-style: normal; font-size: 0.6em; font-weight: 500; color: var(--muted); margin-right: 0.15em; }
.stub-note { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.book { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.9rem; }
@media (min-width: 760px) { .book { flex-direction: column; align-items: flex-end; } }
.sub-title { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding: 0.7rem 0.85rem; border-radius: 0.85rem; background: rgb(150 172 255 / 0.06); }
.row-main { flex: 1 1 16rem; min-width: 0; }
.row b { font-weight: 620; }
.row .amount { font-size: 1.2rem; }
.row .ticket-more { flex: 1 1 100%; padding: 0.8rem 0 0; }

/* Calendriers */
.cal { display: grid; gap: 1.4rem; padding: 1.2rem; }
@media (min-width: 900px) { .cal-2 { grid-template-columns: 1fr 1fr; } }
.cal h3 { font-size: 1rem; font-weight: 620; text-transform: capitalize; margin-bottom: 0.6rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.cal-dow { text-align: center; font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 0.2rem; }
.day { display: grid; align-content: center; justify-items: center; gap: 0.05rem; min-height: 3.3rem; border-radius: 0.6rem; border: 1px solid transparent; background: rgb(150 172 255 / 0.07);
  font-variant-numeric: tabular-nums; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.day small { font-size: 0.68rem; color: var(--muted); }
.day b { font-size: 0.86rem; font-weight: 620; }
.day em { font-style: normal; font-size: 0.64rem; color: var(--muted); }
button.day:hover, .day[aria-pressed="true"] { border-color: var(--fg); }
.day.off { background: none; }
/* du moins cher (menthe) au plus cher (corail) */
.h0 { background: rgb(94 234 212 / 0.34); } .h1 { background: rgb(94 200 255 / 0.22); } .h2 { background: rgb(150 172 255 / 0.13); }
.h3 { background: rgb(255 196 107 / 0.24); } .h4 { background: rgb(255 120 100 / 0.36); }
.day.best { border-color: var(--mint); box-shadow: 0 0 1.2rem -0.3rem var(--mint); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--muted); padding: 0 0.3rem; }
.legend i { width: 1.6rem; height: 0.6rem; border-radius: 99px; }
@media (max-width: 480px) { .day b { font-size: 0.72rem; } .cal { padding: 0.8rem; } }
.daylist { display: grid; gap: 0.4rem; padding: 1.1rem 1.2rem; }
.dayrow { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem 1rem; align-items: center; padding: 0.55rem 0.8rem; border-radius: 0.85rem; background: rgb(150 172 255 / 0.06); }
.dayrow time { font-size: 1.05rem; font-weight: 660; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dayrow small { color: var(--muted); font-size: 0.8rem; }
@media (max-width: 560px) { .dayrow { grid-template-columns: 1fr auto; } .dayrow time { grid-column: 1 / -1; } }

/* Trains : fourchettes de prix posées sur une même échelle */
.fares { display: grid; gap: 0.9rem; margin-top: 0.9rem; }
.fare-line > b { display: block; margin-bottom: 0.35rem; font-size: 0.92rem; font-weight: 620; }
.fare-line > b small { font-weight: 400; color: var(--muted); margin-left: 0.4rem; }
.fare-row { display: grid; grid-template-columns: 6.6rem minmax(3rem, 1fr) auto; gap: 0.7rem; align-items: center; font-size: 0.84rem; color: var(--muted); }
.fare-row + .fare-row { margin-top: 0.3rem; }
.fare-row code { font: inherit; font-weight: 600; color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
.range { position: relative; height: 0.45rem; border-radius: 99px; background: rgb(150 172 255 / 0.1); }
.range i { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 1%); width: calc(var(--w) * 1%); min-width: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--mint), var(--sky)); }
.ticket-rail .amount { color: var(--mint); }
/* souche plus large : le bouton porte les deux dates d'un aller-retour */
.ticket-rail { --stub: 19rem; }
.ticket-stub .btn { max-width: 100%; white-space: normal; text-align: center; padding-block: 0.45rem; }

/* Attente : un petit avion (ou un train) avance sur sa ligne */
.loader { display: grid; justify-items: center; gap: 0.9rem; padding: 2.2rem 1rem; color: var(--muted); font-size: 0.95rem; }
.loader-track { position: relative; width: 13rem; height: 1.6rem; border-bottom: 1px dashed var(--line-strong); }
.loader-track .icon { position: absolute; left: 0; bottom: 0.2rem; width: 1.4rem; height: 1.4rem; color: var(--mint); animation: go 2.8s ease-in-out infinite; }
.loader-track .icon-plane { color: var(--sky); fill: currentColor; stroke: none; rotate: 45deg; animation-name: go-plane; }
@keyframes go { 0% { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(11.6rem); opacity: 0; } }
@keyframes go-plane { 0% { translate: 0 0; opacity: 0; } 20%, 80% { opacity: 1; } 100% { translate: 11.6rem 0; opacity: 0; } }

/* ── Sections ── */
.section { position: relative; padding: 5.5rem 0; }
.divider { position: absolute; top: 0; left: 50%; width: min(100% - 2.5rem, 72rem); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(94 200 255 / 0.45), rgb(255 153 102 / 0.4), transparent); }
.head { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
.eyebrow { font-size: 0.76rem; font-weight: 620; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sky); }
h2 { margin-top: 0.9rem; font-size: clamp(1.9rem, 4.4vw, 2.9rem); font-weight: 640; line-height: 1.08; letter-spacing: -0.035em; }
@media (min-width: 2000px) { h2 { font-size: 2.9rem; } }
.sub { margin-top: 1rem; color: var(--muted); font-size: 1.05rem; }

.bento { display: grid; gap: 1rem; }
@media (min-width: 760px) { .bento { grid-template-columns: 1fr 1fr; } }
.card { display: flex; flex-direction: column; overflow: hidden; }
.card-art { display: grid; place-items: center; min-height: 10.5rem; padding: 1.5rem; border-bottom: 1px solid var(--line); background: rgb(6 10 23 / 0.3); }
.card-body { display: flex; gap: 0.9rem; padding: 1.3rem 1.4rem; }
.card h3 { font-size: 1.06rem; font-weight: 620; letter-spacing: -0.015em; }
.card p { margin-top: 0.25rem; color: var(--muted); font-size: 0.95rem; }
.ico { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 0.7rem; background: rgb(94 200 255 / 0.12); color: var(--sky); }
.ico-gold { background: rgb(255 210 122 / 0.13); color: var(--gold); }
.ico-mint { background: rgb(94 234 212 / 0.12); color: var(--mint); }
.ico-violet { background: rgb(167 139 250 / 0.14); color: var(--violet); }
.pass { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-radius: 0.9rem; border: 1px solid var(--line-strong); background: rgb(17 24 50 / 0.8); }
.pass small { display: block; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.1em; }
.pass b { font-size: 1.3rem; font-weight: 660; font-variant-numeric: tabular-nums; }
.pass-line { position: relative; width: 6rem; height: 1px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 0.3rem, transparent 0.3rem 0.6rem); }
.pass-line .icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); fill: var(--sky); stroke: none; }
.mini-cal { display: grid; grid-template-columns: repeat(7, 1.9rem); gap: 0.35rem; }
.mini-cal i { height: 1.9rem; border-radius: 0.45rem; }
.mini-cal .best { box-shadow: 0 0 0 1.5px var(--mint), 0 0 1rem -0.2rem var(--mint); }
.fare { display: flex; align-items: center; gap: 0.8rem; font-variant-numeric: tabular-nums; }
.fare span { padding: 0.2rem 0.6rem; border-radius: 0.5rem; background: rgb(94 234 212 / 0.14); color: var(--mint); font-size: 0.78rem; font-weight: 650; letter-spacing: 0.06em; }
.fare b { font-size: 1.15rem; font-weight: 650; }
.fare-bar { width: 8rem; height: 0.5rem; border-radius: 99px; background: rgb(150 172 255 / 0.12); overflow: hidden; }
.fare-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--gold) 55%, var(--coral)); }
.bubble { max-width: 17rem; padding: 0.75rem 1rem; border-radius: 1rem 1rem 0.3rem 1rem; background: rgb(167 139 250 / 0.14); border: 1px solid rgb(167 139 250 / 0.32); font-size: 0.92rem; }

.steps { position: relative; display: grid; gap: 2rem; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  /* la ligne en pointillé relie les trois arrêts */
  .steps::before { content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 1.35rem; height: 1px;
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 0.35rem, transparent 0.35rem 0.8rem); }
}
.step { position: relative; text-align: center; }
.stop { position: relative; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin: 0 auto 1.1rem; border-radius: 50%; font-weight: 680;
  color: #2a1206; background: linear-gradient(135deg, #ffcf7a, #ff9966); box-shadow: 0 0 0 0.4rem #0a1026, 0 0 2rem -0.3rem var(--sunset); }
.step h3 { font-size: 1.1rem; font-weight: 620; }
.step p { margin-top: 0.4rem; color: var(--muted); font-size: 0.97rem; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0.2rem; font-weight: 580; font-size: 1.03rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--muted); transition: transform 0.4s var(--ease); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details p { padding: 0 0.2rem 1.2rem; color: var(--muted); max-width: 44rem; animation: fade 0.5s ease both; }

.section-cta { padding-top: 2rem; }
.cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 3.5rem 1.5rem; }
.cta-glow { position: absolute; inset: -40% 10%; z-index: -1; opacity: 0.55;
  background: radial-gradient(closest-side, rgb(255 153 102 / 0.4), rgb(94 200 255 / 0.18) 60%, transparent); }
.cta h2 { margin: 0; }
.cta p { margin: 0.8rem 0 1.8rem; color: var(--muted); font-size: 1.05rem; }

.footer { border-top: 1px solid var(--line); padding: 2rem 0 2.5rem; }
.footer-in { display: grid; gap: 1rem; align-items: center; }
@media (min-width: 760px) { .footer-in { grid-template-columns: auto 1fr auto; gap: 2.5rem; } }
.footer p { color: var(--muted); font-size: 0.84rem; }
.footer p a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line-strong); }

/* ── Pages de connexion, de compte et d'administration ── */
.gate { display: grid; place-items: start center; padding: clamp(1.5rem, 8vh, 5rem) 1.25rem 3rem; }
.gate-card { width: 100%; max-width: 27rem; display: grid; gap: 1rem; padding: 1.7rem; }
.gate-wide { max-width: 58rem; }
.gate-title { margin-top: 0.7rem; font-size: 1.95rem; font-weight: 660; letter-spacing: -0.04em; line-height: 1.1; }
.gate-h2 { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.78rem; font-weight: 620; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sky); }
.gate-h2 span { margin-left: 0.4rem; color: var(--muted); }
.gate-note { color: var(--muted); font-size: 0.95rem; }
.gate-foot { color: var(--muted); font-size: 0.86rem; }
.gate-foot a, .gate-note a, .facts a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; }
.gate-form { display: grid; gap: 0.9rem; }
.gate-form .btn { margin-top: 0.3rem; }
@media (min-width: 760px) { .gate-form-row { grid-template-columns: 1fr 1fr 1.3fr auto; align-items: end; } }
.gate-steps { display: grid; gap: 0.4rem; padding-left: 1.3rem; list-style: decimal; color: var(--muted); font-size: 0.95rem; }
.gate-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.alert { padding: 0.7rem 0.95rem; border-left: 3px solid var(--line-strong); background: rgb(150 172 255 / 0.07); border-radius: 0 0.7rem 0.7rem 0; font-size: 0.93rem; }
.alert-ok { border-left-color: var(--mint); } .alert-error { border-left-color: var(--danger); }
.code-input { font: 700 1.4rem var(--mono) !important; letter-spacing: 0.3em; text-align: center; }
.qr { justify-self: center; width: 12rem; padding: 0.6rem; border-radius: 0.8rem; background: #fff; }
.qr svg { display: block; width: 100%; height: auto; }
.secret, .temp code { font: 700 1rem var(--mono); letter-spacing: 0.06em; color: var(--gold); }
.temp { display: grid; gap: 0.6rem; padding: 1rem; border: 1px dashed var(--gold); border-radius: 0.9rem; font-size: 0.93rem; background: rgb(255 210 122 / 0.05); }
.temp code { font-size: 1.5rem; user-select: all; }
.facts { display: grid; gap: 0.5rem; }
.facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; padding: 0.6rem 0.85rem; border-radius: 0.8rem; background: rgb(150 172 255 / 0.06); font-size: 0.93rem; }
.facts dt { color: var(--muted); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { text-align: left; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 0.4rem 0.6rem; }
.table td { padding: 0.65rem 0.6rem; border-top: 1px solid var(--line); vertical-align: top; }
.table td small { display: block; color: var(--muted); }
.tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 99px; background: rgb(150 172 255 / 0.1); font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.tag-ok { background: rgb(94 234 212 / 0.14); color: var(--mint); } .tag-warn { background: rgb(255 210 122 / 0.14); color: var(--gold); } .tag-bad { background: rgb(255 154 154 / 0.14); color: var(--danger); }
.row-actions { display: grid; gap: 0.25rem; justify-items: start; }

.gate-center { text-align: center; }
/* Pages de demande : un dessin en tête, deux liens sous le formulaire, zone de message */
.gate-art { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-top: 0.4rem; border-radius: 1rem; color: var(--sky);
  background: rgb(94 200 255 / 0.13); box-shadow: inset 0 0 0 1px rgb(94 200 255 / 0.3), 0 0 1.8rem -0.5rem rgb(94 200 255 / 0.7); }
.gate-art .icon { width: 1.6rem; height: 1.6rem; }
.gate-art + .gate-title { margin-top: 0.2rem; }
.gate-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; font-size: 0.9rem; }
.gate-links a { color: var(--sky); font-weight: 560; }
.gate-links a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.field textarea { width: 100%; min-height: 6.5rem; padding: 0.75rem 0.9rem; border-radius: 0.8rem; border: 1px solid var(--line); background: var(--field); font-size: 1rem; resize: vertical; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.field textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgb(94 200 255 / 0.2); }
.field textarea::placeholder { color: rgb(155 168 204 / 0.6); }
/* champ piège : invisible pour une personne, rempli par les robots */
.hp { position: absolute; left: -200vw; width: 1px; height: 1px; opacity: 0; }
.amsg { margin: 0.25rem 0; padding: 0.5rem 0.75rem; border-left: 2px solid var(--line-strong); color: var(--muted); font-size: 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
small.inline { display: inline; }
.gate-tabs { display: flex; gap: 0.25rem; padding: 0.3rem; border-radius: 99px; border: 1px solid var(--line); background: var(--field); }
.gate-tabs a { flex: 1; padding: 0.6rem 1rem; border-radius: 99px; text-align: center; font-size: 0.93rem; font-weight: 560; color: var(--muted); transition: color 0.3s ease, background-color 0.3s ease; }
.gate-tabs a:hover { color: var(--fg); }
.gate-tabs a[aria-current] { color: #2a1206; background: linear-gradient(135deg, #ffcf7a, #ff9966 52%, #ff7e8a); box-shadow: 0 0.6rem 1.6rem -0.7rem rgb(255 140 96 / 0.8); }
.callout { display: grid; gap: 0.4rem; padding: 1rem 1.1rem; border-radius: 1rem; border: 1px solid rgb(94 200 255 / 0.3); background: rgb(94 200 255 / 0.08); font-size: 0.93rem; color: var(--muted); }
.callout strong { color: var(--fg); }
.callout a, .keybox a { color: var(--sky); font-weight: 560; }
.input { position: relative; display: block; }
.input .icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input.has-icon input { padding-left: 2.6rem; }
.input.has-eye input { padding-right: 2.8rem; }
.input input[readonly] { color: var(--muted); }
.eye { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 0.6rem; color: var(--muted); transition: color 0.3s ease; }
.eye .icon { position: static; transform: none; pointer-events: auto; color: inherit; }
.eye:hover, .eye.on { color: var(--sky); }
.field small { font-size: 0.8rem; color: var(--muted); }
.copy { display: flex; gap: 0.5rem; }
.copy input { flex: 1; min-width: 0; height: 2.5rem; padding: 0 0.8rem; border-radius: 0.75rem; border: 1px solid var(--line); background: var(--field); font: 600 0.84rem var(--mono); color: var(--gold); }
.copy .btn { flex: none; }
.keybox, .linkbox { display: grid; gap: 0.5rem; padding: 0.9rem 1rem; border-radius: 1rem; border: 1px dashed rgb(255 210 122 / 0.5); background: rgb(255 210 122 / 0.05); font-size: 0.9rem; color: var(--muted); }
.linkbox { margin-top: 1rem; }
.linkbox small { font-size: 0.8rem; }

/* Administration : des cartes empilées, chacune avec sa pastille, son titre et sa phrase */
.gate-wide { width: 100%; max-width: 58rem; display: grid; gap: 1.1rem; }
.ahead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.ahead .gate-title { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border-radius: 99px; background: rgb(94 200 255 / 0.12); color: var(--sky); font-size: 0.78rem; font-weight: 600; }
.astats { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.astats > div { display: grid; gap: 0.1rem; padding: 0.9rem 1.1rem; border-radius: 1.1rem; }
.astats small { color: var(--muted); font-size: 0.78rem; }
.astats b { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.astats span { color: var(--muted); font-size: 0.78rem; }
.acard { padding: 1.3rem; border-radius: 1.25rem; }
@media (min-width: 640px) { .acard { padding: 1.5rem; } }
.acard-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.acard-head > div { flex: 1 1 14rem; min-width: 0; }
.acard-head h2 { margin: 0; font-size: 1.12rem; font-weight: 640; letter-spacing: -0.02em; line-height: 1.3; }
.acard-head p { color: var(--muted); font-size: 0.86rem; }
.aform { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
@media (min-width: 700px) { .aform { grid-template-columns: 1.4fr 1fr auto; } }
@media (min-width: 900px) { .aform-4 { grid-template-columns: 1.3fr 1fr 1.3fr auto; } }
.acheck { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.55rem; color: var(--muted); font-size: 0.88rem; cursor: pointer; }
.aform .acheck input { flex: none; width: 1.1rem; height: 1.1rem; padding: 0; accent-color: var(--sunset); }
.aform input, .asearch input { width: 100%; height: 2.9rem; padding: 0 0.9rem; border-radius: 0.8rem; border: 1px solid var(--line); background: var(--field); font-size: 0.97rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.aform input:focus, .asearch input:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgb(94 200 255 / 0.2); }
.asearch { position: relative; flex: 1 1 14rem; max-width: 17rem; }
.asearch .icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.asearch input { height: 2.6rem; padding-left: 2.4rem; }
.alist { margin-top: 1rem; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.alist li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 1rem; }
.alist li + li { border-top: 1px solid var(--line); }
.arow-main { flex: 1 1 15rem; min-width: 0; }
.arow-main p { overflow-wrap: anywhere; font-size: 0.95rem; }
.arow-main small { color: var(--muted); font-size: 0.8rem; }
.arow-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.struck { color: var(--muted); text-decoration: line-through; }
.state { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; }
.state::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.state-on { color: var(--mint); } .state-off { color: var(--danger); }
.btn-danger { color: var(--danger); border-color: rgb(255 154 154 / 0.35); }
.btn-danger:hover { background: rgb(255 154 154 / 0.12); }
.aempty { margin-top: 1rem; padding: 1.1rem; border: 1px dashed var(--line-strong); border-radius: 1rem; text-align: center; color: var(--muted); font-size: 0.92rem; }
.ahint { margin-top: 0.8rem; color: var(--muted); font-size: 0.82rem; }

/* Administration : menu des catégories, toujours sous la main en haut de l'écran */
.atabs { position: sticky; top: 0.6rem; z-index: 20; display: flex; gap: 0.25rem; padding: 0.3rem; border: 1px solid var(--line-strong); border-radius: 1.05rem; background: rgb(10 15 34 / 0.94); box-shadow: 0 1rem 2rem -1.2rem rgb(0 0 0 / 0.9); }
.atabs a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.7rem; padding: 0 0.6rem; border-radius: 0.8rem; color: var(--muted); font-size: 0.93rem; font-weight: 560; transition: color 0.2s ease, background-color 0.2s ease; }
.atabs a:hover { color: var(--fg); }
.atabs a[aria-current] { color: var(--fg); background: rgb(94 200 255 / 0.13); box-shadow: inset 0 0 0 1px rgb(94 200 255 / 0.38); }
.atabs a[aria-current] .icon { color: var(--sky); }
.atabs b { min-width: 1.35rem; padding: 0.05rem 0.4rem; border-radius: 99px; background: var(--sunset); color: #2a1206; font-size: 0.72rem; font-weight: 700; text-align: center; }
@media (max-width: 560px) { .atabs a { flex-direction: column; gap: 0.2rem; min-height: 3.3rem; font-size: 0.76rem; } }
.apane { display: grid; gap: 1.1rem; animation: fade 0.4s ease both; }
.apane[id] { scroll-margin-top: 5rem; }
@media (min-width: 700px) { .bgrid-2 { grid-template-columns: 1fr 1fr; } }
/* Répondre à une demande depuis l'adresse de support */
.reply { margin-top: 0.6rem; }
.reply summary { display: inline-block; cursor: pointer; color: var(--sky); font-size: 0.88rem; font-weight: 560; }
.reply form { display: grid; gap: 0.5rem; margin-top: 0.6rem; animation: fade 0.4s ease both; }
.reply textarea { width: 100%; min-height: 6rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--field); font-size: 0.95rem; resize: vertical; }
.reply textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px rgb(94 200 255 / 0.2); }
.reply .btn { justify-self: start; }

/* ── Passages en douceur ──
   Quand un écran change (onglet, afficheur, résultats, page), seul le nouveau contenu apparaît
   en fondu, sur place ; le reste ne bouge pas. Les boutons ne changent que de couleur. */
.gate > main { animation: page-enter 0.42s cubic-bezier(0.25, 0.1, 0.25, 1) backwards; }
@keyframes page-enter { from { opacity: 0; } }
.board, .screen { animation: fade 0.5s ease both; }

/* ── Bandeau d'annonce : une seule ligne discrète, affichée jusqu'à ce que l'administrateur l'éteigne ── */
#banner { display: flex; justify-content: center; margin-top: 0.75rem; }
.banner { --tone: var(--sky); --tint: 94 200 255; display: flex; align-items: center; gap: 0.6rem; max-width: 100%; min-height: 2.3rem; padding: 0.3rem 0.9rem;
  border: 1px solid rgb(var(--tint) / 0.24); border-radius: 1.15rem; background: rgb(var(--tint) / 0.07); font-size: 0.86rem; line-height: 1.4; animation: fade 0.6s ease both; }
.banner-nouveaute { --tone: var(--mint); --tint: 94 234 212; }
.banner-dev { --tone: var(--violet); --tint: 167 139 250; }
.banner-maintenance { --tone: var(--gold); --tint: 255 210 122; }
.banner-ico { flex: none; display: grid; color: var(--tone); }
.banner-ico .icon { width: 1rem; height: 1rem; }
.banner p { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.banner strong { color: var(--fg); font-weight: 600; }
.banner-text::before, .banner small::before { content: " · "; opacity: 0.6; }
.banner small { font-size: inherit; opacity: 0.85; }

/* ── Maintenance : barre de progression du compte à rebours, partie du site fermée ── */
.mprog { display: grid; gap: 0.45rem; }
.mprog progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 0.6rem; border: 0; border-radius: 99px; overflow: hidden; background: rgb(150 172 255 / 0.14); }
.mprog progress::-webkit-progress-bar { background: transparent; }
.mprog progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--sunset)); transition: width 1s linear; }
.mprog progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--sunset)); }
.mprog p { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; font-size: 0.84rem; color: var(--muted); }
.mprog b { color: var(--fg); font-weight: 650; font-variant-numeric: tabular-nums; }
.gate-art-gold { color: var(--gold); background: rgb(255 210 122 / 0.13); box-shadow: inset 0 0 0 1px rgb(255 210 122 / 0.3), 0 0 1.8rem -0.5rem rgb(255 210 122 / 0.7); }
.gate-art-gold .icon, .closed-art .icon { transform-origin: 30% 70%; animation: tinker 2.8s ease-in-out infinite; }
@keyframes tinker { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-14deg); } }
.panel.is-closed > :not(.closed), .panel.needs-ai > :not(.plug) { display: none; }
.closed { display: grid; justify-items: center; gap: 0.6rem; padding: 2rem 1rem; border: 1px dashed rgb(255 210 122 / 0.35); border-radius: 1.1rem; background: rgb(255 210 122 / 0.04); text-align: center; animation: fade 0.5s ease both; }
.closed-art { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 1rem; color: var(--gold); background: rgb(255 210 122 / 0.13); box-shadow: inset 0 0 0 1px rgb(255 210 122 / 0.3); }
.closed-art .icon { width: 1.5rem; height: 1.5rem; }
.closed h3 { font-size: 1.15rem; font-weight: 640; letter-spacing: -0.02em; }
.closed > p { max-width: 34rem; color: var(--muted); font-size: 0.95rem; }
.closed .mprog { width: min(100%, 22rem); margin-top: 0.4rem; text-align: left; }
.soon-maint { display: inline-flex; align-items: center; gap: 0.3rem; }
.soon-maint .icon { width: 0.8rem; height: 0.8rem; }
.pill-warn { background: rgb(255 210 122 / 0.14); color: var(--gold); }
.pill-warn::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; animation: led 2s ease-in-out infinite; }
.checks { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.mmsg { margin-top: 0.6rem; }
.mmsg textarea { min-height: 5rem; }
.mcount { display: grid; gap: 0.8rem; align-items: center; }
@media (min-width: 700px) { .mcount { grid-template-columns: 18rem 1fr; } }

/* ── Demande libre : brancher son IA ── */
.plug { display: grid; gap: 1rem; align-items: center; padding: 1.2rem; border: 1px solid rgb(167 139 250 / 0.3); border-radius: 1.1rem; background: rgb(167 139 250 / 0.07); animation: fade 0.5s ease both; }
@media (min-width: 760px) { .plug { grid-template-columns: auto 1fr auto; } }
.plug-art { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0.95rem; color: var(--violet); background: rgb(167 139 250 / 0.16); box-shadow: inset 0 0 0 1px rgb(167 139 250 / 0.3), 0 0 1.6rem -0.5rem rgb(167 139 250 / 0.7); }
.plug-art .icon { width: 1.45rem; height: 1.45rem; }
.plug h3 { font-size: 1.08rem; font-weight: 640; letter-spacing: -0.02em; }
.plug p { margin-top: 0.2rem; color: var(--muted); font-size: 0.93rem; }
.plinks { display: grid; gap: 0.4rem; }
.plinks li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.2rem 1rem; }
.plinks a { display: inline-flex; align-items: center; gap: 0.35rem; }
.plinks .icon { width: 0.85em; height: 0.85em; }
.plinks small { font-size: 0.8rem; }
.more { border: 1px solid var(--line); border-radius: 1rem; padding: 0 1rem; }
.more summary { padding: 0.8rem 0; cursor: pointer; font-weight: 580; font-size: 0.93rem; }
.more > :not(summary) { margin-bottom: 1rem; animation: fade 0.5s ease both; }

/* ── Visite guidée : un projecteur glisse d'un endroit du site à l'autre, une carte l'explique ── */
.tour { position: fixed; inset: 0; z-index: 90; touch-action: none; animation: fade 0.45s ease both; }
.tour-hole { position: fixed; left: 0; top: 0; border-radius: 1.2rem; pointer-events: none; will-change: transform, width, height;
  box-shadow: 0 0 0 2px rgb(94 200 255 / 0.6), 0 0 2.2rem 0.2rem rgb(94 200 255 / 0.28), 0 0 0 200vmax rgb(3 6 16 / 0.78); }
.tour-card { position: fixed; left: 0; top: 0; width: min(25rem, calc(100vw - 1.5rem)); overflow: hidden; border: 1px solid transparent; border-radius: 1.4rem;
  background: linear-gradient(180deg, #1b2650, #0e1430) padding-box, linear-gradient(140deg, rgb(94 200 255 / 0.55), rgb(150 172 255 / 0.15) 40%, rgb(150 172 255 / 0.12) 60%, rgb(255 153 102 / 0.5)) border-box;
  box-shadow: 0 2.5rem 5rem -1.5rem rgb(0 0 0 / 0.85); transition: opacity 0.2s ease; }
.tour-card.is-hidden { opacity: 0; }
.tour-skip { position: absolute; right: 0.7rem; top: 0.7rem; z-index: 2; padding: 0.25rem 0.7rem; border-radius: 99px; background: rgb(6 10 23 / 0.6); color: var(--muted); font-size: 0.78rem; font-weight: 560; transition: color 0.2s ease; }
.tour-skip:hover { color: var(--fg); }
.tour-art { position: relative; display: grid; place-items: center; height: 8.2rem; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(120% 140% at 15% 0%, rgb(94 200 255 / 0.2), transparent 60%), radial-gradient(120% 140% at 92% 100%, rgb(255 153 102 / 0.22), transparent 60%), #0a1026; }
.tour-art > * { animation: fade 0.5s ease both; }
.tour-body { display: grid; gap: 0.45rem; padding: 1.1rem 1.25rem 0.3rem; }
.tour-step { font-size: 0.72rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sky); }
.tour-body h2 { font-size: 1.3rem; font-weight: 660; letter-spacing: -0.03em; line-height: 1.2; }
.tour-body p { color: var(--muted); font-size: 0.95rem; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.9rem 1.25rem 1.2rem; }
.tour-dots { display: flex; gap: 0.35rem; }
.tour-dots i { width: 0.45rem; height: 0.45rem; border-radius: 99px; background: rgb(150 172 255 / 0.25); transition: background-color 0.3s ease, width 0.3s ease; }
.tour-dots i.on { width: 1.3rem; background: var(--sunset); }
.tour-nav { display: flex; gap: 0.5rem; }
/* Les petites scènes de la carte */
.a-fly { position: absolute; left: 50%; top: 38%; width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0 -1.1rem; animation: a-fly 6s ease-in-out infinite; }
.a-fly svg { display: block; width: 100%; height: 100%; fill: #fff; stroke: none; transform: rotate(38deg); filter: drop-shadow(0 0 0.6rem rgb(94 200 255 / 0.9)); }
.a-fly::before { content: ""; position: absolute; right: 78%; top: 58%; width: 5rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5)); transform: rotate(-7deg); transform-origin: right; }
@keyframes a-fly { 0% { transform: translate(-10rem, 1.1rem); opacity: 0; } 14%, 86% { opacity: 1; } 100% { transform: translate(10rem, -1.1rem); opacity: 0; } }
.a-line { position: absolute; left: 8%; right: 8%; bottom: 1.6rem; border-top: 1px dashed rgb(170 190 255 / 0.45); }
.a-train { position: absolute; left: 50%; bottom: 1.7rem; width: 1.8rem; height: 1.8rem; margin-left: -0.9rem; color: var(--mint); animation: a-train 7s linear infinite; }
@keyframes a-train { 0% { transform: translateX(9rem); opacity: 0; } 12%, 88% { opacity: 1; } 100% { transform: translateX(-9rem); opacity: 0; } }
.a-flaps { display: grid; gap: 0.3rem; padding: 0.7rem 0.8rem; border-radius: 0.7rem; background: #0b0c0e; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); font: 600 0.95rem var(--mono); color: #f1f1ea; }
.a-flaps .cells:last-child { justify-self: end; }
.a-pills { display: flex; gap: 0.3rem; padding: 0.3rem; border: 1px solid var(--line); border-radius: 0.95rem; background: var(--field); }
.a-pills span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.75rem; border-radius: 0.65rem; color: var(--muted); font-size: 0.82rem; font-weight: 560; box-shadow: inset 0 0 0 1px transparent; animation: a-pill 6s ease-in-out infinite; }
.a-pills span:first-child { color: var(--fg); background-color: rgb(94 200 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(94 200 255 / 0.4); }
.a-pills span:nth-child(2) { animation-delay: 2s; }
.a-pills span:nth-child(3) { animation-delay: 4s; }
@keyframes a-pill { 0%, 30% { color: var(--fg); background-color: rgb(94 200 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(94 200 255 / 0.4); } 36%, 100% { color: var(--muted); background-color: transparent; box-shadow: inset 0 0 0 1px transparent; } }
.a-search { display: grid; justify-items: center; gap: 0.6rem; }
.a-field { display: flex; align-items: center; gap: 0.6rem; width: 15rem; height: 2.7rem; padding: 0 0.9rem; border: 1px solid rgb(94 200 255 / 0.45); border-radius: 0.8rem; background: var(--field); box-shadow: 0 0 0 3px rgb(94 200 255 / 0.15); font-size: 0.95rem; }
.a-field .icon { color: var(--sky); }
.a-type { white-space: nowrap; animation: a-type 5s steps(16) infinite; }
@keyframes a-type { 0% { clip-path: inset(0 100% 0 0); } 45%, 100% { clip-path: inset(0 0 0 0); } }
.a-go { padding: 0.3rem 0.9rem; border-radius: 0.6rem; color: #2a1206; background: linear-gradient(135deg, #ffcf7a, #ff9966 52%, #ff7e8a); font-size: 0.78rem; font-weight: 650; animation: a-go 5s ease-in-out infinite; }
@keyframes a-go { 0%, 45% { opacity: 0.35; } 55%, 100% { opacity: 1; } }
.a-bars { display: grid; gap: 0.5rem; width: 15rem; }
.a-bars div { display: grid; grid-template-columns: 1fr 3.2rem; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.a-bars i { display: block; height: 0.7rem; border-radius: 99px; background: rgb(150 172 255 / 0.28); transform-origin: left; animation: a-grow 5s var(--ease) infinite; }
.a-bars div:nth-child(1) i { width: 46%; background: linear-gradient(90deg, var(--mint), var(--sky)); }
.a-bars div:nth-child(1) b { color: var(--mint); }
.a-bars div:nth-child(2) i { width: 72%; animation-delay: 0.15s; }
.a-bars div:nth-child(3) i { width: 100%; animation-delay: 0.3s; }
@keyframes a-grow { 0% { transform: scaleX(0); } 22%, 100% { transform: scaleX(1); } }
.a-acct { display: flex; align-items: center; gap: 1rem; }
.a-avatar { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; color: #06101f; background: linear-gradient(135deg, #8fdcff, #5ec8ff 50%, #7b9bff); box-shadow: 0 0 1.6rem -0.3rem var(--sky); }
.a-avatar .icon { width: 1.6rem; height: 1.6rem; }
.a-rows { display: grid; gap: 0.55rem; }
.a-rows div { display: flex; align-items: center; gap: 0.6rem; }
.a-rows span { width: 6.5rem; height: 0.5rem; border-radius: 99px; background: rgb(150 172 255 / 0.25); }
.a-rows div:nth-child(2) span { width: 5rem; }
.a-rows div:nth-child(3) span { width: 5.8rem; }
.a-switch { position: relative; width: 2rem; height: 1.15rem; border-radius: 99px; background: rgb(94 234 212 / 0.4); }
.a-switch::after { content: ""; position: absolute; left: 0.15rem; top: 0.15rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: #fff; transform: translateX(0.85rem); animation: a-switch 4s var(--ease) infinite; }
.a-rows div:nth-child(2) .a-switch::after { animation-delay: -1.3s; }
.a-rows div:nth-child(3) .a-switch::after { animation-delay: -2.6s; }
@keyframes a-switch { 0%, 40% { transform: translateX(0); } 50%, 90% { transform: translateX(0.85rem); } 100% { transform: translateX(0); } }
.a-done { position: relative; display: grid; place-items: center; width: 3.8rem; height: 3.8rem; border-radius: 50%; color: #032129; background: linear-gradient(135deg, #8df5df, #5eead4 45%, #5ec8ff); box-shadow: 0 0 2rem -0.2rem var(--mint); }
.tour-art > .a-done { animation: a-pop 0.7s var(--ease) both; }
.a-done .icon { width: 1.9rem; height: 1.9rem; stroke-width: 3; }
.a-done::after { content: ""; position: absolute; inset: -0.6rem; border: 1px solid var(--mint); border-radius: 50%; opacity: 0; animation: ping 2.6s ease-out infinite; }
@keyframes a-pop { from { transform: scale(0.6); opacity: 0; } }
.tour-art > .a-spark { position: absolute; width: 1rem; height: 1rem; color: var(--gold); animation: twinkle 1.4s ease-in-out infinite alternate; }
.a-spark.s1 { left: 22%; top: 24%; } .a-spark.s2 { right: 20%; top: 34%; animation-delay: -0.5s; } .a-spark.s3 { left: 30%; bottom: 16%; width: 0.7rem; height: 0.7rem; animation-delay: -0.9s; }

/* « Bientôt » : une fonction annoncée mais pas encore ouverte */
.soon { font-style: normal; margin-left: 0.4rem; padding: 0.08rem 0.5rem; border-radius: 99px; background: rgb(255 210 122 / 0.14); color: var(--gold); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.02em; vertical-align: middle; }
.tab[aria-disabled="true"] { color: rgb(155 168 204 / 0.5); cursor: not-allowed; }
.tab[aria-disabled="true"]:hover { color: rgb(155 168 204 / 0.5); }
.card.is-soon { opacity: 0.55; cursor: default; }
.card.is-soon:hover { border-color: transparent; }
@media (max-width: 640px) { .tab .soon { margin: 0; font-size: 0.6rem; } }

/* Rappel sous les résultats : les prix sont un repère, pas une promesse */
.fineprint { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0 0.3rem; font-size: 0.84rem; color: var(--muted); }
.fineprint .icon { flex: none; margin-top: 0.15rem; color: var(--gold); }
.footer-end { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }

/* Réglages : « Mon compte » et administration */
.oform { display: grid; gap: 0.9rem; margin-top: 1.1rem; }
.oform .btn { justify-self: start; }
@media (min-width: 700px) { .oform-2 { grid-template-columns: 1fr 1fr; } .oform-2 .btn { grid-column: 1 / -1; } }
.orow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-top: 1.1rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 1rem; }
.orow small { display: block; color: var(--muted); font-size: 0.82rem; max-width: 34rem; }
.state-idle { color: var(--muted); }
.danger { margin-top: 0.9rem; border: 1px solid rgb(255 154 154 / 0.3); border-radius: 1rem; padding: 0 1rem; }
.danger summary { padding: 0.8rem 0; cursor: pointer; color: var(--danger); font-weight: 580; font-size: 0.93rem; }
.danger .oform { margin: 0 0 1rem; animation: fade 0.5s ease both; }
.bform { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
.check { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 1rem; cursor: pointer; }
.check small { display: block; color: var(--muted); font-size: 0.82rem; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; accent-color: var(--sunset); cursor: pointer; }
.alabel { margin-bottom: 0.45rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.segs { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.25rem; padding: 0.3rem; border-radius: 1rem; border: 1px solid var(--line); background: var(--field); }
.segs label { position: relative; cursor: pointer; }
.segs input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segs span { display: block; padding: 0.55rem 0.8rem; border-radius: 0.75rem; text-align: center; font-size: 0.9rem; font-weight: 540; color: var(--muted); transition: color 0.2s ease, background-color 0.2s ease; }
.segs input:checked + span { color: var(--fg); background: rgb(94 200 255 / 0.16); box-shadow: inset 0 0 0 1px rgb(94 200 255 / 0.38); }
.segs input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 2px; }
.bgrid { display: grid; gap: 0.9rem; }
@media (min-width: 700px) { .bgrid { grid-template-columns: 1fr 1.4fr; } }
.bdate { max-width: 26rem; }
.bpreview { padding: 1rem; border: 1px dashed var(--line-strong); border-radius: 1rem; }
.pill-on { background: rgb(94 234 212 / 0.14); color: var(--mint); } .pill-off { background: rgb(150 172 255 / 0.1); color: var(--muted); }
.pill-on::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }

/* ── Apparition : fondu sur place, sans déplacement ── */
.js .reveal { opacity: 0; transition: opacity 0.9s ease; }
.js .reveal.in { opacity: 1; }
.js .bento .reveal:nth-child(2), .js .steps .reveal:nth-child(2), .js .hero-in .reveal:nth-child(2) { transition-delay: 0.12s; }
.js .bento .reveal:nth-child(3), .js .steps .reveal:nth-child(3) { transition-delay: 0.24s; }
.js .bento .reveal:nth-child(4) { transition-delay: 0.36s; }

/* Décor hors écran : animations en pause */
[data-scene].paused *, [data-scene].paused *::after { animation-play-state: paused !important; }

/* Animations réduites : choix fait dans « Mon compte » ou en pied de page (voir boot.js) */
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { animation: none !important; transition: none !important; }
[data-motion="reduce"] .reveal { opacity: 1; }
[data-motion="reduce"] .flight { transform: translateX(30%); }
[data-motion="reduce"] .flight-y { transform: translateY(-84%); }
[data-motion="reduce"] .flight-r { transform: rotate(-7.6deg); }
[data-motion="reduce"] .train-run { transform: translateX(55%); }
[data-motion="reduce"] .takeoff { transform: translateX(46%); }
[data-motion="reduce"] .takeoff-y { transform: translateY(-2.6rem); }
[data-motion="reduce"] .takeoff-r { transform: rotate(-11deg); }
[data-motion="reduce"] .gear { opacity: 0; }