:root {
  /* ─── Palette de marque ──────────────────────────────── */
  --c-primary:       #7a368b;
  --c-primary-hover: #6b2e7a;
  --c-primary-10:    #f4edf6;
  --c-primary-20:    #e2cce8;
  --c-accent:        #ffba00;
  --c-blue:          #009ddc;

  /* ─── Neutres ────────────────────────────────────────── */
  --c-dark:          #18181b;
  --c-surface:       #ffffff;
  --c-bg:            #f9f7fc;
  --c-text:          #27272a;
  --c-text-muted:    #71717a;
  --c-border:        #e4e4e7;

  /* ─── Typographie ────────────────────────────────────── */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ─── Espacements (base 4px) ─────────────────────────── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* ─── Rayons ─────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* ─── Ombres ─────────────────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:         0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:      0 10px 40px rgba(0,0,0,.12);
  --shadow-primary: 0 4px 20px rgba(122,54,139,.3);

  /* ─── Transitions ────────────────────────────────────── */
  --transition:      all .2s cubic-bezier(.4,0,.2,1);
  --transition-slow: all .4s cubic-bezier(.4,0,.2,1);

  /* ─── Mise en page ───────────────────────────────────── */
  --container-max: 1200px;
  --container-px:  1.5rem;
  --nav-height:    72px;
}

@media (max-width: 900px) {
  :root {
    --container-px: 1rem;
    --nav-height:   64px;
  }
}