/* Accueil du site (W-04), direction « La veilleuse » : docs/design/notes/2026-09-28-site-vitrine.md,
   maquette docs/design/site/maquette-accueil.html. Feuille autonome (ni track.css ni site.css).
   Rendu par défaut = état final des scènes (fenêtre et rue allumées, fil tracé) : c'est ce qu'on
   voit sans script, sans prise en charge ou avec « réduire les animations ».
   Mode sombre par prefers-color-scheme (jetons doublés plutôt que la fonction light-dark, absente de Safari avant 17.5). */

/* Polices embarquées (OFL), mêmes URL que /t/ : déjà en cache pour qui a ouvert un lien de suivi. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("../track/fonts/plus-jakarta-sans-latin-wght.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../track/fonts/fraunces-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* Jetons : palette « Foyer chaleureux » (app/lib/core/theme/app_colors.dart). */
:root {
  color-scheme: light dark;
  --sans: "Plus Jakarta Sans", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --bg: #FAF6F0;
  --surface: #FFFCF7;
  --surface-2: #F5EEE5;
  --surface-3: #F0E7DC;
  --line: #E3D6C7;
  --outline: #8C7B71;
  --text: #3D2C29;
  --text-2: #6B5B53;
  --cta: #B5543A;
  --on-cta: #FFFFFF;
  --link: #B5543A;
  --sage: #4F7A63;
  --sage-bg: #DCEBE2;
  --on-sage-bg: #24402F;
  --error: #A63F2B;
  --error-bg: #F6D9CF;
  --on-error-bg: #5C1F12;
  --on-honey: #3D2C29;
  --focus: #3D2C29;
  --shadow: rgba(61, 44, 41, .16);

  /* Décoratifs : jamais en texte. */
  --terra: #E07A5F;
  --sage-deco: #81B29A;
  --honey: #F2CC8F;

  /* Illustrations qui suivent le thème. */
  --frame: #EADFD2;
  --map: #F5EEE5;
  --street: #FFFCF7;
  --park: #DCEBE2;
  --blind: #EFE3D2;
  --blind-line: #DCCFC1;
  --ring-track: #EADFD2;

  /* La nuit : fixe dans les deux thèmes, un cran plus profonde en sombre. */
  --night: #221A17;
  --n-surface: #2E2420;
  --n-text: #EDE3D6;
  --n-text-2: #B4A79B;
  --n-cta: #E8907A;
  --n-on-cta: #221A17;

  --r-s: 12px; --r-m: 20px; --r-l: 28px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #221A17;
    --surface: #2E2420;
    --surface-2: #2A211D;
    --surface-3: #3A2E29;
    --line: #3A2E29;
    --outline: #9C8E84;
    --text: #EDE3D6;
    --text-2: #B4A79B;
    --cta: #E8907A;
    --on-cta: #221A17;
    --link: #E8907A;
    --sage: #9CC7B1;
    --sage-bg: #2F4A3D;
    --on-sage-bg: #CFE8DA;
    --error: #F0A48C;
    --error-bg: #6A2C1E;
    --on-error-bg: #FFDAD0;
    --on-honey: #221A17;
    --focus: #EDE3D6;
    --shadow: rgba(0, 0, 0, .45);
    --frame: #3A2E29;
    --map: #221A17;
    --street: #3A2E29;
    --park: #2F4A3D;
    --blind: #463832;
    --blind-line: #3A2E29;
    --ring-track: #3A2E29;
    --night: #1C1512;
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.0625rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2 { font-family: var(--serif); font-weight: 300; letter-spacing: -.02em; line-height: 1.04; margin: 0; text-wrap: balance; }
h2 { font-weight: 350; font-size: clamp(2.1rem, 1.25rem + 3.4vw, 3.6rem); }
h3 { font: 700 1.125rem/1.35 var(--sans); margin: 0; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Hors de l'écran quelle que soit sa taille (texte à 200 %), visible au focus (contrôle visuel W-09, B6). */
.site-skip { position: absolute; left: 12px; top: 12px; z-index: 50; padding: 12px 18px; border-radius: 999px; background: var(--n-cta); color: var(--n-on-cta); font-weight: 700; text-decoration: none; transform: translateY(calc(-100% - 24px)); }
.site-skip:focus { transform: none; }
.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
.section { padding-block: clamp(72px, 10vw, 144px); }
/* Colonnes mobiles bornées : une illustration ne doit jamais élargir la page. */
.hero-grid, .forget-grid, .privacy-grid, .net-grid, .together-grid, .beta-grid, .foot-grid, .levels, .level-view, .stations, .no-app { grid-template-columns: minmax(0, 1fr); }
/* Texte agrandi (200 %) sur un petit écran : un mot trop long passe à la ligne, jamais hors de la page. */
h1, h2, h3, .level strong, .faq summary, .pledge li, .checkin, .bubble-card div { overflow-wrap: break-word; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 .8125rem/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--text-2); max-width: 40ch; }
.lede strong { color: var(--text); font-weight: 600; }
.night { background: var(--night); color: var(--n-text); --text: var(--n-text); --text-2: var(--n-text-2); --link: var(--n-cta); --focus: var(--n-text); --line: #3A2E29; }

/* Boutons : 52 px (principal), 44 px minimum partout. */
.btn, .waitlist-form .cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; font: 700 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: transform 90ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out; }
.btn:active, .waitlist-form .cta:active { transform: scale(.97); }
.btn-primary, .waitlist-form .cta { background: var(--cta); color: var(--on-cta); }
.btn-primary:hover, .waitlist-form .cta:hover { background: color-mix(in srgb, var(--cta) 88%, #000); }
.night .btn-primary { background: var(--n-cta); color: var(--n-on-cta); }
.night .btn-primary:hover { background: color-mix(in srgb, var(--n-cta) 90%, #fff); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--text-2); text-underline-offset: .3em; }
.link-arrow svg { width: 18px; height: 18px; }
.icon { width: 24px; height: 24px; flex: none; }

/* En-tête, posé sur la nuit du héros */
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 76px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--n-text); font: 800 1.125rem/1 var(--sans); letter-spacing: -.01em; text-decoration: none; }
.brand svg { width: 32px; height: 32px; }
.nav { display: none; }
.nav a { color: var(--n-text-2); font-weight: 600; font-size: .9375rem; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--n-text); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.lang { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; border-radius: 999px; color: var(--n-text-2); font-weight: 700; font-size: .875rem; text-decoration: none; }
.lang:hover { color: var(--n-text); }
@media (min-width: 960px) {
  .nav { display: flex; gap: 28px; margin-left: auto; }
  .header-actions { margin-left: 20px; gap: 12px; }
}

/* Héros : la fenêtre qui s'allume */
.hero { position: relative; overflow: hidden; padding-bottom: clamp(48px, 8vw, 104px); }
.hero-grid { display: grid; gap: 40px; align-items: center; padding-top: clamp(24px, 5vw, 56px); }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 56px; min-height: min(720px, calc(100svh - 76px)); padding-top: 0; } }
.hero .eyebrow { color: var(--n-text-2); }
.eyebrow .on { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-deco); box-shadow: 0 0 0 4px rgba(129, 178, 154, .18); }
.hero h1 { margin-top: 20px; font-size: clamp(2.65rem, 1.35rem + 5.3vw, 5.75rem); max-width: 11ch; }
.hero h1 .answer { background: linear-gradient(var(--honey), var(--honey)) no-repeat left bottom .04em / 100% .07em; }
.hero .lede { margin-top: 24px; color: var(--n-text-2); max-width: 34ch; }
.hero .lede strong { color: var(--n-text); }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.hero .link-arrow { color: var(--n-text); text-decoration-color: var(--n-text-2); }
.scene { position: relative; width: min(100%, 460px); margin: 0 auto; }
.scene svg.scene-art { width: 100%; height: auto; overflow: visible; }
.slip { position: absolute; right: -2%; bottom: 17%; width: min(292px, 82%); display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px; background: #FFFCF7; color: #3D2C29; box-shadow: 0 22px 48px -18px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .25); transform-origin: 30% -60%; }
.slip-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--honey); color: #3D2C29; }
.slip-icon svg { width: 22px; height: 22px; }
.slip-meta { display: block; font-size: .75rem; font-weight: 600; color: #6B5B53; }
.slip-title { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.slip-sub { display: block; font-size: .8125rem; color: #6B5B53; }
@media (min-width: 960px) { .slip { right: -10%; bottom: 24%; } }

/* États de la scène. Avec script (scripting: enabled), elle attend d'être visible ; le script pose
   .armed dès son chargement. S'il ne répond pas, un filet CSS allume tout au bout de 5 s. */
.route-done { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.dot-move { opacity: 0; }
.hero.is-moving:not(.is-home) .dot-move { opacity: 1; }
.arrive-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.glow { transform-box: fill-box; transform-origin: center; }
@media (scripting: enabled) {
  .hero:not(.is-moving):not(.is-home) .route-done { stroke-dashoffset: 1; }
  .hero:not(.is-home) :is(.dot-end, .win-lit, .inside, .blind-lit) { opacity: 0; }
  .hero:not(.is-home) .glow { opacity: 0; transform: scale(.85); }
  .hero:not(.is-home) .slip { opacity: 0; transform: translateY(-26px) scale(.9); }
  .hero:not(.is-home) h1 .answer { background-size: 0% .07em; }
  .hero:not(.armed):not(.is-home) :is(.dot-end, .win-lit, .inside, .blind-lit, .glow, .slip) { animation: fs-show .01s linear 5s forwards; }
  .hero:not(.armed):not(.is-home) .route-done { animation: fs-draw .01s linear 5s forwards; }
  .hero:not(.armed):not(.is-home) h1 .answer { animation: fs-line .01s linear 5s forwards; }
}
@keyframes fs-show { to { opacity: 1; transform: none; } }
@keyframes fs-draw { to { stroke-dashoffset: 0; } }
@keyframes fs-line { to { background-size: 100% .07em; } }
.hero.is-moving .route-done { transition: stroke-dashoffset 1.8s var(--ease-inout); }
.hero.is-home :is(.win-lit, .inside, .blind-lit, .dot-end) { transition: opacity .6s var(--ease-out); }
.hero.is-home .glow { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.hero.is-home .arrive-ring { animation: ping .7s var(--ease-out) both; }
.hero.is-home .slip { transition: opacity .3s ease-out .35s, transform .5s var(--ease-spring) .35s; }
.hero.is-home h1 .answer { transition: background-size .7s var(--ease-out) .5s; }
@keyframes ping { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }
.no-trans, .no-trans * { transition: none !important; animation: none !important; }

/* « Puis on s'endort » */
.forget h2 { max-width: 18ch; }
.forget-grid { display: grid; gap: 48px; margin-top: 56px; }
@media (min-width: 820px) { .forget-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }
.thread h3 { font-size: .8125rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); padding-bottom: 14px; border-bottom: 1.5px solid var(--text); }
.thread ol { list-style: none; margin: 0; padding: 0; }
/* Heure et texte côte à côte ; en grand texte, le texte passe sous l'heure. */
.thread li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.thread time { flex: 0 0 5.4rem; }
.thread li p { flex: 1 1 10rem; min-width: 0; }
.thread time { font: 400 1.5rem/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; color: var(--text-2); white-space: nowrap; }
.who { display: block; margin-bottom: 2px; font-size: .8125rem; font-weight: 700; color: var(--text-2); }
.thread .event p { color: var(--text-2); }
.thread .late time { color: var(--cta); }
.tag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text); font: 700 .75rem/1.5 var(--sans); vertical-align: middle; }
.thread .auto p { display: inline-flex; flex-direction: column; padding: 10px 16px 12px; border-radius: 16px; background: var(--honey); color: var(--on-honey); font-weight: 700; }
.thread .auto .who { color: var(--on-honey); font-weight: 600; }

/* Comment ça marche : le fil, un trajet qu'on parcourt en faisant défiler. Le défilement n'agit que
   sur le décor : aucun texte n'est jamais masqué ni déplacé. */
@property --home-win { syntax: "<color>"; inherits: true; initial-value: #F2CC8F; }
@property --tip { syntax: "<number>"; inherits: true; initial-value: 0; }
.i-home-win { fill: var(--home-win, #F2CC8F); }
.how { background: var(--surface-2); }
.how h2 { max-width: 16ch; }
.stations { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 40px; }
.stations li { position: relative; padding-left: 72px; }
.st-mark { position: absolute; z-index: 1; left: 0; top: 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; }
.st-1 { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px var(--terra); }
.st-2 { background: var(--surface); box-shadow: inset 0 0 0 2px var(--terra); }
.st-2 span { width: 16px; height: 16px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 5px rgba(224, 122, 95, .22); }
.st-3 { background-color: var(--honey); color: #3D2C29; box-shadow: inset 0 0 0 2px var(--honey), 0 0 0 8px rgba(242, 204, 143, .3); --home-win: #FFF4DE; }
/* Entre deux arrêts : pointillé (reste à parcourir) sous le trait plein (parcouru). Le point voyage
   au bout du trait. */
.st-line { position: absolute; left: 22.5px; top: 56px; bottom: -36px; width: 3px; background: radial-gradient(circle, var(--outline) 1.5px, transparent 1.6px) center top / 3px 10px repeat-y; }
.st-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 3px; background: var(--terra); }
.st-fill::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 14px; height: 14px; margin: 0 0 -7px -7px; border-radius: 50%; background: var(--terra); box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 8px rgba(224, 122, 95, .22); opacity: var(--tip, 0); }
.stations h3 { font: 400 1.875rem/1.1 var(--serif); letter-spacing: -.01em; }
.stations p { margin-top: 10px; color: var(--text-2); max-width: 34ch; }
@media (min-width: 900px) {
  .stations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .stations li { padding-left: 0; padding-top: 76px; }
  .st-line { left: 60px; right: -20px; top: 22.5px; bottom: auto; width: auto; height: 3px; background: radial-gradient(circle, var(--outline) 1.5px, transparent 1.6px) left center / 10px 3px repeat-x; }
  .st-fill::after { left: auto; right: 0; bottom: auto; top: 50%; margin: -7px -7px 0 0; }
}
/* Le fil au défilement, en CSS seul : Chrome et Edge 115+, Safari 26+. Ailleurs, sans script
   (même contrat que le héros et la rue) ou en « réduire les animations » : l'état final ci-dessus.
   Chaque animation part d'un état « éteint » (from) vers le rendu par défaut (allumé). */
@keyframes st-draw-y { from { height: 0; } }
@keyframes st-draw-x { from { width: 0; } }
@keyframes st-tip { 0%, 100% { --tip: 0; } 4%, 96% { --tip: 1; } }
@keyframes st-on-mark { from { color: var(--text-2); box-shadow: inset 0 0 0 2px var(--outline); } }
@keyframes st-on-dot { from { background: var(--outline); box-shadow: 0 0 0 0 rgba(224, 122, 95, 0); transform: scale(.75); } }
@keyframes st-on-home { from { background-color: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 2px var(--outline), 0 0 0 0 rgba(242, 204, 143, 0); --home-win: #221A17; } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  /* Mobile (fil vertical) : chaque arrêt et chaque tronçon s'anime quand il croise la « ligne de
     lecture », une bande à 58-60 % de la hauteur d'écran, quelle que soit la longueur des textes. */
  .st-mark { view-timeline: --stop block; view-timeline-inset: 58% 40%; }
  .st-line { view-timeline: --seg block; view-timeline-inset: 58% 40%; }
  .st-fill { animation: st-draw-y 1ms linear both, st-tip 1ms linear both; animation-timeline: --seg, --seg; }
  :is(.st-1, .st-2) { animation: st-on-mark 1ms linear both; animation-timeline: --stop; }
  .st-2 span { animation: st-on-dot 1ms linear both; animation-timeline: --stop; }
  .st-3 { animation: st-on-home 1ms linear both; animation-timeline: --stop; }
  /* Bureau (fil horizontal) : un seul repère, la liste, qui monte de 76 % à 34 % de l'écran. */
  @media (min-width: 900px) {
    .stations { view-timeline: --trip block; }
    :is(.st-mark, .st-2 span) { animation-timeline: --trip; }
    .st-fill { animation-name: st-draw-x, st-tip; animation-timeline: --trip, --trip; }
    .st-1 { animation-range: cover 24vh cover 28vh; }
    li:nth-child(1) .st-fill { animation-range: cover 28vh cover 44vh; }
    :is(.st-2, .st-2 span) { animation-range: cover 44vh cover 48vh; }
    li:nth-child(2) .st-fill { animation-range: cover 48vh cover 62vh; }
    .st-3 { animation-range: cover 62vh cover 66vh; }
  }
} }

/* Vie privée : le store de la fenêtre = le niveau de détail. Boutons radio natifs (flèches du
   clavier, sans script) ; le store et le texte suivent le choix par :has(). Sans :has(), les trois
   textes restent affichés. */
.privacy h2 { max-width: 17ch; }
.privacy .lede { margin-top: 20px; }
.privacy-grid { display: grid; gap: 40px; margin-top: 48px; }
@media (min-width: 960px) { .privacy-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 72px; align-items: start; } .level-view { order: -1; } }
.levels { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.level { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 24px; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px; border-radius: var(--r-m); color: var(--text); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .16s, box-shadow .16s; }
.level:hover { box-shadow: inset 0 0 0 1.5px var(--outline); }
.level-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.level:has(.level-input:checked) { background: var(--surface); box-shadow: inset 0 0 0 2px var(--text), 0 10px 24px -16px var(--shadow); }
.level:has(.level-input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.level .glyph { width: 44px; height: 44px; color: var(--text-2); }
.level-input:checked ~ .glyph { color: var(--text); }
.level strong { display: block; font-weight: 700; }
.level small { display: block; font-size: .875rem; color: var(--text-2); }
.level .check { width: 24px; height: 24px; opacity: 0; color: var(--sage); }
.level-input:checked ~ .check { opacity: 1; }
.level-view { display: grid; gap: 24px; }
.seens { display: grid; gap: 12px; }
.blind-art { width: min(100%, 380px); height: auto; margin-inline: auto; }
.seen { padding: 20px 22px; border-radius: var(--r-m); background: var(--surface-2); }
@supports selector(:has(*)) {
  .seen { display: none; }
  .privacy-grid:has(#lv-progress:checked) .seen-progress,
  .privacy-grid:has(#lv-approx:checked) .seen-approx,
  .privacy-grid:has(#lv-precise:checked) .seen-precise { display: block; }
}
.seen-label { font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.seen-quote { margin-top: 8px; font: 400 1.375rem/1.3 var(--serif); }
.seen-how { margin-top: 10px; color: var(--text-2); }
.b-frame { fill: var(--frame); } .b-map { fill: var(--map); } .b-street { stroke: var(--street); stroke-width: 12; fill: none; stroke-linecap: round; }
.b-park { fill: var(--park); } .b-route { stroke: var(--terra); stroke-width: 5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.b-rest { stroke: var(--outline); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: .5 9; }
.b-zone { fill: rgba(224, 122, 95, .16); stroke: var(--terra); stroke-width: 2; stroke-dasharray: 5 6; }
.b-dot { fill: var(--terra); stroke: var(--surface); stroke-width: 3; }
.b-slats { fill: var(--blind); } .b-slat-line { stroke: var(--blind-line); stroke-width: 2; }
.b-rail { fill: var(--outline); }
.b-track { fill: var(--blind-line); } .b-fill { fill: var(--terra); }
.b-pct { fill: var(--text); font: 400 34px var(--serif); }
.b-blind { transform-box: fill-box; transition: transform .45s var(--ease-out); }
.b-zone, .b-dot, .b-route, .b-rest, .b-progress { transition: opacity .3s ease-out; }
/* Niveau « progression » par défaut : store baissé, ni zone ni point. */
.b-zone, .b-dot { opacity: 0; }
.privacy-grid:has(#lv-approx:checked) .b-blind { transform: translateY(-50%); }
.privacy-grid:has(#lv-approx:checked) :is(.b-zone) { opacity: 1; }
.privacy-grid:has(#lv-approx:checked) :is(.b-route, .b-rest, .b-progress) { opacity: 0; }
.privacy-grid:has(#lv-precise:checked) .b-blind { transform: translateY(-93%); }
.privacy-grid:has(#lv-precise:checked) .b-dot { opacity: 1; }
.privacy-grid:has(#lv-precise:checked) .b-progress { opacity: 0; }

.no-app { display: grid; gap: 32px; margin-top: clamp(56px, 8vw, 96px); padding: clamp(24px, 4vw, 48px); border-radius: var(--r-l); background: var(--surface-2); }
@media (min-width: 900px) { .no-app { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 56px; } }
.no-app h3 { font: 400 clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem)/1.12 var(--serif); letter-spacing: -.01em; }
.no-app p { margin-top: 14px; color: var(--text-2); max-width: 44ch; }
.bubble { justify-self: center; width: min(100%, 340px); padding: 8px 8px 12px; border-radius: 20px 20px 20px 6px; background: var(--surface); box-shadow: 0 16px 36px -20px var(--shadow); }
.bubble-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 14px; background: var(--surface-2); }
.bubble-card svg { width: 76px; height: 76px; border-radius: 10px; }
.bubble-card strong { display: block; font-size: .9375rem; line-height: 1.3; }
.bubble-card span { font-size: .8125rem; color: var(--text-2); }
.bubble-text { padding: 10px 8px 0; font-size: .9375rem; }
.promise-line { display: flex; gap: 14px; align-items: flex-start; margin-top: 40px; max-width: 62ch; color: var(--text-2); }
.promise-line svg { color: var(--sage); margin-top: 2px; }
.promise-line strong { color: var(--text); }

/* Filet de sécurité */
.net { background: var(--surface-2); }
.net-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .net-grid { grid-template-columns: .9fr 1.1fr; gap: 80px; } }
.net h2 { max-width: 14ch; }
.net-copy p { margin-top: 18px; color: var(--text-2); max-width: 46ch; }
.net-copy p strong { color: var(--text); }
.free { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px 16px; border-radius: 999px; background: var(--sage-bg); color: var(--on-sage-bg); font-weight: 700; font-size: .9375rem; }
.net-copy .free { color: var(--on-sage-bg); }
.sos { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--text-2); max-width: 52ch; }
.checkin { justify-self: center; width: min(100%, 360px); display: grid; justify-items: center; gap: 16px; padding: 28px 22px 22px; border-radius: 32px; background: var(--surface); box-shadow: 0 24px 60px -32px var(--shadow); }
.try { font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
@media (scripting: none) { .try { display: none; } }
.checkin { grid-template-columns: minmax(0, 1fr); }
.checkin > * { max-width: 100%; }
.checkin-title { font: 400 2rem/1.1 var(--serif); text-align: center; }
.ring { position: relative; width: 150px; height: 150px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--ring-track); stroke-width: 10; }
.ring-arc { fill: none; stroke: var(--terra); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease-out), stroke .3s ease-out; }
.ring-time { position: absolute; inset: 0; display: grid; place-items: center; font: 400 2.5rem/1 var(--serif); font-variant-numeric: tabular-nums; transition: opacity .2s ease-out; }
/* Après « Tout va bien » : plus de compte à rebours, l'anneau se remplit et passe en sauge. */
.ring .ring-ok { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; transform: none; color: var(--sage); opacity: 0; transition: opacity .3s var(--ease-out); }
.checkin.is-ok .ring-ok { opacity: 1; }
.checkin.is-ok .ring-time { opacity: 0; }
.checkin.is-ok .ring-arc { stroke: var(--sage-deco); stroke-dashoffset: 0; }
.checkin-sub { font-weight: 700; text-align: center; }
.slide { position: relative; width: 100%; min-height: 64px; padding: 0 20px 0 76px; border: 0; border-radius: 999px; background: var(--sage-bg); color: var(--on-sage-bg); font: 700 1.0625rem/1.2 var(--sans); cursor: pointer; text-align: center; overflow: hidden; }
.slide:disabled { cursor: default; }
.slide-thumb { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sage-deco); color: #1A2E24; transition: left .34s var(--ease-out); }
.checkin.is-ok .slide-thumb { left: calc(100% - 58px); }
.checkin.is-ok .slide { padding: 0 76px 0 20px; }
.more { width: 100%; min-height: 52px; border-radius: 999px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--outline); color: var(--link); font-weight: 700; font-size: .9375rem; padding: 0 16px; text-align: center; }
.checkin-status { min-height: 1.5em; font-size: .9375rem; color: var(--sage); font-weight: 600; text-align: center; }

/* On rentre tous : la rue */
.together h2 { max-width: 14ch; }
.together-grid { display: grid; gap: 48px; }
@media (min-width: 960px) { .together-grid { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: center; } }
.together p.lede { margin-top: 20px; color: var(--n-text-2); }
.street-wrap { position: relative; }
.street { position: relative; list-style: none; margin: 0; padding: 0 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
.street::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: 0; height: 2px; background: #3A2E29; border-radius: 2px; }
@media (min-width: 600px) { .street { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.house { --win: #15100E; display: grid; justify-items: center; text-align: center; gap: 4px; }
.house.is-lit { --win: #F2CC8F; }
.hw { fill: var(--win); transition: fill .45s var(--ease-out); }
.h-art { position: relative; width: 100%; max-width: 88px; }
.h-art::before { content: ""; position: absolute; inset: -18%; background: radial-gradient(closest-side, rgba(242, 204, 143, .45), transparent); opacity: 0; transition: opacity .6s var(--ease-out); }
.house.is-lit .h-art::before { opacity: 1; }
.h-art svg { position: relative; width: 100%; height: auto; }
.h-name { font-weight: 700; font-size: .9375rem; }
.h-status { font-size: .8125rem; color: var(--n-text-2); }
.h-status .on { display: none; color: var(--honey); font-weight: 600; }
.house.is-lit .h-status .on { display: inline; }
.house.is-lit .h-status .off { display: none; }
.count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-top: 32px; }
.count-num { font: 300 clamp(3.5rem, 2.5rem + 4vw, 5.5rem)/1 var(--serif); font-variant-numeric: tabular-nums; }
.count-label { font-weight: 700; color: var(--n-text); }
.firefly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--honey); opacity: 0; pointer-events: none; }
.ff1 { left: 12%; bottom: 40%; animation-delay: .05s; } .ff2 { left: 31%; bottom: 55%; animation-delay: .3s; } .ff3 { left: 52%; bottom: 38%; animation-delay: .15s; } .ff4 { left: 70%; bottom: 60%; animation-delay: .45s; } .ff5 { left: 88%; bottom: 44%; animation-delay: .25s; }
.street-wrap.is-done .firefly { animation: rise 2.2s var(--ease-out) both; }
@keyframes rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70px) scale(1); } }
.org { margin-top: 40px; color: var(--n-text-2); max-width: 52ch; }
.org a { font-weight: 700; }

/* Engagements */
.pledge-box, .faq-box { max-width: 860px; margin-inline: auto; }
.pledge { list-style: none; margin: 40px 0 0; padding: 0; }
.pledge li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid var(--line); font: 400 clamp(1.25rem, 1.1rem + .5vw, 1.5rem)/1.35 var(--serif); }
.pledge li::before { content: ""; width: 22px; height: 2px; margin-top: .75em; background: var(--terra); border-radius: 2px; }
.pledge li span { color: var(--text-2); font: 400 1rem/1.5 var(--sans); display: block; margin-top: 4px; }
.sign { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
.sign p { font-weight: 600; }

/* Pré-inscription (formulaire de W-06, site.waitlist.form) */
.beta { background: var(--surface-2); }
.beta-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .beta-grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } }
.beta h2 { margin-top: 16px; max-width: 13ch; }
.beta .lede { margin-top: 20px; }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--outline); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--text); }
/* Pré-inscription coupée : même boîte de 860 px que la charte et la FAQ. */
.soon { max-width: 860px; margin-inline: auto; }
.soon-win { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 24px; }
.soon-glass { fill: var(--honey); opacity: .35; }
.soon h2 { margin-top: 12px; }
.soon-contact { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.soon-contact p { font-weight: 600; color: var(--text); }
.soon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 14px; }
.soon-mail { color: var(--text-2); font-weight: 600; overflow-wrap: anywhere; }
.gets { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.gets li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--text-2); }
.gets svg { color: var(--sage); margin-top: 2px; }
.card { position: relative; padding: clamp(24px, 4vw, 36px); border-radius: var(--r-l); background: var(--surface); box-shadow: 0 30px 70px -40px var(--shadow); }
.waitlist-form { display: grid; gap: 22px; }
.waitlist-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.waitlist-field > label:not(.waitlist-choice), .waitlist-field legend { display: block; margin-bottom: 8px; padding: 0; font-weight: 700; }
.waitlist-field input[type="email"] { width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-radius: 16px; background: var(--bg); color: var(--text); font: 500 1.0625rem/1.2 var(--sans); box-shadow: inset 0 0 0 1.5px var(--outline); transition: box-shadow .12s; }
.waitlist-field input[type="email"]::placeholder { color: var(--text-2); opacity: 1; }
/* Contour transparent en plus de l'ombre : il reste visible en couleurs forcées. */
.waitlist-field input[type="email"]:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: inset 0 0 0 2.5px var(--text); }
.waitlist-field input[type="email"][aria-invalid="true"] { box-shadow: inset 0 0 0 2.5px var(--error); }
/* Cases à cocher : case dessinée (.waitlist-box), vraie case transparente par-dessus. */
.waitlist-choice { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; min-height: 48px; padding: 10px 0; cursor: pointer; font-weight: 600; }
.waitlist-choice input { position: absolute; left: 0; top: 10px; width: 28px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.waitlist-box { display: grid; place-items: center; width: 24px; height: 24px; margin: 2px; border-radius: 7px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--outline); }
.waitlist-box::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--on-cta); border-bottom: 2.5px solid var(--on-cta); transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform .14s var(--ease-spring); }
.waitlist-choice input:checked + .waitlist-box { background: var(--cta); box-shadow: none; }
.waitlist-choice input:checked + .waitlist-box::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.waitlist-choice input:focus-visible + .waitlist-box { outline: 3px solid var(--focus); outline-offset: 3px; }
.waitlist-choice input[aria-invalid="true"] + .waitlist-box { box-shadow: inset 0 0 0 2.5px var(--error); }
.waitlist-hint { margin: -10px 0 4px 40px; font-size: .875rem; color: var(--text-2); }
/* Plateforme : deux grands boutons, pastille dessinée (.waitlist-tick). */
.waitlist-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 10px; }
.waitlist-seg .waitlist-choice { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 12px; border-radius: 16px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--outline); font-weight: 700; transition: box-shadow .12s, background-color .12s; }
.waitlist-seg .waitlist-choice input { inset: 0; top: 0; width: 100%; height: 100%; }
.waitlist-tick { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--outline); display: grid; place-items: center; flex: none; }
.waitlist-tick::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--text); transform: scale(0); transition: transform .14s var(--ease-spring); }
.waitlist-seg .waitlist-choice:has(input:checked) { background: var(--surface); box-shadow: inset 0 0 0 2.5px var(--text); }
.waitlist-seg input:checked + .waitlist-tick { box-shadow: inset 0 0 0 2px var(--text); }
.waitlist-seg input:checked + .waitlist-tick::after { transform: scale(1); }
.waitlist-seg .waitlist-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.waitlist-field:has(.waitlist-error) .waitlist-seg .waitlist-choice { box-shadow: inset 0 0 0 2.5px var(--error); }
/* Erreurs : en brique, jamais de rouge vif, avec un repère qui n'est pas que de la couleur. */
.waitlist-error { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: var(--error); font-weight: 600; font-size: .9375rem; }
.waitlist-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; font: 800 .75rem/1 var(--sans); }
.waitlist-alert { padding: 14px 16px; border-radius: 16px; background: var(--error-bg); color: var(--on-error-bg); font-weight: 600; font-size: .9375rem; }
/* Champ piège : hors écran, jamais display:none (certains robots le repèrent). */
.waitlist-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.waitlist-form .cta { width: 100%; }
.waitlist-form .cta[aria-disabled="true"] { cursor: progress; }
.waitlist-fine { font-size: .875rem; color: var(--text-2); }

/* Questions */
.faq { margin-top: 40px; 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: 16px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.125rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 24px; height: 24px; color: var(--link); transition: transform .2s var(--ease-out); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--text-2); max-width: 64ch; }

/* Pied de page : la nuit, bouclée */
.site-footer { padding-block: clamp(64px, 9vw, 120px) 32px; }
.bye { font: 300 clamp(3rem, 2rem + 5vw, 6rem)/1 var(--serif); letter-spacing: -.02em; }
.bye span { background: linear-gradient(var(--honey), var(--honey)) no-repeat left bottom .06em / 100% .07em; }
.foot-grid { display: grid; gap: 32px; margin-top: 48px; }
@media (min-width: 820px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-grid p { margin-top: 12px; color: var(--n-text-2); max-width: 32ch; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-grid ul a { display: inline-flex; align-items: center; min-height: 44px; color: var(--n-text); text-decoration: none; }
.foot-grid ul a:hover { text-decoration: underline; }
.foot-grid h2 { font: 700 .8125rem/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--n-text-2); margin-bottom: 6px; }
.emergency { margin-top: 48px; padding: 16px 18px; border-radius: 16px; background: var(--n-surface); color: var(--n-text-2); font-size: .9375rem; }
.emergency strong { color: var(--n-text); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 28px; padding-bottom: env(safe-area-inset-bottom); font-size: .875rem; color: var(--n-text-2); }
.foot-bottom a { color: var(--n-text); min-height: 44px; display: inline-flex; align-items: center; }

/* Action principale collante (mobile), montrée par le script entre le héros et le formulaire. */
.sticky-cta { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .55); transform: translateY(160%); visibility: hidden; transition: transform .28s var(--ease-out), visibility 0s linear .28s; }
.sticky-cta.is-visible { transform: none; visibility: visible; transition: transform .28s var(--ease-out), visibility 0s; }
@media (min-width: 960px) { .sticky-cta { display: none; } }

/* Réduire les animations : état final immédiat, aucun déplacement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .firefly { display: none; }
}