:root{
  --bg:#050b1f;
  --bg2:#0a1640;
  --blue:#1f6bff;
  --cyan:#35d4ff;
  --text:#eaf1ff;
  --muted:#8fa3d4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

.nav{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 32px;
  background:linear-gradient(to bottom,rgba(5,11,31,.85),transparent);
}
.logo{font-weight:700;letter-spacing:.18em;color:var(--text);text-decoration:none;font-size:15px}
.logo span,h1 span{color:var(--cyan)}
.nav-cta{
  color:var(--text);text-decoration:none;font-size:14px;
  border:1px solid rgba(53,212,255,.5);padding:9px 18px;border-radius:999px;
  transition:background .25s,border-color .25s;
}
.nav-cta:hover{background:rgba(53,212,255,.15);border-color:var(--cyan)}

/* Scène */
.stage{position:relative;height:100vh;height:100svh;width:100%;overflow:hidden;
  background:radial-gradient(ellipse at 50% 60%,var(--bg2),var(--bg) 70%)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

.chapters{position:absolute;inset:0;pointer-events:none}
.chapter{
  position:absolute;left:8vw;top:50%;transform:translateY(-50%);
  max-width:min(460px,84vw);opacity:0;
}
.chapter.right{left:auto;right:8vw;text-align:right}
.eyebrow{
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:14px;
}
h1{font-size:clamp(44px,8vw,104px);line-height:.95;letter-spacing:.04em;font-weight:700}
h2{font-size:clamp(34px,5vw,64px);line-height:1;font-weight:700;letter-spacing:-.01em}
.lead{margin-top:18px;font-size:clamp(15px,1.5vw,19px);line-height:1.5;color:var(--muted)}

.hint{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:opacity .4s;
}
.hint span{width:1px;height:34px;background:linear-gradient(var(--cyan),transparent);
  animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.progress{position:absolute;right:20px;top:50%;height:120px;width:2px;
  background:rgba(255,255,255,.12);transform:translateY(-50%);border-radius:2px}
.progress i{display:block;width:100%;height:0;background:var(--cyan);border-radius:2px}

/* Sections suivantes */
.steps,.cta{padding:120px 8vw;max-width:1100px;margin:0 auto}
.steps h2,.cta h2{margin-bottom:40px}
.steps ol{list-style:none;display:grid;gap:18px;counter-reset:s}
.steps li{
  counter-increment:s;padding:26px 28px 26px 84px;position:relative;
  border:1px solid rgba(143,163,212,.2);border-radius:18px;
  background:rgba(255,255,255,.02);font-size:18px;color:var(--muted);
}
.steps li b{color:var(--text)}
.steps li::before{
  content:"0" counter(s);position:absolute;left:28px;top:50%;transform:translateY(-50%);
  font-size:26px;font-weight:700;color:var(--cyan);
}
.cta{text-align:center}
.cta form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cta input{
  flex:1 1 260px;max-width:340px;padding:15px 20px;border-radius:999px;
  border:1px solid rgba(143,163,212,.35);background:rgba(255,255,255,.05);
  color:var(--text);font:inherit;
}
.cta input:focus{outline:2px solid var(--cyan);outline-offset:2px}
.cta button{
  padding:15px 28px;border-radius:999px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--blue),var(--cyan));color:#031028;
  font:inherit;font-weight:700;transition:transform .2s,box-shadow .2s;
}
.cta button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(53,212,255,.35)}
.foot{padding:40px;text-align:center;color:var(--muted);font-size:13px}

@media (max-width:700px){
  .chapter,.chapter.right{left:6vw;right:6vw;text-align:left;top:auto;bottom:12vh;transform:none!important;max-width:none}
  .progress{display:none}
}
@media (prefers-reduced-motion:reduce){
  .chapter{position:static;opacity:1!important;transform:none;margin:24px 8vw}
  .chapters{position:relative;pointer-events:auto}
  .hint span{animation:none}
}

/* ===== Crowdfunding : sections de contenu ===== */
h1 small{display:block;margin-top:14px;font-size:clamp(15px,1.8vw,22px);font-weight:500;letter-spacing:0;color:var(--text);line-height:1.3}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.noscript{padding:20px 8vw;color:var(--muted);font-size:14px;text-align:center}
.sec{padding:110px 8vw;max-width:1180px;margin:0 auto}
.sec>h2{margin-bottom:26px;max-width:22ch}
.body{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:var(--muted);max-width:62ch}
.points{list-style:none;display:grid;gap:12px;margin-top:28px;max-width:62ch}
.points li{padding:16px 20px;border:1px solid rgba(143,163,212,.2);border-radius:14px;color:var(--muted);line-height:1.5}
.points b{color:var(--text)}
.steps-list{list-style:none;display:grid;gap:14px;counter-reset:s;max-width:720px}
.steps-list li{counter-increment:s;padding:24px 26px 24px 80px;position:relative;border:1px solid rgba(143,163,212,.2);
  border-radius:18px;background:rgba(255,255,255,.02);font-size:18px;color:var(--muted)}
.steps-list li b{color:var(--text)}
.steps-list li::before{content:"0" counter(s);position:absolute;left:26px;top:50%;transform:translateY(-50%);
  font-size:26px;font-weight:700;color:var(--cyan)}

.campaign{display:grid;gap:22px;max-width:760px}
.meter{height:18px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:99px;min-width:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{padding:18px;border:1px solid rgba(143,163,212,.2);border-radius:14px;background:rgba(255,255,255,.02)}
.stat strong{display:block;font-size:clamp(24px,3vw,34px);line-height:1.1}
.stat span{display:block;margin-top:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.camp-note{color:var(--muted);font-size:14px}
.btn{display:inline-block;padding:15px 28px;border-radius:999px;background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#031028;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(53,212,255,.35)}

.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tier{display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid rgba(143,163,212,.22);border-radius:20px;
  background:linear-gradient(180deg,rgba(31,107,255,.08),rgba(255,255,255,.015))}
.tier h3{font-size:19px}
.tier .price{font-size:34px;font-weight:700;color:var(--cyan);line-height:1}
.tier p{color:var(--muted);line-height:1.55;font-size:15px}
.tier .meta{font-size:12px;letter-spacing:.04em;margin-top:auto}
.tier .btn{text-align:center;margin-top:6px;padding:12px 20px;font-size:15px}

.faq{display:grid;gap:10px;max-width:760px}
.faq details{border:1px solid rgba(143,163,212,.2);border-radius:14px;padding:0 20px;background:rgba(255,255,255,.02)}
.faq summary{cursor:pointer;padding:18px 0;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--cyan);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;color:var(--muted);line-height:1.65}

.cta-sec{text-align:center;max-width:760px}
.cta-sec>h2,.cta-sec .body{margin-left:auto;margin-right:auto}
.cta-sec form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.cta-sec input{flex:1 1 260px;max-width:340px;padding:15px 20px;border-radius:999px;border:1px solid rgba(143,163,212,.35);
  background:rgba(255,255,255,.05);color:var(--text);font:inherit}
.cta-sec input:focus{outline:2px solid var(--cyan);outline-offset:2px}
.cta-sec button{padding:15px 28px;border-radius:999px;border:0;cursor:pointer;background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#031028;font:inherit;font-weight:700}
.form-msg{flex-basis:100%;color:var(--cyan);font-size:14px;min-height:20px}

@media (max-width:760px){.nav-links{display:none}.sec{padding:80px 6vw}}

/* ===== Pages secondaires (FAQ, légal) et pied de page ===== */
.foot-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.foot-links a,.link,.fine a,.doc a{color:var(--cyan);text-decoration:none}
.foot-links a:hover,.link:hover,.fine a:hover,.doc a:hover{text-decoration:underline}
.fine{margin-top:14px;font-size:12px;color:var(--muted)}
.nav.solid{background:rgba(5,11,31,.9);backdrop-filter:blur(10px)}
.doc{padding-top:150px;max-width:820px}
.doc h1{font-size:clamp(34px,6vw,64px);letter-spacing:.01em;margin-bottom:10px}
.doc h2{font-size:clamp(20px,2.4vw,26px);margin:38px 0 12px;max-width:none}
.doc p,.doc li{color:var(--muted);line-height:1.7;font-size:16px;max-width:68ch}
.doc ul{margin:10px 0 0 20px}
.doc .upd{font-size:13px;color:var(--muted);margin-bottom:26px}
.todo{background:rgba(255,196,60,.14);color:#ffd57a;padding:1px 6px;border-radius:6px;white-space:nowrap}

/* ===== Logo + police Outfit ===== */
.logo{display:inline-flex;align-items:center;letter-spacing:0}
.logo img{display:block;height:38px;width:auto}
h1 .hero-logo{display:block;width:clamp(220px,34vw,440px);height:auto;margin:0 0 6px -4%}
h2{font-weight:600;letter-spacing:-.02em}
h1 small{font-weight:400}
.eyebrow{font-weight:500}
@media (max-width:700px){.logo img{height:32px}.nav{padding:16px 18px}h1 .hero-logo{margin-left:0;width:min(66vw,300px)}}

/* ===== Animations (inspirées de 21st.dev : Text Reveal, Klyv Shimmer Button, Scroll Reveal) ===== */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}

/* Text Reveal : mot par mot, flou + glissement (réglé en JS : reveal.js) */
.rv-word{display:inline-block;white-space:nowrap;vertical-align:baseline;opacity:0;transform:translateY(10px);filter:blur(8px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),filter .6s var(--ease-out);
  transition-delay:calc(var(--i,0) * var(--step,.055s))}
.rv-on .rv-word{opacity:1;transform:none;filter:none}

/* Scroll Reveal : apparition + désembuage, en cascade dans une grille */
.js .rv{opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms)}
.js .rv.in{opacity:1;transform:none;filter:none}

/* Shimmer Button : reflet qui balaie + lumière qui suit le pointeur */
.btn,.cta-sec button,.nav-cta{position:relative;isolation:isolate;overflow:hidden}
.btn::before,.cta-sec button::before{content:"";position:absolute;inset:0 auto 0 0;width:34%;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.55);filter:blur(6px);transform:translateX(-160%) skewX(-18deg);
  animation:shimmer-sweep 3.4s ease-in-out infinite}
.btn::after,.cta-sec button::after,.nav-cta::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  left:var(--glow-x,50%);top:var(--glow-y,50%);width:150px;height:150px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,255,255,.5) 0%,transparent 70%);filter:blur(14px);
  opacity:var(--glow-opacity,0);transition:opacity .35s}
.nav-cta::after{background:radial-gradient(circle,rgba(53,212,255,.55) 0%,transparent 70%)}
@keyframes shimmer-sweep{0%,55%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(480%) skewX(-18deg)}}

/* Cartes : relief au survol */
.tier,.stat,.points li,.steps-list li{transition:transform .35s var(--ease-out),border-color .35s,background .35s}
@media (hover:hover){
  .tier:hover,.stat:hover{transform:translateY(-4px);border-color:rgba(53,212,255,.45)}
  .points li:hover,.steps-list li:hover{border-color:rgba(53,212,255,.4);background:rgba(53,212,255,.05)}
}

@media (prefers-reduced-motion:reduce){
  .rv-word{opacity:1;transform:none;filter:none;transition:none}
  .js .rv{opacity:1;transform:none;filter:none;transition:none}
  .btn::before,.cta-sec button::before{animation:none;opacity:0}
}

/* Ajustements : le texte ne chevauche pas la bouteille centrée */
@media (min-width:701px){
  .chapter{max-width:min(420px,28vw)}
  h1 .hero-logo{width:clamp(170px,24vw,340px);margin-left:-2%}
  .chapter .lead{font-size:clamp(14px,1.3vw,18px)}
  .eyebrow{letter-spacing:.22em}
}