/* =================================================================
   variables.css — Source de vérité unique de la charte musyjulien.com
   -----------------------------------------------------------------
   À charger AVANT tout autre style sur chaque page :
   <link rel="stylesheet" href="/variables.css">

   Objectif : ne plus jamais redéfinir une couleur ou une font en dur.
   On référence toujours via var(--xxx). Si la charte évolue,
   on modifie UNIQUEMENT ce fichier.
   ================================================================= */

:root {
  /* ---------- CHARTE OFFICIELLE (6 couleurs) ---------- */
  --nuit:        #171A32; /* fond sombre, texte principal */
  --blanc-casse: #F8F7F3; /* fond clair par défaut */
  --lin:         #D1B39B; /* accent chaud */
  --dragee:      #CFDDEB; /* accent froid clair */
  --horizon:     #8092B6; /* accent froid moyen */
  --gold:        #C4A35A; /* accent premium / CTA */

  /* ---------- VARIANTES (dérivées, consolidées depuis l'existant) ----------
     Ces teintes traînaient en dur dans les pages. On les nomme une fois
     pour les contrôler. À terme, viser le strict minimum. */
  --nuit-clair:    #2A2D47; /* cartes/sections sur fond nuit */
  --nuit-clair-2:  #232848;
  --horizon-fonce: #5C7099; /* hover liens, sous-titres */
  --lin-fonce:     #B8956F;
  --lin-clair:     #F0E6DA; /* fond crème doux */
  --dragee-clair:  #E8EDF4;
  --dragee-clair-2:#DCE3EE;
  --gold-clair:    #D4B76A;

  /* ---------- TEXTE ---------- */
  --texte:         var(--nuit);
  --texte-doux:    #5A5D6E; /* gris secondaire */
  --texte-invonce: var(--blanc-casse); /* texte sur fond sombre */
  --blanc:         #FFFFFF;

  /* ---------- ÉTATS (feedback formulaires) ---------- */
  --succes: #4A9D7C;
  --erreur: #E74C3C;
  --erreur-doux: #E07070;

  /* ---------- TYPOGRAPHIE ---------- */
  /* Titres : Gotu. Corps : Hanken Grotesk.
     (Attention : "Hanken Grotesk", PAS "Grotesch" — voir audit.) */
  --font-display: 'Gotu', serif;
  --font-body: 'Hanken Grotesk', sans-serif;

  /* Échelle typographique fluide */
  --fs-xs:  0.875rem;
  --fs-sm:  1rem;
  --fs-md:  1.25rem;
  --fs-lg:  clamp(1.5rem, 3vw, 2rem);
  --fs-xl:  clamp(2rem, 5vw, 3.25rem);
  --fs-xxl: clamp(2.75rem, 7vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-base:  1.6;

  /* ---------- ESPACEMENTS ---------- */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-xxl: 10rem;

  /* ---------- RAYONS & OMBRES ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(23, 26, 50, 0.06);
  --shadow-md: 0 8px 30px rgba(23, 26, 50, 0.10);
  --shadow-lg: 0 20px 60px rgba(23, 26, 50, 0.15);

  /* ---------- LAYOUT ---------- */
  --max-width: 1200px;
  --max-width-text: 720px; /* largeur de lecture confortable */

  /* ---------- TRANSITIONS ---------- */
  --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.2s ease;
}