/* ═══════════════════════════════════════════════════════════
   base.css — variables, reset, utilitaires, transitions, fx
   Chargé en premier. Aucune dépendance vers d'autres CSS.
   ═══════════════════════════════════════════════════════════ */

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

/* ── V1 palette (legacy, encore référencée via var(--blue), var(--ink), …) */
:root{
  --bg:#fafafa;--white:#fff;--ink:#1a1a2e;--ink2:#3d3d5c;--ink3:#6b7280;--ink4:#9ca3af;
  --border:#e5e7eb;
  --blue:#3484fd;--bluel:#eff6ff;--bluem:#93c5fd;
  --violet:#8b5cf6;--violetl:#f5f3ff;--violetm:#ddd6fe;
  --green:#059669;--greenl:#ecfdf5;--greenm:#a7f3d0;
  --red:#dc2626;--redl:#fef2f2;--redm:#fecaca;
  --active:#3484fd;--activel:#eef4ff;--activem:#c0d6fd;
  --success:#22c55e;
  --sh1:0 1px 4px rgba(0,0,0,.06);--sh2:0 4px 20px rgba(0,0,0,.09);--sh3:0 12px 48px rgba(0,0,0,.14);
}

/* ── V2 reskin palette + piliers (« Performance. ») */
:root{
  --rs-ink:#0f172a;
  --rs-ink2:#475569;
  --rs-ink3:#64748b;
  --rs-ink4:#94a3b8;
  --rs-ink5:#cbd5e1;
  --rs-border:#e5e7eb;
  --rs-border-soft:#eef0f3;
  --rs-bg:#fafafa;
  --rs-bg-soft:#f8fafc;
  --rs-white:#ffffff;
  /* Accent marque (violet) */
  --rs-violet:#7c3aed;
  --rs-violet-dark:#6d28d9;
  --rs-violet-l:#f5f3ff;
  --rs-violet-ml:#ede9fe;
  --rs-violet-m:#ddd6fe;
  /* Piliers (utilisés ponctuellement sur hero / tab actif / progress) */
  --pil-bases:#e11d48;       --pil-bases-l:#fff1f2;      --pil-bases-m:#fecdd3;
  --pil-conversion:#7c3aed;  --pil-conversion-l:#f5f3ff; --pil-conversion-m:#ddd6fe;
  --pil-seo:#059669;         --pil-seo-l:#ecfdf5;        --pil-seo-m:#a7f3d0;
  --pil-social:#6366f1;      --pil-social-l:#eef2ff;     --pil-social-m:#c7d2fe;
  --pil-fideliser:#d97706;   --pil-fideliser-l:#fffbeb;  --pil-fideliser-m:#fde68a;
}

/* ── body */
body{font-family:'Poppins',sans-serif;background:var(--bg);color:var(--ink);overflow:hidden;height:100vh}

/* ── Icônes SVG (line) — taille & comportement */
.ico{width:20px;height:20px;stroke-width:1.8;flex-shrink:0}
.ico-14{width:14px;height:14px}
.ico-16{width:16px;height:16px}
.ico-18{width:18px;height:18px}
.ico-22{width:22px;height:22px}

/* ── Pages — transition horizontale entre écrans */
.page{position:fixed;inset:0;opacity:0;pointer-events:none;transform:translateX(24px);transition:opacity .35s ease,transform .35s ease;overflow:hidden}
.page.active{opacity:1;pointer-events:all;transform:translateX(0)}
.page.out-left{opacity:0;transform:translateX(-24px);pointer-events:none}

/* wf-loading : quand on reload avec une session localStorage, on cache
   tout le temps que boot.js restore la vue attendue (evite le flash de
   la landing). Fond blanc neutre pendant la petite attente. */
html.wf-loading{background:#fafafa}
html.wf-loading .page{visibility:hidden}

/* ── FX — toast, xp pop, confetti */
.toast{position:fixed;bottom:5.5rem;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;border-radius:100px;padding:.55rem 1.1rem;font-size:12px;font-weight:500;box-shadow:var(--sh3);opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;z-index:1000}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.sticky{background:linear-gradient(135deg,#7c3aed,#6d28d9);padding:1rem 1.6rem;font-size:14px;font-weight:600;box-shadow:0 14px 38px rgba(124,58,237,.4);white-space:normal;max-width:520px;line-height:1.45;border-radius:14px}
.toast.sticky.clickable{cursor:pointer;pointer-events:auto;transition:transform .15s,box-shadow .15s}
.toast.sticky.clickable:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 20px 44px rgba(124,58,237,.5)}
@keyframes seoSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.xp-pop{position:fixed;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:800;pointer-events:none;z-index:1001;opacity:0}
@keyframes xpFloat{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-45px) scale(1.08)}}
.xp-pop.go{animation:xpFloat .9s ease forwards}
.celebrate{position:fixed;inset:0;pointer-events:none;z-index:9999}
@keyframes cfall{to{opacity:0;transform:translateY(80vh) rotate(720deg)}}
.cbit{position:absolute;border-radius:3px;animation:cfall 1.5s ease forwards}

/* ── Animations globales partagées (landing hero tag + dashboard CTA) */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes btnPulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  50%{transform:scale(1.03);box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
@keyframes btnShine{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}