/* =====================================================================
   KAGNARD — variables.css
   Charte graphique du projet (source de vérité pour les couleurs/typo).
   Chargé EN PREMIER, avant tous les autres CSS.
   ===================================================================== */

:root {
  /* ---- Couleurs marque (extraites du logo) ---- */
  --orange: #F26419;        /* accent chaud = chaleur/soleil = CTA principaux */
  --orange-clair: #FF7A33;
  --orange-deep: #D9560E;   /* CTA hover — plus riche/profond (jamais plus clair = plus premium + plus lisible) */
  /* --orange-fonce : alias sur l'orange de charte. Un ton rouille plus sombre avait été
     introduit ici pour garantir un contraste AA strict sur les surtitres/chiffres, mais le
     client préfère explicitement l'orange de marque exact partout, quitte à perdre un peu
     de contraste. Ne PAS réintroduire une teinte différente ici. */
  --orange-fonce: var(--orange);
  --bleu: #4DA3FF;          /* froid = fraîcheur/confort = éléments solution */
  --bleu-glacier: #E8F3FF;
  --noir: #0E0E0E;          /* titres, texte */
  --blanc: #FFFFFF;
  --blanc-casse: #F7F8FA;
  --beige: #F3EEE7;

  /* Teintes utilitaires dérivées */
  --orange-soft: rgba(242, 100, 25, 0.12);
  --bleu-soft: rgba(77, 163, 255, 0.12);
  --vert-check: #1F9D6B;     /* coche "avantage" dans le comparatif */
  --gris-texte: #4A4E57;     /* texte secondaire lisible (AA, ~8.8:1 sur blanc) */
  --texte-muted: #6B7280;    /* texte tertiaire (légendes, méta) — AA conservé (~4.6:1 sur blanc) */
  --gris-bord: rgba(14, 14, 14, 0.10);

  /* ---- Dégradé signature ambre -> bleu glacier -> marine ----
     Le point d'arrivée marine (ajouté lors de l'alignement identité logo)
     prolonge la narration chaud -> froid -> nuit sans jamais dominer :
     les 3/4 de la course restent sur l'orange/bleu clair d'origine. */
  --gradient-signature: linear-gradient(135deg, #F26419 0%, #FFB067 40%, #4DA3FF 75%, var(--marine) 100%);

  /* Dégradés "mesh" (superposition de radiaux + base linéaire) : plus riches
     et organiques qu'un dégradé plat, tout en gardant une dominante claire
     pour ne jamais compromettre la lisibilité du texte posé dessus. */
  --gradient-chaud:
    radial-gradient(at 14% 18%, rgba(255, 255, 255, 0.85) 0%, transparent 52%),
    radial-gradient(at 88% 12%, rgba(255, 176, 103, 0.55) 0%, transparent 50%),
    radial-gradient(at 65% 92%, rgba(255, 211, 166, 0.65) 0%, transparent 58%),
    linear-gradient(160deg, #FFF6EC 0%, #FFE4C7 45%, #FFD3A6 100%);
  --gradient-froid:
    radial-gradient(at 18% 15%, rgba(255, 255, 255, 0.85) 0%, transparent 52%),
    radial-gradient(at 85% 18%, rgba(163, 210, 255, 0.5) 0%, transparent 50%),
    radial-gradient(at 50% 95%, rgba(216, 236, 255, 0.65) 0%, transparent 58%),
    linear-gradient(160deg, #F4FAFF 0%, #E8F3FF 60%, #D7ECFF 100%);

  /* ---- Bleu encre de marque — mesuré directement sur le cadre du logo
     fourni (pixel sampling du PNG source, valeur exacte, à ne pas altérer) ---- */
  --marine: #0D1B2A;
  --marine-rgb: 13, 27, 42; /* mêmes canaux que --marine, pour usage en rgba() */

  /* ---- Thème sombre "encre" — sections premium à fort contraste ----
     Aligné sur le --marine du logo (alignement identité, remplace l'ancien
     quasi-noir #0A0D13) : cohérence directe avec le pictogramme de marque.
     Réutilisable via la classe utilitaire .section--dark (global.css). */
  --encre: var(--marine);
  --encre-2: #17304A;
  --encre-border: rgba(255, 255, 255, 0.09);
  --texte-sur-encre: rgba(255, 255, 255, 0.94);
  --texte-sur-encre-muted: rgba(255, 255, 255, 0.64);
  --accent-sur-encre: var(--orange-clair);

  /* Grain lumineux très léger (SVG feTurbulence en data-URI), réutilisé via
     l'utilitaire .has-grain — casse l'effet "dégradé plastique" plat. */
  --noise:
    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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Filigrane discret du pictogramme de marque (cadre + 3 rayons, forme
     simplifiée du logo) — SVG inline, aucun asset externe. Utilisé à très
     faible opacité en motif décoratif sur les fonds sombres (.section--dark,
     footer). Ne JAMAIS augmenter son opacité au-delà d'un discret filigrane. */
  --brand-mark:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect x='38' y='38' width='124' height='124' rx='20' fill='none' stroke='white' stroke-width='7'/%3E%3Cline x1='14' y1='150' x2='150' y2='14' stroke='white' stroke-width='11' stroke-linecap='round'/%3E%3Cline x1='50' y1='186' x2='186' y2='50' stroke='white' stroke-width='11' stroke-linecap='round'/%3E%3Cline x1='86' y1='200' x2='200' y2='86' stroke='white' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ---- Typographie ---- */
  --font-titre: 'Poppins', system-ui, sans-serif;   /* display massif */
  --font-texte: 'Inter', system-ui, sans-serif;     /* corps lisible */

  /* Échelle typographique fluide (clamp mobile -> desktop) */
  --fs-display: clamp(2.75rem, 8vw, 6.75rem);
  --fs-h1: clamp(2.2rem, 5.5vw, 4rem);
  --fs-h2: clamp(1.8rem, 4vw, 3rem);
  --fs-h3: clamp(1.25rem, 2.4vw, 1.6rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.875rem;

  /* ---- Rayons, ombres, verre ---- */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;
  --glass: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-dark: rgba(14, 14, 14, 0.35);

  /* Système d'élévation à 3 niveaux (profondeur premium, ombres douces
     étagées au lieu d'une ombre unique plate). --shadow / --shadow-sm sont
     conservées pour compatibilité avec l'existant et pointent vers les
     niveaux 2 et 1. */
  --shadow-1: 0 1px 2px rgba(14, 14, 14, 0.04), 0 4px 12px rgba(14, 14, 14, 0.06);
  --shadow-2: 0 4px 12px rgba(14, 14, 14, 0.06), 0 18px 44px rgba(14, 14, 14, 0.10);
  --shadow-3: 0 10px 26px rgba(14, 14, 14, 0.10), 0 32px 80px rgba(14, 14, 14, 0.16);
  --shadow-sm: var(--shadow-1);
  --shadow: var(--shadow-2);
  --shadow-orange: 0 12px 28px rgba(242, 100, 25, 0.28), 0 3px 10px rgba(242, 100, 25, 0.22);
  --shadow-orange-lg: 0 18px 44px rgba(242, 100, 25, 0.36), 0 6px 16px rgba(242, 100, 25, 0.28);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 76px;
  --space-section: clamp(4rem, 9vw, 8rem);

  /* ---- Transitions ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
}