/*=========================================================
  DESIGN SYSTEM - Variables globales
=========================================================*/
:root {
  /* ── COULEURS PRINCIPALES ──────────────────────────── */
  --color-text: #171917;
  /* Texte principal */
  --color-text-secondary: #767C76;
  /* Texte secondaire */
  --color-brand: #EF642E;
  /* Couleur marque */
  --color-brand-dark: #d4551f;
  /* Marque foncée */

  /* ── COULEURS SYSTÈME ─────────────────────────────── */
  --color-success: #10B981;
  /* Succès */
  --color-error: #EF4444;
  /* Erreur */
  --color-warning: #F59E0B;
  /* Attention */

  /* ── COULEURS INTERFACE ─────────────────────────────── */
  --color-bg: #ffffff;
  /* Arrière-plan */
  --color-bg-light: #F9FAFB;
  /* Arrière-plan léger */
  --color-border: #E5E7EB;
  /* Bordures */

  /* ── ESPACEMENTS ─────────────────────────────────── */
  --space-01: 4px;
  --space-02: 8px;
  --space-03: 12px;
  --space-04: 16px;
  --space-05: 24px;
  --space-06: 32px;
  --space-07: 48px;
  --space-08: 64px;
  --space-09: 96px;

  /* ── TYPOGRAPHIE ────────────────────────────────────── */
  --font-size-h1: 26px;
  --line-height-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 18px;
  --font-size-body: 18px;
  --line-height-body: 22px;
  --font-size-small: 14px;
  --font-size-tiny: 12px;

  /* ── FORME ET INTERACTION ──────────────────────────── */
  --border-radius: 0px;
  /* Pas d'arrondi pour minimalisme */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
}

/*=========================================================
  BREAKPOINT MOBILE (≤ 480px)
=========================================================*/
@media (max-width: 480px) {
  :root {
    /* Espacements réduits */
    --space-05: 12px;
    --space-06: 24px;
    --space-07: 32px;
    --space-08: 48px;
    --space-09: 64px;

    /* Typographie mobile */
    --font-size-h1: 24px;
    --font-size-h2: 22px;
  }
}

/*=========================================================
  RESET & BASE STYLES
=========================================================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Garamond Regular', sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
}

/*=========================================================
  3️⃣  FONT FACE 
=========================================================*/
@font-face {
  font-family: 'Garamond Regular';
  src: url('../fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}