/* ===========================================================
   BASE — reset, conteneur, échelle typo, révélations
   =========================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--noir);color:var(--creme);font-family:var(--body);
  font-size:16px;line-height:1.62;overflow-x:hidden;padding:14px 12px 40px;
}
@media(min-width:820px){body{padding:26px 18px 40px}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:hover{color:var(--or-doux)}

/* conteneur arrondi flottant — arrondi dès le mobile, gouttière de 12px */
.page{background:var(--panel);overflow:hidden;position:relative;
  max-width:1240px;margin:0 auto;border-radius:var(--r);
  border:1px solid var(--fil-or-fin)}

.wrap{max-width:1020px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sec{padding:var(--sec) 0;position:relative}
.sec--court{padding:clamp(40px,6vw,70px) 0}
.sec--filet{border-top:1px solid rgba(255,255,255,.05)}
.sec--glow{background:radial-gradient(58% 40% at 50% 0%,rgba(245,197,24,.08),transparent 72%)}

/* échelle typographique */
h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(32px,6.8vw,60px);line-height:1.06;letter-spacing:-.025em}
h2{font-size:clamp(24px,4.9vw,42px)}
h3{font-size:clamp(17px,2.3vw,20px)}
.lede{color:var(--gris);font-size:clamp(15px,2.1vw,17.5px);line-height:1.65;
  max-width:58ch;margin-top:18px}
.center{text-align:center}
.center .lede,.center .offre{margin-left:auto;margin-right:auto}

/* ---- Accent de titre --------------------------------------
   Serif italique. C'est la respiration typographique de la page :
   la moitié de chaque titre bascule dans une autre fonte.
   .gold sur fond noir, .ul-soft sur bande claire.
   ----------------------------------------------------------- */
.gold,.ul-soft{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.04em;line-height:1;letter-spacing:0}
.gold{color:var(--or)}
.ul-soft{text-decoration:underline;text-decoration-color:rgba(25,19,5,.35);
  text-underline-offset:6px}

/* révélations au scroll */
.rev span{display:inline-block;opacity:0;transform:translateY(.42em);filter:blur(5px);
  transition:opacity .5s ease,transform .5s var(--ease),filter .5s ease}
.rev.in span{opacity:1;transform:none;filter:none}
/* Pas de blur() sur .rv : il porte des blocs entiers (carte Google AI Pro,
   grille des bonus, captures du groupe). Flouter une surface de cette taille
   crée un calque composité lourd sur mobile d'entrée de gamme, et l'image
   intermédiaire se lit comme un bug de mise en page. Le flou reste sur .rev,
   dont les calques font la taille d'un mot. */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .65s ease,transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .rev span,.rv{opacity:1!important;transform:none!important;filter:none!important;transition:none}
}