/* ==========================================================================
   NOCOIN — feuille de style
   --------------------------------------------------------------------------
   01 Tokens & reset        07 Hero            13 Runner / démo Volt
   02 Fond                  08 Objets 3D       14 Extensions
   03 Curseur               09 Sections        15 Classement & FAQ
   04 Loader & transitions  10 Cartes          16 Footer
   05 Navigation            11 Marquee         17 Utilitaires
   06 Boutons               12 Pin horizontal  18 Responsive & motion
   ========================================================================== */

/* ========== 01. TOKENS & RESET ========================================= */
:root{
  --bg:        #050507;
  --bg-2:      #08090e;
  --panel:     rgba(255,255,255,.032);
  --panel-2:   rgba(255,255,255,.055);
  --stroke:    rgba(255,255,255,.085);
  --stroke-2:  rgba(255,255,255,.16);

  --ink:       #f4f5fa;
  --muted:     #9096ad;
  --dim:       #5d6379;

  --volt:      #d4ff2e;
  --volt-2:    #a8d800;
  --cyan:      #35e6ff;
  --pink:      #ff2e79;
  --amber:     #ffb03a;

  --grad:      linear-gradient(100deg,#d4ff2e,#35e6ff 52%,#ff2e79);
  --grad-2:    linear-gradient(120deg,#35e6ff,#d4ff2e);

  --r-s: 12px;
  --r:   18px;
  --r-l: 28px;
  --r-xl:40px;

  --maxw: 1280px;
  --pad:  clamp(1.15rem,4vw,2.6rem);

  --e:    cubic-bezier(.16,1,.3,1);
  --e-io: cubic-bezier(.65,0,.35,1);

  --nav-h: 74px;
}

:root.hardcore{
  --volt:#ff2e79; --volt-2:#c9004f; --cyan:#ffb03a;
  --grad:linear-gradient(100deg,#ff2e79,#ffb03a 52%,#d4ff2e);
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.has-smooth{ scroll-behavior:auto; }        /* le JS gère l'inertie */
html.is-locked, html.is-loading{ overflow:hidden; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16.5px;
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html.has-smooth body{ cursor:default; }

h1,h2,h3,h4,.display{
  font-family:"Bricolage Grotesque","Space Grotesk",sans-serif;
  font-weight:800;
  line-height:.94;
  letter-spacing:-.042em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.55rem,7.1vw,6.4rem); }
h2{ font-size:clamp(2.1rem,5.6vw,4.6rem); letter-spacing:-.04em; }
h3{ font-size:clamp(1.2rem,2vw,1.62rem); letter-spacing:-.025em; line-height:1.12; }
h4{ font-size:1rem; }
p{ text-wrap:pretty; }

a{ color:inherit; text-decoration:none; }
img,svg,canvas{ display:block; max-width:100%; }
button,input,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
table{ border-collapse:collapse; }

::selection{ background:var(--volt); color:#07080d; }
:focus-visible{ outline:2px solid var(--volt); outline-offset:3px; border-radius:4px; }

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#06070a; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--volt-2),var(--cyan));
  border-radius:99px; border:3px solid #06070a;
}

.mono{ font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }
.grad{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
/* Une fois le texte découpé, chaque caractère porte sa propre couleur
   (voir paintGradientChars) : le fond clippé n'a plus lieu d'être. */
.grad--split{ background:none; -webkit-background-clip:border-box; background-clip:border-box; }
.volt{ color:var(--volt); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap--wide{ max-width:1560px; }
.wrap--tight{ max-width:960px; }

/* ========== 02. FOND =================================================== */
.fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* L'aurore doit rester un souffle de couleur, pas un aplat :
   forte diffusion, opacités très basses. */
.fx__blob{
  position:absolute; border-radius:50%;
  filter:blur(150px);
  will-change:transform;
}
.fx__blob--1{ width:54vw; height:54vw; left:-18vw; top:-24vw;   background:#12d688; opacity:.085; animation:drift1 30s var(--e-io) infinite alternate; }
.fx__blob--2{ width:46vw; height:46vw; right:-16vw; top:-4vh;   background:#1a5cff; opacity:.10;  animation:drift2 36s var(--e-io) infinite alternate; }
.fx__blob--3{ width:42vw; height:42vw; left:30vw; bottom:-26vw; background:#ff2e79; opacity:.055; animation:drift3 33s var(--e-io) infinite alternate; }

@keyframes drift1{ to{ transform:translate3d(14vw,9vh,0) scale(1.2); } }
@keyframes drift2{ to{ transform:translate3d(-12vw,14vh,0) scale(1.12); } }
@keyframes drift3{ to{ transform:translate3d(9vw,-10vh,0) scale(1.24); } }

.fx__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000 10%,transparent 72%);
}

.fx__noise{
  position:absolute; inset:-50%;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(7) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }  14%{ transform:translate(-4%,-3%); }
  28%{ transform:translate(3%,-5%); }   42%{ transform:translate(-2%,5%); }
  57%{ transform:translate(4%,2%); }    71%{ transform:translate(-4%,3%); }
  85%{ transform:translate(2%,-4%); }
}

.fx__vig{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 115% 85% at 50% 38%,transparent 42%,rgba(2,2,4,.9) 100%);
}
#particles{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.page{ position:relative; z-index:2; }

/* ========== 03. CURSEUR ================================================ */
.cur,.cur-dot{
  position:fixed; top:0; left:0; z-index:9999;
  pointer-events:none; border-radius:99px;
  opacity:0; transition:opacity .3s;
  will-change:transform;
}
body.has-cursor .cur,body.has-cursor .cur-dot{ opacity:1; }
.cur{
  width:40px; height:40px; margin:-20px 0 0 -20px;
  border:1.4px solid rgba(255,255,255,.5);
  display:grid; place-items:center;
  transition:width .38s var(--e),height .38s var(--e),margin .38s var(--e),
             background .3s,border-color .3s,opacity .3s;
}
.cur-dot{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  background:var(--volt);
}
.cur.is-hot{
  width:66px; height:66px; margin:-33px 0 0 -33px;
  background:rgba(212,255,46,.14); border-color:rgba(212,255,46,.6);
}
.cur.is-down{ transform-origin:center; }
.cur.is-down::after{ content:""; position:absolute; inset:-6px; border-radius:99px; border:1px solid rgba(212,255,46,.4); }
.cur__label{
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--volt); opacity:0; transform:scale(.7);
  transition:opacity .3s,transform .3s var(--e);
  white-space:nowrap;
}
.cur.is-label{ width:86px; height:86px; margin:-43px 0 0 -43px; background:rgba(212,255,46,.16); }
.cur.is-label .cur__label{ opacity:1; transform:none; }
@media (hover:none),(pointer:coarse){ .cur,.cur-dot{ display:none; } }

/* ========== 04. LOADER & TRANSITIONS =================================== */
.loader{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .8s var(--e),visibility .8s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ display:grid; justify-items:center; gap:1.4rem; }
.loader__mark{ width:56px; height:56px; animation:spinY 1.7s var(--e-io) infinite; }
@keyframes spinY{ to{ transform:rotateY(360deg); } }
.loader__num{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(3rem,9vw,5.4rem); line-height:1; letter-spacing:-.06em;
  font-variant-numeric:tabular-nums;
}
.loader__bar{ width:min(300px,60vw); height:2px; background:rgba(255,255,255,.1); overflow:hidden; border-radius:99px; }
.loader__fill{ height:100%; background:var(--grad); transform:scaleX(0); transform-origin:left; }
.loader__hint{ font-size:.68rem; letter-spacing:.36em; text-transform:uppercase; color:var(--dim); }

/* Rideau de sortie de page */
.wipe{
  position:fixed; inset:0; z-index:9500; pointer-events:none;
  display:grid; place-items:center;
  background:var(--bg);
  clip-path:inset(100% 0 0 0);
  transition:clip-path .55s var(--e-io);
}
html.is-leaving .wipe{ clip-path:inset(0 0 0 0); }
.wipe__mark{ width:52px; height:52px; opacity:0; transition:opacity .3s .2s; }
html.is-leaving .wipe__mark{ opacity:1; }

.progress{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:2px; background:var(--grad);
  transform:scaleX(0); transform-origin:left;
  box-shadow:0 0 14px rgba(212,255,46,.5);
}

.toast{
  position:fixed; left:50%; bottom:3rem; translate:-50% 0; z-index:9600;
  padding:.95rem 1.8rem; border-radius:99px;
  background:var(--volt); color:#08090d;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; letter-spacing:-.02em;
  box-shadow:0 20px 60px -14px rgba(212,255,46,.7);
  animation:popIn .5s var(--e) both;
}
.toast.is-out{ animation:popOut .6s var(--e) both; }
@keyframes popIn{ from{ opacity:0; transform:translateY(22px) scale(.94); } to{ opacity:1; transform:none; } }
@keyframes popOut{ to{ opacity:0; transform:translateY(18px) scale(.96); } }

/* ========== 05. NAVIGATION ============================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  padding:1.05rem 0;
  border-bottom:1px solid transparent;
  transition:transform .5s var(--e),background .4s,backdrop-filter .4s,
             border-color .4s,padding .4s var(--e);
}
.nav.is-stuck{
  background:rgba(5,5,8,.7);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border-bottom-color:var(--stroke);
  padding:.55rem 0;
}
.nav.is-hidden{ transform:translateY(-105%); }
.nav__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:1.3rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; margin-right:auto; }
.brand__mark{ width:36px; height:36px; flex:none; transition:transform .7s var(--e); }
.brand:hover .brand__mark{ transform:rotate(-25deg) scale(1.14); }
.brand__txt{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.24rem; letter-spacing:-.05em; }
.brand__txt span{ color:var(--volt); }

.nav__links{ display:flex; align-items:center; gap:.15rem; }
.nav__link{
  position:relative; padding:.48rem .9rem; border-radius:99px;
  font-size:.92rem; font-weight:500; color:var(--muted);
  transition:color .25s;
}
.nav__link::before{
  content:""; position:absolute; inset:0; border-radius:99px;
  background:var(--panel-2); border:1px solid var(--stroke);
  opacity:0; transform:scale(.84);
  transition:opacity .32s var(--e),transform .32s var(--e);
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::before{ opacity:1; transform:scale(1); }
.nav__link > span{ position:relative; }
.nav__link.is-active{ color:var(--volt); }
.nav__link.is-active::before{ opacity:1; transform:scale(1); background:rgba(212,255,46,.09); border-color:rgba(212,255,46,.3); }

.nav__burger{
  display:none; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--stroke); background:var(--panel);
  place-items:center; gap:5px;
}
.nav__burger i{ display:block; width:17px; height:1.8px; border-radius:2px; background:var(--ink); transition:transform .38s var(--e),opacity .25s; }
.nav__burger.is-open i:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.nav__burger.is-open i:nth-child(2){ opacity:0; }
.nav__burger.is-open i:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:790;
  background:rgba(4,4,7,.97);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  display:grid; align-content:center; justify-items:center; gap:.2rem;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--e),visibility .45s;
}
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer a{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(2rem,10vw,3.4rem); letter-spacing:-.045em;
  opacity:0; transform:translateY(30px);
  transition:opacity .55s var(--e),transform .55s var(--e),color .25s;
}
.drawer.is-open a{ opacity:1; transform:none; }
.drawer.is-open a:nth-child(1){ transition-delay:.07s; }
.drawer.is-open a:nth-child(2){ transition-delay:.13s; }
.drawer.is-open a:nth-child(3){ transition-delay:.19s; }
.drawer.is-open a:nth-child(4){ transition-delay:.25s; }
.drawer a:hover{ color:var(--volt); }

/* ========== 06. BOUTONS ================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.92rem 1.65rem; border-radius:99px;
  font-weight:600; font-size:.96rem; letter-spacing:-.01em;
  border:1px solid var(--stroke-2);
  overflow:hidden; isolation:isolate;
  transition:color .3s,border-color .3s,box-shadow .4s;
  will-change:transform;
}
.btn > *{ position:relative; z-index:1; }
.btn svg{ width:17px; height:17px; flex:none; transition:transform .4s var(--e); }
.btn::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--grad-2);
  transform:translate3d(0,101%,0);
  transition:transform .5s var(--e);
}
.btn:hover::before{ transform:translate3d(0,0,0); }
.btn:hover{ color:#07080d; border-color:transparent; }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ scale:.97; }

.btn--primary{ background:var(--volt); color:#07080d; border-color:transparent; }
.btn--primary::before{ background:linear-gradient(100deg,#35e6ff,#ff2e79); }
.btn--primary:hover{ color:#fff; box-shadow:0 20px 55px -16px rgba(53,230,255,.6); }
.btn--ghost{ background:var(--panel); }
.btn--lg{ padding:1.12rem 2.15rem; font-size:1.03rem; }

.chip{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.36rem .9rem; border-radius:99px;
  background:var(--panel); border:1px solid var(--stroke);
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.chip i{
  width:6px; height:6px; border-radius:50%; background:var(--volt);
  box-shadow:0 0 0 0 rgba(212,255,46,.7); animation:pulse 2.4s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 10px rgba(212,255,46,0); } 100%{ box-shadow:0 0 0 0 rgba(212,255,46,0); } }

.pills{ display:flex; flex-wrap:wrap; gap:.45rem; }
.pill{
  padding:.32rem .78rem; border-radius:99px;
  background:rgba(53,230,255,.07); border:1px solid rgba(53,230,255,.22);
  font-size:.74rem; color:var(--cyan); font-weight:600; white-space:nowrap;
}

/* ========== 07. HERO =================================================== */
/* Split text : chaque mot clippe ses caractères, qui montent en décalé. */
.sp-w{
  display:inline-block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em;
  vertical-align:top;
}
.sp-c{
  display:inline-block;
  transform:translate3d(0,110%,0) rotate(5deg);
  opacity:0;
  transition:transform .95s var(--e),opacity .5s linear;
  transition-delay:calc(var(--delay,0ms) + var(--i) * 22ms);
}
.is-in .sp-c,[data-split].is-in .sp-c{ transform:none; opacity:1; }
html.reduced .sp-c{ transform:none; opacity:1; transition:none; }

.hero{
  position:relative;
  min-height:100svh;
  display:grid; align-items:center;
  padding:calc(var(--nav-h) + 2rem) 0 5rem;
}
.hero__grid{ display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.hero__eyebrow{ margin-bottom:1.15rem; }
.hero h1{ margin-bottom:1.25rem; }

.strike{ position:relative; display:inline-block; }
.strike::after{
  content:""; position:absolute; left:-2%; right:-2%; top:53%;
  height:.085em; border-radius:99px;
  background:var(--pink);
  box-shadow:0 0 24px rgba(255,46,121,.9);
  transform:scaleX(0) rotate(-3.5deg); transform-origin:left;
  transition:transform .85s var(--e) 1.05s;
}
.is-in .strike::after{ transform:scaleX(1) rotate(-3.5deg); }

.hero__lede{ max-width:48ch; color:var(--muted); font-size:1.03rem; margin-bottom:1.6rem; }
.hero__lede b{ color:var(--ink); font-weight:600; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem; }

.hero__meta{ display:flex; flex-wrap:wrap; gap:2rem; }
.hero__meta > div strong{
  display:block;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:1.9rem; line-height:1; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
/* Enfant direct uniquement : sinon la règle écraserait aussi le compteur
   placé dans le <strong>, qui a la même spécificité. */
.hero__meta > div > span{ display:block; margin-top:.4rem; font-size:.69rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

.hero__stage{ display:grid; place-items:center; min-height:min(58vh,540px); }

/* Apparitions d'entrée pilotées par .is-ready */
.rise{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--e),transform .9s var(--e); transition-delay:var(--delay,0ms); }
html.is-ready .rise{ opacity:1; transform:none; }
html.reduced .rise{ opacity:1; transform:none; transition:none; }

.scroll-cue{
  position:absolute; left:50%; bottom:1.8rem; translate:-50% 0;
  display:grid; justify-items:center; gap:.55rem;
  font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
}
.scroll-cue i{
  width:1px; height:44px; background:linear-gradient(var(--volt),transparent);
  animation:cue 2.2s var(--e-io) infinite; transform-origin:top;
}
@keyframes cue{ 0%{ transform:scaleY(0); } 45%{ transform:scaleY(1); } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ========== 08. OBJETS 3D ============================================== */
.stage3d{
  position:relative; perspective:1250px;
  display:grid; place-items:center; gap:1.3rem;
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
}
.stage3d.is-dragging{ cursor:grabbing; }
.stage3d__hint{
  display:flex; align-items:center; gap:.5rem;
  font-size:.65rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim);
  transition:color .3s;
}
.stage3d:hover .stage3d__hint{ color:var(--muted); }
.stage3d__hint svg{ width:14px; height:14px; }

/* --- La pièce --- */
/* Aucune propriété de groupage (filter/opacity/overflow/mask) ici :
   elles forceraient transform-style à "flat" et écraseraient le cylindre. */
.coin{
  position:relative;
  width:var(--coin-d,270px); height:var(--coin-d,270px);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,-14deg)) rotateY(var(--ry,0deg));
}
.coin-holder{ position:relative; display:grid; place-items:center; transform-style:preserve-3d; }
.coin-holder::after{
  content:""; position:absolute; left:50%; bottom:-13%;
  width:66%; height:12%; translate:-50% 0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.75),transparent 70%);
  filter:blur(10px); pointer-events:none;
}
.coin__face{
  position:absolute; inset:0; border-radius:50%;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.92) 0%,rgba(255,255,255,0) 26%),
    radial-gradient(circle at 68% 78%,rgba(255,120,0,.28) 0%,rgba(255,120,0,0) 40%),
    radial-gradient(circle at 50% 50%,#ffe071 0%,#ffbe15 36%,#d98905 66%,#8f5602 88%,#5b3401 100%);
  box-shadow:
    inset 0 0 0 calc(var(--coin-d,270px) * .028) rgba(255,232,150,.5),
    inset 0 0 0 calc(var(--coin-d,270px) * .036) rgba(120,72,2,.7),
    inset 0 -14px 40px rgba(70,40,0,.55);
  backface-visibility:hidden;
}
/* Cercle gravé, comme sur une vraie pièce frappée. */
.coin__face::before{
  content:""; position:absolute; inset:13%;
  border-radius:50%;
  border:1px solid rgba(255,240,180,.35);
  box-shadow:inset 0 0 0 1px rgba(110,66,2,.45);
}
/* Reflet balayant : l'angle du dégradé suit la rotation, donc la lumière
   reste fixe dans le monde pendant que la pièce tourne dessous. */
.coin__face::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  pointer-events:none;
  background:linear-gradient(calc(120deg - var(--ry,0deg)),
    transparent 26%, rgba(255,255,255,.50) 45%, rgba(255,255,255,.12) 54%, transparent 68%);
}
.coin__face--front{ transform:translateZ(calc(var(--coin-t,28px) / 2)); }
.coin__face--back { transform:translateZ(calc(var(--coin-t,28px) / -2)) rotateY(180deg); }
/* Chaque facette de la tranche connaît son orientation (--a, posée par le
   script) et lit la rotation courante (--ry). cos() fait le reste : le
   reflet glisse sur le pourtour pendant que la pièce tourne, sans que le
   JavaScript n'écrive un seul style par image.
   Si cos() n'est pas gérée, la déclaration est ignorée et la facette garde
   sa luminosité de base — aucune casse. */
.coin__seg{
  position:absolute; top:50%; left:50%;
  background:linear-gradient(90deg,#6d4602,#ffd54a 44%,#f6bd22 58%,#5d3a01);
  filter:brightness(calc(0.42 + 0.95 * max(0, cos(var(--a,0deg) + var(--ry,0deg) - 32deg))));
}
.coin__glyph{
  position:relative;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:calc(var(--coin-d,270px) * .32);
  color:#6d4301; letter-spacing:-.07em;
  text-shadow:0 1px 0 rgba(255,236,170,.6),0 -1px 0 rgba(60,36,0,.6);
}
.coin__ban{
  position:absolute; inset:11%;
  border:calc(var(--coin-d,270px) * .038) solid #ff2f2f;
  border-radius:50%;
  box-shadow:0 0 18px rgba(255,47,47,.45);
}
.coin__ban::after{
  content:""; position:absolute; left:-1%; right:-1%; top:50%;
  height:calc(var(--coin-d,270px) * .038);
  translate:0 -50%; rotate:-45deg;
  background:#ff2f2f; border-radius:2px;
  box-shadow:0 0 18px rgba(255,47,47,.45);
}
.coin__halo{
  position:absolute; left:50%; top:50%;
  width:165%; height:165%; translate:-50% -50%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(255,190,40,.16) 0%,rgba(212,255,46,.10) 35%,transparent 63%);
  filter:blur(18px);
  animation:halo 4.5s var(--e-io) infinite alternate;
}
@keyframes halo{ to{ transform:scale(1.14); opacity:.5; } }

/* --- Cube --- */
.cube{
  position:relative;
  width:var(--cube-s,240px); height:var(--cube-s,240px);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,-18deg)) rotateY(var(--ry,28deg));
}
.cube__f{
  position:absolute; inset:0;
  display:grid; place-content:center; justify-items:center; gap:.6rem;
  padding:1.3rem; text-align:center;
  background:linear-gradient(150deg,rgba(14,18,32,.95),rgba(8,10,18,.95));
  border:1px solid rgba(212,255,46,.28);
  border-radius:14px;
  box-shadow:inset 0 0 70px rgba(212,255,46,.08);
}
.cube__f svg{ width:40px; height:40px; color:var(--volt); }
.cube__f b{ font-size:.92rem; font-weight:700; }
.cube__f small{ font-size:.7rem; color:var(--muted); line-height:1.35; }
.cube__f--front { --fa:0deg;    transform:translateZ(calc(var(--cube-s,240px) / 2)); }
.cube__f--back  { --fa:180deg;  transform:rotateY(180deg) translateZ(calc(var(--cube-s,240px) / 2)); }
.cube__f--right { --fa:90deg;   transform:rotateY(90deg)  translateZ(calc(var(--cube-s,240px) / 2)); }
.cube__f--left  { --fa:-90deg;  transform:rotateY(-90deg) translateZ(calc(var(--cube-s,240px) / 2)); }
.cube__f--top   { --flat:.18;   transform:rotateX(90deg)  translateZ(calc(var(--cube-s,240px) / 2)); }
.cube__f--bottom{ --flat:.62;   transform:rotateX(-90deg) translateZ(calc(var(--cube-s,240px) / 2)); }

/* Ombrage dynamique : chaque face s'assombrit selon l'angle qu'elle
   présente à la lumière, recalculé par le moteur de style à chaque
   rotation. On passe par un voile en surimpression plutôt que par filter,
   qui aplatirait le contexte 3D de la face. */
.cube__f::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  /* Terme lambert + un léger gradient résiduel, pour que les faces
     détournées de la lumière ne soient pas toutes exactement identiques. */
  background:rgba(0,0,0,calc(
    var(--flat, calc(0.52
      - 0.46 * max(0, cos(var(--fa,0deg) + var(--ry,0deg) - 30deg))
      - 0.06 * cos(var(--fa,0deg) + var(--ry,0deg) - 30deg)))
  ));
}

/* --- Scène rendue en canvas (moteur 3D maison) --- */
.scene{
  display:block; width:100%;
  /* Pas de vh dans max-height : sur une fenêtre basse, il écrasait le
     canvas jusqu'à zéro et la scène ne se dessinait plus du tout. */
  aspect-ratio:4/3; min-height:230px; max-height:440px;
  border-radius:var(--r-l);
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%,rgba(53,230,255,.09),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%);
  cursor:grab;
}
.scene:active{ cursor:grabbing; }
.scene__wrap{ position:relative; width:100%; }
.scene__wrap::after{           /* halo au sol, sous la scène */
  content:""; position:absolute; left:50%; bottom:6%;
  width:62%; height:14%; translate:-50% 0;
  background:radial-gradient(ellipse at center,rgba(53,230,255,.20),transparent 70%);
  filter:blur(22px); pointer-events:none;
}

/* ========== 09. SECTIONS =============================================== */
section{ position:relative; padding:clamp(5rem,11vw,10.5rem) 0; }
.sec--tight{ padding-block:clamp(3rem,6vw,5rem); }

/* Surface alternée : casse la monotonie d'une suite de sections identiques. */
.sec--panel{
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.008));
  border-block:1px solid var(--stroke);
}

/* --- Séparateur de section -------------------------------------------
   Un filet pleine largeur, le numéro de la section et son nom. C'est lui
   qui donne au site son rythme et découpe franchement les chapitres. */
.rule{ border-top:1px solid var(--stroke); }
.rule__in{
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; gap:1.1rem;
  padding-block:1.5rem;
}
.rule__n{
  font-family:"JetBrains Mono",monospace; font-size:.72rem;
  color:var(--volt); letter-spacing:.16em;
}
.rule__t{
  font-size:.71rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim);
  white-space:nowrap;
}
.rule__in i{
  flex:1; height:1px;
  background:linear-gradient(90deg,rgba(212,255,46,.45),rgba(212,255,46,0) 70%);
}

.shead{ max-width:62ch; margin-bottom:clamp(2.4rem,5vw,4.2rem); }
.shead--center{ margin-inline:auto; text-align:center; }
.shead__k{
  display:inline-flex; align-items:center; gap:.65rem; margin-bottom:1.15rem;
  font-size:.69rem; letter-spacing:.3em; text-transform:uppercase; color:var(--volt);
}
.shead__k::before{ content:""; width:24px; height:1px; background:var(--volt); }
.shead--center .shead__k::before{ display:none; }
.shead h2{ margin-bottom:1.15rem; }
.shead p{ color:var(--muted); font-size:1.04rem; }

[data-reveal]{
  opacity:0;
  transition:opacity 1s var(--e),transform 1s var(--e);
  transition-delay:var(--delay,0ms);
  transform:translateY(38px);
}
[data-reveal="left"]{ transform:translateX(-46px); }
[data-reveal="right"]{ transform:translateX(46px); }
[data-reveal="zoom"]{ transform:scale(.93); }
[data-reveal="mask"]{ transform:none; clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--e); }
[data-reveal].is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
html.reduced [data-reveal]{ opacity:1; transform:none; clip-path:none; transition:none; }

.grid{ display:grid; gap:1.1rem; }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,4rem); align-items:center; }
.feature--wide{ grid-template-columns:.95fr 1.05fr; }

/* Statistiques */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--stroke); border:1px solid var(--stroke);
  border-radius:var(--r-l); overflow:hidden;
}
.stat{ background:#07080c; padding:2.2rem 1.4rem; text-align:center; transition:background .4s; }
.stat:hover{ background:#0c0e18; }
.stat b{
  display:block;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Enfant direct : sinon cette règle écrase aussi le <span data-count>
   placé dans le <b>, qui a exactement la même spécificité. */
.stat > span{ display:block; margin-top:.5rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

/* Étapes */
.steps{ display:grid; }
.step{
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.5rem;
  padding:1.8rem 0; border-top:1px solid var(--stroke);
  transition:padding-left .5s var(--e);
}
.step:last-child{ border-bottom:1px solid var(--stroke); }
.step::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e);
}
.step:hover{ padding-left:1rem; }
.step:hover::before{ transform:scaleX(1); }
.step__n{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:2rem; line-height:1; letter-spacing:-.06em;
  color:var(--dim); min-width:3rem; transition:color .35s;
  font-variant-numeric:tabular-nums;
}
.step:hover .step__n{ color:var(--volt); }
.step h3{ margin-bottom:.4rem; }
.step p{ color:var(--muted); font-size:.96rem; max-width:64ch; }

/* Liste cochée */
.checks{ display:grid; gap:.75rem; }
.checks li{ display:flex; gap:.75rem; align-items:flex-start; color:var(--muted); font-size:.95rem; }
.checks svg{ width:18px; height:18px; flex:none; color:var(--volt); margin-top:.22rem; }
.checks b{ color:var(--ink); font-weight:600; }

/* Bloc verre */
.glass{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl); border:1px solid var(--stroke);
  background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  padding:clamp(1.6rem,4vw,3.4rem);
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; padding:1px;
  background:linear-gradient(140deg,rgba(212,255,46,.45),transparent 36%,transparent 64%,rgba(53,230,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),rgba(212,255,46,.09),transparent 60%);
}
.glass:hover::after{ opacity:1; }

/* Note */
.note{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.25rem 1.5rem; border-radius:var(--r-s);
  background:rgba(255,176,58,.05); border:1px solid rgba(255,176,58,.22);
  font-size:.91rem; color:var(--muted);
}
.note svg{ width:20px; height:20px; flex:none; color:var(--amber); margin-top:.15rem; }
.note b{ color:var(--ink); }

/* CTA */
.cta{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(2.6rem,7vw,5.5rem) clamp(1.4rem,5vw,4rem);
  text-align:center;
  background:radial-gradient(ellipse 85% 130% at 50% 0%,rgba(212,255,46,.14),transparent 62%),
             linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(212,255,46,.2);
}
.cta h2{ margin-bottom:1.1rem; }
.cta p{ color:var(--muted); max-width:54ch; margin:0 auto 2.2rem; font-size:1.05rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }

/* Liens sortants */
.links{ border-block:1px solid var(--stroke); }
.linkrow{
  display:flex; align-items:center; gap:1.2rem;
  padding:1.55rem var(--pad);
  max-width:var(--maxw); margin-inline:auto;
  border-bottom:1px solid var(--stroke);
  transition:padding-left .45s var(--e),background .45s;
}
.linkrow:last-child{ border-bottom:0; }
.linkrow:hover{ background:rgba(255,255,255,.028); padding-left:calc(var(--pad) + 1.2rem); }
.linkrow__n{ font-family:"JetBrains Mono",monospace; font-size:.72rem; color:var(--dim); }
.linkrow__t{ font-family:"Bricolage Grotesque",sans-serif; font-weight:700; font-size:clamp(1.05rem,2.4vw,1.55rem); letter-spacing:-.03em; }
.linkrow__d{ color:var(--dim); font-size:.85rem; margin-left:auto; text-align:right; }
.linkrow__a{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--stroke); color:var(--muted);
  transition:all .4s var(--e);
}
.linkrow__a svg{ width:14px; height:14px; }
.linkrow:hover .linkrow__a{ background:var(--volt); color:#07080d; border-color:transparent; transform:rotate(45deg); }

/* ========== 10. CARTES ================================================= */
.card{
  position:relative; overflow:hidden;
  padding:1.85rem; border-radius:var(--r-l);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  border:1px solid var(--stroke);
  transition:border-color .45s,box-shadow .5s;
  will-change:transform;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .45s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(212,255,46,.13),transparent 62%);
}
.card:hover{ border-color:rgba(212,255,46,.34); box-shadow:0 34px 90px -34px rgba(0,0,0,.95); }
.card:hover::after{ opacity:1; }
.card__ico{
  width:50px; height:50px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:1.15rem;
  background:rgba(212,255,46,.09); border:1px solid rgba(212,255,46,.24); color:var(--volt);
  transition:transform .55s var(--e),background .4s;
}
.card__ico svg{ width:24px; height:24px; }
.card:hover .card__ico{ transform:translateY(-4px) rotate(-9deg) scale(1.07); background:rgba(212,255,46,.16); }
.card h3{ margin-bottom:.55rem; }
.card p{ color:var(--muted); font-size:.94rem; }
.card__n{
  position:absolute; top:1.1rem; right:1.35rem;
  font-family:"JetBrains Mono",monospace; font-size:.7rem; color:var(--dim); letter-spacing:.1em;
}

/* ========== 11. MARQUEE ================================================ */
.marquee{
  position:relative; overflow:hidden;
  border-block:1px solid var(--stroke);
  background:rgba(255,255,255,.016);
  padding:1rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__i{
  display:flex; align-items:center; gap:2.4rem; padding-right:2.4rem;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(1.05rem,2.3vw,1.65rem); letter-spacing:-.035em;
  color:var(--dim); white-space:nowrap;
}
.marquee__i b{ color:var(--ink); }
.marquee__i em{ color:var(--volt); font-style:normal; }
.marquee__i svg{ width:19px; height:19px; color:var(--pink); flex:none; }

/* ========== 12. PIN HORIZONTAL ========================================= */
.pin{ position:relative; padding:0; }
.pin__sticky{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; overflow:hidden;
}
.pin__track{
  display:flex; align-items:stretch; gap:1.1rem;
  padding-inline:var(--pad); padding-right:clamp(3rem,12vw,10rem);
  will-change:transform;
}
.pin__intro{
  flex:none; width:min(30vw,380px);
  display:grid; align-content:center; gap:1rem;
  padding-right:2rem;
}
.pin__card{
  flex:none; width:min(78vw,340px);
  display:flex; flex-direction:column;
  padding:1.9rem; border-radius:var(--r-l);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--stroke);
  transition:border-color .4s,background .4s;
}
.pin__card:hover{ border-color:rgba(212,255,46,.35); }
.pin__card .card__ico{ margin-bottom:1.4rem; }
.pin__card h3{ margin-bottom:.6rem; }
.pin__card p{ color:var(--muted); font-size:.94rem; }
.pin__card .card__n{ position:static; margin-bottom:.9rem; display:block; }
.pin__bar{
  position:absolute; left:var(--pad); right:var(--pad); bottom:2.4rem;
  height:2px; background:rgba(255,255,255,.09); border-radius:99px; overflow:hidden;
}
.pin__bar i{
  display:block; height:100%; width:100%; background:var(--grad);
  transform:scaleX(var(--p,0)); transform-origin:left;
}
/* Repli sans pin : simple bande à défilement natif. */
.pin--native{ height:auto !important; padding:clamp(3rem,8vw,5rem) 0; }
.pin--native .pin__sticky{ position:static; height:auto; overflow:visible; }
.pin--native .pin__track{
  transform:none !important; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1.5rem;
}
.pin--native .pin__card{ scroll-snap-align:center; }
.pin--native .pin__intro{ width:min(70vw,320px); }
.pin--native .pin__bar{ display:none; }

/* ========== 13. RUNNER / DÉMO VOLT ===================================== */
.demo{
  position:relative;
  border-radius:var(--r-l); overflow:hidden;
  border:1px solid var(--stroke);
  background:#06070c;
  box-shadow:0 50px 120px -50px rgba(0,0,0,1);
}
.demo__bar{
  display:flex; align-items:center; gap:.5rem;
  padding:.72rem 1rem;
  background:rgba(255,255,255,.035); border-bottom:1px solid var(--stroke);
}
.demo__bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.demo__bar i:nth-child(1){ background:#ff5f57; }
.demo__bar i:nth-child(2){ background:#febc2e; }
.demo__bar i:nth-child(3){ background:#28c840; }
.demo__url{
  margin-left:.7rem; flex:1;
  font-family:"JetBrains Mono",monospace; font-size:.7rem; color:var(--dim);
  padding:.28rem .8rem; border-radius:99px; background:rgba(0,0,0,.4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.demo__tag{
  font-size:.6rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--volt); padding:.22rem .6rem; border-radius:99px;
  background:rgba(212,255,46,.1); border:1px solid rgba(212,255,46,.28);
}
.demo__screen{ position:relative; aspect-ratio:16/10; min-height:240px; background:#04050a; }
.demo__screen canvas{ position:absolute; inset:0; width:100%; height:100%; }

.hud{ position:absolute; inset:0; pointer-events:none; padding:1rem; display:grid; align-content:start; gap:.5rem; }
.hud__row{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.hud__chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.3rem .7rem; border-radius:8px;
  background:rgba(4,6,12,.72); border:1px solid rgba(212,255,46,.22);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hud__chip b{
  font-family:"JetBrains Mono",monospace; font-size:.82rem; letter-spacing:0;
  color:var(--volt); text-transform:none;
}
.hud__spark{ display:flex; align-items:flex-end; gap:2px; height:22px; }
.hud__spark i{ width:3px; background:linear-gradient(var(--cyan),rgba(53,230,255,.15)); border-radius:2px; }
.hud__score{
  position:absolute; right:1rem; top:1rem;
  text-align:right; padding:.55rem .9rem; border-radius:10px;
  background:rgba(4,6,12,.72); border:1px solid rgba(212,255,46,.22);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hud__score span{ display:block; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.hud__score b{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.7rem;
  line-height:1; letter-spacing:-.04em; color:var(--volt); font-variant-numeric:tabular-nums;
}
.chat{
  position:absolute; left:1rem; bottom:1rem; right:auto;
  display:grid; gap:.3rem; max-width:min(70%,300px);
}
.chat__line{
  display:flex; gap:.45rem; align-items:baseline;
  padding:.34rem .65rem; border-radius:8px;
  background:rgba(4,6,12,.7); border:1px solid var(--stroke);
  font-size:.72rem; color:var(--muted);
  animation:chatIn .5s var(--e) both;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.chat__line b{ color:var(--cyan); font-weight:600; white-space:nowrap; }
@keyframes chatIn{ from{ opacity:0; transform:translateX(-14px); } to{ opacity:1; transform:none; } }

/* ========== 14. EXTENSIONS ============================================= */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.2rem; }
.filter,.srf{
  padding:.52rem 1.1rem; border-radius:99px;
  border:1px solid var(--stroke); background:var(--panel);
  font-size:.85rem; font-weight:500; color:var(--muted);
  transition:all .32s var(--e);
}
.filter:hover,.srf:hover{ color:var(--ink); border-color:var(--stroke-2); }
.filter.is-on,.srf.is-on{ background:var(--volt); color:#07080d; border-color:transparent; font-weight:700; }

.ext{
  position:relative; display:flex; flex-direction:column;
  padding:1.55rem; border-radius:var(--r-l);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  border:1px solid var(--stroke);
  transition:border-color .4s,box-shadow .5s;
  will-change:transform;
}
.ext::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .45s;
  border-radius:inherit;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(212,255,46,.12),transparent 62%);
}
.ext:hover{ border-color:rgba(212,255,46,.38); box-shadow:0 34px 90px -34px rgba(0,0,0,.95); }
.ext:hover::after{ opacity:1; }
.is-hidden{ display:none !important; }
.ext__top{ display:flex; align-items:flex-start; gap:.95rem; margin-bottom:1rem; }
.ext__logo{
  width:56px; height:56px; flex:none; border-radius:15px;
  display:grid; place-items:center;
  background:linear-gradient(150deg,#121828,#080a12);
  border:1px solid var(--stroke);
}
.ext__logo svg{ width:32px; height:32px; }
.ext__title{ min-width:0; }
.ext__title h3{ font-size:1.2rem; margin-bottom:.15rem; }
.ext__dev{ font-size:.78rem; color:var(--dim); }
.ext__badge{
  position:absolute; top:1rem; right:1rem;
  padding:.2rem .58rem; border-radius:99px;
  font-size:.6rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:var(--volt); color:#07080d;
}
.ext__badge--soon{ background:rgba(255,255,255,.08); color:var(--muted); }
.ext > p{ color:var(--muted); font-size:.91rem; margin-bottom:1.1rem; }
.ext__foot{
  margin-top:auto; display:flex; align-items:center; gap:.9rem;
  padding-top:1rem; border-top:1px solid var(--stroke);
  font-size:.78rem; color:var(--dim);
}
.ext__foot b{ color:var(--ink); font-weight:600; }
.ext__stars{ color:var(--amber); letter-spacing:.06em; }
.ext__go{ margin-left:auto; color:var(--volt); display:flex; align-items:center; gap:.3rem; }
.ext__go svg{ width:14px; height:14px; transition:transform .38s var(--e); }
.ext:hover .ext__go svg{ transform:translate(3px,-3px); }

/* ========== 15. CLASSEMENT & FAQ ======================================= */
.tablewrap{ overflow-x:auto; border-radius:var(--r-l); border:1px solid var(--stroke); }
.board{ width:100%; min-width:640px; }
.board th,.board td{ padding:1rem 1.1rem; text-align:left; }
.board thead th{
  background:rgba(255,255,255,.04);
  font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  font-weight:600; border-bottom:1px solid var(--stroke);
}
.board tbody tr{ border-bottom:1px solid rgba(255,255,255,.05); transition:background .3s; }
.board tbody tr:hover{ background:rgba(212,255,46,.04); }
.board tbody tr:last-child{ border-bottom:0; }
.board__rank{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.1rem;
  width:4rem; color:var(--dim);
}
.board tbody tr:nth-child(1) .board__rank{ color:#ffd54a; }
.board tbody tr:nth-child(2) .board__rank{ color:#d8dee9; }
.board tbody tr:nth-child(3) .board__rank{ color:#e0964f; }
.board__who{ font-weight:600; }
.board__time{ font-family:"JetBrains Mono",monospace; font-variant-numeric:tabular-nums; }
.board__tag{
  display:inline-block; padding:.14rem .55rem; border-radius:99px;
  background:rgba(212,255,46,.1); border:1px solid rgba(212,255,46,.28);
  color:var(--volt); font-size:.66rem; font-weight:700; letter-spacing:.08em;
}
.board__tag--wait{ background:rgba(255,176,58,.1); border-color:rgba(255,176,58,.28); color:var(--amber); }

.faq{ border-top:1px solid var(--stroke); }
.faq__item{ border-bottom:1px solid var(--stroke); }
.faq__q{
  width:100%; display:flex; align-items:center; gap:1.2rem;
  padding:1.45rem 0; text-align:left;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:clamp(1rem,2vw,1.25rem); letter-spacing:-.025em;
  transition:color .3s;
}
.faq__q:hover{ color:var(--volt); }
.faq__q i{ margin-left:auto; flex:none; position:relative; width:20px; height:20px; }
.faq__q i::before,.faq__q i::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px;
  background:currentColor; border-radius:2px; transition:transform .45s var(--e);
}
.faq__q i::after{ transform:rotate(90deg); }
.faq__item.is-open .faq__q{ color:var(--volt); }
.faq__item.is-open .faq__q i::after{ transform:rotate(0); }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--e); }
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{ color:var(--muted); padding-bottom:1.45rem; max-width:78ch; font-size:.97rem; }

.crumb{
  display:flex; align-items:center; gap:.5rem; margin-bottom:1.4rem;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.crumb a{ transition:color .25s; }
.crumb a:hover{ color:var(--volt); }
.crumb i{ opacity:.4; font-style:normal; }

.phead{ padding:calc(var(--nav-h) + 4.5rem) 0 3rem; }
.phead h1{ font-size:clamp(2.7rem,7.6vw,6rem); margin-bottom:1.15rem; }
.phead > .wrap > p{ color:var(--muted); max-width:58ch; font-size:1.07rem; }

/* ========== 16. FOOTER ================================================= */
.footer{
  position:relative; padding:5rem 0 2rem;
  border-top:1px solid var(--stroke);
  background:linear-gradient(180deg,transparent,rgba(212,255,46,.03));
}
.footer__grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2.4rem; padding-bottom:3rem; }
.footer h4{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin-bottom:1rem; font-weight:600; }
.footer ul{ display:grid; gap:.55rem; }
.footer ul a{ color:var(--muted); font-size:.92rem; transition:color .25s,padding-left .35s var(--e); display:inline-block; }
.footer ul a:hover{ color:var(--volt); padding-left:.35rem; }
.footer__blurb{ color:var(--muted); font-size:.93rem; max-width:34ch; margin-top:1rem; }
.footer__bot{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  padding-top:1.7rem; border-top:1px solid var(--stroke);
  font-size:.8rem; color:var(--dim);
}
.footer__bot p:last-of-type{ margin-left:auto; }

.wordmark{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(3.4rem,15.5vw,13rem); line-height:.84; letter-spacing:-.065em;
  text-align:center; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.12);
  padding:1.4rem 0 .4rem; user-select:none;
}

.totop{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:700;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--volt); color:#07080d;
  box-shadow:0 14px 40px -12px rgba(212,255,46,.65);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.85);
  transition:all .5s var(--e);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ transform:translateY(-4px) scale(1.07); }
.totop svg{ width:19px; height:19px; }

/* ========== 17. UTILITAIRES =========================================== */
.stack{ display:grid; gap:1rem; }
.row{ display:flex; flex-wrap:wrap; gap:.8rem; }
.row--center{ justify-content:center; }
.mt-s{ margin-top:1rem; } .mt-m{ margin-top:1.6rem; } .mt-l{ margin-top:2.4rem; }
.muted{ color:var(--muted); }
.lead{ font-size:1.06rem; color:var(--muted); }

/* ========== 18. RESPONSIVE & MOTION =================================== */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__stage{ order:-1; min-height:auto; }
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .feature,.feature--wide{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  :root{ --nav-h:64px; }
  .nav__links{ display:none; }
  .nav__burger{ display:grid; }
  .grid--3{ grid-template-columns:1fr; }
  .linkrow__d{ display:none; }
  .hero{ padding-top:calc(var(--nav-h) + 2rem); }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .grid--2,.grid--4{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:1.8rem; }
  .footer__bot p:last-of-type{ margin-left:0; }
  .hero__meta{ gap:1.3rem; }
  .step{ grid-template-columns:1fr; gap:.4rem; }
  .coin{ --coin-d:210px; --coin-t:22px; }
  .cube{ --cube-s:180px; }
  .train{ transform:rotateX(var(--rx,-16deg)) rotateY(var(--ry,-28deg)) scale(.7); }
  .chat{ display:none; }
  .glass{ padding:1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .fx__blob{ animation:none; }
}

/* ========== 19. MAPS ================================================== */
.maps__bar{
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:center;
  margin-bottom:1.8rem;
}
.search{ position:relative; flex:1; min-width:220px; }
.search input{
  width:100%; padding:.7rem 1rem .7rem 2.6rem;
  border-radius:99px; border:1px solid var(--stroke);
  background:var(--panel); color:var(--ink);
  font-size:.92rem; outline:none;
  transition:border-color .3s,background .3s;
}
.search input::placeholder{ color:var(--dim); }
.search input:focus{ border-color:rgba(212,255,46,.45); background:var(--panel-2); }
.search svg{
  position:absolute; left:.95rem; top:50%; translate:0 -50%;
  width:16px; height:16px; color:var(--dim); pointer-events:none;
}
.maps__count{
  font-family:"JetBrains Mono",monospace; font-size:.75rem; color:var(--dim);
  white-space:nowrap;
}
.maps__count b{ color:var(--volt); }

.maps{
  display:grid; gap:1.05rem;
  grid-template-columns:repeat(auto-fill,minmax(266px,1fr));
}
.map{
  position:relative; display:flex; flex-direction:column; text-align:left;
  border-radius:var(--r-l); overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  border:1px solid var(--stroke);
  transition:border-color .4s,box-shadow .5s,transform .5s var(--e);
  will-change:transform;
  cursor:pointer;
}
.map:hover{
  border-color:var(--ac,rgba(212,255,46,.45));
  box-shadow:0 30px 80px -34px rgba(0,0,0,.95);
  transform:translateY(-4px);
}
.map__img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0a0c14; }
.map__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--e),filter .5s;
  filter:saturate(.9) contrast(1.05);
}
.map:hover .map__img img{ transform:scale(1.06); filter:saturate(1.12) contrast(1.08); }
.map__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(5,5,8,.94));
}
.map__flag{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  font-size:1.05rem; line-height:1;
  padding:.34rem .5rem; border-radius:9px;
  background:rgba(4,5,10,.7); border:1px solid var(--stroke);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.map__cat{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  font-size:.58rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:99px;
  background:rgba(4,5,10,.7); border:1px solid var(--stroke); color:var(--muted);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.map__cat--event{ color:#c99bff; border-color:rgba(201,155,255,.35); }
.map__cat--classic{ color:var(--cyan); border-color:rgba(53,230,255,.35); }
.map__head{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:.9rem 1rem;
  display:flex; align-items:flex-end; gap:.6rem;
}
.map__head h3{ font-size:1.26rem; letter-spacing:-.03em; flex:1; }
.map__y{ font-family:"JetBrains Mono",monospace; font-size:.7rem; color:var(--dim); }
.map__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.map__meta{ display:flex; align-items:center; gap:.7rem; }
.map__diff{ display:flex; gap:3px; }
.map__diff i{ width:15px; height:4px; border-radius:2px; background:var(--ac,#d4ff2e); }
.map__diff i.off{ background:rgba(255,255,255,.13); }
.map__dlabel{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
.map__cont{ margin-left:auto; font-size:.7rem; color:var(--dim); }
.map__body p{ color:var(--muted); font-size:.88rem; line-height:1.55; flex:1; }
.map__tags{ display:flex; flex-wrap:wrap; gap:.32rem; }
.map__tags span{
  font-size:.66rem; padding:.2rem .5rem; border-radius:99px;
  background:rgba(255,255,255,.05); border:1px solid var(--stroke); color:var(--dim);
}
.maps__empty{ text-align:center; color:var(--dim); padding:4rem 0; grid-column:1/-1; }

/* --- Fiche détaillée --- */
.mdl{
  position:fixed; inset:0; z-index:9200;
  display:grid; place-items:center; padding:var(--pad);
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--e),visibility .35s;
}
.mdl.is-open{ opacity:1; visibility:visible; }
.mdl__bg{
  position:absolute; inset:0; background:rgba(3,3,6,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.mdl__box{
  position:relative; width:min(760px,100%); max-height:88vh; overflow:auto;
  border-radius:var(--r-xl); border:1px solid var(--stroke-2);
  background:linear-gradient(160deg,#0d1018,#07080d);
  transform:translateY(24px) scale(.97);
  transition:transform .45s var(--e);
}
.mdl.is-open .mdl__box{ transform:none; }
.mdl__img{ position:relative; aspect-ratio:16/7; overflow:hidden; }
.mdl__img img{ width:100%; height:100%; object-fit:cover; }
.mdl__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,#0d1018); }
.mdl__x{
  position:absolute; top:1rem; right:1rem; z-index:3;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(4,5,10,.75); border:1px solid var(--stroke); color:var(--ink);
  transition:background .3s,color .3s,transform .4s var(--e);
}
.mdl__x:hover{ background:var(--volt); color:#07080d; transform:rotate(90deg); }
.mdl__x svg{ width:16px; height:16px; }
.mdl__in{ padding:0 clamp(1.3rem,3vw,2.2rem) clamp(1.6rem,3vw,2.4rem); margin-top:-3.4rem; position:relative; z-index:2; }
.mdl__title{ display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem; }
.mdl__title h2{ font-size:clamp(1.8rem,4vw,2.7rem); }
.mdl__title span{ font-size:1.6rem; line-height:1; }
.mdl__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:1px;
  background:var(--stroke); border:1px solid var(--stroke);
  border-radius:var(--r); overflow:hidden; margin-bottom:1.4rem;
}
.mdl__cell{ background:#0a0d15; padding:.9rem 1rem; }
.mdl__cell span{ display:block; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:.3rem; }
.mdl__cell b{ font-size:.96rem; font-weight:600; }
.mdl__in > p{ color:var(--muted); font-size:1rem; line-height:1.65; margin-bottom:1.2rem; }

/* ========== 20. DISCORD =============================================== */
.dsc{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(2.2rem,5vw,3.6rem) clamp(1.4rem,4vw,3rem);
  border:1px solid rgba(120,131,241,.28);
  background:
    radial-gradient(ellipse 80% 130% at 15% 0%,rgba(88,101,242,.20),transparent 62%),
    linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.2rem,3vw,2.4rem);
}
.dsc__mark{
  flex:none; width:66px; height:66px; border-radius:20px;
  display:grid; place-items:center;
  background:#5865f2; color:#fff;
  box-shadow:0 18px 44px -14px rgba(88,101,242,.75);
  transition:transform .5s var(--e);
}
.dsc:hover .dsc__mark{ transform:translateY(-4px) rotate(-8deg) scale(1.06); }
.dsc__mark svg{ width:36px; height:36px; }
.dsc__txt{ flex:1; min-width:240px; }
.dsc__txt h3{ font-size:clamp(1.4rem,3vw,2rem); margin-bottom:.5rem; }
.dsc__txt p{ color:var(--muted); font-size:.98rem; max-width:52ch; }
.dsc__go{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.92rem 1.7rem; border-radius:99px;
  background:#5865f2; color:#fff; font-weight:600;
  border:1px solid transparent; white-space:nowrap;
  transition:background .3s,box-shadow .4s,transform .3s var(--e);
}
.dsc__go:hover{ background:#4752c4; box-shadow:0 18px 46px -14px rgba(88,101,242,.8); }
.dsc__go svg{ width:17px; height:17px; }

.nav__dsc{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  border:1px solid var(--stroke); background:var(--panel); color:var(--muted);
  transition:background .35s,color .35s,border-color .35s,transform .35s var(--e);
}
.nav__dsc svg{ width:18px; height:18px; }
.nav__dsc:hover{ background:#5865f2; color:#fff; border-color:transparent; transform:translateY(-2px); }

@media (max-width:980px){
  .nav__dsc{ display:none; }
}
@media (max-width:860px){
  .maps{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
  .dsc{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:600px){
  .maps{ grid-template-columns:1fr; }
  .mdl__box{ max-height:92vh; }
}

/* ========== 21. BANDE DE MAPS (accueil) =============================== */
.mapstrip{ padding:0; background:transparent; }
.mapstrip .marquee__track{ align-items:stretch; }
.mapstrip__row{ display:flex; gap:1rem; padding:1.4rem 1rem 1.4rem 0; }
.mapstrip__i{
  position:relative; flex:none;
  width:min(34vw,272px); aspect-ratio:16/10;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--stroke);
  transition:border-color .4s,transform .55s var(--e);
}
.mapstrip__i img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.85) contrast(1.05) brightness(.92);
  transition:filter .5s,transform .8s var(--e);
}
.mapstrip__i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(5,5,8,.9));
}
.mapstrip__i b{
  position:absolute; left:.85rem; bottom:.7rem; z-index:2;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:700;
  font-size:.92rem; letter-spacing:-.02em;
}
.mapstrip__i:hover{ border-color:rgba(212,255,46,.45); transform:translateY(-5px); }
.mapstrip__i:hover img{ filter:saturate(1.1) contrast(1.08) brightness(1); transform:scale(1.05); }

@media (max-width:600px){
  .mapstrip__i{ width:min(62vw,230px); }
}

/* ========== 22. MAPS JOUABLES ========================================= */
.map__on{
  display:inline-flex; align-items:center; gap:.32rem;
  font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  padding:.18rem .5rem; border-radius:99px;
  background:rgba(212,255,46,.11); border:1px solid rgba(212,255,46,.32);
  color:var(--volt);
}
.map__on::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--volt);
  box-shadow:0 0 0 0 rgba(212,255,46,.7); animation:pulse 2.4s infinite;
}

.mdl__play{ margin-top:1.5rem; padding-top:1.4rem; border-top:1px solid var(--stroke); }
.mdl__plabel{
  display:block; margin-bottom:.85rem;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dim);
}
.mdl__pbtns{ display:flex; flex-wrap:wrap; gap:.5rem; }
.mdl__pbtns .btn{ padding:.72rem 1.2rem; font-size:.88rem; }
.mdl__note{
  margin-top:.95rem;
  font-size:.83rem; line-height:1.55; color:var(--dim);
}
.mdl__note b{ color:var(--muted); }
.mdl__note code{
  font-family:"JetBrains Mono",monospace; font-size:.78rem;
  padding:.1rem .38rem; border-radius:5px;
  background:rgba(255,255,255,.06); border:1px solid var(--stroke); color:var(--volt);
}