/* Walltrade Football — page « Découvrir » (/landing/).
   Direction : institution financière premium, en blanc et bleu. Les sections claires (fond blanc) alternent avec
   des blocs bleu nuit (.dark). Chaque thème redéfinit les mêmes variables, les composants n'utilisent qu'elles.
   Mêmes repères que l'application (src/index.css) : une seule police, Geist (titres en 600, -0.02em), et le bleu
   primaire hsl(214 82% 45%) sur fond blanc ; les blocs sombres reprennent le dégradé du site (--site-gradient). */
@font-face{font-family:"Geist";src:url("/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --navy:#1B2D6B;
  --navy-deep:#101733;
  /* Bleu de référence de la marque : nuit à gauche, bleu roi à droite, halo plus clair en haut à droite. */
  --blue-grad:radial-gradient(ellipse 55% 85% at 80% 35%,rgba(34,55,136,.95) 0%,rgba(34,55,136,0) 70%),linear-gradient(90deg,#101733 0%,#131F45 20%,#182559 42%,#1B2D6B 70%,#1E3176 100%);
  --blue:#1566D1;
  --blue-2:#3C88EC;
  --emerald:#12A36D;
  --wrap:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:"Geist","Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);
  /* Thème clair (par défaut) */
  --bg:#ffffff;
  --bg-2:#F5F8FE;
  --card:#ffffff;
  --ink:#0B1222;
  --ink-2:rgba(11,18,34,.70);
  --ink-3:rgba(11,18,34,.52);
  --line:rgba(11,18,34,.10);
  --line-2:rgba(11,18,34,.18);
  --accent:#1566D1;
  --accent-soft:#1259B8;
  --accent-line:rgba(21,102,209,.28);
  --accent-wash:rgba(21,102,209,.06);
  --shadow:0 40px 80px -48px rgba(11,18,34,.35);
}
.dark{
  --bg:#182559;
  --bg-2:#1B2D6B;
  --card:#223788;
  --ink:#ffffff;
  --ink-2:rgba(255,255,255,.74);
  --ink-3:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --accent:#4792F5;
  --accent-soft:#9CC3FA;
  --accent-line:rgba(71,146,245,.4);
  --accent-wash:rgba(71,146,245,.1);
  --shadow:0 50px 100px -50px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#fff}
body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;position:relative}
section{position:relative;padding:150px 0;background:var(--bg);color:var(--ink)}
h1,h2,h3{font-weight:600;letter-spacing:-.02em;line-height:1.12}

/* Typographie */
.display{font-family:var(--sans);font-weight:600;font-size:clamp(36px,4.6vw,64px);line-height:1.06;letter-spacing:-.03em;color:var(--ink)}
.display.xl{font-size:clamp(40px,6vw,88px);line-height:1.02}
.display em{font-style:normal;color:var(--accent)}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:11.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.eyebrow::before{content:"";width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--ink-2);max-width:54ch;font-weight:300}
.fine{font-size:12.5px;line-height:1.6;color:var(--ink-3);max-width:90ch}
.fine a{text-decoration:underline;text-underline-offset:2px}
.sec-head{margin-bottom:80px}
.sec-head .lead{margin-top:28px}
.sec-head.split{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:end}
.sec-head.split .lead{margin-top:0}
.sec-head.center{text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .eyebrow::after{content:"";width:36px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}

/* Boutons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;font:500 15px/1 var(--sans);letter-spacing:.02em;padding:19px 30px;border-radius:4px;border:1px solid transparent;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.btn .arr{transition:transform .5s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.btn-primary{background:linear-gradient(180deg,var(--blue-2),var(--blue));color:#fff;box-shadow:0 18px 40px -20px rgba(21,102,209,.75),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform 1.1s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.dark .btn-primary{background:#fff;color:var(--navy);box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
.dark .btn-primary::after{background:linear-gradient(110deg,transparent 30%,rgba(21,102,209,.15) 50%,transparent 70%)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-wash)}
.dark .btn-ghost{backdrop-filter:blur(6px);background:rgba(255,255,255,.04)}
.btn:focus-visible,a:focus-visible,button:focus-visible,.club:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px}
.link-arrow{display:inline-flex;gap:10px;align-items:center;font-size:14.5px;font-weight:500;letter-spacing:.02em;color:var(--accent);border-bottom:1px solid var(--accent-line);padding-bottom:4px;transition:border-color .4s,gap .4s var(--ease)}
.link-arrow:hover{border-color:var(--accent);gap:16px}

/* En-tête : blanc sur le hero bleu nuit, puis verre blanc au défilement */
header.site{position:fixed;inset:0 0 auto 0;z-index:50;--hd-ink:#fff;--hd-ink-2:rgba(255,255,255,.78);--hd-line:rgba(255,255,255,.35);transition:background .6s var(--ease),border-color .6s,box-shadow .6s;border-bottom:1px solid transparent}
header.site.scrolled{--hd-ink:#0A1F4B;--hd-ink-2:rgba(11,18,34,.72);--hd-line:rgba(21,102,209,.35);background:rgba(255,255,255,.88);backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);border-bottom-color:rgba(11,18,34,.08);box-shadow:0 10px 30px -24px rgba(11,18,34,.4)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.logo{display:flex;align-items:center;font-weight:600;font-size:13px;letter-spacing:.28em;color:var(--hd-ink);white-space:pre}
.logo img{width:38px;height:38px;margin-right:14px}
.logo span{color:var(--hd-ink-2)}
.nav ul{display:flex;gap:36px}
.nav ul a{position:relative;font-size:13.5px;letter-spacing:.03em;color:var(--hd-ink-2);white-space:nowrap;transition:color .4s}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav ul a:hover{color:var(--hd-ink)}
.nav ul a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{font-size:13px;font-weight:500;letter-spacing:.05em;color:var(--hd-ink);background:none;border:1px solid var(--hd-line);padding:12px 20px;border-radius:4px;cursor:pointer;transition:background .4s,border-color .4s,color .4s}
.nav-cta:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--hd-ink);transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.nav.open .burger span:first-child{top:22px;transform:rotate(45deg)}
.nav.open .burger span:last-child{top:22px;transform:rotate(-45deg)}

/* Hero : stade de nuit, teinté bleu */
.hero{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:132px 0 96px;overflow:hidden;background:var(--blue-grad)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-img{position:absolute;inset:-6% 0 auto;width:100%;height:112%;object-fit:cover;object-position:50% 40%;opacity:.24;mix-blend-mode:luminosity;filter:contrast(1.1);animation:kenburns 38s var(--ease) infinite alternate;will-change:transform}
@keyframes kenburns{from{scale:1.04}to{scale:1.14}}
.beam{position:absolute;top:-30%;width:34vw;height:150%;pointer-events:none;mix-blend-mode:screen;transform-origin:50% 0;filter:blur(18px);opacity:.5;background:linear-gradient(180deg,rgba(225,236,255,.6) 0%,rgba(190,212,255,.14) 38%,rgba(190,212,255,0) 72%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%)}
.beam.b1{left:-8%;transform:rotate(-24deg);animation:sway 14s ease-in-out infinite alternate}
.beam.b2{left:20%;transform:rotate(-9deg);opacity:.3;animation:sway 18s ease-in-out -4s infinite alternate}
.beam.b3{right:18%;transform:rotate(10deg);opacity:.28;animation:sway 16s ease-in-out -8s infinite alternate}
.beam.b4{right:-10%;transform:rotate(25deg);animation:sway 13s ease-in-out -2s infinite alternate}
@keyframes sway{from{rotate:-2.5deg}to{rotate:2.5deg}}
.haze{position:absolute;inset:0;background:radial-gradient(ellipse 70% 40% at 50% 30%,rgba(120,160,255,.18),transparent 70%);animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.6}to{opacity:1}}
.crowd{position:absolute;left:0;right:0;bottom:22%;height:26%;opacity:.5;background-image:radial-gradient(1px 1px at 12% 40%,#e6eeff,transparent),radial-gradient(1px 1px at 27% 62%,#fff,transparent),radial-gradient(1.5px 1.5px at 39% 35%,#c9d9ff,transparent),radial-gradient(1px 1px at 51% 70%,#fff,transparent),radial-gradient(1px 1px at 63% 44%,#e6eeff,transparent),radial-gradient(1.5px 1.5px at 74% 58%,#fff,transparent),radial-gradient(1px 1px at 86% 38%,#c9d9ff,transparent),radial-gradient(1px 1px at 93% 66%,#fff,transparent);background-size:220px 120px;animation:twinkle 5s steps(2) infinite}
@keyframes twinkle{50%{opacity:.25}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,23,51,.75) 0%,rgba(16,23,51,.35) 45%,transparent 75%),linear-gradient(180deg,rgba(16,23,51,.45) 0%,transparent 25%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-inner{z-index:2;width:100%}
.hero h1{max-width:18ch;font-size:clamp(38px,5vw,72px)}
.hero-copy{margin:34px 0 40px;max-width:62ch;display:grid;gap:10px;color:var(--ink-2);font-size:16px;line-height:1.6;font-weight:300}
.hero-copy .hero-lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink);font-weight:400}
.trust-row{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line-2);max-width:880px}
.trust-row li{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.06em;color:var(--ink-2)}
.trust-row li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.2 2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") center/18px no-repeat}
.scroll-cue{position:absolute;z-index:2;left:50%;bottom:36px;width:1px;height:56px;background:var(--line-2);overflow:hidden}
.scroll-cue span{position:absolute;inset:0;background:#fff;animation:cue 2.6s var(--ease) infinite}
@keyframes cue{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* Chiffres clés */
.stats{padding:110px 0 120px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{display:flex;flex-direction:column;gap:14px;padding:52px 32px 48px}
.stat dd{order:1}.stat dt{order:2}
.stat+.stat{border-left:1px solid var(--line)}
.stat dd{font-family:var(--sans);font-weight:600;white-space:nowrap;font-size:clamp(36px,4vw,58px);line-height:1;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;background:linear-gradient(180deg,var(--navy) 35%,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat dt{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.stats .fine{margin-top:22px}

/* Proposition de valeur */
.value{background:var(--bg-2)}
.lux-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lux-card{position:relative;padding:60px 44px 68px;background:var(--card);border:1px solid var(--line);border-radius:6px;transition:transform .8s var(--ease),box-shadow .8s var(--ease),border-color .8s}
.lux-card::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;border-radius:6px 6px 0 0;background:linear-gradient(90deg,var(--blue),var(--blue-2));transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.lux-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--accent-line)}
.lux-card:hover::before{transform:scaleX(1)}
.lux-card .idx{display:block;font-size:14px;font-weight:600;letter-spacing:.14em;color:var(--accent);margin-bottom:76px}
.lux-card h3{font-size:clamp(22px,1.9vw,26px);font-weight:600;color:var(--ink);margin-bottom:18px}
.lux-card p{color:var(--ink-2);font-weight:300;max-width:30ch}

/* Vision */
.vision{min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:200px 0;background:var(--blue-grad)}
.vision-media{position:absolute;inset:0}
.vision-media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;opacity:.16;mix-blend-mode:luminosity}
.vision-media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 50%,transparent,rgba(16,23,51,.6))}
.vision-inner{z-index:2;text-align:center}
.vision .eyebrow{justify-content:center}
.vision h2{max-width:18ch;margin:0 auto}
.vision-copy{margin:64px auto 0;max-width:46ch;display:grid;gap:18px;font-size:clamp(17px,1.5vw,20px);font-weight:300;color:var(--ink-2)}
.vision-copy .sign{font-weight:500;font-size:clamp(19px,1.7vw,23px);color:var(--accent-soft);margin-top:18px}

/* Aperçu marketplace : terminal clair */
.terminal{border:1px solid var(--line-2);border-radius:8px;background:var(--card);box-shadow:0 60px 120px -70px rgba(11,18,34,.45);overflow:hidden}
.term-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 26px;background:var(--blue-grad);color:rgba(255,255,255,.75);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase}
.term-live{display:flex;align-items:center;gap:10px}
.term-live i{width:6px;height:6px;border-radius:50%;background:#3fd59a;box-shadow:0 0 0 0 rgba(63,213,154,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(63,213,154,0)}100%{box-shadow:0 0 0 0 rgba(63,213,154,0)}}
.club-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.club{--mx:50%;--my:0%;position:relative;padding:34px 28px 30px;cursor:default}
.club+.club{border-left:1px solid var(--line)}
.club::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(21,102,209,.08),transparent 60%)}
.club:hover::before,.club:focus-visible::before{opacity:1}
.club-top{display:flex;gap:16px;align-items:center;margin-bottom:30px;min-height:56px}
.crest{width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -14px rgba(11,18,34,.5)}
.crest img{width:42px;height:42px;object-fit:contain}
a.club{display:block;color:inherit;transition:background .5s var(--ease)}
a.club:hover{background:rgba(21,102,209,.03)}
.club-metrics .sym{font-size:15px;letter-spacing:.12em;color:var(--ink-2)}
.club-foot .go{color:var(--accent);font-weight:600;transition:letter-spacing .4s var(--ease)}
a.club:hover .go{letter-spacing:.02em}
.club h3{font-size:16px;font-weight:600;letter-spacing:0;color:var(--ink);line-height:1.3}
.country{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.club-metrics{display:grid;gap:18px;margin-bottom:28px}
.club-metrics dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.club-metrics dd{font-weight:600;font-size:26px;letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:lining-nums}
.club-metrics small{font-family:var(--sans);font-weight:400;font-size:13px;color:var(--ink-3);margin-left:3px}
.spark{width:100%;height:48px;overflow:visible}
.spark polyline{fill:none;stroke:var(--emerald);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-dasharray:var(--len,400);stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease)}
.spark.pending polyline{stroke-dashoffset:var(--len,400)}
.club-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.club-foot .up{color:var(--emerald);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.market-foot{display:flex;justify-content:space-between;align-items:center;gap:24px 48px;flex-wrap:wrap;margin-top:32px}
.market-foot .fine{max-width:70ch}

/* Différenciation */
.diff{background:var(--bg-2)}
.versus{display:grid;grid-template-columns:1fr auto 1.15fr;max-width:1040px;margin:0 auto;align-items:stretch}
.vs-col{padding:56px 52px;border-radius:8px}
.vs-col h3{font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;margin-bottom:36px}
.vs-col li{display:flex;gap:18px;align-items:center;padding:20px 0;border-top:1px solid var(--line);font-size:17px}
.vs-col li:last-child{border-bottom:1px solid var(--line)}
.vs-col.muted h3,.vs-col.muted li{color:var(--ink-3)}
.vs-col.muted li::before{content:"";width:14px;height:1px;flex:none;background:var(--ink-3)}
.vs-col.prime{background:var(--blue-grad);color:#fff;box-shadow:0 50px 100px -50px rgba(11,18,34,.6)}
.vs-col.prime h3{color:#4792F5}
.vs-col.prime li{color:#fff;border-color:rgba(255,255,255,.12)}
.vs-col.prime li::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.6 10.2 2.9 2.9 6-6.2' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/20px no-repeat}
.vs-divider{display:flex;align-items:center;justify-content:center;padding:0 28px}
.vs-divider span{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}

/* Parcours */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:56px}
.steps li{position:relative;padding-top:40px;border-top:1px solid var(--line-2)}
.steps li::before{content:"";position:absolute;top:-1px;left:0;width:56px;height:2px;background:var(--blue)}
.steps .n{display:block;font-size:15px;font-weight:600;letter-spacing:.12em;color:var(--accent);line-height:1;margin-bottom:28px}
.steps h3{font-size:22px;color:var(--ink);margin-bottom:14px}
.steps p{color:var(--ink-2);font-weight:300}

/* Espace clubs */
.clubs-offer{background:var(--bg-2)}
.clubs-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:96px;align-items:center}
.ticks{display:grid;margin:44px 0 48px}
.ticks li{display:flex;gap:18px;align-items:baseline;padding:18px 0;border-top:1px solid var(--line);color:var(--ink)}
.ticks li:last-child{border-bottom:1px solid var(--line)}
.ticks li::before{content:"";width:7px;height:7px;flex:none;transform:translateY(-3px) rotate(45deg);background:var(--blue)}
.ledger{border-radius:8px;background:var(--blue-grad);color:#fff;padding:48px 44px;box-shadow:0 60px 120px -60px rgba(11,18,34,.6)}
.ledger-title{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#4792F5;margin-bottom:28px}
.ledger-row{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);font-size:16px}
.ledger-row b{font-weight:600;font-size:14px;letter-spacing:.08em;color:#9CC3FA}
.ledger .fine{margin-top:22px;color:rgba(255,255,255,.55)}

/* Confiance */
.trust{background:var(--blue-grad)}
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pillar{background:rgba(16,23,51,.35);padding:44px 30px 52px;transition:background .6s var(--ease)}
.pillar:hover{background:rgba(34,55,136,.45)}
.pillar::before{content:"";display:block;width:32px;height:2px;margin-bottom:40px;background:var(--accent)}
.pillar h3{font-size:20px;color:var(--ink);margin-bottom:14px}
.pillar p{font-size:15px;color:var(--ink-2);font-weight:300}
.mcp-link{margin-top:40px}
.mcp-link a{font-size:14.5px;color:var(--accent-soft);border-bottom:1px solid var(--accent-line);padding-bottom:3px;transition:border-color .4s}
.mcp-link a:hover{border-color:var(--accent)}

/* En bref */
.brief-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:72px;align-items:start}
.brief-grid>*{min-width:0}
.brief .ticks{margin:0}
.compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.compare caption{caption-side:bottom;text-align:left;padding:14px 0;font-size:12.5px;color:var(--ink-3)}
.compare th,.compare td{padding:18px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line);color:var(--ink-2);font-weight:300}
.compare thead th{border-top:0;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;font-weight:600;background:var(--navy)}
.compare tbody th{font-weight:600;color:var(--ink);width:24%}

/* FAQ */
.faq{background:var(--bg-2)}
.faq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:72px}
.faq-item{padding:34px 0;border-top:1px solid var(--line)}
.faq-item h3{font-size:19px;font-weight:600;color:var(--ink);margin-bottom:12px}
.faq-item p{font-size:15.5px;color:var(--ink-2);font-weight:300}

/* Appel final */
.final{min-height:100vh;display:flex;align-items:center;overflow:hidden;text-align:center;padding:200px 0;background:var(--blue-grad)}
.final-media{position:absolute;inset:0;overflow:hidden}
.final-media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:50% 55%;opacity:.2;mix-blend-mode:luminosity;filter:blur(1.5px);animation:kenburns 46s var(--ease) infinite alternate}
.final-shade{position:absolute;inset:0;background:radial-gradient(ellipse 65% 60% at 50% 50%,transparent,rgba(16,23,51,.7) 85%)}
.final-inner{z-index:2}
.final .eyebrow{justify-content:center}
.final h2{max-width:14ch;margin:0 auto}
.final .lead{margin:36px auto 56px;text-align:center}
.final .cta-row{justify-content:center}
.final-club{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;font-size:14px;color:var(--ink-2)}
.btn-sm{padding:12px 20px;font-size:13.5px}

/* Pied de page */
footer{background:var(--blue-grad);color:var(--ink-3);border-top:1px solid var(--line);padding:72px 0 40px;font-size:14px}
footer .logo{--hd-ink:#fff;--hd-ink-2:#4792F5}
.foot{display:grid;grid-template-columns:1.4fr 2fr auto;gap:48px;align-items:start;padding-bottom:44px;border-bottom:1px solid var(--line)}
.foot-brand p{margin-top:18px;font-size:15px;color:var(--ink-2)}
.foot ul{display:flex;flex-wrap:wrap;gap:14px 30px}
.foot ul a{color:var(--ink-2);transition:color .3s}
.foot ul a:hover{color:#fff}
.social{flex-direction:column;gap:12px!important}
.legal{padding-top:30px;font-size:12.5px;line-height:1.75;max-width:110ch}

/* Apparition au défilement */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1.2s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* Pop-up d'inscription */
body:has(dialog[open]){overflow:hidden}
.signup{margin:auto;border:0;border-radius:10px;padding:0;background:#fff;color:var(--ink);width:min(540px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 60px 120px -30px rgba(11,18,34,.7)}
.signup::backdrop{background:rgba(11,18,34,.72);backdrop-filter:blur(6px)}
.signup-box{position:relative;padding:44px 38px 32px;border-top:3px solid var(--blue)}
.signup .eyebrow{margin-bottom:16px}
.signup h2{font-weight:600;font-size:28px;letter-spacing:-.02em;line-height:1.1;margin:0 84px 12px 0;color:var(--ink)}
.signup-sub{font-size:15px;color:var(--ink-2);margin:0 0 26px;line-height:1.6;font-weight:300}
.signup-close{position:absolute;top:18px;right:18px;background:none;border:1px solid var(--line-2);color:var(--ink-2);border-radius:4px;padding:7px 13px;font:500 12px var(--sans);letter-spacing:.04em;cursor:pointer;transition:border-color .3s,color .3s}
.signup-close:hover{border-color:var(--blue);color:var(--blue)}
.signup .f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.signup .f{margin-bottom:16px}
.signup label{display:block;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.signup label small{text-transform:none;letter-spacing:0;color:var(--ink-3)}
.signup input:not([type=checkbox]){width:100%;font:400 16px var(--sans);color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:4px;padding:14px 15px;transition:border-color .3s,background .3s}
.signup input:not([type=checkbox]):focus-visible{outline:none;border-color:var(--blue);background:#fff}
.signup input[aria-invalid=true]{border-color:#d14343}
.signup .f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.signup .f-check{display:flex;gap:12px;align-items:flex-start;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;line-height:1.55;color:var(--ink-2);margin:8px 0 18px}
.signup .f-check input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--blue)}
.signup .f-check a,.signup-foot a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.signup .f-err{color:#c0392b;font-size:14px;margin:0 0 14px}
.signup .f-ok{color:var(--blue);font-size:14px;margin:0 0 14px}
.signup .signup-submit{width:100%}
.signup .signup-submit[disabled]{opacity:.6;cursor:progress}
.signup-foot{text-align:center;font-size:14px;margin:18px 0 0;color:var(--ink-2)}
.signup-risk{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin:14px 0 0;text-align:center}
.signup-actions{display:flex;gap:12px;flex-wrap:wrap}
.signup-actions .btn{flex:1 1 180px}

/* Responsive */
@media (max-width:1100px){
  .club-grid{grid-template-columns:repeat(2,1fr)}
  .club:nth-child(3){border-left:0}
  .club:nth-child(n+3){border-top:1px solid var(--line)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillar:last-child{grid-column:1/-1}
  .nav ul{gap:24px}
}
@media (max-width:980px){
  section{padding:108px 0}
  .sec-head{margin-bottom:56px}
  .sec-head.split,.clubs-grid,.brief-grid{grid-template-columns:1fr;gap:40px}
  .lux-cards,.steps{grid-template-columns:1fr}
  .lux-card .idx{margin-bottom:40px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .versus{grid-template-columns:1fr}
  .vs-divider{padding:24px 0}
  .faq-list{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .social{flex-direction:row!important}
  .nav ul,.nav-cta{display:none}
  .burger{display:block}
  .nav.open ul{display:flex;flex-direction:column;position:absolute;top:84px;left:0;right:0;gap:22px;padding:28px 32px 36px;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border-bottom:1px solid rgba(11,18,34,.1);box-shadow:0 30px 40px -30px rgba(11,18,34,.4)}
  .nav.open ul a{font-size:16px;color:var(--navy)}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  section{padding:92px 0}
  .hero{padding:140px 0 110px}
  .hero-copy .hero-more{display:none}
  .hero-shade{background:linear-gradient(180deg,rgba(16,23,51,.55) 0%,rgba(16,23,51,.25) 40%,rgba(16,23,51,.5) 100%)}
  .beam{width:70vw}
  .beam.b2,.beam.b3{display:none}
  .cta-row .btn{width:100%}
  .trust-row{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:48px}
  .trust-row li{font-size:12px;letter-spacing:.03em}
  .stat{padding:36px 16px 32px;min-width:0}
  .stat dd{font-size:clamp(28px,8.4vw,38px)}
  .stat dt{font-size:10.5px;letter-spacing:.14em}
  .club-grid{grid-template-columns:1fr}
  .club+.club{border-left:0;border-top:1px solid var(--line)}
  .term-bar{font-size:10px;letter-spacing:.16em;padding:14px 20px}
  .pillars{grid-template-columns:1fr}
  .vs-col{padding:40px 26px}
  .lux-card{padding:44px 28px 52px}
  .ledger{padding:36px 26px}
  .vision,.final{min-height:0;padding:140px 0}
  .compare{font-size:14px}.compare th,.compare td{padding:12px 10px}.compare tbody th{width:auto}
  .signup-box{padding:34px 22px 24px}.signup .f-row{grid-template-columns:1fr;gap:0}.signup h2{font-size:28px}
  .logo{font-size:11.5px;letter-spacing:.2em}.logo img{width:34px;height:34px;margin-right:10px}
  .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── Économie réelle : section Club Tokens ─────────────────────────────────────────────────────────────────────
   Bloc sombre à dégradés vert/bleu, cartes en verre léger à bordure dégradée, icônes dessinées en CSS pur
   (la landing n'embarque aucun SVG), apparition au défilement via .rv, halo qui suit le pointeur (landing.js). */
.real{--g:#2ED3A0;--g2:#12A36D;--b:#4792F5;--b2:#1566D1;overflow:hidden;
  background:radial-gradient(60% 50% at 12% 0%,rgba(18,163,109,.30),transparent 70%),radial-gradient(55% 60% at 92% 28%,rgba(21,102,209,.38),transparent 70%),linear-gradient(180deg,#0A1330 0%,#0D1D3F 55%,#0B2A3A 100%)}
.real-glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5;animation:real-float 14s ease-in-out infinite alternate}
.real-glow.g1{width:420px;height:420px;left:-120px;top:22%;background:rgba(46,211,160,.28)}
.real-glow.g2{width:480px;height:480px;right:-160px;bottom:6%;background:rgba(71,146,245,.30);animation-delay:-6s}
.real .sec-head{margin-bottom:72px}
.real .sec-head .lead{margin-inline:auto;max-width:62ch}
.real .display em{background:linear-gradient(90deg,var(--g),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.real .eyebrow{color:var(--g)}
.real .eyebrow::before{background:linear-gradient(90deg,transparent,var(--g))}
.real .sec-head.center .eyebrow::after{background:linear-gradient(90deg,var(--g),transparent)}

.real-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;perspective:1200px}
.real-card{--mx:50%;--my:0%;position:relative;isolation:isolate;grid-column:span 2;padding:34px 30px 38px;border-radius:20px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 34px 60px -38px rgba(0,0,0,.7);
  transition:translate .6s var(--ease),box-shadow .6s var(--ease)}
.real-card:nth-child(4){grid-column:2/span 2}
.real-card:nth-child(5){grid-column:4/span 2}
/* Bordure dégradée : un masque ne garde que l'anneau de 1 px. */
.real-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1px;pointer-events:none;opacity:.55;transition:opacity .6s var(--ease);
  background:linear-gradient(140deg,rgba(46,211,160,.85),rgba(71,146,245,.14) 46%,rgba(71,146,245,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);}
/* Halo qui suit le pointeur. */
.real-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(340px circle at var(--mx) var(--my),rgba(46,211,160,.16),rgba(71,146,245,.08) 45%,transparent 70%)}
.real-card:hover{translate:0 -8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 44px 80px -34px rgba(18,163,109,.5)}
.real-card:hover::before{opacity:1}
.real-card:hover::after{opacity:1}
.real-card h3{font-size:clamp(20px,1.7vw,23px);font-weight:600;color:#fff;margin-bottom:12px}
.real-card p{color:rgba(255,255,255,.72);font-weight:300;max-width:30ch}
.js .real-card.rv{transition:opacity 1.2s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s),translate .6s var(--ease),box-shadow .6s var(--ease)}

/* Icônes : pastille de verre + pictogramme en CSS pur, animé en continu, accéléré au survol. */
.gl{position:relative;display:grid;place-items:center;width:64px;height:64px;margin-bottom:26px;border-radius:18px;
  background:linear-gradient(145deg,rgba(46,211,160,.24),rgba(21,102,209,.3));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 16px 30px -14px rgba(46,211,160,.6);transition:transform .6s var(--ease)}
.real-card:hover .gl{transform:scale(1.08) rotate(-3deg)}
.gl i{display:block;font-style:normal}
.gl-ball i{position:relative;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d6e6ff 72%);animation:real-spin 10s linear infinite}
.gl-ball i::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:#0D1D3F;clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.gl-ball i::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 7%,#0D1D3F 0 2.4px,transparent 3px),radial-gradient(circle at 93% 41%,#0D1D3F 0 2.4px,transparent 3px),radial-gradient(circle at 77% 91%,#0D1D3F 0 2.4px,transparent 3px),radial-gradient(circle at 23% 91%,#0D1D3F 0 2.4px,transparent 3px),radial-gradient(circle at 7% 41%,#0D1D3F 0 2.4px,transparent 3px)}
.real-card:hover .gl-ball i{animation-duration:3s}
.gl-coin i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 16px/1 var(--sans);color:#06281d;background:linear-gradient(145deg,#8BF5D0,#12A36D);box-shadow:inset 0 0 0 3px rgba(255,255,255,.4);animation:real-flip 5s var(--ease) infinite}
.gl-bars b{display:flex;align-items:flex-end;gap:4px;height:30px}
.gl-bars i{width:6px;height:100%;border-radius:2px;background:linear-gradient(180deg,#8BF5D0,var(--b));transform-origin:bottom;animation:real-grow 2.6s ease-in-out infinite alternate}
.gl-bars i:nth-child(1){--h:.42;animation-delay:0s}.gl-bars i:nth-child(2){--h:.62;animation-delay:.25s}.gl-bars i:nth-child(3){--h:.82;animation-delay:.5s}.gl-bars i:nth-child(4){--h:1;animation-delay:.75s}
.gl-globe i{position:relative;width:30px;height:30px;border-radius:50%;border:2px solid #fff;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 6px,rgba(255,255,255,.5) 6px 7px)}
.gl-globe i::before{content:"";position:absolute;left:25%;right:25%;top:-2px;bottom:-2px;border:2px solid #fff;border-radius:50%;animation:real-meridian 4s ease-in-out infinite alternate}
.gl-link i{position:relative;width:36px;height:22px}
.gl-link i::before,.gl-link i::after{content:"";position:absolute;top:0;width:22px;height:22px;border-radius:50%;border:3px solid #8BF5D0;animation:real-clasp 3.2s ease-in-out infinite alternate}
.gl-link i::before{left:0}
.gl-link i::after{right:0;border-color:#9CC3FA;animation-direction:alternate-reverse}

/* « Pourquoi c'est différent ? » + équation mise en avant. */
.real-diff{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;margin-top:104px}
.rd-title{font-size:clamp(30px,3.4vw,46px);font-weight:600;letter-spacing:-.025em;color:#fff;margin-bottom:22px}
.rd-copy p:not(.eyebrow){color:rgba(255,255,255,.74);font-weight:300;font-size:clamp(16px,1.35vw,18.5px);max-width:52ch}
.equation{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 34px;border-radius:26px;text-align:center;border:1px solid transparent;
  background:linear-gradient(#0E1F47,#0E1F47) padding-box,linear-gradient(120deg,var(--g),var(--b),var(--g)) border-box;background-size:auto,220% 100%;
  box-shadow:0 0 90px -24px rgba(46,211,160,.45),inset 0 0 60px -30px rgba(71,146,245,.5);animation:real-border 9s linear infinite}
.eq-term{display:block;width:100%;max-width:340px;padding:14px 22px;border-radius:14px;font-weight:500;font-size:17px;color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.eq-op{font-size:26px;font-weight:300;line-height:1;color:var(--g)}
.eq-result{display:block;margin-top:6px;font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.02em;line-height:1.15;background:linear-gradient(90deg,#8BF5D0,#7DB5FF);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(46,211,160,.35))}
.js .equation .eq-term,.js .equation .eq-op,.js .equation .eq-result{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease) calc(.25s + var(--i,0) * .12s),transform .8s var(--ease) calc(.25s + var(--i,0) * .12s)}
.js .equation.in .eq-term,.js .equation.in .eq-op,.js .equation.in .eq-result{opacity:1;transform:none}

/* Appel à l'action. */
.real-cta{position:relative;margin-top:104px;padding-top:72px;text-align:center}
.real-cta::before{content:"";position:absolute;top:0;left:50%;width:min(520px,70%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--g),var(--b),transparent)}
.real-cta h3{font-size:clamp(28px,3.4vw,46px);font-weight:600;letter-spacing:-.025em;color:#fff;margin-bottom:18px}
.real-cta p{margin:0 auto 38px;max-width:56ch;color:rgba(255,255,255,.74);font-weight:300;font-size:clamp(16px,1.4vw,19px)}
.real .btn-primary{background:linear-gradient(135deg,var(--g2),var(--b2));color:#fff;border-color:rgba(255,255,255,.18);box-shadow:0 22px 50px -20px rgba(18,163,109,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.real .btn-primary::after{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%)}
.real .btn-primary:hover{transform:translateY(-2px);box-shadow:0 28px 60px -18px rgba(46,211,160,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.real-fine{margin:44px auto 0;max-width:86ch;text-align:center;color:rgba(255,255,255,.55)}

@keyframes real-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(40px,-30px,0)}}
@keyframes real-spin{to{transform:rotate(360deg)}}
@keyframes real-flip{0%,55%{transform:rotateY(0)}75%,100%{transform:rotateY(360deg)}}
@keyframes real-grow{from{transform:scaleY(calc(var(--h) * .45))}to{transform:scaleY(var(--h))}}
@keyframes real-meridian{from{transform:scaleX(.15)}to{transform:scaleX(1)}}
@keyframes real-clasp{from{transform:translateX(-4px)}to{transform:translateX(4px)}}
@keyframes real-border{to{background-position:0 0,-220% 0}}

@media (max-width:1100px){
  .real-grid{grid-template-columns:repeat(2,1fr)}
  .real-card,.real-card:nth-child(4),.real-card:nth-child(5){grid-column:auto}
  .real-card:nth-child(5){grid-column:1/-1}
  .real-card p{max-width:none}
}
@media (max-width:980px){
  .real .sec-head{margin-bottom:48px}
  .real-diff{grid-template-columns:1fr;gap:40px;margin-top:72px}
  .real-cta{margin-top:72px;padding-top:56px}
}
@media (max-width:640px){
  .real-grid{grid-template-columns:1fr;gap:16px}
  .real-card:nth-child(5){grid-column:auto}
  .real-card{padding:28px 24px 30px}
  .gl{margin-bottom:20px}
  .equation{padding:32px 20px}
  .real-glow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .equation .eq-term,.js .equation .eq-op,.js .equation .eq-result{opacity:1;transform:none}
}