/* ═══════════════════════════════════════════════════════════════════
   V2 PUBLIC SKIN — Lot 1 du rollout DA « Mur des Cotes » (28 juil 2026)
   Contrat : DESIGN_SYSTEM_V2.md. Chargée APRÈS le <style> inline de
   chaque page publique (méthode, track-record, founder, outils, blog) :
   elle redéfinit les tokens des DEUX familles de pages et pose le skin
   (fond grille+grain, display en dégradé, CTA verre-encre, hairlines).
   Le contenu/SEO des pages ne change pas — uniquement la présentation.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* famille A : methode.html, blog/*, outils/* */
  --bg: #06080F;
  --bg2: #0E1424;
  --bg3: #151D33;
  --el: #151D33;
  --border: rgba(255, 255, 255, 0.07);
  --border-accent: rgba(0, 229, 160, 0.28);
  --txt: #F4F7FB;
  --txt2: #97A3B8;
  --txt3: #5B6577;
  --accent: #00E5A0;
  --accent-muted: rgba(0, 229, 160, 0.12);
  /* famille B : track-record.html, founder.html (ancienne charte #10b981 → V2) */
  --bg-card: #0E1424;
  --bg-elevated: #151D33;
  --text: #F4F7FB;
  --text-secondary: #97A3B8;
  --text-muted: #5B6577;
  /* internes v2 */
  --v2-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --v2-ink: #052018;
  --v2-grad: linear-gradient(180deg, #FFFFFF 30%, rgba(255, 255, 255, 0.55) 100%);
  --fd: 'Space Grotesk', -apple-system, sans-serif;
}

/* ── Fond signature : glow + grille hairline + grain (fixe, zéro JS) ── */
body { background: #06080F !important; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 640px 460px at 16% -8%, rgba(0, 229, 160, 0.11), transparent 62%),
    radial-gradient(ellipse 760px 560px at 92% 4%, rgba(59, 130, 246, 0.06), transparent 65%),
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-size: auto, auto, 56px 56px, 56px 56px;
  background-color: #06080F;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; opacity: 0.35;
  mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ── Typographie display (Apple/Resend : court, serré, dégradé blanc) ── */
h1 {
  font-family: var(--fd) !important;
  font-size: clamp(32px, 6.5vw, 44px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.03em !important;
  font-weight: 700 !important;
  background: var(--v2-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
h2 { font-family: var(--fd) !important; letter-spacing: -0.015em; color: var(--txt); }
h3 { letter-spacing: -0.01em; }
header .brand {
  font-family: var(--fd) !important;
  letter-spacing: -0.02em;
  background: var(--v2-grad) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Liens & focus (micro-interactions : un seul easing, jamais de linear) ── */
a { transition: filter 0.16s var(--v2-ease); }
a:hover { filter: brightness(1.3); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
::selection { background: rgba(0, 229, 160, 0.28); color: #fff; }

/* ── CTA : encre sombre sur accent + glow qui s'allume (Resend/Vercel) ── */
.cta, .cta-btn {
  background: var(--accent) !important;
  color: var(--v2-ink) !important;
  border: none !important;
  border-radius: 13px !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 32px rgba(0, 229, 160, 0.35);
  transition: transform 0.16s var(--v2-ease), box-shadow 0.16s var(--v2-ease), filter 0.16s var(--v2-ease);
}
.cta:hover, .cta-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 10px 48px rgba(0, 229, 160, 0.5);
}
.cta:active, .cta-btn:active { transform: scale(0.985); }

/* ── Surfaces : hairlines translucides, radius 16, profondeur par lumière ── */
.card, details, .stat-box, .proof, .transparency, .why, .intro {
  border-radius: 16px !important;
  border-color: var(--border) !important;
}
.proof, .card[style*="border-color"] { border-color: var(--border-accent) !important; }
.proof {
  background: rgba(14, 20, 36, 0.72) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 32px rgba(0, 229, 160, 0.05) !important;
}
details summary { transition: color 0.16s var(--v2-ease); }
details summary:hover { color: var(--accent); }
details[open] { border-color: var(--border-accent) !important; }

/* ── Chiffres : toujours tabulaires (ADN data) ── */
.num, .v, .roi, .odds, .k, .stat-box, .price {
  font-variant-numeric: tabular-nums;
}
.v, .roi { font-family: var(--fd) !important; }

/* ── Footer : hairline discrète ── */
footer { border-top: 1px solid var(--border) !important; }

/* ── Accessibilité motion ── */
@media (prefers-reduced-motion: reduce) {
  a, .cta, .cta-btn, details summary { transition: none !important; }
}