/* ═══════════════════════════════════════════════════════════════════════════
   Anas — design system partagé par index.html et analyse.html
   Noir + vert menthe. Aucun asset raster : tous les fonds sont des dégradés
   CSS, ce qui supprime une quinzaine de requêtes et évite tout fichier manquant.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#000;
  --surface:#18181b;
  --text:#fff;
  --text-2:rgba(255,255,255,.82);
  --text-3:rgba(255,255,255,.66);
  --muted:rgba(255,255,255,.5);
  --accent:#4ade80;
  --accent-dim:#4ade8033;
  --display:'Geist',system-ui,-apple-system,sans-serif;
  --body:'Geist',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;
  --maxw:1180px;
  --grid:66px;
}

/* pilote le halo qui tourne autour des cadres mis en avant */
@property --spin{syntax:'<angle>'; initial-value:0deg; inherits:true}
@keyframes spin{to{--spin:360deg}}
@keyframes bob{0%,100%{opacity:.55}50%{opacity:.9}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* ── Fonds décoratifs, entièrement en CSS ─────────────────────────────────
   Trois couches empilées remplacent les images de la référence : un voile
   ambiant fixe, une aurore dans le hero, et une grille technique continue. */

.ambient{
  position:fixed; inset:-10% -5% auto -5%; height:120vh; z-index:0;
  pointer-events:none;
  background:
    radial-gradient(58% 42% at 22% 8%,  #4ade8024 0%, transparent 62%),
    radial-gradient(52% 38% at 82% 2%,  #34d39920 0%, transparent 60%),
    radial-gradient(70% 50% at 50% 34%, #0f2c1e18 0%, transparent 72%);
  filter:blur(24px);
}
.ambient::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 50% 0%, #0000 0%, #000000cc 55%, #000 85%);
}

.shell{position:relative; z-index:1; overflow:clip}

/* ── Barre de marque ───────────────────────────────────────────────────── */
.brandbar{
  position:relative; z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; max-width:calc(var(--maxw) + 80px); margin-inline:auto;
  padding:16px 32px 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:17px;
  letter-spacing:-.04em; color:#fff; text-decoration:none;
}
.brand__mark{
  width:28px; height:28px; border-radius:8px; flex:none;
  display:grid; place-items:center;
  font-size:13px; font-weight:600; letter-spacing:0; color:#07120b;
  background:linear-gradient(160deg,#fff,#a7f3d0);
  box-shadow:0 0 18px -4px #4ade8080;
}
.nav-cta{
  font-size:13.5px; font-weight:500; color:var(--text-2); text-decoration:none;
  white-space:nowrap; padding:9px 18px; border-radius:999px;
  border:1px solid #ffffff1f; background:#ffffff0a;
  backdrop-filter:blur(8px);
  transition:border-color .2s, background .2s, color .2s;
}
.nav-cta:hover{border-color:#4ade8059; background:#4ade801a; color:#fff}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; margin:0 0 64px; width:100%}

/* l'aurore : trois taches colorées floutées, fondues avant le bas du hero.
   Le masque doit atteindre zéro AVANT le bord, sinon la découpe du hero
   trace une ligne nette à la frontière de section. */
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 40% at 30% 6%,  #4ade8059 0%, transparent 64%),
    radial-gradient(40% 36% at 72% 0%,  #22d3ee2e 0%, transparent 62%),
    radial-gradient(64% 46% at 50% 20%, #16a34a26 0%, transparent 70%);
  filter:blur(48px); opacity:.85;
  mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 86%);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 86%);
}

/* UNE seule grille, même maille que les sections plus bas : toute la page
   partage un système continu. Deux grilles superposées se battent à l'œil. */
.hero__grid{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
  background-position:center top;
  mask-image:radial-gradient(140% 120% at 50% 8%, #000 0%, #000000d9 38%, #00000066 62%, transparent 84%),
             linear-gradient(180deg,#000 0,#000 50%,transparent 86%);
  -webkit-mask-image:radial-gradient(140% 120% at 50% 8%, #000 0%, #000000d9 38%, #00000066 62%, transparent 84%),
             linear-gradient(180deg,#000 0,#000 50%,transparent 86%);
  mask-composite:intersect; -webkit-mask-composite:source-in;
}

/* le faisceau qui tombe du haut */
.hero__beam{
  position:absolute; left:50%; top:-8%; z-index:1; pointer-events:none;
  width:min(700px,92vw); height:52%; transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 0%, #4ade8038 0%, #4ade8010 42%, transparent 72%);
  filter:blur(22px);
}
.hero__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,#0000 30%, #000000cc 58%, #000000f2 74%, #00000000 88%);
}
.hero__inner{
  position:relative; z-index:3; text-align:center;
  width:100%; max-width:calc(var(--maxw) + 80px); margin-inline:auto;
  padding:22px 32px 0;
}
.hero__foot{height:34px}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:400; color:var(--text-3);
  padding:8px 17px 8px 13px; border-radius:999px;
  border:1px solid #ffffff1a; background:#ffffff08;
  backdrop-filter:blur(10px);
}
.eyebrow b{font-weight:500; color:var(--text-2)}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px 2px #4ade8080; flex:none;
}
.eyebrow .eb-short{display:none}

h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.6rem, 2.55vw, 2.3rem); line-height:1.12;
  letter-spacing:-2px; color:#fff;
  margin:18px auto 0; max-width:46ch; text-wrap:balance;
}
h1 .accent{
  font-family:var(--serif); font-weight:400;
  font-size:1.08em; letter-spacing:-.005em;
  background:linear-gradient(180deg,#fff 26%,#4ade80 170%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nb{white-space:nowrap}
.sub{
  font-size:clamp(.95rem,1.4vw,1.03rem); line-height:1.55;
  color:var(--text-3); margin:12px auto 0; max-width:62ch; text-wrap:pretty;
}

/* ── Visuel du hero : feuilles de programme en éventail ────────────────── */
.plan-stage{
  position:relative; margin:24px auto 0;
  width:min(660px, calc(42vh * 1.778)); max-width:100%;
}
.sheet{
  position:absolute; width:39%; top:-3%;
  border-radius:5px; overflow:hidden;
  box-shadow:0 24px 60px -18px #000, 0 2px 10px -2px #000c;
  /* OPAQUE : du papier n'est pas translucide. La profondeur vient de la
     luminosité, jamais de l'opacité — des feuilles translucides empilées
     se lisent comme un bug de rendu. */
  opacity:1; filter:brightness(.2) saturate(.32) contrast(1.06);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,#0000 95%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,#0000 95%);
  pointer-events:none;
}
.sheet--fl{left:-25%;  z-index:1; --r:-12deg}
.sheet--fr{right:-25%; z-index:1; --r:12deg}
.sheet--nl{left:-14%;  z-index:0; top:9%; --r:-6deg; filter:brightness(.12) saturate(.28) contrast(1.06);
  mask-image:linear-gradient(180deg,#000 0%,#000 26%,#0000 58%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,#0000 58%)}
.sheet--nr{right:-14%; z-index:0; top:9%; --r:6deg; filter:brightness(.12) saturate(.28) contrast(1.06);
  mask-image:linear-gradient(180deg,#000 0%,#000 26%,#0000 58%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 26%,#0000 58%)}

/* cadre avec un halo qui fait le tour */
.glowframe{
  position:relative; z-index:2; margin:0;
  width:100%; padding:1.5px; border-radius:13px;
  background:
    conic-gradient(from var(--spin),
      #4ade8000 0deg,  #4ade8000 56deg,
      #4ade8080 92deg, #eafff2 116deg, #4ade8080 140deg,
      #4ade8000 176deg,#4ade8000 360deg),
    linear-gradient(#ffffff1f,#ffffff1f);
  animation:spin 5.5s linear infinite;
}
.glowframe::before{
  content:''; position:absolute; inset:-11px; z-index:-1; border-radius:22px;
  background:conic-gradient(from var(--spin),
      #4ade8000 0deg, #4ade8000 64deg,
      #4ade80cc 100deg, #ffffff 118deg, #4ade80cc 136deg,
      #4ade8000 172deg,#4ade8000 360deg);
  filter:blur(22px); opacity:.34;
  animation:bob 5.5s ease-in-out infinite;
}
.glowframe__in{
  position:relative; border-radius:12px; overflow:hidden;
  background:#0a0a0a; box-shadow:0 30px 90px -30px #000;
}

/* ── Boutons ───────────────────────────────────────────────────────────── */
.cta-row{margin:22px auto 0; display:flex; flex-direction:column; align-items:center; gap:11px}
.btn{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:16px; font-weight:600; letter-spacing:-.005em;
  color:#07120b; text-decoration:none; white-space:nowrap;
  padding:16px 32px; border-radius:999px; border:0;
  background:linear-gradient(180deg,#fff 0%,#e9fdf1 100%);
  box-shadow:0 0 0 1px #ffffff1a, 0 10px 34px -8px #4ade8080, 0 0 60px -12px #4ade804d;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 0 0 1px #ffffff26, 0 16px 44px -8px #4ade8099, 0 0 80px -10px #4ade8066}
.btn:active{transform:translateY(0)}
.btn svg{flex:none}
.trust{font-size:13.5px; text-align:center; color:var(--text-3)}

/* ── Bandes de contenu ─────────────────────────────────────────────────── */
section.band{padding:96px 0; position:relative}
.band__inner{max-width:880px; margin-inline:auto; padding-inline:24px; position:relative; z-index:1}
.band--wide .band__inner{max-width:1120px}

/* la grille technique court sous toute la page, pas seulement le hero */
.band::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
  background-position:center top;
  mask-image:radial-gradient(90% 60% at var(--gx,50%) 50%, #000 0%, #00000059 45%, transparent 80%);
  -webkit-mask-image:radial-gradient(90% 60% at var(--gx,50%) 50%, #000 0%, #00000059 45%, transparent 80%);
}

/* Chaque bande porte sa propre nappe lumineuse : elle défile avec le contenu,
   et deux sections voisines ne se ressemblent pas. Une lueur en position fixe
   se lit comme un autocollant mort. Chaque nappe est confinée à sa section et
   ses bords sont fondus, sinon elle trace une ligne à la frontière. */
.bandbg{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.bandbg i{position:absolute; display:block; filter:blur(46px)}
.bandbg--a i{
  inset:-30% -10% auto -30%; height:150%;
  background:
    radial-gradient(40% 34% at 24% 30%, #4ade8038 0%, transparent 66%),
    radial-gradient(34% 28% at 8%  62%, #22d3ee1f 0%, transparent 64%);
}
.bandbg--b i{
  inset:-28% -30% auto -10%; height:145%;
  background:
    radial-gradient(38% 32% at 78% 26%, #4ade8030 0%, transparent 66%),
    radial-gradient(32% 26% at 92% 60%, #16a34a24 0%, transparent 64%);
}
.bandbg--c i{
  inset:-5% -20% auto -20%; height:110%;
  background:radial-gradient(60% 26% at 50% 42%, #4ade802b 0%, transparent 70%);
}
.bandbg--d i{
  inset:auto -20% -18% -20%; height:115%;
  background:radial-gradient(56% 28% at 42% 62%, #34d39926 0%, transparent 70%);
}
.bandbg--e i{
  left:8%; top:-14%; width:78%; height:0; padding-top:78%;
  background:radial-gradient(circle at 50% 50%, #4ade8030 0%, #4ade801a 34%, transparent 68%);
}
.bandbg--e.bandbg--right i{left:auto; right:6%}

/* ── Titres et prose ───────────────────────────────────────────────────── */
h2{
  text-align:center;
  font-family:var(--display); font-weight:400;
  font-size:2rem; line-height:1.16; letter-spacing:-2px;
  color:#fff; margin:0 0 24px; text-wrap:balance;
}
/* Le -2px du h2 est calibré pour Geist. Appliqué à Instrument Serif, dont les
   lettres sont déjà étroites, il écrase le mot au point de le rendre illisible :
   le serif reprend donc son propre interlettrage. */
h2 em{
  font-family:var(--serif); font-style:normal; font-weight:400;
  font-size:1.14em; letter-spacing:-.01em;
}
h3{font-family:var(--display); font-weight:500; font-size:1.05rem; line-height:1.35; color:#fff; margin:0 0 8px; letter-spacing:-.04em}
.band p{color:var(--text-3); font-size:1.02rem; line-height:1.68; margin:0 0 17px; text-wrap:pretty}
.band p.lead{color:var(--text-2); font-size:1.1rem}
.band p:last-child{margin-bottom:0}
.band strong{color:var(--text); font-weight:500}
.hr{height:1px; background:linear-gradient(90deg,#0000,#ffffff1a 22%,#ffffff1a 78%,#0000); border:0; margin:0}

/* Surface des cartes : un remplissage discret plus un flou d'arrière-plan,
   pour que la grille et la nappe lumineuse s'adoucissent derrière la carte
   au lieu de la traverser. */
.card, .pt, .tl__card, .tl__node, .jcard, .vs, .stat, .quals li, .wins li,
.rule-note, .howto, .faq details{
  backdrop-filter:blur(14px) saturate(118%);
  -webkit-backdrop-filter:blur(14px) saturate(118%);
}

/* ── Révélations au scroll ─────────────────────────────────────────────── */
[data-anim]{
  opacity:0; transform:translate3d(0,34px,0);
  transition:opacity .78s cubic-bezier(.16,1,.3,1), transform .86s cubic-bezier(.16,1,.3,1);
  will-change:opacity, transform;
}
[data-anim="left"]{transform:translate3d(-38px,0,0)}
[data-anim="scale"]{transform:translate3d(0,26px,0) scale(.945)}
[data-anim].in{opacity:1; transform:none; will-change:auto}

/* ── Entrée du hero, une seule fois au chargement ──────────────────────── */
.hero .brandbar, .hero .eyebrow, .hero h1, .hero .sub,
.hero .plan-stage, .hero .cta-row{
  opacity:0; transform:translate3d(0,26px,0);
  animation:heroIn .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero .brandbar  {animation-delay:.05s; transform:translate3d(0,-14px,0)}
.hero .eyebrow   {animation-delay:.20s}
.hero h1         {animation-delay:.30s}
.hero .sub       {animation-delay:.42s}
.hero .plan-stage{animation-delay:.52s; transform:translate3d(0,34px,0) scale(.965)}
.hero .cta-row   {animation-delay:.68s}
@keyframes heroIn{to{opacity:1; transform:none}}

/* le halo tournant repeint à chaque frame : on arrête de payer pour lui
   une fois le hero sorti de l'écran */
.hero.offstage .glowframe, .hero.offstage .glowframe::before{animation-play-state:paused}

/* les feuilles s'ouvrent en éventail à l'atterrissage. Chaque état de
   keyframe garde le même ordre de fonctions pour que l'interpolation reste
   propre au lieu de retomber sur un mélange de matrices. */
.sheet{
  transform:translate3d(0,0,0) rotate(var(--r,0deg)) scale(1);
  animation:sheetIn 1.1s cubic-bezier(.16,1,.3,1) both; animation-delay:.6s;
}
@keyframes sheetIn{
  from{opacity:0; transform:translate3d(0,30px,0) rotate(0deg) scale(.86)}
}

/* ── Bloc quiz ─────────────────────────────────────────────────────────── */
.survey-lead{position:relative}
.survey-lead::after{
  content:''; position:absolute; left:0; right:0; top:0; height:300px; z-index:0;
  pointer-events:none;
  background:radial-gradient(130% 340px at 50% 60px, #4ade801a 0%, #4ade800a 38%, transparent 74%);
  /* fondu haut et bas : sans ça le dégradé est coupé net au bord de
     l'élément et trace une ligne à la frontière de section */
  mask-image:linear-gradient(180deg, transparent 0, #000 46%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 46%, transparent 100%);
}
.howto{
  display:grid; gap:17px; margin:0 0 30px; padding:24px;
  border-radius:14px; border:1px solid #4ade8029;
  background:linear-gradient(180deg,#4ade8012,#4ade8006);
}
.howto > p{margin:0; color:var(--text-2); font-size:1rem; line-height:1.55}
.howto > p strong{color:#fff; font-weight:600}
.band p.howto__q{font-style:italic; color:rgba(255,255,255,.82)}

.formwrap{
  position:relative; height:620px; border-radius:14px; overflow:hidden;
  border:1px solid #4ade8033; background:#0a0a0a;
  box-shadow:0 0 90px -34px #4ade8099;
}
/* On épingle l'iframe au conteneur. Le script Tally imbrique ses propres
   wrappers avec leurs propres hauteurs : passer la taille à travers la chaîne
   laisse une bande noire en bas. Le positionnement absolu ignore tout ça. */
.formwrap iframe{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; border:0 !important;
}
.band p.cap{margin-top:34px; font-size:13.5px; color:var(--text-3); text-align:center}

/* ── Cartes de points ──────────────────────────────────────────────────── */
.plan-split{display:grid; grid-template-columns:360px 1fr; gap:48px; align-items:start}
.plan-split__media{position:sticky; top:52px}

.deliver{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.pt{
  display:block; padding:18px 20px; border-radius:13px;
  border:1px solid #ffffff14;
  background:linear-gradient(180deg,#ffffff0d,#ffffff06);
}
.pt__head{display:flex; align-items:center; gap:10px; color:var(--accent)}
.pt__t{font-family:var(--serif); font-weight:400; font-size:1.62rem; color:#fff}
.band p.pt__b{margin:9px 0 0; font-size:.98rem; line-height:1.6; color:rgba(255,255,255,.6)}

/* ── Timeline ──────────────────────────────────────────────────────────── */
.tl{list-style:none; margin:8px 0 0; padding:0; position:relative}
.tl::before{
  content:''; position:absolute; left:23px; top:10px; bottom:10px; width:2px;
  background:#ffffff14; border-radius:2px; z-index:0;
}
/* le rail se remplit au scroll — --tlp est piloté par reveal.js */
.tl::after{
  content:''; position:absolute; left:23px; top:10px; width:2px;
  height:calc(100% - 20px);
  background:linear-gradient(180deg,#4ade80,#4ade8059);
  border-radius:2px; box-shadow:0 0 12px #4ade8040;
  transform:scaleY(var(--tlp,0)); transform-origin:top;
  transition:transform .18s linear; z-index:0;
}
.tl__item{position:relative; z-index:1; display:grid; grid-template-columns:48px 1fr; gap:18px; padding:0 0 18px}
.tl__node{
  position:relative; z-index:1; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; align-self:start;
  border:1px solid #ffffff1f;
  background:linear-gradient(180deg,#161917f2,#0c0e0df2);
  font-family:var(--display); font-weight:500; font-size:.92rem; color:#fff;
  transition:border-color .25s, box-shadow .25s, color .25s;
}
.tl__item.lit .tl__node{border-color:#4ade8073; color:var(--accent); box-shadow:0 0 16px -2px #4ade8059}
.tl__card{
  padding:18px 20px; border-radius:13px;
  border:1px solid #ffffff14;
  background:linear-gradient(180deg,#ffffff0d,#ffffff06);
  transition:border-color .25s;
}
.tl__item.lit .tl__card{border-color:#4ade8030}
.tl__t{font-family:var(--serif); font-weight:400; font-size:1.66rem; color:#fff}
.band p.tl__b{margin:8px 0 0; font-size:.98rem; line-height:1.6; color:rgba(255,255,255,.6)}

/* ── Méthode : cartes bento 3 + 2 ──────────────────────────────────────── */
.jgrid{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.jcard{
  flex:0 1 calc((100% - 24px) / 3); min-width:280px;
  padding:22px 22px 20px; border-radius:14px;
  border:1px solid #ffffff14;
  background:linear-gradient(180deg,#ffffff0d,#ffffff06);
  transition:border-color .2s;
}
.jcard:hover{border-color:#4ade8033}
/* les deux cartes de la seconde rangée prennent chacune la moitié : les
   rangées se lisent 3 + 2 sur toute la largeur, au lieu de deux orphelines */
.jcard:nth-child(4), .jcard:nth-child(5){flex-basis:calc((100% - 12px) / 2)}
.jcard__t{font-family:var(--serif); font-weight:400; font-size:1.5rem; line-height:1.15; color:#fff}
.band p.jcard__b{margin:10px 0 0; font-size:.98rem; line-height:1.55; color:rgba(255,255,255,.6)}
.jcard__so{display:block; margin-top:8px; color:#fff; font-weight:500}

/* ── Colonnes pour qui / pas pour qui ──────────────────────────────────── */
.versus{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:32px 0 30px}
.vs{padding:26px 24px; border-radius:15px; border:1px solid #ffffff17; background:linear-gradient(180deg,#ffffff0f,#ffffff07)}
.vs--them{border-color:#ef44443b; background:linear-gradient(180deg,#ef44440e,#ef444405)}
.vs--them .vs__t .pip{background:#f87171; box-shadow:0 0 10px 2px #ef444459}
.vs--them li::before{background:#f8717166}
.vs--us{
  border-color:#4ade803d;
  background:linear-gradient(180deg,#4ade8017,#4ade8006);
  box-shadow:0 0 70px -30px #4ade8080;
}
.vs__t{
  display:flex; align-items:center; gap:9px; margin-bottom:16px;
  font-family:var(--display); font-weight:500; font-size:1.35rem; color:#fff; letter-spacing:-.045em;
}
.vs__t .pip{width:7px; height:7px; border-radius:50%; background:#ffffff4d; flex:none}
.vs--us .vs__t .pip{background:var(--accent); box-shadow:0 0 10px 2px #4ade8073}
.vs ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.vs li{color:#fff; font-size:.97rem; line-height:1.5; padding-left:16px; position:relative}
.vs li::before{content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:#ffffff40}
.vs--us li::before{background:var(--accent)}

/* ── Portrait + bio ────────────────────────────────────────────────────── */
.bio{display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:start}
.bio__shot{margin:0; position:sticky; top:64px}
.bio__shot img{
  width:100%; display:block; border-radius:14px;
  border:1px solid #ffffff17;
  box-shadow:0 30px 70px -28px #000, 0 0 70px -26px #4ade8059;
}
.bio__copy p:first-child{margin-top:0}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq-wrap{max-width:760px; margin-inline:auto}
.faq{display:grid; gap:12px}
.faq details{
  border:1px solid #ffffff14; border-radius:13px;
  background:linear-gradient(180deg,#ffffff0d,#ffffff06);
  padding:0 20px;
}
.faq details[open]{border-color:#4ade8030}
.faq summary{
  cursor:pointer; list-style:none; padding:19px 34px 19px 0; position:relative;
  font-family:var(--display); font-weight:500; font-size:1.02rem; color:#fff; letter-spacing:-.04em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:1.6px solid #fff; border-bottom:1.6px solid #fff;
  transform:translateY(-70%) rotate(45deg); transition:transform .22s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{padding:0 0 20px; margin:0; font-size:.99rem}

/* ── Clôture ───────────────────────────────────────────────────────────── */
.close{text-align:center}
.sign{margin-top:26px; font-size:.95rem; color:var(--text-3); line-height:1.5}
.sign b{display:block; color:#fff; font-weight:500; font-family:var(--display)}

/* ── Pied de page ──────────────────────────────────────────────────────── */
footer{border-top:1px solid #ffffff12; padding:44px 0 64px; margin-top:40px; position:relative; z-index:1}
footer .band__inner{max-width:1040px}
.foot-top{display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:26px}
.foot-links{display:flex; gap:20px; flex-wrap:wrap}
.foot-links a{color:var(--text-3); font-size:.88rem; text-decoration:none}
.foot-links a:hover{color:#fff}
.legal{font-size:.78rem; line-height:1.65; color:var(--muted); margin:0 0 15px}
.legal b{color:var(--text-3); font-weight:500}

/* ── Marqueur de contenu à fournir ─────────────────────────────────────── */
.todo{
  display:inline-block; padding:1px 7px; border-radius:5px;
  font-family:var(--body); font-size:.72em; font-weight:600; letter-spacing:.04em;
  color:#facc15; background:#facc151a; border:1px solid #facc1540;
  vertical-align:middle;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .bio{grid-template-columns:1fr; gap:26px}
  .bio__shot{position:relative; top:auto}
  .plan-split{grid-template-columns:1fr; gap:28px}
  .plan-split__media{position:static}
  .versus{grid-template-columns:1fr}
}
@media (max-width:860px){
  .jcard, .jcard:nth-child(4), .jcard:nth-child(5){flex-basis:100%; min-width:0}
}
@media (max-width:720px){
  section.band{padding:60px 0}
  .hero{margin-bottom:38px}
  #quiz{padding-top:36px}
  .howto{padding:20px}
  .hero__inner{padding:40px 20px 0}
  .brandbar{padding:16px 20px 0}
  .plan-stage{margin-top:20px; width:100%}
  .sheet{width:34%; top:-2%}
  .sheet--nl, .sheet--nr{display:none}
  .sheet--fl{left:-17%}
  .sheet--fr{right:-17%}
  .eyebrow{font-size:12.5px}
  .eyebrow .eb-full{display:none}
  .eyebrow .eb-short{display:inline}
  .hero__foot{height:36px}
  .formwrap{height:660px}
}

/* ── Prose à 18px sur desktop ──────────────────────────────────────────────
   Prose uniquement. Boutons, nav, légendes, ligne de réassurance et mentions
   légales gardent leur propre échelle, et le mobile n'est pas touché. */
@media (min-width:721px){
  .band p,
  .band p.pt__b, .band p.tl__b, .band p.jcard__b, .band p.howto__q,
  .howto > p, .faq p, .sub{font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  .glowframe{--spin:118deg}
  .glowframe::before{opacity:.4}
  [data-anim]{opacity:1 !important; transform:none !important}
  .tl{--tlp:1}
  .tl__item .tl__node{border-color:#4ade8073; color:var(--accent)}
  .hero .brandbar, .hero .eyebrow, .hero h1, .hero .sub,
  .hero .plan-stage, .hero .cta-row{opacity:1 !important; transform:none !important}
  .sheet{opacity:1 !important; transform:translate3d(0,0,0) rotate(var(--r,0deg)) !important}
}