/* ============================================================
   ZENITH — site publicitaire premium v2
   Noir d'encre · or signature · Fraunces + Inter
   Animations : reveals, scroll-telling, démo d'app vivante.
   Sans JavaScript, tout le contenu reste visible (gating .js).
   ============================================================ */

:root{
  --bg:#050505; --bg2:#0B0B0C; --card:#101011; --card2:#151516;
  --stroke:#1E1E20; --stroke2:#2C2C2E;
  --text:#FAFAFA; --text2:#C9C9C9; --text3:#8A8A8A; --text4:#555;
  --gold:#D4A85A; --gold-deep:#B58A3D; --champ:#E7CD93; --danger:#D14545;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.2,.65,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{ background:var(--gold); color:#0A0A0A }
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
::-webkit-scrollbar{ width:11px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#222; border-radius:8px; border:3px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-deep) }

/* Grain cinéma très léger */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ max-width:1200px; margin:0 auto; padding:0 28px }

/* ---------- Typo ---------- */
.kicker{
  font:700 11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-deep); display:inline-flex; align-items:center; gap:10px;
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--gold-deep) }
h1,h2{ font-family:var(--serif); font-weight:600; letter-spacing:-.02em; line-height:1.05 }
h2.sec{ font-size:clamp(34px,4.8vw,58px); margin:18px 0 18px }
.lead{ color:var(--text2); font-size:clamp(16px,1.6vw,19px); max-width:580px }
.gold{ color:var(--gold) }

/* Mot doré scintillant (hero & CTA) */
.shimmer{
  background:linear-gradient(100deg,var(--gold-deep) 18%,var(--champ) 40%,var(--gold) 52%,var(--champ) 64%,var(--gold-deep) 85%);
  background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 5.5s linear infinite;
}
@keyframes shimmer{ 0%{ background-position:120% 0 } 100%{ background-position:-120% 0 } }

/* ---------- Boutons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:800 15px/1 var(--sans); padding:18px 30px; border-radius:999px; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s; border:1px solid transparent; white-space:nowrap;
  overflow:hidden;
}
.btn-gold{
  background:linear-gradient(135deg,var(--champ),var(--gold) 45%,var(--gold-deep));
  color:#0A0A0A; box-shadow:0 12px 38px rgba(212,168,90,.30);
}
.btn-gold::after{ /* reflet qui balaye */
  content:""; position:absolute; top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg); transition:left .6s var(--ease);
}
.btn-gold:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 20px 54px rgba(212,168,90,.45) }
.btn-gold:hover::after{ left:130% }
.btn-ghost{ border-color:var(--stroke2); color:var(--text) }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px) }
.btn svg{ width:18px; height:18px; flex:none }

/* ---------- Nav (se cache en scrollant vers le bas) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(5,5,5,.7); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:transform .45s var(--ease);
}
.js .nav.hide{ transform:translateY(-100%) }
.nav-in{ max-width:1200px; margin:0 auto; padding:0 28px; height:74px; display:flex; align-items:center; gap:34px }
.brand{ display:flex; align-items:center; gap:11px; font:800 19px/1 var(--sans); letter-spacing:.16em }
.brand .mono{
  width:36px; height:36px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#161617,#0A0A0B);
  border:1px solid rgba(212,168,90,.45);
  font:600 20px/1 var(--serif); color:var(--gold);
  box-shadow:0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.brand b{ color:var(--gold) }
.nav-links{ display:flex; gap:30px; margin-left:auto }
.nav-links a{ font:600 14px/1 var(--sans); color:var(--text2); transition:color .2s }
.nav-links a:hover{ color:var(--gold) }
.nav .btn{ padding:12px 21px; font-size:13px }
@media (max-width:780px){ .nav-links{ display:none } }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:178px 0 96px; overflow:hidden }
.aurora{ position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; will-change:transform }
.aurora.a1{ width:720px; height:720px; right:-180px; top:-140px; background:rgba(212,168,90,.14); animation:drift 16s ease-in-out infinite alternate }
.aurora.a2{ width:560px; height:560px; left:-240px; bottom:-280px; background:rgba(181,138,61,.08); animation:drift 20s ease-in-out infinite alternate-reverse }
@keyframes drift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50px,46px,0) } }

.hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center }
.hero h1{ font-size:clamp(48px,6.6vw,92px); margin:24px 0 24px }
.hero h1 .w{ display:inline-block }              /* mots animés un à un */
.js .hero h1 .w{ opacity:0; transform:translateY(40px) rotate(2deg); animation:wordin 1s var(--ease) forwards }
@keyframes wordin{ to{ opacity:1; transform:none } }
.hero .lead{ margin-bottom:38px }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.hero-meta{ display:flex; gap:22px; flex-wrap:wrap; margin-top:32px; font:500 13px/1.5 var(--sans); color:var(--text3) }
.hero-meta span{ display:inline-flex; align-items:center; gap:7px }
.hero-meta svg{ width:14px; height:14px; color:var(--gold-deep) }

/* indicateur de scroll */
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:1px; height:54px; overflow:hidden; opacity:.65;
}
.scroll-hint::after{
  content:""; position:absolute; left:0; top:-54px; width:1px; height:54px;
  background:linear-gradient(to bottom,transparent,var(--gold));
  animation:hint 2.2s var(--ease) infinite;
}
@keyframes hint{ 60%,100%{ top:54px } }

@media (max-width:940px){
  .hero{ padding:140px 0 80px }
  .hero-in{ grid-template-columns:1fr; gap:64px }
  .scroll-hint{ display:none }
}

/* ---------- iPhone mockup ---------- */
.phone{
  position:relative; width:100%; max-width:332px; margin:0 auto;
  border-radius:56px; padding:11px; background:#0E0E0F;
  border:1px solid var(--stroke2);
  box-shadow:
    0 0 0 1px rgba(212,168,90,.18),
    0 60px 120px -22px rgba(0,0,0,.9),
    0 28px 60px -18px rgba(212,168,90,.14);
}
.phone::before{
  content:""; position:absolute; top:24px; left:50%; transform:translateX(-50%);
  width:96px; height:27px; border-radius:999px; background:#000; z-index:5;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
}
.phone .screen{ position:relative; border-radius:45px; overflow:hidden; aspect-ratio:1320/2868; background:#000 }
.phone .screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.phone.sm{ max-width:268px; border-radius:48px }
.phone.sm .screen{ border-radius:38px }
.phone.sm::before{ width:80px; height:23px; top:20px }

/* carrousel auto du hero (crossfade) */
.hero-phone .screen img{ opacity:0; transition:opacity 1.1s var(--ease) }
.hero-phone .screen img.on{ opacity:1 }
.no-js .hero-phone .screen img:first-child{ opacity:1 }

/* tilt 3D du hero (piloté en JS, doux) */
.hero-phone{ will-change:transform; transform:perspective(1100px) rotateY(-8deg) rotateX(3deg) }

/* chips flottants */
.float-chip{
  position:absolute; z-index:6;
  background:rgba(14,14,15,.9); backdrop-filter:blur(12px);
  border:1px solid rgba(212,168,90,.4); border-radius:16px;
  padding:13px 17px; font:700 13px/1.35 var(--sans);
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  animation:floaty 5.4s ease-in-out infinite;
}
.float-chip small{ display:block; font-weight:500; color:var(--text3); font-size:11px }
.float-chip .up{ color:var(--gold) }
.chip-1{ top:12%; left:-84px; animation-delay:.2s }
.chip-2{ bottom:15%; right:-70px; animation-delay:1.7s }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-13px) } }
@media (max-width:1080px){ .chip-1{ left:-10px } .chip-2{ right:-6px } }

/* ---------- Marquee ---------- */
.marquee{
  border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke);
  background:var(--bg2); overflow:hidden; padding:20px 0; position:relative;
}
.marquee::before,.marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(to right,var(--bg2),transparent) }
.marquee::after{ right:0; background:linear-gradient(to left,var(--bg2),transparent) }
.marquee-track{
  display:flex; gap:0; width:max-content;
  animation:marquee 30s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee-track span{
  font:600 13px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase;
  color:var(--text3); padding:0 28px; display:inline-flex; align-items:center; gap:28px;
}
.marquee-track span::after{ content:"◆"; font-size:7px; color:var(--gold-deep) }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- Sections ---------- */
section.block{ padding:130px 0 }
section.block.tight{ padding:96px 0 }
.center{ text-align:center }
.center .lead{ margin-left:auto; margin-right:auto }

/* ---------- Compteurs (strip) ---------- */
.stats{ background:var(--bg) }
.stats-in{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.stat{
  background:var(--card); border:1px solid var(--stroke); border-radius:22px;
  text-align:center; padding:42px 26px; position:relative; overflow:hidden;
}
.stat::after{
  content:""; position:absolute; inset:auto 18% 0; height:1px;
  background:linear-gradient(to right,transparent,var(--gold-deep),transparent); opacity:.55;
}
.stat b{ font:600 clamp(38px,4.4vw,58px)/1 var(--serif); color:var(--gold); display:block; margin-bottom:10px }
.stat b sup{ font-size:.45em; vertical-align:super; color:var(--gold-deep) }
.stat span{ font:500 13.5px/1.55 var(--sans); color:var(--text3); display:block; max-width:240px; margin:0 auto }
@media (max-width:780px){ .stats-in{ grid-template-columns:1fr } }

/* ---------- Manifesto ---------- */
.manifesto{
  font:italic 600 clamp(28px,3.8vw,48px)/1.32 var(--serif);
  max-width:900px; margin:0 auto; text-align:center;
}

/* ---------- Scroll-telling (phone sticky + étapes) ---------- */
.story{ position:relative }
.story-in{ display:grid; grid-template-columns:1fr 1.05fr; gap:80px; align-items:start }
.story-phone{ position:sticky; top:110px; padding:30px 0 }
.story-phone .phone .screen img{ opacity:0; transition:opacity .7s var(--ease) }
.story-phone .phone .screen img.on{ opacity:1 }
.no-js .story-phone{ display:none }
.story-dots{ display:flex; justify-content:center; gap:8px; margin-top:26px }
.story-dots i{ width:7px; height:7px; border-radius:50%; background:var(--stroke2); transition:.3s }
.story-dots i.on{ background:var(--gold); transform:scale(1.25) }
.story-steps{ display:grid }
.story-step{ min-height:72vh; display:flex; flex-direction:column; justify-content:center; padding:60px 0 }
.story-step .n{
  font:italic 600 60px/1 var(--serif); color:transparent;
  -webkit-text-stroke:1px var(--gold-deep); display:block; margin-bottom:20px;
}
.story-step h3{ font:600 clamp(26px,2.8vw,38px)/1.15 var(--serif); letter-spacing:-.01em; margin-bottom:14px }
.story-step p{ color:var(--text3); font-size:16px; max-width:440px }
.story-step .m-phone{ display:none }
@media (max-width:940px){
  .story-in{ grid-template-columns:1fr }
  .story-phone{ display:none }
  .story-step{ min-height:0; padding:44px 0 }
  .story-step .m-phone{ display:block; margin:0 0 30px }
}

/* ---------- Démo vivante (cadran animé) ---------- */
.demo{ background:var(--bg2); border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke); position:relative; overflow:hidden }
.demo .aurora{ width:640px; height:640px; left:50%; top:-260px; transform:translateX(-50%); background:rgba(212,168,90,.08) }
.demo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-top:60px }
.demo-stage{
  position:relative; border-radius:30px; padding:54px 30px 46px;
  background:radial-gradient(420px 320px at 50% 30%, #101012, #070708);
  border:1px solid var(--stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 40px 90px -30px rgba(0,0,0,.8);
  text-align:center;
}
.dial{ position:relative; width:min(320px,78%); margin:0 auto; aspect-ratio:1 }
.dial svg{ width:100%; height:100%; transform:rotate(-90deg) }
.dial .rail{ fill:none; stroke:rgba(255,255,255,.07); stroke-width:3.5 }
.dial .ring{
  fill:none; stroke:url(#goldgrad); stroke-width:3.5; stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(212,168,90,.5));
}
.dial .tick{ stroke:rgba(255,255,255,.30); stroke-width:1 }
.dial .tick.major{ stroke:var(--gold-deep); stroke-width:2.4 }
.dial-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.d-brand{ font:800 10px/1 var(--sans); letter-spacing:.42em; color:var(--gold-deep) }
.d-time{ font:600 clamp(44px,5vw,62px)/1 var(--serif); letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.d-sub{ font:600 8.5px/1 var(--sans); letter-spacing:.3em; color:var(--text3); margin-top:4px }
.d-coin{ display:inline-flex; align-items:center; gap:6px; margin-top:12px; font:800 13px/1 var(--sans); color:var(--champ) }
.zc{ width:15px; height:15px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, var(--champ), var(--gold) 55%, var(--gold-deep));
  box-shadow:0 0 8px rgba(212,168,90,.6); display:inline-flex; align-items:center; justify-content:center;
  font:800 9px/1 var(--sans); color:#0A0A0A;
}
.d-status{
  display:inline-flex; align-items:center; gap:7px; margin-top:30px;
  font:700 11.5px/1 var(--sans); letter-spacing:.06em; color:var(--text2);
  border:1px solid var(--stroke2); padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.03);
}
.d-status i{ width:7px; height:7px; border-radius:50%; background:#39D27A; box-shadow:0 0 8px rgba(57,210,122,.8) }
.d-note{ margin-top:16px; font:500 11.5px/1 var(--sans); color:var(--text4) }

/* pièce qui vole vers le coffre */
.fly{
  position:absolute; z-index:8; pointer-events:none;
  animation:fly 1.05s cubic-bezier(.3,.2,.2,1) forwards;
}
@keyframes fly{
  0%{ transform:translate(0,0) scale(1); opacity:1 }
  78%{ opacity:1 }
  100%{ transform:translate(var(--fx),var(--fy)) scale(.45); opacity:0 }
}

.demo-side h2{ font-size:clamp(30px,3.8vw,46px); margin:16px 0 14px }
.vault-pill{
  display:inline-flex; align-items:center; gap:12px; margin:8px 0 26px;
  background:var(--card); border:1px solid rgba(212,168,90,.4); border-radius:18px;
  padding:16px 22px; font:600 15px/1 var(--sans); color:var(--text2);
  box-shadow:0 18px 44px -16px rgba(212,168,90,.25);
  transition:transform .3s, box-shadow .3s;
}
.vault-pill b{ font:800 22px/1 var(--sans); color:var(--text); font-variant-numeric:tabular-nums }
.vault-pill.bump{ transform:scale(1.06); box-shadow:0 22px 60px -14px rgba(212,168,90,.55) }
.vault-pill svg{ width:20px; height:20px; color:var(--gold) }
.demo-list{ list-style:none; display:grid; gap:14px }
.demo-list li{ display:flex; gap:12px; color:var(--text2); font-size:15px; align-items:flex-start }
.demo-list li svg{ width:17px; height:17px; color:var(--gold); flex:none; margin-top:3px }
@media (max-width:940px){ .demo-grid{ grid-template-columns:1fr; gap:54px } }

/* ---------- Features ---------- */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:58px }
.feat{
  position:relative; background:var(--card); border:1px solid var(--stroke); border-radius:22px;
  padding:32px 28px; overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s;
}
.feat::before{ /* balayage doré au survol */
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(212,168,90,.08) 50%,transparent 70%);
  transform:translateX(-100%); transition:transform .9s var(--ease);
}
.feat:hover{ transform:translateY(-5px); border-color:rgba(212,168,90,.5) }
.feat:hover::before{ transform:translateX(100%) }
.feat .ico{
  width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:rgba(212,168,90,.12); color:var(--gold); margin-bottom:18px;
}
.feat .ico svg{ width:22px; height:22px }
.feat h3{ font:700 16.5px/1.35 var(--sans); margin-bottom:8px }
.feat p{ color:var(--text3); font-size:14px }
.feat .tag{
  position:absolute; top:24px; right:24px;
  font:800 9.5px/1 var(--sans); letter-spacing:.12em; color:var(--gold-deep);
  border:1px solid rgba(181,138,61,.5); border-radius:999px; padding:5px 9px;
}
@media (max-width:980px){ .features{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .features{ grid-template-columns:1fr } }

/* ---------- Privacy ---------- */
.privacy{
  border:1px solid rgba(212,168,90,.35); border-radius:28px;
  background:radial-gradient(680px 260px at 16% 0%, rgba(212,168,90,.10), transparent 70%), var(--card);
  padding:60px 56px; display:grid; grid-template-columns:1.2fr .8fr; gap:46px; align-items:center;
}
.privacy h2{ font-size:clamp(27px,3.3vw,40px); margin-bottom:14px }
.privacy ul{ list-style:none; display:grid; gap:13px }
.privacy li{ display:flex; gap:12px; align-items:flex-start; color:var(--text2); font-size:15px }
.privacy li svg{ width:17px; height:17px; color:var(--gold); flex:none; margin-top:3px }
@media (max-width:860px){ .privacy{ grid-template-columns:1fr; padding:46px 32px } }

/* ---------- Pricing ---------- */
.toggle{
  display:inline-flex; gap:4px; padding:5px; margin:36px auto 0;
  background:var(--card); border:1px solid var(--stroke); border-radius:999px;
}
.toggle button{
  font:800 14px/1 var(--sans); color:var(--text2); background:none; border:0; cursor:pointer;
  padding:13px 25px; border-radius:999px; transition:.25s;
}
.toggle button.on{ background:var(--gold); color:#0A0A0A }
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:50px; align-items:stretch }
.plan{
  background:var(--card); border:1px solid var(--stroke); border-radius:24px;
  padding:32px 26px; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), border-color .35s;
}
.plan:hover{ transform:translateY(-6px) }
.plan.reco{
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(212,168,90,.08), rgba(212,168,90,.02) 40%), var(--card);
  animation:recoGlow 4s ease-in-out infinite;
}
@keyframes recoGlow{
  0%,100%{ box-shadow:0 24px 70px -18px rgba(212,168,90,.30) }
  50%    { box-shadow:0 28px 90px -16px rgba(212,168,90,.50) }
}
.plan .pname{ font:800 13px/1 var(--sans); letter-spacing:.18em; color:var(--text2); display:flex; gap:8px; align-items:center }
.plan.reco .pname{ color:var(--gold-deep) }
.badge-reco{ font:800 9px/1 var(--sans); letter-spacing:.1em; background:var(--gold); color:#0A0A0A; border-radius:999px; padding:5px 8px }
.plan .ptag{ font:400 12.5px/1.45 var(--sans); color:var(--text3); margin:7px 0 18px }
.plan .price{ font:600 40px/1 var(--serif); letter-spacing:-.02em }
.plan .price small{ font:500 13px/1 var(--sans); color:var(--text3) }
.plan .equiv{ font:600 11.5px/1.4 var(--sans); color:var(--gold-deep); min-height:17px; margin-top:7px }
.plan hr{ border:0; border-top:1px solid var(--stroke); margin:18px 0 }
.plan ul{ list-style:none; display:grid; gap:11px }
.plan li{ display:flex; gap:10px; font:400 13.5px/1.45 var(--sans); color:var(--text2); align-items:flex-start }
.plan li svg{ width:14px; height:14px; color:var(--gold-deep); flex:none; margin-top:3px }
.plan li.inh{ color:var(--text3); font-style:italic; font-size:12px }
.pfoot{ text-align:center; color:var(--text3); font-size:13px; margin-top:32px }
@media (max-width:1020px){ .plans{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:620px){ .plans{ grid-template-columns:1fr } }

/* ---------- FAQ ---------- */
.faq{ max-width:760px; margin:56px auto 0; display:grid; gap:12px }
.faq details{
  background:var(--card); border:1px solid var(--stroke); border-radius:18px;
  padding:0 26px; transition:border-color .3s;
}
.faq details[open]{ border-color:rgba(212,168,90,.45) }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  font:700 15.5px/1.45 var(--sans); padding:22px 0; gap:18px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font:300 28px/1 var(--serif); color:var(--gold); transition:transform .3s; flex:none }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq .a{ color:var(--text3); font-size:14.5px; padding:0 0 24px; max-width:640px }

/* ---------- CTA final ---------- */
.final{ text-align:center; padding:150px 0 160px; position:relative; overflow:hidden }
.final .aurora{ width:820px; height:820px; left:50%; top:60%; transform:translate(-50%,-50%); background:rgba(212,168,90,.11) }
.final h2{ font-size:clamp(36px,5.4vw,70px); margin:22px 0 18px; position:relative }
.final .lead{ margin:0 auto 40px; position:relative }
.final .hero-ctas{ justify-content:center; position:relative }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--stroke); background:var(--bg2) }
.foot-in{
  max-width:1200px; margin:0 auto; padding:66px 28px 38px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:38px;
}
.foot-in h4{ font:800 11px/1 var(--sans); letter-spacing:.2em; color:var(--text3); margin-bottom:16px }
.foot-in a{ display:block; font:500 14px/2.2 var(--sans); color:var(--text2) }
.foot-in a:hover{ color:var(--gold) }
.foot-brand p{ color:var(--text3); font-size:13.5px; margin-top:14px; max-width:280px }
.foot-base{
  max-width:1200px; margin:0 auto; padding:22px 28px 32px;
  border-top:1px solid var(--stroke);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:var(--text4); font-size:12px;
}
@media (max-width:860px){ .foot-in{ grid-template-columns:1fr 1fr } }

/* ---------- Reveals (gating .js : tout visible sans JS) ---------- */
.js .reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1s var(--ease) }
.js .reveal.in{ opacity:1; transform:none }
.js .reveal-scale{ opacity:0; transform:scale(.94); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease) }
.js .reveal-scale.in{ opacity:1; transform:none }
.d1{ transition-delay:.08s } .d2{ transition-delay:.16s } .d3{ transition-delay:.26s } .d4{ transition-delay:.36s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .js .reveal,.js .reveal-scale{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}

/* ============================================================
   Pages documents (support, confidentialité, CGU, mentions)
   ============================================================ */
.doc-wrap{ max-width:760px; margin:0 auto; padding:152px 28px 110px }
.doc-wrap .kicker{ margin-bottom:14px }
.doc-wrap h1{ font-size:clamp(34px,4.6vw,52px); margin-bottom:10px }
.doc-updated{ color:var(--text3); font-size:13.5px; margin-bottom:42px }
.doc-wrap h2{ font:600 24px/1.3 var(--serif); margin:46px 0 12px }
.doc-wrap h3{ font:700 16px/1.4 var(--sans); margin:30px 0 8px }
.doc-wrap p,.doc-wrap li{ color:var(--text2); font-size:15.5px }
.doc-wrap ul{ padding-left:20px; display:grid; gap:8px; margin:10px 0 }
.doc-wrap a{ color:var(--gold) }
.doc-wrap .todo{ color:var(--danger); font-weight:600 }
.doc-card{ background:var(--card); border:1px solid var(--stroke); border-radius:18px; padding:26px; margin:22px 0 }
.doc-card.goldline{ border-color:rgba(212,168,90,.4) }