/* ============================================================
   DESIGN SYSTEM — Variables CSS
   Source vérité unique pour toutes les valeurs de design.
   ============================================================ */

:root {

  /* ── Palette ─────────────────────────────────────────────── */
  --color-blue:       #2B4CB8;
  --color-blue-dk:    #0D2B4E;
  --color-blue-deep:  #1e3a9f;
  --color-red:        #E84040;
  --color-gold:       #F5A800;
  --color-gold-lt:    #FFCC44;
  --color-dark:       #07111f;
  --color-dark-2:     #0c1a2e;
  --color-dark-3:     #111d35;
  --color-dark-footer:#04090f;
  --color-white:      #ffffff;
  --color-cream:      #FDF8F0;
  --color-mid:        #4A5568;

  /* ── Transparences récurrentes ───────────────────────────── */
  --alpha-white-05:   rgba(255, 255, 255, 0.05);
  --alpha-white-06:   rgba(255, 255, 255, 0.06);
  --alpha-white-07:   rgba(255, 255, 255, 0.07);
  --alpha-white-08:   rgba(255, 255, 255, 0.08);
  --alpha-white-10:   rgba(255, 255, 255, 0.10);
  --alpha-white-12:   rgba(255, 255, 255, 0.12);
  --alpha-white-14:   rgba(255, 255, 255, 0.14);
  --alpha-white-18:   rgba(255, 255, 255, 0.18);
  --alpha-white-22:   rgba(255, 255, 255, 0.22);
  --alpha-white-25:   rgba(255, 255, 255, 0.25);
  --alpha-white-30:   rgba(255, 255, 255, 0.30);
  --alpha-white-45:   rgba(255, 255, 255, 0.45);
  --alpha-white-50:   rgba(255, 255, 255, 0.50);
  --alpha-white-55:   rgba(255, 255, 255, 0.55);
  --alpha-white-62:   rgba(255, 255, 255, 0.62);
  --alpha-white-68:   rgba(255, 255, 255, 0.68);
  --alpha-white-72:   rgba(255, 255, 255, 0.72);
  --alpha-white-82:   rgba(255, 255, 255, 0.82);

  --alpha-gold-06:    rgba(245, 168, 0, 0.06);
  --alpha-gold-10:    rgba(245, 168, 0, 0.10);
  --alpha-gold-12:    rgba(245, 168, 0, 0.12);
  --alpha-gold-15:    rgba(245, 168, 0, 0.15);
  --alpha-gold-30:    rgba(245, 168, 0, 0.30);
  --alpha-gold-35:    rgba(245, 168, 0, 0.35);
  --alpha-gold-38:    rgba(245, 168, 0, 0.38);
  --alpha-gold-40:    rgba(245, 168, 0, 0.40);

  --alpha-blue-12:    rgba(43, 76, 184, 0.12);
  --alpha-blue-45:    rgba(43, 76, 184, 0.45);

  --alpha-dark-45:    rgba(7, 17, 31, 0.45);
  --alpha-dark-25:    rgba(7, 17, 31, 0.25);
  --alpha-dark-65:    rgba(7, 17, 31, 0.65);
  --alpha-dark-96:    rgba(7, 17, 31, 0.96);

  /* ── Typographie ─────────────────────────────────────────── */
  --font-body:       'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display:    'Playfair Display', Georgia, 'Times New Roman', serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ── Tailles de texte ────────────────────────────────────── */
  --text-xs:   0.67rem;    /* labels uppercase */
  --text-sm:   0.74rem;    /* meta, sous-texte */
  --text-base: 0.82rem;    /* corps compact */
  --text-md:   0.88rem;    /* corps standard */
  --text-lg:   0.95rem;    /* corps large */
  --text-xl:   1rem;       /* intro, slogan */
  --text-2xl:  1.15rem;    /* prog-cta titre */
  --text-hero-desc: clamp(0.88rem, 1.8vw, 1.05rem);
  --text-section-title: clamp(1.8rem, 3.5vw, 2.6rem);

  /* ── Hauteurs de ligne ───────────────────────────────────── */
  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.65;
  --lh-relaxed: 1.75;
  --lh-loose:  1.85;
  --lh-hero:   1.88;

  /* ── Espacement ──────────────────────────────────────────── */
  --space-1:   0.3rem;
  --space-2:   0.4rem;
  --space-3:   0.5rem;
  --space-4:   0.6rem;
  --space-5:   0.7rem;
  --space-6:   0.8rem;
  --space-7:   0.9rem;
  --space-8:   1rem;
  --space-10:  1.1rem;
  --space-12:  1.2rem;
  --space-14:  1.4rem;
  --space-16:  1.6rem;
  --space-18:  1.8rem;
  --space-20:  2rem;
  --space-24:  2.4rem;
  --space-28:  2.5rem;
  --space-32:  3rem;
  --space-40:  4rem;
  --space-56:  5rem;
  --space-72:  7rem;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-width:       1060px;
  --section-padding-x: 48px;
  --section-padding-y: 7rem;
  --nav-height:      62px;

  /* ── Rayons ──────────────────────────────────────────────── */
  --radius-sm:    5px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    14px;
  --radius-2xl:   16px;
  --radius-3xl:   20px;
  --radius-full:  100px;

  /* ── Ombres ──────────────────────────────────────────────── */
  --shadow-gold:  0 6px 24px var(--alpha-gold-38);
  --shadow-card:  0 12px 32px rgba(0, 0, 0, 0.30);
  --shadow-blue:  0 12px 36px var(--alpha-blue-45);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   0.2s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.35s ease;
  --transition-image:  transform 0.5s ease;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:   1;
  --z-nav:    300;
  --z-overlay: 999;

  /* ── Scroll offset (nav fixe) ────────────────────────────── */
  --scroll-offset: var(--nav-height);
}

/* Scroll margin pour tous les éléments ciblés par ancre */
[id] {
  scroll-margin-top: var(--scroll-offset);
}