/* Agent Radar — page d'accueil : récit au défilement. Base : cine.css. Espacements sur la grille de 8 px. */
:root { --wrap: 1184px; --gutter: var(--s12); }

/* Le récit : 5 écrans de défilement ; la scène reste collée en haut pendant ce temps. */
.story { position: relative; height: 520vh; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; }

/* Chapitres : superposés sur la scène, à gauche, ils apparaissent et disparaissent selon le défilement */
.chapter { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 4; width: 576px; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease); }
.chapter.on { opacity: 1; pointer-events: auto; }
.hero-copy { width: 576px; }
.chapter .num { margin: 0 0 var(--s3); font: 400 12px/16px var(--mono); color: var(--accent); }
h1 { margin: 0; font: 400 56px/64px var(--display); letter-spacing: -.02em; }
h1 .dim span { color: var(--m); }
.chapter h2 { margin: 0 0 var(--s3); font: 400 48px/56px var(--display); letter-spacing: -.02em; }
.chapter p { margin: 0; max-width: 448px; font: 400 18px/28px var(--text); color: var(--m); }
.lede { margin: var(--s3) 0 var(--s5) !important; }

.figs { display: grid; grid-template-columns: repeat(3, auto); gap: var(--s5); margin-top: var(--s2); }
.figs div { display: grid; gap: var(--s1); }
.figs .n { font: 300 56px/56px var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--t); }
.figs .k { font: 400 14px/16px var(--text); color: var(--m); }
.example { margin-top: var(--s3) !important; font: 400 12px/16px var(--mono) !important; color: var(--f) !important; }

.sim-note { position: absolute; left: 50%; bottom: var(--s4); transform: translateX(-50%); z-index: 4; margin: 0; height: 32px; display: flex; align-items: center; font: 400 12px/16px var(--mono); color: var(--f); white-space: nowrap; }

/* Liste d'attente */
.waitlist { max-width: 640px; margin: 0 auto; padding: var(--s16) var(--s3) var(--s16); text-align: center; }
.waitlist h2 { margin: 0 0 var(--s2); font: 400 48px/56px var(--display); letter-spacing: -.02em; }
.waitlist > p { margin: 0 0 var(--s5); font: 400 16px/24px var(--text); }
.wl-form { display: grid; gap: var(--s2); text-align: left; }
.field { display: flex; align-items: center; gap: var(--s1); height: 64px; padding: 0 var(--s1) 0 var(--s3); background: var(--surface); border: 1px solid var(--line2); border-radius: 999px; transition: border-color .6s var(--ease), box-shadow .6s var(--ease); }
.field:focus-within { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }
.field input { flex: 1; min-width: 0; height: 48px; background: none; border: 0; outline: none; color: var(--t); font: 400 16px/24px var(--text); }
.field input::placeholder { color: var(--f); }
.field .btn { height: 48px; padding: 0 var(--s3); font-size: 15px; }
.consent { display: grid; grid-template-columns: 16px 1fr; column-gap: var(--s2); padding: 0 var(--s3); font: 400 14px/24px var(--text); color: var(--m); cursor: pointer; }
.consent input { appearance: none; width: 16px; height: 16px; margin: 4px 0 0; border: 1px solid var(--m); border-radius: 4px; background: none; display: grid; place-content: center; cursor: pointer; transition: background .4s var(--ease), border-color .4s var(--ease); }
.consent input:checked { background: var(--accent); border-color: var(--accent); }
.consent input:checked::after { content: ""; width: 8px; height: 4px; border: solid var(--accent-ink); border-width: 0 0 1.5px 1.5px; transform: rotate(-45deg) translate(1px, -1px); }
.consent a { color: var(--t); }
.wl-status { margin: 0; min-height: 24px; padding: 0 var(--s3); font: 400 14px/24px var(--text); color: var(--m); }
.wl-status.err { color: var(--t); }
.wl-status.ok { color: var(--accent); }

.foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); max-width: calc(var(--wrap) + 2 * var(--gutter)); min-height: 96px; margin: 0 auto; padding: 0 var(--gutter); border-top: 1px solid var(--line); font: 400 14px/24px var(--text); color: var(--f); }
.foot .credit { font-size: 12px; }
.foot a { color: var(--m); text-decoration: none; }

@media (max-width: 1100px) { :root { --gutter: var(--s6); } .chapter { width: 440px; } h1 { font-size: 48px; line-height: 56px; } .chapter h2 { font-size: 40px; line-height: 48px; } }
@media (max-width: 860px) {
  :root { --gutter: var(--s2); }
  .story { height: 480vh; }
  /* Mobile : la Terre en haut de l'écran, le texte du chapitre en dessous */
  .chapter, .hero-copy { left: var(--s2); right: var(--s2); width: auto; top: auto; bottom: 72px; transform: none; }
  h1 { font-size: 32px; line-height: 40px; }
  .chapter h2 { font-size: 28px; line-height: 32px; margin-bottom: var(--s2); }
  .chapter p { font-size: 15px; line-height: 24px; }
  .lede { margin: var(--s2) 0 var(--s3) !important; }
  .figs { gap: var(--s3); }
  .figs .n { font-size: 36px; line-height: 40px; }
  .figs .k { font-size: 12px; }
  .sim-note { bottom: var(--s2); }
  .skip { bottom: auto; top: 80px; }
  .waitlist { padding: var(--s8) var(--s2) var(--s12); }
  .waitlist h2 { font-size: 32px; line-height: 40px; }
  .field { height: 56px; padding-left: var(--s2); }
  .field .btn { height: 40px; padding: 0 var(--s2); }
  .consent, .wl-status { padding: 0 var(--s1); }
  .foot { flex-wrap: wrap; padding: var(--s3) var(--s2); }
}