/* ═══════════════════════════════════════════════════════════
   VINCIDIUM — style.css
   Palette : encre profonde + violet électrique → cyan
   Type   : Clash Display (titres) · Satoshi (texte) · JetBrains Mono (data)
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:        #05060C;
  --ink-2:      #0A0C16;
  --ink-3:      #10131F;
  --line:       rgba(148,158,196,.13);
  --line-soft:  rgba(148,158,196,.07);
  --text:       #EDEFF7;
  --muted:      #99A0B8;
  --faint:      #6B7290;
  --violet:     #7C6CFF;
  --violet-2:   #9B8CFF;
  --cyan:       #3EE6D2;
  --rose:       #FF6EC7;
  --grad:       linear-gradient(100deg, var(--violet) 0%, var(--cyan) 100%);
  --font-display: "Clash Display", "Satoshi", sans-serif;
  --font-body:    "Satoshi", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --radius:     18px;
  --radius-lg:  26px;
  --header-h:   72px;
  --ease-out:   cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ─── Reset ─── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html:focus-within{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  background:var(--ink);
  color:var(--text);
  line-height:1.6;
  font-size:16.5px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:rgba(124,108,255,.35); color:#fff; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.container{ width:min(1180px, 100% - 48px); margin-inline:auto; }

/* ─── Typo utilitaires ─── */
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.02em; }
h2{ font-size:clamp(30px, 4.2vw, 52px); }
h3{ font-size:clamp(19px, 2vw, 24px); letter-spacing:-.01em; }

.grad{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:18px;
}
.eyebrow::before{
  content:""; width:22px; height:1px; background:var(--cyan); opacity:.6;
}

/* ═══════════ PRELOADER ═══════════ */
.preloader{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease-out), visibility .6s;
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.preloader-mark{ width:40px; color:var(--violet); animation:mark-pop .8s var(--ease-spring) both; }
.preloader-word{
  font-family:var(--font-display); font-weight:600; font-size:22px; letter-spacing:.02em;
  animation:fade-up .7s .15s var(--ease-out) both;
}
.preloader-bar{
  width:150px; height:2px; border-radius:2px;
  background:rgba(148,158,196,.15); overflow:hidden;
  animation:fade-up .7s .25s var(--ease-out) both;
}
.preloader-fill{
  display:block; height:100%; width:100%;
  background:var(--grad);
  transform-origin:left;
  transform:scaleX(0);
  animation:load-fill 1s .2s var(--ease-out) forwards;
}
@keyframes load-fill{ to{ transform:scaleX(1); } }
@keyframes mark-pop{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes fade-up{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }

/* ═══════════ CURSEUR ═══════════ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:180;
  pointer-events:none; border-radius:50%;
  opacity:0;
}
.cursor-dot{
  width:6px; height:6px; background:var(--cyan);
  transform:translate(-50%,-50%);
}
.cursor-ring{
  width:34px; height:34px;
  border:1.5px solid rgba(124,108,255,.55);
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease-out), height .25s var(--ease-out),
             border-color .25s, background-color .25s;
}
body.cursor-on .cursor-dot, body.cursor-on .cursor-ring{ opacity:1; }
body.cursor-hover .cursor-ring{
  width:52px; height:52px;
  border-color:rgba(62,230,210,.7);
  background:rgba(62,230,210,.06);
}
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ═══════════ SCROLL PROGRESS ═══════════ */
.scroll-progress{
  position:fixed; top:0; left:0; z-index:150;
  height:2px; width:100%;
  background:var(--grad);
  transform-origin:left;
  transform:scaleX(0);
}

/* ═══════════ HEADER ═══════════ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:125; /* au-dessus du menu mobile (120) pour garder le burger cliquable */
  transition:transform .45s var(--ease-out), background-color .35s, border-color .35s, backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(5,6,12,.72);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-bottom-color:var(--line-soft);
}
.site-header.hidden{ transform:translateY(-100%); }
.header-inner{
  width:min(1280px, 100% - 48px); margin-inline:auto;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:.01em;
}
.brand-mark{ width:22px; color:var(--violet); transition:transform .4s var(--ease-spring); }
.brand:hover .brand-mark{ transform:rotate(-8deg) scale(1.08); }

.nav-desktop{ display:flex; gap:6px; }
.nav-link{
  position:relative; padding:8px 14px; border-radius:10px;
  font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .25s, background-color .25s;
}
.nav-link:hover{ color:var(--text); background:rgba(148,158,196,.08); }
.nav-link.active{ color:var(--text); }
.nav-link.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px;
  border-radius:2px; background:var(--grad);
}
.header-actions{ display:flex; align-items:center; gap:10px; }

/* ─── Boutons ─── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:600; font-size:15px; letter-spacing:.01em;
  border-radius:999px; padding:14px 26px;
  transition:transform .3s var(--ease-out), box-shadow .3s, background-color .3s, border-color .3s, color .3s;
  will-change:transform;
}
.btn svg{ width:15px; height:15px; transition:transform .3s var(--ease-out); }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{
  color:#fff;
  background:linear-gradient(100deg, #6E5BFF, #8F7BFF 55%, #37C7BC);
  background-size:150% 100%;
  box-shadow:0 8px 28px -8px rgba(124,108,255,.55), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover{
  background-position:80% 0;
  box-shadow:0 12px 36px -8px rgba(124,108,255,.7), inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(-2px);
}
.btn-ghost{
  color:var(--text);
  border:1px solid var(--line);
  background:rgba(148,158,196,.05);
}
.btn-ghost:hover{
  border-color:rgba(148,158,196,.35);
  background:rgba(148,158,196,.1);
  transform:translateY(-2px);
}
.btn-sm{ padding:10px 18px; font-size:14px; }
.btn-lg{ padding:16px 32px; font-size:16px; }
.btn-block{ width:100%; }
.play-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  background:rgba(62,230,210,.15); color:var(--cyan);
}
.play-ico svg{ width:9px; height:9px; }

/* ─── Burger + menu mobile ─── */
.burger{ display:none; position:relative; z-index:130; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); }
.burger span{
  position:absolute; left:12px; right:12px; height:2px; border-radius:2px;
  background:var(--text);
  transition:transform .35s var(--ease-out), top .35s;
}
.burger span:nth-child(1){ top:16px; }
.burger span:nth-child(2){ top:24px; }
.burger.open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ top:20px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:120;
  background:rgba(5,6,12,.92);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease-out), visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu nav{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.mobile-link{
  font-family:var(--font-display); font-size:clamp(28px,7vw,40px); font-weight:600;
  padding:8px 20px; color:var(--text);
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .25s;
  transition-delay:calc(var(--i) * 60ms);
}
.mobile-link:hover{ color:var(--violet-2); }
.mobile-cta{ margin-top:18px; opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  transition-delay:calc(var(--i) * 60ms);
}
.mobile-menu.open .mobile-link, .mobile-menu.open .mobile-cta{ opacity:1; transform:none; }
body.menu-locked{ overflow:hidden; }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 56px) 0 90px;
  overflow:hidden;
}
.hero-aurora{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
}
.hero-grid-bg{
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(148,158,196,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,158,196,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 35%, black 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 35%, black 30%, transparent 75%);
}
.hero-layout{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:56px; align-items:center;
}

.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px 8px 12px; margin-bottom:26px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(148,158,196,.06);
  font-size:13.5px; font-weight:500; color:var(--muted);
  transition:border-color .3s, color .3s, transform .3s var(--ease-out);
}
.hero-badge:hover{ border-color:rgba(124,108,255,.5); color:var(--text); transform:translateY(-1px); }
.hero-badge svg{ width:13px; height:13px; }
.badge-pulse{
  width:8px; height:8px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 0 rgba(62,230,210,.5);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(62,230,210,.5); }
  70%{ box-shadow:0 0 0 9px rgba(62,230,210,0); }
  100%{ box-shadow:0 0 0 0 rgba(62,230,210,0); }
}

.hero-title{
  font-size:clamp(40px, 5.6vw, 74px);
  margin-bottom:24px;
}
.hero-title .line{ display:block; overflow:hidden; }
.hero-title .line > span{
  display:block;
  transform:translateY(110%);
  animation:title-rise 1s var(--ease-out) forwards;
}
.hero-title .line:nth-child(2) > span{ animation-delay:.12s; }
@keyframes title-rise{ to{ transform:none; } }

.hero-sub{
  font-size:clamp(16px, 1.6vw, 18.5px);
  color:var(--muted);
  max-width:54ch;
  margin-bottom:34px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:40px; }

.hero-proof{ display:flex; align-items:center; gap:16px; }
.hero-proof p{ font-size:14px; color:var(--faint); max-width:32ch; line-height:1.45; }
.hero-proof strong{ color:var(--muted); font-weight:600; }
.avatars{ display:flex; }
.avatar{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:#fff;
  background:linear-gradient(135deg, hsl(var(--h) 60% 52%), hsl(calc(var(--h) + 40) 65% 40%));
  border:2px solid var(--ink);
}
.avatars .avatar + .avatar{ margin-left:-10px; }

/* Révélations pilotées au chargement dans le hero */
.hero [data-reveal]{
  opacity:0; transform:translateY(22px);
  animation:fade-up-hero .9s var(--ease-out) forwards;
}
.hero .hero-badge[data-reveal]{ animation-delay:.05s; }
.hero .hero-sub[data-reveal]{ animation-delay:.28s; }
.hero .hero-actions[data-reveal]{ animation-delay:.4s; }
.hero .hero-proof[data-reveal]{ animation-delay:.52s; }
@keyframes fade-up-hero{ to{ opacity:1; transform:none; } }

/* ─── Dashboard (signature) ─── */
.hero-visual{
  position:relative;
  perspective:1200px;
  animation:fade-up-hero 1s .3s var(--ease-out) both;
}
.dash{
  position:relative;
  border-radius:var(--radius-lg);
  border:1px solid rgba(148,158,196,.16);
  background:linear-gradient(160deg, rgba(20,23,38,.92), rgba(10,12,22,.96));
  box-shadow:
    0 40px 80px -30px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 1px 0 rgba(255,255,255,.06) inset;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .2s ease-out;
}
.dash-glow{
  position:absolute; inset:-40%;
  background:
    radial-gradient(40% 40% at 25% 20%, rgba(124,108,255,.16), transparent 65%),
    radial-gradient(35% 35% at 85% 80%, rgba(62,230,210,.1), transparent 65%);
  pointer-events:none;
}
.dash-topbar{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
}
.dash-dots{ display:flex; gap:6px; }
.dash-dots span{ width:10px; height:10px; border-radius:50%; background:rgba(148,158,196,.22); }
.dash-dots span:first-child{ background:rgba(255,110,199,.55); }
.dash-url{
  flex:1; text-align:center;
  font-family:var(--font-mono); font-size:11.5px; color:var(--faint);
  background:rgba(148,158,196,.07);
  border-radius:8px; padding:5px 12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dash-live{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; color:var(--cyan); white-space:nowrap;
}
.live-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan);
  animation:pulse 2s infinite;
}
.dash-body{ padding:22px; position:relative; }
.dash-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.dash-label{ font-size:12.5px; color:var(--faint); display:block; margin-bottom:6px; }
.dash-revenue{
  font-family:var(--font-mono); font-weight:500;
  font-size:clamp(26px, 3vw, 36px); letter-spacing:-.02em;
  color:var(--text);
}
.dash-cents{ font-size:.6em; color:var(--muted); }
.dash-delta{
  font-family:var(--font-mono); font-size:12.5px; font-weight:500;
  color:var(--cyan);
  background:rgba(62,230,210,.1);
  border:1px solid rgba(62,230,210,.22);
  padding:5px 10px; border-radius:8px; white-space:nowrap;
}
.dash-chart{ margin-bottom:18px; }
.dash-chart svg{ width:100%; height:auto; }
.spark-line{
  stroke-dasharray:1000; stroke-dashoffset:1000;
  animation:draw-line 2.2s .8s var(--ease-out) forwards;
}
.spark-area{ opacity:0; animation:fade-in 1s 2.2s forwards; }
.spark-tip{ opacity:0; animation:fade-in .4s 2.8s forwards, tip-blink 2.4s 3.2s infinite; }
@keyframes draw-line{ to{ stroke-dashoffset:0; } }
@keyframes fade-in{ to{ opacity:1; } }
@keyframes tip-blink{ 0%,100%{ r:4; } 50%{ r:6; } }
.chart-hours{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:10.5px; color:var(--faint);
  margin-top:8px;
}
.dash-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tile{
  background:rgba(148,158,196,.05);
  border:1px solid var(--line-soft);
  border-radius:14px; padding:14px;
}
.tile-label{ display:block; font-size:11.5px; color:var(--faint); margin-bottom:5px; }
.tile-value{ display:block; font-family:var(--font-mono); font-size:19px; font-weight:500; letter-spacing:-.01em; }
.tile-sub{ display:block; font-size:11px; color:var(--faint); margin-top:4px; }
.tile-sub.up{ color:var(--cyan); }

/* Toasts commandes */
.order-toasts{
  position:absolute; right:14px; bottom:14px; z-index:5;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
  pointer-events:none;
}
.order-toast{
  display:flex; align-items:center; gap:10px;
  background:rgba(14,17,30,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(124,108,255,.28);
  border-radius:12px; padding:9px 14px 9px 10px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.6);
  font-size:12px;
  transform:translateX(120%); opacity:0;
  transition:transform .55s var(--ease-spring), opacity .4s;
}
.order-toast.show{ transform:none; opacity:1; }
.order-toast.hide{ transform:translateY(-8px); opacity:0; transition:transform .4s, opacity .35s; }
.toast-ico{
  width:26px; height:26px; border-radius:8px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(62,230,210,.14); color:var(--cyan); font-size:13px;
}
.order-toast strong{ display:block; font-size:12px; }
.order-toast span{ color:var(--faint); font-size:11px; }
.toast-price{ font-family:var(--font-mono); font-weight:500; color:var(--cyan); margin-left:6px; }

/* Cartes flottantes */
.float-card{
  position:absolute; z-index:6;
  display:flex; align-items:center; gap:11px;
  background:rgba(14,17,30,.88);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:14px; padding:12px 16px;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.6);
  font-size:12.5px;
  animation:floaty 6s ease-in-out infinite;
}
.float-card strong{ display:block; font-size:13px; }
.float-card span{ color:var(--faint); font-size:11.5px; }
.float-ico{
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(62,230,210,.14); color:var(--cyan); font-weight:700;
}
.float-ico.ship{ background:rgba(124,108,255,.16); color:var(--violet-2); }
.float-card-pay{ top:-24px; left:-34px; animation-delay:.8s; }
.float-card-ship{ bottom:36px; left:-52px; }
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}

.hero-scroll-hint{
  position:absolute; left:50%; bottom:26px; z-index:2;
  width:24px; height:38px;
  border:1.5px solid rgba(148,158,196,.3);
  border-radius:14px;
  transform:translateX(-50%);
}
.hero-scroll-hint span{
  position:absolute; left:50%; top:7px;
  width:3px; height:7px; border-radius:3px;
  background:var(--muted);
  transform:translateX(-50%);
  animation:scroll-hint 1.8s infinite;
}
@keyframes scroll-hint{
  0%{ opacity:0; transform:translate(-50%,0); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,12px); }
}

/* ═══════════ RÉVÉLATIONS AU SCROLL ═══════════ */
main > section:not(.hero) [data-reveal]{
  opacity:0; transform:translateY(30px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:calc(var(--d, 0) * 90ms);
}
main > section:not(.hero) [data-reveal].in{ opacity:1; transform:none; }

/* ═══════════ MARQUEE ═══════════ */
.marquee-section{ padding:34px 0 10px; }
.marquee-caption{
  text-align:center;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint);
  margin-bottom:26px;
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
}
.marquee-track{
  display:flex; align-items:center; gap:56px;
  width:max-content;
  animation:marquee 36s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
.mq-brand{
  font-family:var(--font-display); font-weight:500; font-size:21px;
  color:var(--faint); white-space:nowrap;
  transition:color .3s;
}
.mq-brand:hover{ color:var(--text); }
.mq-dot{ width:5px; height:5px; border-radius:50%; background:rgba(148,158,196,.25); flex-shrink:0; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ═══════════ STATS ═══════════ */
.stats-band{ padding:76px 0 30px; }
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  border-block:1px solid var(--line-soft);
  padding:44px 0;
}
.stat{ text-align:center; }
.stat strong{
  display:block;
  font-family:var(--font-mono); font-weight:500;
  font-size:clamp(30px, 3.6vw, 46px); letter-spacing:-.03em;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:6px;
}
.stat span{ font-size:14px; color:var(--faint); }

/* ═══════════ SECTIONS ═══════════ */
.section{ padding:110px 0; position:relative; }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head p{ color:var(--muted); margin-top:18px; font-size:17px; }

/* ═══════════ BENTO ═══════════ */
.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}
.bento-card{
  position:relative;
  grid-column:span 2;
  display:flex; flex-direction:column;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(170deg, rgba(18,21,36,.7), rgba(9,11,20,.85));
  overflow:hidden;
  transition:transform .45s var(--ease-out), border-color .45s;
}
.bento-wide{ grid-column:span 4; }
.bento-card::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(124,108,255,.13), transparent 65%);
  opacity:0; transition:opacity .4s;
  pointer-events:none;
}
.bento-card:hover{ transform:translateY(-5px); border-color:rgba(124,108,255,.34); }
.bento-card:hover::before{ opacity:1; }
.bento-visual{
  position:relative; z-index:1;
  height:180px;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.bento-text{ position:relative; z-index:1; padding:24px 26px 28px; }
.bento-text h3{ margin-bottom:10px; }
.bento-text p{ font-size:14.5px; color:var(--muted); line-height:1.65; }

/* Mini-boutique */
.mini-store{
  width:78%; border-radius:12px 12px 0 0;
  border:1px solid var(--line);
  border-bottom:none;
  background:rgba(20,23,40,.7);
  padding:12px 14px 0;
  transform:translateY(16px);
  transition:transform .5s var(--ease-out);
}
.bento-card:hover .mini-store{ transform:translateY(6px); }
.ms-nav{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.ms-logo{ width:32px; height:8px; border-radius:4px; background:var(--violet); }
.ms-links{ display:flex; gap:6px; flex:1; }
.ms-links i{ width:20px; height:5px; border-radius:3px; background:rgba(148,158,196,.25); }
.ms-cart{
  width:18px; height:18px; border-radius:6px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:700; color:#fff;
  background:var(--cyan); color:#043;
}
.ms-hero{
  border-radius:8px; padding:12px;
  background:linear-gradient(120deg, rgba(124,108,255,.22), rgba(62,230,210,.12));
  display:flex; flex-direction:column; gap:6px; margin-bottom:10px;
}
.ms-h1{ width:64%; height:8px; border-radius:4px; background:rgba(237,239,247,.75); }
.ms-h2{ width:44%; height:6px; border-radius:3px; background:rgba(148,158,196,.4); }
.ms-btn{ width:52px; height:14px; border-radius:7px; background:var(--violet); margin-top:2px; }
.ms-products{ display:flex; gap:8px; }
.ms-p{
  flex:1; height:34px; border-radius:6px 6px 0 0;
  background:rgba(148,158,196,.14);
}

/* Carte paiement */
.pay-card{
  position:relative;
  width:200px; height:118px; border-radius:16px;
  background:linear-gradient(135deg, #1b1f36, #12152a);
  border:1px solid rgba(124,108,255,.3);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
  padding:16px;
  transform:rotate(-4deg);
  transition:transform .5s var(--ease-spring);
}
.bento-card:hover .pay-card{ transform:rotate(0) scale(1.04); }
.pay-chip{
  display:block; width:30px; height:22px; border-radius:5px;
  background:linear-gradient(135deg, #8F7BFF, #3EE6D2);
  opacity:.85; margin-bottom:22px;
}
.pay-num{ font-family:var(--font-mono); font-size:14px; letter-spacing:.14em; color:var(--muted); }
.pay-check{
  position:absolute; top:12px; right:12px;
  width:24px; height:24px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(62,230,210,.16); color:var(--cyan);
  font-size:12px; font-weight:700;
  animation:pulse 2.4s infinite;
}

/* Flux sans stock */
.visual-stock{ flex-direction:column; gap:12px; }
.stock-flow{ display:flex; align-items:center; gap:12px; }
.sf-node{
  font-size:12px; font-weight:600;
  border:1px solid var(--line);
  background:rgba(148,158,196,.07);
  border-radius:10px; padding:8px 14px;
}
.sf-client{ border-color:rgba(62,230,210,.4); color:var(--cyan); background:rgba(62,230,210,.07); }
.sf-arrow{ display:flex; gap:5px; }
.sf-arrow i{
  width:6px; height:6px; border-radius:50%;
  background:var(--violet);
  animation:flow 1.4s infinite;
}
.sf-arrow i:nth-child(2){ animation-delay:.2s; }
.sf-arrow i:nth-child(3){ animation-delay:.4s; }
@keyframes flow{
  0%,100%{ opacity:.25; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1.15); }
}
.sf-caption{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint);
}

/* Bulles support */
.chat-bubbles{ display:flex; flex-direction:column; gap:10px; width:82%; }
.cb{
  font-size:12.5px; line-height:1.45;
  padding:9px 14px; border-radius:14px;
  max-width:85%;
}
.cb-client{
  align-self:flex-start;
  background:rgba(148,158,196,.12);
  border-bottom-left-radius:4px;
}
.cb-brand{
  align-self:flex-end;
  background:linear-gradient(120deg, rgba(124,108,255,.32), rgba(62,230,210,.22));
  border-bottom-right-radius:4px;
  transform:translateY(6px); opacity:.7;
  transition:transform .45s var(--ease-out), opacity .45s;
}
.bento-card:hover .cb-brand{ transform:none; opacity:1; }

/* Barres rapport */
.visual-report{ flex-direction:column; gap:14px; }
.report-bars{
  display:flex; align-items:flex-end; gap:10px;
  height:92px;
}
.report-bars span{
  width:26px; height:var(--v);
  border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg, rgba(124,108,255,.75), rgba(124,108,255,.15));
  transform-origin:bottom;
  transform:scaleY(.25);
  transition:transform .7s var(--ease-out);
}
.report-bars span:last-child{
  background:linear-gradient(180deg, var(--cyan), rgba(62,230,210,.2));
}
.bento-card:hover .report-bars span,
.bento-card.in-view .report-bars span{ transform:scaleY(1); }
.report-bars span:nth-child(2){ transition-delay:.05s; }
.report-bars span:nth-child(3){ transition-delay:.1s; }
.report-bars span:nth-child(4){ transition-delay:.15s; }
.report-bars span:nth-child(5){ transition-delay:.2s; }
.report-bars span:nth-child(6){ transition-delay:.25s; }
.report-bars span:nth-child(7){ transition-delay:.3s; }
.report-badge{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  color:var(--faint);
  border:1px solid var(--line); border-radius:8px; padding:5px 10px;
}

/* ═══════════ MÉTHODE ═══════════ */
.section-method{
  background:
    radial-gradient(60% 45% at 15% 0%, rgba(124,108,255,.06), transparent 70%),
    var(--ink-2);
  border-block:1px solid var(--line-soft);
}
.method-layout{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:72px; align-items:start;
}
.method-sticky{
  position:sticky; top:calc(var(--header-h) + 40px);
}
.method-sticky p{ color:var(--muted); margin:18px 0 28px; max-width:40ch; }
.method-progress{
  width:150px; height:3px; border-radius:3px;
  background:rgba(148,158,196,.14);
  overflow:hidden; margin-bottom:30px;
}
.method-progress-fill{
  display:block; height:100%; width:0%;
  background:var(--grad);
  border-radius:3px;
  transition:width .25s ease-out;
}
.method-steps{ display:flex; flex-direction:column; gap:22px; }
.step-card{
  position:relative;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(20,23,40,.75), rgba(10,12,22,.9));
  padding:34px 36px;
  transition:border-color .4s, transform .4s var(--ease-out), box-shadow .4s;
  opacity:.45; transform:translateY(16px) scale(.985);
}
.step-card.active{
  opacity:1; transform:none;
  border-color:rgba(124,108,255,.4);
  box-shadow:0 24px 60px -30px rgba(124,108,255,.35);
}
.step-num{
  position:absolute; top:26px; right:30px;
  font-family:var(--font-display); font-weight:600;
  font-size:44px; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(148,158,196,.3);
  transition:color .4s, -webkit-text-stroke-color .4s;
}
.step-card.active .step-num{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-stroke:0;
  color:transparent;
}
.step-tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan);
  border:1px solid rgba(62,230,210,.25);
  background:rgba(62,230,210,.06);
  border-radius:8px; padding:5px 10px;
  margin-bottom:16px;
}
.step-card h3{ margin-bottom:12px; font-size:24px; }
.step-card > p{ color:var(--muted); font-size:15px; margin-bottom:18px; max-width:52ch; }
.step-list li{
  position:relative;
  padding-left:24px;
  font-size:14px; color:var(--muted);
  margin-bottom:8px;
}
.step-list li::before{
  content:"";
  position:absolute; left:2px; top:7px;
  width:9px; height:5px;
  border-left:1.8px solid var(--cyan);
  border-bottom:1.8px solid var(--cyan);
  transform:rotate(-45deg);
}

/* ═══════════ PRODUIT (TABS) ═══════════ */
.tabs-nav{
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(148,158,196,.04);
  padding:6px;
  margin-bottom:40px;
}
.tab-btn{
  position:relative; z-index:1;
  padding:16px 20px;
  border-radius:13px;
  text-align:left;
  transition:color .3s;
}
.tab-btn strong{
  display:block; font-family:var(--font-display); font-weight:600; font-size:16.5px;
  color:var(--muted); transition:color .3s;
}
.tab-btn span{ font-size:12.5px; color:var(--faint); }
.tab-btn.active strong{ color:var(--text); }
.tab-btn:hover strong{ color:var(--text); }
.tab-indicator{
  position:absolute; top:6px; bottom:6px; left:6px; z-index:0;
  width:calc((100% - 12px) / 3);
  border-radius:13px;
  background:linear-gradient(160deg, rgba(124,108,255,.2), rgba(124,108,255,.07));
  border:1px solid rgba(124,108,255,.35);
  transition:transform .45s var(--ease-spring);
}
.tab-panels{ position:relative; }
.tab-panel{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:56px; align-items:center;
}
.tab-panel[hidden]{ display:none; }
.tab-panel.active{ animation:panel-in .55s var(--ease-out); }
@keyframes panel-in{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}
.panel-copy h3{ font-size:clamp(22px,2.4vw,30px); margin-bottom:24px; max-width:20ch; }
.check-list li{
  position:relative;
  padding-left:34px;
  margin-bottom:14px;
  color:var(--muted); font-size:15.5px;
}
.check-list li::before{
  content:"";
  position:absolute; left:0; top:1px;
  width:20px; height:20px; border-radius:7px;
  background:rgba(62,230,210,.12);
  border:1px solid rgba(62,230,210,.3);
}
.check-list li::after{
  content:"";
  position:absolute; left:5px; top:7px;
  width:9px; height:5px;
  border-left:1.8px solid var(--cyan);
  border-bottom:1.8px solid var(--cyan);
  transform:rotate(-45deg);
}

/* Mockups des panneaux */
.mock{
  border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(20,23,40,.85), rgba(10,12,22,.95));
  box-shadow:0 34px 70px -30px rgba(0,0,0,.65);
  overflow:hidden;
}
.mock-bar{
  display:flex; gap:6px;
  padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
}
.mock-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(148,158,196,.2); }
.mock-bar span:first-child{ background:rgba(255,110,199,.5); }

.mock-store-hero{
  margin:18px; padding:26px 22px;
  border-radius:14px;
  background:linear-gradient(120deg, rgba(124,108,255,.24), rgba(62,230,210,.13));
  display:flex; flex-direction:column; gap:9px;
}
.msh-title{ width:52%; height:12px; border-radius:6px; background:rgba(237,239,247,.85); }
.msh-sub{ width:36%; height:8px; border-radius:4px; background:rgba(148,158,196,.45); }
.msh-cta{
  align-self:flex-start; margin-top:6px;
  font-size:11.5px; font-weight:700; color:#fff;
  background:var(--violet);
  border-radius:999px; padding:6px 16px;
}
.mock-store-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:12px; padding:0 18px 20px;
}
.msg-card{
  border:1px solid var(--line-soft);
  border-radius:12px; padding:9px;
  display:flex; flex-direction:column; gap:7px;
  transition:transform .35s var(--ease-out), border-color .35s;
}
.msg-card:hover{ transform:translateY(-4px); border-color:rgba(124,108,255,.4); }
.msg-img{ height:64px; border-radius:8px; }
.msg-img.i1{ background:linear-gradient(135deg, #2a2f52, #454b7d); }
.msg-img.i2{ background:linear-gradient(135deg, #173f41, #2a6b64); }
.msg-img.i3{ background:linear-gradient(135deg, #452a52, #7d4b6e); }
.msg-line{ width:70%; height:6px; border-radius:3px; background:rgba(148,158,196,.3); }
.msg-price{ font-family:var(--font-mono); font-size:11.5px; color:var(--cyan); }

.mock-orders{ padding-bottom:10px; }
.order-row{
  display:grid;
  grid-template-columns:64px 1fr 90px 92px;
  align-items:center; gap:12px;
  padding:15px 20px;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;
  transition:background-color .25s;
}
.order-row:hover{ background:rgba(148,158,196,.05); }
.order-row:last-child{ border-bottom:none; }
.or-id{ font-family:var(--font-mono); font-size:12px; color:var(--faint); }
.or-price{ font-family:var(--font-mono); font-size:12.5px; text-align:right; }
.or-status{
  font-size:11px; font-weight:700; text-align:center;
  border-radius:8px; padding:5px 0;
}
.s-paid{ color:#B7A6FF; background:rgba(124,108,255,.14); }
.s-prep{ color:#FFC46B; background:rgba(255,177,80,.12); }
.s-ship{ color:#6BC8FF; background:rgba(80,180,255,.12); }
.s-del{ color:var(--cyan); background:rgba(62,230,210,.1); }

.mock-finance{ padding-bottom:18px; }
.fin-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px; color:var(--muted);
}
.fin-head strong{ font-family:var(--font-mono); font-size:21px; color:var(--text); font-weight:500; }
.fin-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 22px;
  font-size:13.5px; color:var(--muted);
}
.fin-row span:last-child{ font-family:var(--font-mono); font-size:12.5px; }
.fin-total{
  border-top:1px solid var(--line-soft);
  margin-top:6px; padding-top:16px;
  color:var(--text); font-weight:600;
}
.fin-total span:last-child{ color:var(--cyan); }
.fin-status{
  display:flex; align-items:center; gap:9px;
  margin:14px 22px 0;
  font-size:12px; color:var(--cyan);
  background:rgba(62,230,210,.07);
  border:1px solid rgba(62,230,210,.2);
  border-radius:10px; padding:10px 14px;
}

/* ═══════════ TÉMOIGNAGES ═══════════ */
.section-quotes{ overflow:hidden; }
.quotes{ position:relative; }
.quotes-track{
  display:flex; gap:22px;
  cursor:grab;
  transition:transform .65s var(--ease-out);
}
.quotes-track.dragging{ cursor:grabbing; transition:none; }
.quote-card{
  flex:0 0 min(520px, 88vw);
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(20,23,40,.7), rgba(10,12,22,.9));
  padding:36px;
  display:flex; flex-direction:column; gap:26px;
  user-select:none;
}
.quote-card blockquote{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(17px, 1.8vw, 21px); line-height:1.42;
  letter-spacing:-.005em;
}
.quote-card figcaption{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.quote-card figcaption strong{ display:block; font-size:14.5px; }
.quote-card figcaption span:not(.avatar):not(.quote-metric){ font-size:12.5px; color:var(--faint); }
.quote-card figcaption div{ flex:1; }
.quote-metric{
  font-family:var(--font-mono); font-size:13px; line-height:1.35; text-align:right;
  color:var(--cyan);
}
.quote-metric small{ color:var(--faint); font-size:10.5px; }
.quotes-nav{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin-top:36px;
}
.quote-arrow{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted);
  transition:border-color .3s, color .3s, background-color .3s, transform .3s var(--ease-out);
}
.quote-arrow:hover{ border-color:rgba(124,108,255,.5); color:var(--text); background:rgba(124,108,255,.08); transform:scale(1.06); }
.quote-arrow svg{ width:16px; height:16px; }
.quotes-dots{ display:flex; gap:8px; }
.quotes-dots button{
  width:8px; height:8px; border-radius:50%;
  background:rgba(148,158,196,.25);
  transition:width .3s var(--ease-out), background-color .3s;
}
.quotes-dots button.active{
  width:26px; border-radius:5px;
  background:var(--violet);
}

/* ═══════════ TARIFS ═══════════ */
.section-pricing{
  background:
    radial-gradient(55% 40% at 85% 0%, rgba(62,230,210,.05), transparent 70%),
    var(--ink-2);
  border-block:1px solid var(--line-soft);
}
.pricing-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px;
  align-items:stretch;
}
.plan{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(170deg, rgba(18,21,36,.65), rgba(9,11,20,.85));
  padding:34px 30px;
  transition:transform .45s var(--ease-out), border-color .45s, box-shadow .45s;
}
.plan:hover{ transform:translateY(-6px); border-color:rgba(148,158,196,.3); }
.plan-featured{
  border-color:rgba(124,108,255,.45);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124,108,255,.14), transparent 60%),
    linear-gradient(170deg, rgba(22,25,44,.85), rgba(10,12,22,.95));
  box-shadow:0 30px 70px -30px rgba(124,108,255,.4);
}
.plan-featured:hover{ border-color:rgba(124,108,255,.7); }
.plan-badge{
  position:absolute; top:-13px; left:50%;
  transform:translateX(-50%);
  font-size:11.5px; font-weight:700; letter-spacing:.04em; white-space:nowrap;
  color:#fff;
  background:var(--grad);
  border-radius:999px; padding:6px 16px;
  box-shadow:0 8px 20px -6px rgba(124,108,255,.6);
}
.plan-name{
  font-family:var(--font-display); font-weight:600; font-size:21px;
  display:block; margin-bottom:10px;
}
.plan-desc{ font-size:13.5px; color:var(--muted); line-height:1.55; min-height:44px; }
.plan-price{
  display:flex; align-items:baseline; gap:12px;
  padding:22px 0;
  margin:20px 0 22px;
  border-block:1px solid var(--line-soft);
}
.plan-price strong{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(30px, 3vw, 40px); letter-spacing:-.02em;
}
.plan-price span{ font-size:12px; color:var(--faint); line-height:1.4; }
.plan-list{ flex:1; margin-bottom:28px; }
.plan-list li{
  position:relative;
  padding-left:26px;
  font-size:14px; color:var(--muted);
  margin-bottom:11px;
}
.plan-list li::before{
  content:"";
  position:absolute; left:2px; top:7px;
  width:9px; height:5px;
  border-left:1.8px solid var(--violet-2);
  border-bottom:1.8px solid var(--violet-2);
  transform:rotate(-45deg);
}
.plan-featured .plan-list li::before{
  border-color:var(--cyan);
}
.pricing-note{
  text-align:center;
  font-size:13.5px; color:var(--faint);
  margin-top:36px;
}

/* Bande d'offre site vitrine + hébergement */
.offer-strip{
  display:grid; grid-template-columns:auto 1fr auto;
  gap:28px; align-items:center;
  margin-top:26px;
  border:1px solid rgba(62,230,210,.3);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(80% 120% at 0% 50%, rgba(62,230,210,.1), transparent 60%),
    linear-gradient(170deg, rgba(18,21,36,.7), rgba(9,11,20,.85));
  padding:28px 32px;
}
.offer-strip-head h3{ font-size:clamp(18px,2vw,22px); margin-top:4px; }
.offer-strip-points{ display:flex; flex-direction:column; gap:7px; }
.offer-strip-points li{
  position:relative; padding-left:24px;
  font-size:14px; color:var(--muted);
}
.offer-strip-points li::before{
  content:"";
  position:absolute; left:2px; top:7px;
  width:9px; height:5px;
  border-left:1.8px solid var(--cyan);
  border-bottom:1.8px solid var(--cyan);
  transform:rotate(-45deg);
}
.offer-strip-points b{ color:var(--text); }
.offer-strip .btn{ white-space:nowrap; }
@media (max-width: 1080px){
  .offer-strip{ grid-template-columns:1fr; gap:18px; }
}

/* ═══════════ FAQ ═══════════ */
.faq-layout{
  display:grid; grid-template-columns:.8fr 1.2fr;
  gap:72px; align-items:start;
}
.faq-intro{ position:sticky; top:calc(var(--header-h) + 40px); }
.faq-intro p{ color:var(--muted); margin:18px 0 26px; max-width:32ch; }
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(170deg, rgba(18,21,36,.6), rgba(9,11,20,.8));
  overflow:hidden;
  transition:border-color .35s;
}
.faq-item[open]{ border-color:rgba(124,108,255,.35); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  list-style:none; cursor:pointer;
  padding:22px 26px;
  font-family:var(--font-display); font-weight:500; font-size:17px;
  transition:color .25s;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--violet-2); }
.faq-ico{
  position:relative; flex-shrink:0;
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--line);
  transition:transform .4s var(--ease-out), border-color .3s, background-color .3s;
}
.faq-ico::before,.faq-ico::after{
  content:""; position:absolute; top:50%; left:50%;
  width:10px; height:1.6px; border-radius:2px;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.faq-ico::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .35s var(--ease-out); }
.faq-item[open] .faq-ico{ transform:rotate(45deg); border-color:rgba(124,108,255,.5); background:rgba(124,108,255,.1); }
.faq-body{ padding:0 26px; overflow:hidden; }
.faq-body p{ color:var(--muted); font-size:15px; padding-bottom:24px; max-width:62ch; }

/* ═══════════ CTA FINAL ═══════════ */
.cta-final{
  position:relative;
  padding:130px 0 140px;
  overflow:hidden;
  text-align:center;
}
.cta-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(50% 55% at 50% 110%, rgba(124,108,255,.22), transparent 70%),
    radial-gradient(35% 40% at 30% 100%, rgba(62,230,210,.1), transparent 70%);
  pointer-events:none;
}
.cta-inner{ position:relative; max-width:640px; margin-inline:auto; }
.cta-inner h2{ margin-bottom:20px; }
.cta-inner > p{ color:var(--muted); margin-bottom:36px; }
.cta-form{
  display:flex; gap:12px;
  max-width:520px; margin-inline:auto;
  padding:8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(148,158,196,.05);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .3s, box-shadow .3s;
}
.cta-form:focus-within{
  border-color:rgba(124,108,255,.5);
  box-shadow:0 0 0 4px rgba(124,108,255,.12);
}
.cta-form input{
  flex:1; min-width:0;
  background:none; border:none; outline:none;
  color:var(--text); font:inherit; font-size:15px;
  padding:0 10px 0 20px;
}
.cta-form input::placeholder{ color:var(--faint); }
.cta-form .btn{ flex-shrink:0; padding:13px 22px; font-size:14px; }
.cta-form-note{ font-size:12.5px; color:var(--faint); margin-top:16px; min-height:1.4em; transition:color .3s; }
.cta-form-note.ok{ color:var(--cyan); }
.cta-form-note.err{ color:var(--rose); }
.cta-alt{ margin-top:26px; font-size:14px; color:var(--faint); }
.cta-alt a{
  color:var(--violet-2); font-weight:600;
  border-bottom:1px solid rgba(124,108,255,.35);
  transition:color .25s, border-color .25s;
}
.cta-alt a:hover{ color:var(--cyan); border-color:rgba(62,230,210,.5); }

/* ═══════════ CATALOGUE (produits gérés depuis l'admin) ═══════════ */
.products-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
}
.product-card{
  position:relative;
  display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg, rgba(18,21,36,.7), rgba(9,11,20,.85));
  padding:26px;
  transition:transform .4s var(--ease-out), border-color .4s;
}
.product-card:hover{ transform:translateY(-4px); border-color:rgba(124,108,255,.4); }
.product-badge{
  align-self:flex-start;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--cyan);
  border:1px solid rgba(62,230,210,.3);
  background:rgba(62,230,210,.07);
  border-radius:8px; padding:4px 10px;
}
.product-card h3{ font-size:19px; }
.product-desc{ font-size:14px; color:var(--muted); flex:1; }
.product-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:6px;
}
.product-price{
  font-family:var(--font-mono); font-weight:500; font-size:16px;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ═══════════ AFFILIATION ═══════════ */
.affil-band{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border:1px solid rgba(124,108,255,.3);
  background:linear-gradient(120deg, rgba(124,108,255,.12), rgba(62,230,210,.05));
  border-radius:var(--radius-lg);
  padding:22px 28px;
  margin-bottom:28px;
}
.affil-band strong{ display:block; font-family:var(--font-display); font-size:16px; }
.affil-band span{ font-size:13.5px; color:var(--muted); }
.affil-band .btn{ flex-shrink:0; }

.affil-modal{
  position:fixed; inset:0; z-index:160;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,6,12,.75);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:20px;
}
.affil-modal[hidden]{ display:none; }
.affil-card{
  position:relative;
  width:min(480px, 100%);
  max-height:calc(100svh - 40px); overflow-y:auto;
  border:1px solid rgba(124,108,255,.35);
  border-radius:var(--radius-lg);
  background:linear-gradient(165deg, rgba(20,23,40,.98), rgba(10,12,22,.99));
  box-shadow:0 50px 110px -40px rgba(0,0,0,.85);
  padding:32px;
}
.affil-card h3{ font-size:clamp(21px,2.4vw,26px); margin-bottom:10px; }
.affil-sub{ font-size:13.5px; color:var(--muted); margin-bottom:22px; }
.affil-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:9px;
  color:var(--muted); font-size:14px;
  transition:background-color .25s, color .25s;
}
.affil-close:hover{ background:rgba(148,158,196,.12); color:var(--text); }
.affil-field{ display:block; margin-bottom:14px; }
.affil-field span{
  display:block;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin-bottom:7px;
}
.affil-field input, .affil-field textarea{
  width:100%;
  background:rgba(148,158,196,.06);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text); font:inherit; font-size:14.5px;
  padding:12px 15px;
  resize:vertical;
}
.affil-field input:focus, .affil-field textarea:focus{
  outline:none;
  border-color:rgba(124,108,255,.55);
  box-shadow:0 0 0 4px rgba(124,108,255,.12);
}
.affil-note{ min-height:1.3em; font-size:13px; margin:4px 0 12px; }
.affil-note.ok{ color:var(--cyan); }
.affil-note.err{ color:var(--rose); }

/* ═══════════ FOOTER ═══════════ */
.site-footer{
  position:relative;
  border-top:1px solid var(--line-soft);
  background:var(--ink-2);
  padding:70px 0 0;
  overflow:hidden;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr .8fr .9fr .8fr;
  gap:40px;
  padding-bottom:56px;
}
.footer-brand p{
  font-size:14px; color:var(--faint);
  margin-top:16px; max-width:34ch; line-height:1.6;
}
.footer-title{
  display:block;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint);
  margin-bottom:16px;
}
.footer-col{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{
  font-size:14.5px; color:var(--muted); width:fit-content;
  transition:color .25s, transform .25s var(--ease-out);
}
.footer-col a:hover{ color:var(--text); transform:translateX(3px); }
.footer-plain{ font-size:14.5px; color:var(--muted); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:24px 0;
  border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--faint);
}
.back-top{ transition:color .25s; }
.back-top:hover{ color:var(--text); }
.footer-wordmark{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(70px, 14vw, 210px);
  line-height:.86; text-align:center; letter-spacing:.02em;
  background:linear-gradient(180deg, rgba(148,158,196,.14), rgba(148,158,196,0));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  user-select:none; pointer-events:none;
  margin-top:10px;
  transform:translateY(12%);
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1080px){
  .hero-layout{ grid-template-columns:1fr; gap:70px; }
  .hero{ min-height:0; }
  .hero-visual{ max-width:640px; margin-inline:auto; }
  .float-card-pay{ left:-8px; }
  .float-card-ship{ left:-12px; }
  .method-layout{ grid-template-columns:1fr; gap:48px; }
  .method-sticky{ position:static; }
  .faq-layout{ grid-template-columns:1fr; gap:48px; }
  .faq-intro{ position:static; }
  .tab-panel{ grid-template-columns:1fr; gap:40px; }
  .bento-card, .bento-wide{ grid-column:span 3; }
  .bento-card:last-child{ grid-column:span 6; }
}
@media (max-width: 760px){
  body{ font-size:15.5px; }
  .nav-desktop{ display:none; }
  .header-actions .btn-ghost{ display:none; }
  .header-actions .btn-primary{ display:none; }
  .burger{ display:block; }
  .section{ padding:78px 0; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); gap:34px 16px; }
  .bento-card, .bento-wide{ grid-column:span 6; }
  .pricing-grid{ grid-template-columns:1fr; gap:26px; }
  .plan-featured{ order:-1; }
  .tabs-nav{ grid-template-columns:1fr; gap:4px; }
  .tab-indicator{ display:none; }
  .tab-btn.active{ background:rgba(124,108,255,.14); border:1px solid rgba(124,108,255,.3); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .float-card{ display:none; }
  .order-toasts{ right:8px; bottom:8px; }
  .cta-form{ flex-direction:column; border-radius:22px; gap:10px; }
  .cta-form input{ padding:14px 16px; }
  .cta-form .btn{ width:100%; }
  .hero-scroll-hint{ display:none; }
  .step-card{ padding:26px 22px; }
  .step-num{ font-size:34px; top:22px; right:22px; }
  .quote-card{ padding:26px; }
  .hero-actions .btn{ width:100%; }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html{ scroll-behavior:auto; }
  .hero-title .line > span{ transform:none; }
  main > section:not(.hero) [data-reveal]{ opacity:1; transform:none; }
  .hero [data-reveal]{ opacity:1; transform:none; animation:none; }
  .hero-visual{ opacity:1; animation:none; }
  .spark-line{ stroke-dashoffset:0; }
  .spark-area,.spark-tip{ opacity:1; }
  .report-bars span{ transform:scaleY(1); }
  .step-card{ opacity:1; transform:none; }
  .marquee-track{ animation:none; }
  .cursor-dot,.cursor-ring{ display:none; }
}