:root{
  /* ── Mode jour (défaut) ── */
  --crust:#faf6ef;--base:#f3ebdd;--surface:#ffffff;--card:#ffffff;--card2:#faf4ea;
  --ember:#a8460f;--ember2:#8a3a0c;--ember-glow:rgba(168,70,15,.22);
  --ember-dim:rgba(168,70,15,.09);--ember-border:rgba(168,70,15,.28);
  --sand:#2a2015;--sand2:#5c4a38;--fog:#6b5a44;--muted:#9c8a72;
  --green:#2f7a4f;--blue:#2b6cb0;
  --border:rgba(168,70,15,.13);--border2:rgba(168,70,15,.26);
  --on-dark:#f7f2ea;
  --ember-btn:#e07b35;--ember-btn2:#c4621e;
  --grid-tint:rgba(168,70,15,.05);--glow-tint:rgba(168,70,15,.10);--glow-tint2:rgba(168,70,15,.05);
  --font:'DM Sans',system-ui,sans-serif;
  --head:'Syne',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r:10px;--r-sm:8px;--r-xs:6px;
  --ease:cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  /* ── Mode nuit (au choix, via le bouton) ── */
  --crust:#0c0a08;--base:#120d09;--surface:#1a130c;--card:#1f160d;--card2:#271c10;
  --ember:#e07b35;--ember2:#c4621e;--ember-glow:rgba(224,123,53,.35);
  --ember-dim:rgba(224,123,53,.16);--ember-border:rgba(224,123,53,.36);
  --sand:#ede0cc;--sand2:#c4b49e;--fog:#8a7358;--muted:#4a3a26;
  --green:#5ec98f;--blue:#4a9eff;
  --border:rgba(224,123,53,.14);--border2:rgba(224,123,53,.24);
  --on-dark:#f7f2ea;
  --grid-tint:rgba(224,123,53,.045);--glow-tint:rgba(224,123,53,.17);--glow-tint2:rgba(224,123,53,.09);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);background:var(--crust);color:var(--sand);min-height:100vh;
  background-image:
    linear-gradient(var(--grid-tint) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-tint) 1px, transparent 1px),
    radial-gradient(ellipse 900px 500px at 12% -8%, var(--glow-tint), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 25%, var(--glow-tint2), transparent 60%);
  background-size:28px 28px,28px 28px,auto,auto;
  background-attachment:fixed;}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:100;height:56px;
  background:rgba(12,10,8,.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:2px solid var(--ember);display:flex;align-items:center;padding:0 20px;}
.topbar-inner{max-width:1140px;margin:0 auto;width:100%;display:flex;align-items:center;gap:32px;}
.topbar-logo{font-family:var(--head);font-weight:800;font-size:1.15rem;
  background:linear-gradient(120deg,var(--sand),var(--ember) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-decoration:none;display:flex;align-items:center;gap:6px;flex-shrink:0;}
.topbar-logo .dot{color:var(--ember);-webkit-text-fill-color:var(--ember);}
.topbar-nav{display:flex;gap:22px;}
.topbar-nav a{color:var(--sand2);text-decoration:none;font-size:.84rem;font-weight:600;transition:color .2s;}
.topbar-nav a:hover{color:var(--ember);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.topbar-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-sm);
  border:1px solid var(--border2);background:transparent;color:var(--sand2);
  font-size:.82rem;font-family:var(--font);cursor:pointer;text-decoration:none;transition:all .2s;}
.topbar-btn:hover{border-color:var(--ember);color:var(--ember);}
.topbar-btn.primary{background:linear-gradient(120deg,var(--ember-btn2),var(--ember-btn));
  border-color:transparent;color:#0c0a08;font-weight:700;box-shadow:0 4px 14px rgba(224,123,53,.28);}
.topbar-btn.primary:hover{filter:brightness(1.08);box-shadow:0 4px 18px rgba(224,123,53,.4);}

.theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--border2);
  background:transparent;color:var(--sand2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;flex-shrink:0;}
.theme-toggle:hover{border-color:var(--ember);color:var(--ember);}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .icon-moon{display:none;}
[data-theme="dark"] .theme-toggle .icon-sun{display:none;}
[data-theme="dark"] .theme-toggle .icon-moon{display:block;}

/* ── LAYOUT ── */
.layout{max-width:1140px;margin:0 auto;padding:0 20px;}

/* ── HERO ── */
.hero{padding:56px 0 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.eyebrow{display:inline-flex;font-family:var(--mono);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:1.2px;color:var(--ember);
  border:1px solid var(--border2);border-radius:var(--r-xs);padding:5px 12px;margin-bottom:20px;}
.hero h1{font-family:var(--head);font-weight:800;letter-spacing:-.01em;
  font-size:clamp(30px,3.6vw,44px);line-height:1.12;color:var(--sand);}
.hero h1 .accent{color:var(--ember);}
.hero p{color:var(--sand2);font-size:16px;line-height:1.65;max-width:480px;margin:20px 0 28px;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;}
.btn-primary{background:linear-gradient(120deg,var(--ember-btn2),var(--ember-btn));color:#0c0a08;
  font-weight:700;font-size:.92rem;padding:13px 22px;border-radius:var(--r-sm);text-decoration:none;
  box-shadow:0 4px 14px rgba(224,123,53,.28);transition:filter .2s,box-shadow .2s;}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 4px 18px rgba(224,123,53,.4);}
.btn-ghost{border:1px solid var(--border2);color:var(--sand2);font-size:.92rem;font-weight:600;
  padding:13px 22px;border-radius:var(--r-sm);text-decoration:none;transition:all .2s;}
.btn-ghost:hover{border-color:var(--ember);color:var(--ember);}

/* ── PROOF CARD (élément signature) ── */
.proof-card{background:linear-gradient(135deg,var(--card),var(--surface));
  border:1px solid var(--border2);border-left:4px solid var(--ember);border-radius:var(--r);
  overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.4);}
.proof-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--border);}
.proof-dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.proof-dot.a{background:#e05f4f;}.proof-dot.b{background:#f5c842;}.proof-dot.c{background:var(--green);}
.proof-file{margin-left:6px;font-family:var(--mono);font-size:.72rem;color:var(--fog);}
.proof-code{font-family:var(--mono);font-size:.8rem;line-height:1.7;padding:16px;color:var(--sand);
  white-space:pre;overflow-x:auto;}
.tok-kw{color:var(--ember);}.tok-fn{color:var(--sand2);}.tok-num{color:var(--ember2);}
.cursor{color:var(--ember);animation:blink 1s step-start infinite;}
@keyframes blink{50%{opacity:0;}}
.proof-result{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--border);
  background:var(--ember-dim);}
.proof-check{color:var(--green);font-weight:700;}
.proof-text{color:var(--sand2);font-size:.76rem;flex:1;}
.proof-score{font-family:var(--mono);color:var(--ember);font-size:.78rem;font-weight:700;}

/* ── HERO : stat sociale + visuel enrichi ── */
.hero-stat{display:flex;align-items:center;gap:10px;margin-top:18px;}
.hero-stat-avatars{display:flex;}
.hero-stat-avatars span{width:24px;height:24px;border-radius:50%;background:var(--card2);
  border:2px solid var(--crust);margin-left:-8px;display:flex;align-items:center;justify-content:center;
  font-size:9px;color:var(--ember);font-weight:700;}
.hero-stat-avatars span:first-child{margin-left:0;}
.hero-stat span[data-i18n-count]{font-size:.78rem;color:var(--fog);}

.hero-visual{position:relative;}
.floating-card{position:absolute;top:calc(100% + 14px);right:-10px;background:var(--card2);
  border:1px solid var(--border2);border-radius:var(--r);padding:11px 13px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);display:flex;align-items:center;gap:9px;
  max-width:190px;}
.fc-icon{width:32px;height:32px;border-radius:var(--r);background:var(--ember-dim);
  border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--ember);}
.fc-icon svg{width:16px;height:16px;}
.fc-title{font-size:.76rem;font-weight:700;color:var(--sand);}
.fc-sub{font-size:.68rem;color:var(--fog);}

/* ── MÉTRIQUES (remplace tout bandeau de logos non autorisé) ── */
.metrics-bar{display:flex;justify-content:space-between;gap:16px;padding:26px 0;
  margin:8px 0 4px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.metric{text-align:center;flex:1;}
.metric-num{font-family:var(--head);font-weight:800;font-size:1.5rem;color:var(--ember);}
.metric-lbl{font-size:.74rem;color:var(--fog);margin-top:2px;}

/* ── SECTION HEADERS ── */
.section{padding:44px 0;}
.section-head{display:flex;align-items:baseline;gap:10px;margin-bottom:22px;}
.section-tag{font-family:var(--mono);font-size:.68rem;color:var(--ember);letter-spacing:1px;}
.section-title{font-family:var(--head);font-weight:700;font-size:clamp(20px,2.4vw,26px);color:var(--sand);}
.section-rule{flex:1;height:1px;background:var(--border2);}

/* ── ÉTAPES : grille "stat-hero" à séparateurs 1px ── */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border2);
  border:1px solid var(--border2);}
.step-item{background:var(--surface);padding:20px;position:relative;overflow:hidden;}
.step-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ember);}
.step-lbl{font-family:var(--mono);font-size:.64rem;color:var(--fog);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:10px;}
.step-item h3{font-family:var(--head);font-weight:700;font-size:1rem;color:var(--sand);margin-bottom:8px;}
.step-item p{color:var(--sand2);font-size:.85rem;line-height:1.55;}

/* ── GRILLE DE FONCTIONNALITÉS (grammaire "c-card") ── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.feat-card{background:linear-gradient(135deg,var(--card),var(--surface));
  border:1px solid var(--border2);border-left:4px solid var(--ember);border-radius:var(--r);
  padding:16px 16px 16px 18px;transition:all .18s var(--ease);}
.feat-card:hover{box-shadow:0 0 0 1px var(--ember),0 12px 30px rgba(224,123,53,.16);transform:translateX(2px);}
.feat-tag{display:inline-flex;font-family:var(--mono);font-size:.6rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;padding:2px 8px;border-radius:2px;
  background:var(--ember-dim);color:var(--ember);border:1px solid var(--border2);margin-bottom:10px;}
.feat-card h3{font-family:var(--head);font-weight:700;font-size:.95rem;color:var(--sand);margin-bottom:6px;}
.feat-card p{color:var(--sand2);font-size:.82rem;line-height:1.5;}

/* ── PORTES D'ENTRÉE : 3 profils, 3 chemins ── */
.doors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.door-card{background:linear-gradient(135deg,var(--card),var(--surface));
  border:1px solid var(--border2);border-top:3px solid var(--ember);border-radius:var(--r);
  padding:20px 18px;text-decoration:none;display:flex;flex-direction:column;gap:8px;
  transition:all .18s var(--ease);}
.door-card:hover{box-shadow:0 0 0 1px var(--ember),0 14px 32px rgba(224,123,53,.18);
  transform:translateY(-2px);}
.door-tag{display:inline-flex;align-self:flex-start;font-family:var(--mono);font-size:.62rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 9px;border-radius:2px;
  background:var(--ember-dim);color:var(--ember);border:1px solid var(--border2);}
.door-card h3{font-family:var(--head);font-weight:700;font-size:1.02rem;color:var(--sand);
  margin-top:4px;}
.door-card p{color:var(--sand2);font-size:.83rem;line-height:1.5;flex:1;}
.door-cta{font-family:var(--mono);font-size:.76rem;font-weight:700;color:var(--ember);}

/* ── COMPARAISON : deux cartes miroir ── */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.compare-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);
  padding:20px;}
.compare-card.old{border-left:4px solid var(--muted);}
.compare-card.new{border-left:4px solid var(--green);}
.compare-lbl{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:1px;
  margin-bottom:10px;}
.compare-card.old .compare-lbl{color:var(--fog);}
.compare-card.new .compare-lbl{color:var(--green);}
.compare-card.old p{color:var(--fog);font-style:italic;text-decoration:line-through;
  text-decoration-color:var(--muted);font-size:.92rem;}
.compare-card.new p{color:var(--sand);font-family:var(--head);font-weight:700;font-size:1rem;line-height:1.4;}

/* ── CTA FINAL ── */
.final-cta{margin:44px 0;padding:36px;border-radius:var(--r);
  background:linear-gradient(120deg,var(--ember-btn2),var(--ember-btn));
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.final-cta h2{font-family:var(--head);font-weight:800;font-size:clamp(19px,2.6vw,26px);color:#0c0a08;}
.final-cta .btn-dark{background:#0c0a08;color:var(--on-dark);font-weight:700;font-size:.92rem;
  padding:13px 24px;border-radius:var(--r-sm);text-decoration:none;white-space:nowrap;}

/* ── FOOTER ── */
.foot{padding:22px 0;text-align:center;color:var(--muted);font-size:.78rem;
  border-top:1px solid var(--border);}

/* ── FADE-IN (léger, pas de translation lourde) ── */
.fade{opacity:0;animation:fadeIn .5s ease forwards;}
.fade.d1{animation-delay:.06s;}.fade.d2{animation-delay:.12s;}.fade.d3{animation-delay:.18s;}
@keyframes fadeIn{to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.fade{animation:none;opacity:1;}.cursor{animation:none;}}

/* ── RESPONSIVE ── */
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:32px;}
  .steps-grid,.feat-grid,.compare-grid,.doors-grid{grid-template-columns:1fr;}
  .topbar-nav{display:none;}
  .floating-card{position:static;margin-top:14px;max-width:none;}
  .metrics-bar{flex-wrap:wrap;}
  .metric{flex:1 1 40%;}
}
@media (max-width:480px){
  .layout{padding:0 16px;}
  .final-cta{flex-direction:column;align-items:flex-start;}
  .topbar{padding:0 12px;}
  .topbar-inner{gap:8px;}
  .topbar-right{gap:5px;}
  .topbar-btn{padding:7px 10px;font-size:.76rem;}
  .theme-toggle{width:32px;height:32px;flex-shrink:0;}
  .theme-toggle svg{width:15px;height:15px;}
  .topbar-logo{font-size:1rem;flex-shrink:0;}
}