/* ══════════════════════════════════════════════════════
   variables.css — Design tokens globaux du projet
   Palette, typographies, espacements, ombres, transitions
   Importé EN PREMIER par index.html — toutes les autres
   feuilles de style dépendent des variables définies ici.
   ══════════════════════════════════════════════════════ */

:root {
  /* ── Couleurs ── */
  --color-bg:       #F4F2EE;
  --color-surface:  #E6EBF0;
  --color-surface-2:#D3DDE7;
  --color-dark:     #1C1A1B;
  --color-mid:      #49535D;
  --color-light:    #7E8A96;
  --color-accent:   #246F9F;
  --color-accent-h: #1C5C85;
  --color-accent-2: #4E92BF;
  --color-white:    #FFFFFF;

  /* ── Typographies ── */
  --font-title: 'Playfair Display', Georgia, serif;
  --font-body:  'DM Sans', system-ui, sans-serif;

  /* ── Espacements & layout ── */
  --nav-h:       72px;
  --section-pad: clamp(5rem, 10vw, 9rem);
  --max-w:       1160px;
  --gutter:      clamp(1.25rem, 5vw, 2.5rem);

  /* ── Rayons de bordure ── */
  --radius-sm: 6px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* ── Ombres ── */
  --shadow-card:  0 10px 30px rgba(37, 33, 29, 0.08);
  --shadow-hover: 0 18px 50px rgba(37, 33, 29, 0.14);

  /* ── Easings & transitions ── */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 0.3s var(--ease-out);

  /* ── Tokens supplémentaires ── */
  --color-accent-glow:  rgba(36, 111, 159, 0.18);
  --shadow-deep:        0 28px 64px rgba(15, 25, 40, 0.22);
  --radius-xl:          40px;
}

@media (min-width: 1024px) {
  :root {
    --nav-h: 84px;
    --max-w: 1200px;
    --section-pad: clamp(6rem, 8vw, 9rem);
  }
}