/* 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; }

/* Invitation à essayer en direct (juste avant la liste d'attente) */
.try { max-width: 640px; margin: 0 auto; padding: var(--s16) var(--s3) 0; text-align: center; display: grid; justify-items: center; gap: var(--s3); }
.try .num { margin: 0; font: 400 12px/16px var(--mono); color: var(--accent); }
.try .num.plain { font: 400 15px/24px var(--text); color: var(--m); }   /* surtitre sobre, comme le reste du texte */
.try h2 { margin: 0; font: 400 40px/48px var(--display); letter-spacing: -.02em; }
.try h2 .dim span { color: var(--m); }
.try.on .fade { opacity: 1; transform: none; }

/* Radar Pro : même mise en scène que « Envie de voir la magie ? », dans un cadre légèrement éclairé */
.top .tab.client { color: var(--t); }
.pro-offer { max-width: 720px; margin-top: var(--s16); padding: var(--s8) var(--s6); border: 1px solid rgba(var(--accent-rgb), .28); border-radius: var(--s4);
  background: radial-gradient(80% 60% at 50% 0%, rgba(var(--accent-rgb), .08), transparent 70%), var(--panel); }
.pro-offer .pro-lede { margin: 0; max-width: 34em; color: var(--m); }
.pro-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); color: var(--m); font: 400 15px/24px var(--text); }
.pro-points b { color: var(--t); font-weight: 500; }
.pro-note { margin: 0; font: 400 13px/20px var(--text); color: var(--f); }

/* 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); }
.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; }
  .try { padding: var(--s12) var(--s2) 0; }
  .pro-offer { margin: var(--s12) var(--s2) 0; padding: var(--s5) var(--s3); border-radius: var(--s3); }
  .try h2 { font-size: 28px; line-height: 36px; }
  .top .tab { padding: 0 4px; font-size: 13px; }
  .waitlist { padding: var(--s8) var(--s2) var(--s12); }
  .waitlist h2 { font-size: 32px; line-height: 40px; }
  .foot { flex-wrap: wrap; padding: var(--s3) var(--s2); }
}

/* Téléphone : l'en-tête garde « Essayer » et « Espace client » ; la liste d'attente reste accessible par le grand bouton sous le titre */
@media (max-width: 480px) { .top .btn[href="#liste"] { display: none; } }

/* Scan IA & Sécurité : formulaire en tête de page, après le récit */
.scan-offer .scan-lede { margin: 0; max-width: 34em; color: var(--m); }
.scan-form { width: 100%; max-width: 520px; }
.scan-form.busy { opacity: .7; }
.scan-form .btn:disabled { cursor: progress; }
.scan-status { margin: 0; min-height: 24px; font: 400 15px/24px var(--text); color: var(--t); }
.scan-status:empty { display: none; }
.scan-offer .pro-note a { color: var(--m); }
@media (max-width: 480px) { .scan-form { height: auto; padding: var(--s1); flex-wrap: wrap; border-radius: var(--s3); } .scan-form input { padding: 0 var(--s2); flex-basis: 100%; } .scan-form .btn { width: 100%; justify-content: center; } }