/* PermisRoute — site vitrine. Identité « Signalisation » de l'app :
   aplats de couleur du code de la route, titres capitales très gras,
   formes ARRONDIES (un panneau belge n'a pas d'angle vif), ombre = décalage
   net dans une teinte foncée de la couleur du bloc, jamais du noir.
   Couleurs reprises de flutter_app/lib/utils/signal_palette.dart.
   Police : Barlow (OFL, hébergée ici — pas de Google Fonts), dessinée d'après
   la signalisation routière. */

@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(/assets/fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700 900; font-display: swap; src: url(/assets/fonts/barlow-latin-700-normal.woff2) format("woff2"); }

:root {
  --blue: #1040C0;   --blue-shadow: #082060;
  --yellow: #F0C020; --yellow-shadow: #AD8A17;
  --red: #D02020;
  --green: #2E7D32;  --green-shadow: #1C4C1E;
  --mauve: #8E3B8A;  --mauve-shadow: #5A2357;
  --ink: #121212;
  --ink-muted: #5A574E;
  --canvas: #F5F3EE;
  --surface: #FFFFFF;
  --border: #6F6B5F;
  --divider: #E0DCD2;
  --on-blue: #FFFFFF;
  --hero-bg: #1040C0;
  --r-block: 16px;
  --r-row: 12px;
  --font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue: #6C9BFF;   --blue-shadow: #135EFF;
    --green: #5CC46A;  --green-shadow: #338D3F;
    --mauve: #D58BCB;  --mauve-shadow: #9E4F93;
    --ink: #F2F0EA;
    --ink-muted: #A8A296;
    --canvas: #14120F;
    --surface: #201D19;
    --border: #8A8478;
    --divider: #35312B;
    --on-blue: #0B1020;
    --hero-bg: #0D2E8A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --blue: #6C9BFF; --blue-shadow: #135EFF; --green: #5CC46A; --green-shadow: #338D3F;
  --mauve: #D58BCB; --mauve-shadow: #9E4F93;
  --ink: #F2F0EA; --ink-muted: #A8A296; --canvas: #14120F; --surface: #201D19;
  --border: #8A8478; --divider: #35312B; --on-blue: #0B1020; --hero-bg: #0D2E8A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 17px/1.55 var(--font);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--yellow); color: #121212; padding: 8px 12px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 24px; } }

/* ── En-tête ─────────────────────────────────────────── */
.top { background: var(--surface); border-bottom: 1px solid var(--divider); position: sticky; top: 0; z-index: 5; }
.top__in { display: flex; align-items: center; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 900; font-size: 19px; }
.brand img { border-radius: 8px; }
.nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; padding: 8px 10px; border-radius: 999px; white-space: nowrap; }
.nav a:hover { background: var(--canvas); }
.nav a[aria-current="page"] { background: var(--yellow); color: #121212; }
/* Langue : un menu, parce que trois liens ne tiennent pas à côté du bouton sous 390 px. */
.langs { position: relative; }
.langs summary { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 6px 8px; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover { background: var(--canvas); }
.langs summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Ouvert : un voile invisible referme le menu au clic à côté, sans JavaScript. */
.langs[open] summary::before { content: ""; position: fixed; inset: 0; cursor: default; }
.langs__menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 6; display: grid; min-width: 150px; padding: 6px; background: var(--surface); border: 1px solid var(--divider); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.langs__menu a { padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; }
.langs__menu a:hover { background: var(--canvas); }
.langs__menu a[aria-current] { background: var(--yellow); color: #121212; font-weight: 800; }
@media (max-width: 719px) {
  .top__in { padding-top: 8px; padding-bottom: 4px; gap: 4px 8px; }
  /* Les quatre liens tiennent dès 360 px : la barre déborde de 8 px des deux
     côtés (texte aligné sur la marge) et répartit les espaces. Avant, elle
     avait 328 px pour 357 px de liens : « FAQ » touchait le bord droit. */
  .nav { order: 3; width: calc(100% + 16px); margin: 0 -8px; padding-bottom: 4px; gap: 0; justify-content: space-between; }
  .nav a { padding: 8px; }
  .langs { margin-left: auto; }
  .langs summary { padding: 6px 4px; }
  .top__in .top__cta { padding-inline: 12px; }
}
/* Très petits écrans : le logo seul, pour garder le bouton sur la même ligne. */
@media (max-width: 349px) { .brand span { display: none; } }

/* ── Boutons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 10px 18px; border-radius: var(--r-row); font-weight: 800; font-size: 16px;
  text-decoration: none; border: 0; cursor: pointer;
}
.btn--sm { min-height: 40px; padding: 6px 14px; font-size: 15px; }
.btn--yellow { background: var(--yellow); color: #121212; box-shadow: 0 4px 0 var(--yellow-shadow); }
.btn--ink { background: #121212; color: #fff; box-shadow: 0 4px 0 #000; }
.btn--ghost { background: transparent; color: inherit; border: 2px dashed currentColor; opacity: .75; cursor: default; font-weight: 700; }
.btn:active:not(.btn--ghost) { transform: translateY(2px); box-shadow: 0 2px 0 var(--yellow-shadow); }
.stores { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 4px; }

/* ── Héros ───────────────────────────────────────────── */
.hero { background: var(--hero-bg); color: #fff; overflow: hidden; }
.hero a:not(.btn) { color: #fff; }
.hero__in { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 48px; }
.hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 6vw, 54px); letter-spacing: -.02em; }
.hero .lead { color: rgba(255,255,255,.9); }
.hero__note { font-size: 14px; color: rgba(255,255,255,.8); margin-top: 12px; }
.hero__shot { justify-self: center; width: min(300px, 78vw); }
.hero__shot img { border-radius: 24px; box-shadow: 0 6px 0 var(--blue-shadow); }
.hero .btn--ghost { color: #fff; }
@media (min-width: 860px) { .hero__in { grid-template-columns: 1.3fr 1fr; align-items: center; } }

.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: 13px; margin-bottom: 12px; opacity: .9; }
.rule { display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--yellow); margin: 4px 0 20px; }
.lead { font-size: 19px; max-width: 40em; }
.lead--ink { color: var(--ink-muted); }

/* ── Sections ────────────────────────────────────────── */
.section { padding: 56px 0; }
.section--alt { background: var(--surface); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 3.6vw, 32px); letter-spacing: .01em; }
.h3 { font-weight: 900; font-size: 20px; }
.mt { margin-top: 32px; }
.small { font-size: 14px; color: var(--ink-muted); margin-top: 20px; }

.page-head { background: var(--hero-bg); color: #fff; padding: 48px 0 28px; }
.page-head h1 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 5vw, 46px); max-width: 22em; }
.page-head .lead { color: rgba(255,255,255,.9); }
.page-head a { color: #fff; }
.page-head .btn--yellow { color: #121212; }

/* ── Cartes ──────────────────────────────────────────── */
.grid3, .grid2 { display: grid; gap: 20px; }
@media (min-width: 720px) { .grid2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.card { border-radius: var(--r-block); padding: 24px; position: relative; }
.card h3 { font-size: 21px; font-weight: 900; }
.card p:last-child { margin-bottom: 0; }
.card--blue { background: var(--blue); color: var(--on-blue); box-shadow: 0 4px 0 var(--blue-shadow); }
.card--yellow { background: var(--yellow); color: #121212; box-shadow: 0 4px 0 var(--yellow-shadow); }
.card--green { background: var(--green); color: var(--on-blue); box-shadow: 0 4px 0 var(--green-shadow); }
/* Le pack Intensif (30/10) : blanc sur mauve 6,7:1 ; en sombre, encre sur mauve clair 7,6:1. */
.card--mauve { background: var(--mauve); color: var(--on-blue); box-shadow: 0 4px 0 var(--mauve-shadow); }
.card--plain { background: var(--surface); border: 1px solid var(--divider); }
.card__num {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: #121212; font-weight: 900; margin-bottom: 14px;
}
.card--yellow .card__num { background: #121212; color: var(--yellow); }

.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.shot { margin: 0; }
.shot img { border-radius: 18px; box-shadow: 0 4px 0 var(--blue-shadow); }
@media (max-width: 559px) {
  .shots { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
  .shot { scroll-snap-align: start; }
}

/* ── Centres ─────────────────────────────────────────── */
.centers { list-style: none; padding: 0; margin: 0 0 32px; border: 1px solid var(--border); border-radius: var(--r-row); background: var(--surface); overflow: hidden; }
.centers li + li { border-top: 1px solid var(--divider); }
.center-row { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "name tag go" "meta tag go"; gap: 2px 12px; align-items: center; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.center-row:hover { background: var(--canvas); }
.center-row__name { grid-area: name; font-weight: 800; }
.center-row__meta { grid-area: meta; font-size: 14px; color: var(--ink-muted); }
.center-row .tag { grid-area: tag; }
.center-row__go { grid-area: go; font-weight: 900; color: var(--blue); }
.tag { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--border); font-size: 13px; font-weight: 800; white-space: nowrap; }
.tag--yellow { background: var(--yellow); color: #121212; border-color: var(--yellow); }
.tag--soon { background: var(--surface); color: var(--ink); border-color: var(--ink); }

.center-grid { display: grid; gap: 20px; margin-bottom: 40px; }
@media (min-width: 720px) { .center-grid { grid-template-columns: 1fr 2fr; } }
.stat { display: flex; flex-direction: column; justify-content: center; }
.stat__n { font-family: var(--display); font-size: 64px; font-weight: 900; line-height: 1; }
.stat__l { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.stat__extra { margin-top: 10px; font-weight: 600; font-size: 15px; opacity: .9; }
.legal { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0 0 24px; }
.legal dt { font-weight: 700; color: var(--ink-muted); }
.legal dd { margin: 0; }
@media (max-width: 559px) { .legal { grid-template-columns: 1fr; gap: 2px; } .legal dd { margin-bottom: 12px; } }
.addr { font-size: 18px; font-weight: 600; }
.zones { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.zones li { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-row); padding: 10px 14px; }
.zones__n { font-weight: 900; color: var(--blue); }
.price-from { font-weight: 800; font-size: 18px; }
.others { line-height: 2; }

/* ── Étapes, tarifs, FAQ ─────────────────────────────── */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
/* « Comment ça marche » avec la vidéo de l'app : l'étape en cours s'allume. */
.how-demo { display: grid; gap: 32px; align-items: start; }
@media (min-width: 860px) { .how-demo { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; } }
.how-demo .steps li { padding: 14px; margin: -14px; border-radius: var(--r-block); cursor: pointer; transition: background .25s, box-shadow .25s; }
.how-demo .steps li.is-current { background: var(--surface); box-shadow: 0 0 0 2px var(--yellow); }
.phone { margin: 0 auto; width: min(100%, 250px); }
@media (min-width: 860px) { .phone { width: 300px; position: sticky; top: 84px; } }
.phone video { display: block; width: 100%; height: auto; border-radius: 30px; border: 8px solid #121212; background: #121212; }
.phone figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-muted); text-align: center; }
.steps li { display: flex; gap: 18px; align-items: flex-start; }
.steps__n { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-row); background: var(--blue); color: var(--on-blue); font-weight: 900; font-size: 22px; box-shadow: 0 4px 0 var(--blue-shadow); }
.notice { margin: 32px 0 24px; padding: 16px 18px; border-left: 6px solid var(--yellow); background: var(--surface); border-radius: var(--r-row); }

.free ul { margin: 0; padding-left: 20px; }
.price { display: flex; flex-direction: column; }
.price__n { font-family: var(--display); font-size: 40px; font-weight: 900; margin: 4px 0 12px; }
.price__n span { font-family: var(--font); font-size: 16px; font-weight: 600; margin-left: 4px; }
.price .tag { position: absolute; top: -12px; right: 16px; }
.price__where { font-size: 14px; font-weight: 600; opacity: .85; margin-top: auto; padding-top: 8px; }

.faq details { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--r-row); margin-bottom: 10px; }
/* Triangle DANS le cadre : dehors, il collait au bord de l'écran sur téléphone. */
.faq summary { cursor: pointer; padding: 16px 18px; font-weight: 800; list-style-position: inside; }
.faq details p { padding: 0 18px 16px; margin: 0; }

/* ── Bandeau final et pied ───────────────────────────── */
.band { background: var(--yellow); color: #121212; padding: 40px 0; }
.band__in { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.band h2 { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: 30px; }
.band p { margin: 0; }
.band .btn--ghost { color: #121212; }

.foot { background: #121212; color: #E8E5DD; padding: 40px 0; font-size: 15px; }
.foot__in { display: grid; gap: 20px; }
@media (min-width: 720px) { .foot__in { grid-template-columns: 1fr auto; } .foot__legal { grid-column: 1 / -1; } }
.foot__brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 18px; margin-bottom: 4px; }
.foot__brand img { border-radius: 6px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; }
.foot a { color: #fff; }
.foot__langs { margin-top: 12px; }
.foot__langs a[aria-current] { font-weight: 800; text-decoration: none; }
.foot__legal { color: #A8A296; font-size: 13px; margin: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ═══════════════════════════════════════════════════════════
   ACCUEIL — le trajet qu'on « roule » en défilant (assets/drive.js)
   ═══════════════════════════════════════════════════════════ */

.home {
  --map-land: #EEEBE4; --map-build: #DCD7CC; --map-road: #FFFFFF; --map-casing: #CDC7BA;
  --map-water: #AECBE3; --map-park: #CFE3C1; --map-label: #6B665C; --map-halo: #EEEBE4;
  --map-hw: #FFDC7A; --map-hw-casing: #D3A93A; --map-rail: #8C877C;
  --route: #2F7BEA; --route-casing: #1747A6; --route-done: #A2A9B6;
  --hud: #1A5CC8; --hud-dark: #134AA6;
  --top-h: 61px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home {
    --map-land: #1B1E25; --map-build: #262A33; --map-road: #3A3F4B; --map-casing: #2A2E37;
    --map-water: #1C3550; --map-park: #1F3324; --map-label: #A9AFBD; --map-halo: #1B1E25;
    --map-hw: #6B5A2A; --map-hw-casing: #8A7433; --map-rail: #6D7280;
    --route: #4FC3F7; --route-casing: #0E5A86; --route-done: #4A505C;
  }
}
:root[data-theme="dark"] .home {
  --map-land: #1B1E25; --map-build: #262A33; --map-road: #3A3F4B; --map-casing: #2A2E37;
  --map-water: #1C3550; --map-park: #1F3324; --map-label: #A9AFBD; --map-halo: #1B1E25;
  --map-hw: #6B5A2A; --map-hw-casing: #8A7433; --map-rail: #6D7280;
  --route: #4FC3F7; --route-casing: #0E5A86; --route-done: #4A505C;
}

.display {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(38px, 6vw, 76px); line-height: .92; letter-spacing: -.01em; margin: 0 0 18px;
}
.kicker { font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--yellow); margin-bottom: 14px; }

/* ── Le trajet ───────────────────────────────────────────── */
.drive { position: relative; background: var(--canvas); }

.chapter { display: flex; align-items: center; }
.chapter__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sign { flex: none; width: 52px; height: 52px; }
.sign svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.chapter__eyebrow { margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--ink-muted); }
.chapter h2 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 4.4vw, 58px); line-height: .94; margin-bottom: 16px;
}
.chapter h1 {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(54px, 8.4vw, 116px); line-height: .86; letter-spacing: -.015em; margin-bottom: 22px;
}
.chapter__text { font-size: 20px; line-height: 1.5; max-width: 30em; color: var(--ink); }
.chapter--start .chapter__text { font-size: 21px; }
/* Bouton « étape suivante » */
.next {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 6px 18px 6px 6px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 700 16px var(--font);
  cursor: pointer; text-align: left;
}
.next small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.next__arrow { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-shadow); }
.next__arrow svg { width: 24px; height: 24px; fill: none; stroke: #121212; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.next:hover .next__arrow { transform: translateY(2px); box-shadow: 0 2px 0 var(--yellow-shadow); }
.chapter--start .next__arrow svg { animation: nudge 1.6s ease-in-out infinite; }
@media (min-width: 900px) { .chapter:not(.is-active):not(.chapter--start) .next { visibility: hidden; } }
@keyframes nudge { 50% { transform: translateY(5px); } }

.stage { position: relative; overflow: hidden; background: var(--map-land); }
.stage__map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Carte */
.m-land rect { fill: var(--map-land); }
.m-build rect { fill: var(--map-build); }
.m-water ellipse { fill: var(--map-water); }
.m-park rect, .m-park circle { fill: var(--map-park); }
.m-casing line, .m-casing circle { stroke: var(--map-casing); stroke-linecap: round; }
.m-road line, .m-road circle { stroke: var(--map-road); stroke-linecap: round; }
.m-casing circle, .m-road circle { fill: none; }
.m-rail__bed { stroke: var(--map-rail); stroke-width: 5; }
.m-rail__ties { stroke: var(--map-land); stroke-width: 3; stroke-dasharray: 8 8; }
.m-hw__casing { stroke: var(--map-hw-casing); stroke-width: 35; fill: none; stroke-linecap: butt; }
.m-hw__road { stroke: var(--map-hw); stroke-width: 30; fill: none; stroke-linecap: butt; }
.m-hw__ramp.m-hw__casing { stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
.m-hw__ramp.m-hw__road { stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.m-center { fill: var(--blue); opacity: .9; }
.m-parking { fill: var(--map-build); }
.m-labels text {
  font: 600 13px var(--font); fill: var(--map-label); text-anchor: middle;
  paint-order: stroke; stroke: var(--map-halo); stroke-width: 4px; stroke-linejoin: round;
}
.m-labels .m-label--hw { font-weight: 800; fill: #5A4300; stroke: var(--map-hw); }
.m-labels .m-label--poi { font-weight: 800; fill: #fff; stroke: none; font-size: 12px; }
.m-labels .m-label--water { fill: #3D6E99; font-style: italic; stroke: none; }
.m-route__casing { fill: none; stroke: var(--route-casing); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.m-route__line { fill: none; stroke: var(--route); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.m-route__done { fill: none; stroke: var(--route-done); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.m-other rect { fill: var(--red); stroke: #fff; stroke-width: 2; }
.m-other .m-other__glass { fill: #3A0D0D; stroke: none; }
.m-hw__mark { stroke: #fff; stroke-width: 1.4; stroke-dasharray: 12 12; opacity: .9; }
.m-hw__mark--accel { stroke-width: 2.6; stroke-dasharray: 7 5; opacity: 1; }
.puck__halo { fill: rgba(16, 64, 192, .16); }
.puck__arrow { fill: #0B2A6B; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round; }

/* Bandeau de guidage — même dessin que l'app */
.hud {
  position: absolute; top: 16px; left: 16px; right: 16px; max-width: 440px;
  border-radius: 16px; overflow: hidden; color: #fff; background: var(--hud);
  box-shadow: 0 10px 30px rgba(8, 20, 60, .28); transition: background .3s;
}
.stage[data-arrived="1"] .hud { background: var(--green); }
.hud__main { display: flex; gap: 14px; align-items: center; padding: 14px 16px; }
.hud__icon { flex: none; width: 56px; height: 56px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.hud__icon svg, .hud__next-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--hud); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.stage[data-arrived="1"] .hud__icon svg { stroke: var(--green); }
.hud__dist { margin: 0; font: 800 30px/1 var(--font); letter-spacing: -.01em; }
.hud__dist:empty { display: none; }
.hud__text { margin: 2px 0 0; font-weight: 600; font-size: 16px; line-height: 1.3; }
.hud__next { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--hud-dark); font-size: 14px; color: rgba(255,255,255,.88); }
.hud__next[hidden] { display: none; }
.hud__next-icon { width: 26px; height: 26px; border-radius: 7px; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.hud__next-icon svg { width: 18px; height: 18px; stroke: #fff; }

.eta {
  position: absolute; left: 16px; right: 16px; bottom: 30px; max-width: 440px;
  display: flex; align-items: center; gap: 6px; padding: 10px 10px 10px 18px;
  background: var(--surface); color: var(--ink); border-radius: 18px; box-shadow: 0 10px 30px rgba(8, 20, 60, .2);
}
.eta__time { font: 800 22px var(--font); margin-right: auto; }
.eta__cell { display: flex; flex-direction: column; align-items: center; min-width: 48px; line-height: 1.1; }
.eta__cell b { font-size: 18px; }
.eta__cell small { font-size: 12px; color: var(--ink-muted); }
.voice {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; min-height: 44px; padding: 0 14px;
  border: 0; border-radius: 999px; background: var(--canvas); color: var(--ink); font: 700 14px var(--font); cursor: pointer;
}
.voice svg { width: 20px; height: 20px; }
.voice[aria-pressed="true"] { background: var(--yellow); color: #121212; }
.voice .voice__on, .voice[aria-pressed="true"] .voice__off { display: none; }
.voice[aria-pressed="true"] .voice__on { display: block; }
.voice[hidden] { display: none; }
.stage__note { position: absolute; left: 0; right: 0; bottom: 6px; margin: 0; text-align: center; font-size: 12px; color: var(--map-label); }

/* Ordinateur : texte à gauche, carte collée à droite pendant tout le trajet */
@media (min-width: 900px) {
  .home .top { position: sticky; }
  .drive { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
  .drive > .chapter { grid-column: 1; min-height: 92vh; padding: 0 48px 0 max(24px, calc((100vw - 1180px) / 2)); }
  .drive > .chapter--start { min-height: calc(100vh - var(--top-h)); }
  .drive > .chapter-wait { grid-column: 1; min-height: 40vh; }
  .drive > .chapter:last-child { min-height: 100vh; }
  .stage {
    grid-column: 2; grid-row: 1 / span 7; align-self: start;
    position: sticky; top: var(--top-h); height: calc(100vh - var(--top-h));
    border-radius: 28px 0 0 28px;
  }
  .chapter:not(.chapter--start) .chapter__card { opacity: .28; transform: translateY(10px); transition: opacity .45s, transform .45s; }
  .chapter.is-active .chapter__card { opacity: 1; transform: none; }
}

/* Téléphone : la carte reste en haut, les chapitres défilent dessous */
@media (max-width: 899px) {
  .home .top { position: static; }
  .drive > .chapter--start { padding: 36px 16px 44px; }
  .stage { position: sticky; top: 0; height: 58vh; height: 58svh; z-index: 2; border-radius: 0 0 24px 24px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
  .drive > .chapter:not(.chapter--start) { min-height: 72vh; padding: 0 16px; }
  .drive > .chapter-wait { min-height: 25vh; }
  .drive > .chapter:last-child { min-height: 90vh; padding-bottom: 40px; }
  .chapter:not(.chapter--start) .chapter__card {
    background: var(--surface); border-radius: 20px; padding: 20px; box-shadow: 0 4px 0 var(--divider);
    width: 100%;
  }
  .chapter h2 { font-size: 34px; }
  .chapter__text { font-size: 17px; }
  .sign { width: 42px; height: 42px; }
  .hud { top: 12px; left: 12px; right: 12px; }
  .hud__main { padding: 10px 12px; gap: 10px; }
  .hud__icon { width: 46px; height: 46px; }
  .hud__dist { font-size: 24px; }
  .hud__text { font-size: 14px; }
  .eta { left: 12px; right: 12px; bottom: 24px; padding: 6px 6px 6px 14px; }
  .eta__time { font-size: 18px; }
  .voice span { display: none; }
  .voice { padding: 0 12px; }
}

/* ── Dans la voiture ─────────────────────────────────────── */
.car { background: #08090D; color: #fff; padding: 88px 0; }
.car__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .car__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; } }
.car__text { font-size: 20px; max-width: 32em; margin-bottom: 0; color: rgba(255,255,255,.86); }
/* Capture du DHU dans un cadre d'écran de bord : 26 − 8 = 18 px de rayon
   intérieur, celui des coins de la surface Android Auto. */
.car__shot { margin: 0; }
.car__shot img { width: 100%; border: 8px solid #1A1C22; border-radius: 26px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.car__shot figcaption { font-size: 13px; color: rgba(255,255,255,.55); margin-top: 12px; }

/* ── Choisis ton centre ──────────────────────────────────── */
.pick { padding: 80px 0; }
.pick__in { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .pick__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.pick__list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.pick__list a {
  display: flex; flex-direction: column; gap: 0; line-height: 1.25;
  padding: 10px 2px; border-bottom: 1px solid var(--divider); color: var(--ink); text-decoration: none; font-weight: 700;
}
.pick__list a small { color: var(--ink-muted); font-weight: 600; white-space: nowrap; }
.pick__list a:hover, .pick__list a.is-hot { color: var(--blue); border-color: var(--blue); }
@media (max-width: 480px) { .pick__list { grid-template-columns: 1fr; } }

.be-map { width: 100%; height: auto; overflow: visible; }
.be-map__land { fill: var(--surface); stroke: var(--border); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 8px 0 var(--divider)); }
.be-pin { cursor: pointer; }
.be-pin__halo { fill: var(--blue); opacity: .14; transition: opacity .2s, r .2s; }
.be-pin__dot { fill: var(--blue); stroke: var(--surface); stroke-width: 4; transition: fill .2s; }
.be-pin text { font: 700 27px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--canvas); stroke-width: 7px; stroke-linejoin: round; }
.be-pin:hover .be-pin__dot, .be-pin:focus-visible .be-pin__dot, .be-pin.is-hot .be-pin__dot { fill: var(--yellow); }
.be-pin:hover .be-pin__halo, .be-pin.is-hot .be-pin__halo { opacity: .35; r: 30; }
.be-pin:hover text, .be-pin.is-hot text { fill: var(--blue); }

.band__price { margin-top: 10px !important; font-weight: 700; }
/* Cible du bouton « Télécharger » de l'en-tête : pas cachée sous l'en-tête collé. */
#telecharger { scroll-margin-top: var(--top-h); }
.band__price a { color: #121212; }

@media (prefers-reduced-motion: reduce) {
  .chapter--start .next__arrow svg { animation: none; }
  .chapter:not(.chapter--start) .chapter__card { opacity: 1 !important; transform: none !important; }
}