:root {
  /* Brand colors */
  --color-jaune: #f8ab07;
  --color-rouge: #ed2100;
  --color-vert: #81ba51;
  --color-text: #1a1a1a;
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --color-muted: #666666;
  --color-link: #9a6800;
  --color-on-dark: #ffffff;
  --color-border: #cccccc;

  /* Typography */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: clamp(2.75rem, 9vw, 5rem);

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Layout */
  --max-width: 1100px;
  --radius: 8px;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

  /* Focus */
  --focus-ring: 2px solid var(--color-jaune);
  --focus-offset: 2px;

  /* Hero section */
  --hero-height: clamp(520px, 72vh, 720px);
  --hero-bg-image: url('/images/hero/hero-main.jpg');
  --hero-placeholder-gradient: linear-gradient(
    135deg,
    #1a1a1a 0%,
    #2d2416 35%,
    #1f2a18 65%,
    #1a1a1a 100%
  );
}