/* =====================================================================
   GIGAMAC — Design tokens (SOURCE DE VÉRITÉ VISUELLE)
   Direction retenue : A — « Bleu Artisan » (validée Ben, 2026-07-09)
   Site vitrine finition — plafonnage · cimentage · crépi · isolation
   ---------------------------------------------------------------------
   Contrastes vérifiés WCAG 2.1 (ratios indiqués en commentaire).
   AA texte normal ≥ 4.5:1 · AA grand texte / UI ≥ 3:1.
   ===================================================================== */

:root {
  /* ---------- MARQUE — Bleu Gigamac (extrait du logo #1B3E94) ---------- */
  --ggm-blue:        #1B3E94;  /* primaire · blanc dessus = 9.71:1  AA */
  --ggm-blue-deep:   #152F70;  /* titres, sections foncées · blanc = 12.56:1 AA */
  --ggm-blue-800:    #14285C;  /* footer, survols profonds */
  --ggm-blue-050:    #EAF0FB;  /* fond bleuté très clair, halo de focus */

  /* ---------- ACCENT — Terracotta (rappel de l'orange historique) ---------- */
  --ggm-terracotta:       #B85833; /* accent AA · blanc dessus = 4.69:1  AA */
  --ggm-terracotta-hover: #A94E28; /* survol boutons · blanc = 5.52:1  AA */
  --ggm-terracotta-bright:#C8623C; /* touche DÉCORATIVE uniquement (3.99:1 — jamais de texte fin dessus) */
  --ggm-terracotta-050:   #F6E9E1; /* fond terracotta très clair */

  /* ---------- NEUTRES — plâtre / craie / sable ---------- */
  --ggm-ink:      #23262B;  /* texte courant · blanc = 15.18:1  AA */
  --ggm-muted:    #5C6472;  /* texte secondaire · blanc = 5.96:1  AA */
  --ggm-bg:       #F7F4EF;  /* fond de page (plâtre) */
  --ggm-bg-alt:   #ECE5DA;  /* section alternée (sable) */
  --ggm-surface:  #FFFFFF;  /* cartes, header, surfaces */
  --ggm-line:     #E4DCD0;  /* bordures, filets */
  --ggm-white:    #FFFFFF;

  /* ---------- ALIAS SÉMANTIQUES (à utiliser dans les composants) ---------- */
  --color-bg:            var(--ggm-bg);
  --color-bg-alt:        var(--ggm-bg-alt);
  --color-surface:       var(--ggm-surface);
  --color-border:        var(--ggm-line);
  --color-text:          var(--ggm-ink);
  --color-text-muted:    var(--ggm-muted);
  --color-heading:       var(--ggm-blue-deep);
  --color-primary:       var(--ggm-blue);
  --color-primary-hover: var(--ggm-blue-deep);
  --color-primary-ink:   var(--ggm-white);   /* texte sur fond bleu */
  --color-accent:        var(--ggm-terracotta);
  --color-accent-hover:  var(--ggm-terracotta-hover);
  --color-accent-ink:    var(--ggm-white);   /* texte sur bouton terracotta */
  --color-focus:         var(--ggm-blue);

  /* ---------- TYPOGRAPHIE ---------- */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Échelle (mobile-first ; H1/H2 fluides via clamp) */
  --text-xs:    0.78rem;   /* 12.5px — eyebrow, mentions */
  --text-sm:    0.875rem;  /* 14px  — meta, notes */
  --text-base:  1rem;      /* 16px  — corps */
  --text-md:    1.125rem;  /* 18px  — chapô / lead */
  --text-lg:    1.25rem;   /* 20px  — sous-titres, H3 cartes */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   1.875rem;  /* 30px */
  --text-h2:    clamp(1.75rem, 3.6vw, 2.5rem);  /* 28→40px — titres de section */
  --text-hero:  clamp(2.125rem, 5.4vw, 3.625rem); /* 34→58px — H1 hero */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight: 1.12;   /* titres */
  --leading-snug:  1.35;
  --leading-normal:1.6;    /* corps */

  --tracking-eyebrow: 0.14em; /* surtitres MAJUSCULES */
  --tracking-tight:  -0.01em;

  /* ---------- ESPACEMENTS (base 4px) ---------- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 2.5rem;   --space-8: 3rem;     --space-10: 4rem;
  --space-12: 5.25rem; /* 84px — rythme vertical des sections */

  /* ---------- RAYONS ---------- */
  --radius-sm:   8px;
  --radius:     14px;   /* cartes, boutons */
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* ---------- OMBRES ---------- */
  --shadow-sm: 0 2px 8px rgba(20, 33, 70, 0.06);
  --shadow-md: 0 10px 30px rgba(20, 33, 70, 0.10);
  --shadow-lg: 0 18px 40px rgba(20, 33, 70, 0.13);

  /* ---------- LAYOUT ---------- */
  --container: 1120px;
  --container-pad: 24px;
  --header-h: 74px;

  /* ---------- HERO ---------- */
  --hero-overlay: linear-gradient(180deg, rgba(21,47,112,0.60), rgba(21,47,112,0.72));

  /* ---------- TRANSITIONS ---------- */
  --ease: 0.16s cubic-bezier(.4,0,.2,1);
}