/* ════════════════════════════════════════════════
   Webnexus — DESIGN SYSTEM (source de vérité unique)
   Chargé AVANT main.css. Aucune valeur "au feeling".
   Brief master — refonte landing (objectif top 1%).
   Violet de marque : #8385ed
════════════════════════════════════════════════ */

/* ── Font self-hostée : Inter (rsms.me, .woff2) — RGPD-safe, aucun appel externe ── */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ── */
:root {
  /* Fonds — profondeur, jamais de #000 pur */
  --bg-000: #060608;
  --bg-100: #0a0a0f;
  --bg-200: #111119;
  --bg-300: #16161f;

  /* Violet de marque #8385ed + déclinaisons dérivées */
  --violet-500: #8385ed;   /* accent principal */
  --violet-400: #a2a4f2;   /* hover clair */
  --violet-600: #6a6ce6;   /* saturé — gradients / glow */
  --violet-glow: rgba(131, 133, 237, 0.35);
  --violet-soft: rgba(131, 133, 237, 0.10);

  /* Texte (contraste WCAG AA) */
  --text-100: #f4f5fb;   /* titres */
  --text-200: #c9cbd6;   /* corps */
  --text-300: #8b8d9c;   /* secondaire */
  --text-400: #5a5c6b;   /* labels discrets */

  /* Bordures */
  --border-100: rgba(255, 255, 255, 0.06);
  --border-200: rgba(255, 255, 255, 0.10);
  --border-glow: rgba(131, 133, 237, 0.40);

  /* Typographie — échelle fluide */
  --font-title: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:  'Inter', system-ui, -apple-system, sans-serif;

  --fs-hero:    clamp(2.5rem, 5.5vw, 4.25rem);
  --fs-h2:      clamp(2rem, 4.5vw, 3.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --fs-body-lg: clamp(1.1rem, 1.4vw, 1.35rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-label:   0.75rem;

  /* Espacement — grille 8pt */
  --space-xs: 8px;   --space-sm: 16px;  --space-md: 24px;
  --space-lg: 48px;  --space-xl: 80px;  --space-2xl: 120px; --space-3xl: 160px;

  /* Rayons & ombres */
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-full: 999px;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 60px var(--violet-glow);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s; --dur-mid: 0.5s; --dur-slow: 0.8s;
}

/* ════════════════════════════════════════════════
   BASE TYPOGRAPHIQUE (applique les nouvelles fonts)
════════════════════════════════════════════════ */
body {
  font-family: var(--font-body);
  font-size: 16px;
}

h1, h2, h3, h4,
.hero-title, .section-title, .cta-title,
.service-title, .pilier-title, .step-title,
.node-title, .temo-name, .faq-trigger, .stat-number {
  font-family: var(--font-title);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ════════════════════════════════════════════════
   LENIS (smooth scroll) — CSS requis
════════════════════════════════════════════════ */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ════════════════════════════════════════════════
   GRAIN / NOISE OVERLAY — profondeur (~3.5%)
════════════════════════════════════════════════ */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ════════════════════════════════════════════════
   AURORA DE FOND — lueur violette globale, très diffuse
   Derrière tout le contenu (z-index négatif), fixe au scroll.
   Ambiance premium : on la « sent » plus qu'on ne la voit.
   Les sections à fond propre (cards, blocs) la masquent ;
   elle transparaît dans les zones de respiration.
════════════════════════════════════════════════ */
body::before {
  content: "";
  position: fixed;
  inset: -6%;                  /* déborde → couvre toujours le viewport malgré le léger drift */
  z-index: -1;                 /* sous le contenu, au-dessus du fond --bg-000 */
  pointer-events: none;
  /* Vignette INVERSÉE : les coeurs de halo sont hors écran dans les coins
     (haut-gauche + bas-droite, asymétriques). Ils poussent la lumière vers
     l'intérieur mais s'éteignent avant le centre → la zone de lecture reste
     sombre (--bg-000). Le contraste bords clairs / centre sombre = profondeur. */
  background:
    radial-gradient(72% 62% at -2% -5%,
        rgba(131, 133, 237, 0.16) 0%,
        rgba(131, 133, 237, 0.06) 34%,
        transparent 60%),
    radial-gradient(80% 68% at 104% 90%,
        rgba(131, 133, 237, 0.15) 0%,
        rgba(131, 133, 237, 0.055) 36%,
        transparent 62%);
  will-change: transform;
  animation: aurora-drift 42s ease-in-out infinite;
}

/* Drift très lent et minime — ambiance vaporeuse, jamais un projecteur */
@keyframes aurora-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(1.4%, -1.1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* ════════════════════════════════════════════════
   ACCESSIBILITÉ — focus visible clavier
════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--violet-500);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ════════════════════════════════════════════════
   MAGNÉTIQUE — will-change pour les CTA (JS pilote)
════════════════════════════════════════════════ */
[data-magnetic] { will-change: transform; }

/* ════════════════════════════════════════════════
   prefers-reduced-motion — désactive tout mouvement
════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .grain-overlay { display: none; }
  html.lenis { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════
   COUCHE CRAFT 0.01% — micro-détails signature (A5)
   Détails que personne ne remarque, que tout le monde ressent.
════════════════════════════════════════════════ */

/* Sélection de texte — violet translucide, texte blanc */
::selection      { background: rgba(131, 133, 237, 0.28); color: #fff; text-shadow: none; }
::-moz-selection { background: rgba(131, 133, 237, 0.28); color: #fff; text-shadow: none; }

/* Scrollbar custom discrète (desktop) — thumb violet au hover */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--bg-300) transparent; }
  ::-webkit-scrollbar        { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track  { background: var(--bg-100); }
  ::-webkit-scrollbar-thumb  {
    background: var(--bg-300);
    border: 2px solid var(--bg-100);
    border-radius: var(--radius-full);
    transition: background var(--dur-fast) var(--ease-out);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--violet-600); }
}

/* Vignette globale — radial sombre aux coins, concentre le regard (presque imperceptible) */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 55;                 /* sous le grain (60), au-dessus des fonds de section */
  pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 42%,
      transparent 58%,
      rgba(0, 0, 0, 0.28) 100%);
}

/* Équilibre optique du texte (A2) — pas de mots orphelins */
h1, h2, h3, h4,
.hero-title, .section-title, .cta-title, .service-title,
.pilier-title, .step-title, .node-title, .faq-trigger {
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

/* Chiffres des stats alignés pendant le compteur (A2) */
.stat-number { font-variant-numeric: tabular-nums; }