:root {
  /* Brand Color Palette */
  --bg-primary: #080808;
  --bg-secondary: #121212;
  --bg-surface: #181818;
  --bg-surface-elevated: #202020;
  --bg-card-light: #F7F5F0;
  --bg-card-light-hover: #FFFFFF;

  /* Accent & Lighting */
  --accent: #FF7900;
  --accent-hover: #FF9433;
  --accent-glow: rgba(255, 121, 0, 0.35);
  --accent-glow-subtle: rgba(255, 121, 0, 0.12);
  --accent-gradient: linear-gradient(135deg, #FF7900 0%, #D85A00 100%);
  --accent-warm-radial: radial-gradient(circle, rgba(255, 121, 0, 0.28) 0%, rgba(255, 121, 0, 0.04) 55%, transparent 75%);

  /* Text Colors */
  --text-primary: #FFFFFF;
  --text-secondary: #A6A6A6;
  --text-muted: #737373;
  --text-dark: #0D0D0D;
  --text-dark-muted: #4A4A4A;

  /* Borders & Lines */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-accent: rgba(255, 121, 0, 0.4);
  --border-accent-bright: #FF7900;

  /* Typography */
  --font-heading: 'Sora', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Sizing & Layout - Valeurs claires en pixels (px) */
  --container-width: 1480px;
  --container-width-wide: 1560px;
  --container-width-narrow: 1100px;
  --container-padding: 70px; /* Marge d'espace avec les bords de l'écran sur PC */
  --max-width: var(--container-width);
  --max-width-wide: var(--container-width-wide);
  --header-height: 80px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-orange: 0 10px 30px rgba(255, 121, 0, 0.25);
  --shadow-orange-lg: 0 18px 50px rgba(255, 121, 0, 0.38);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Espacements latéraux réactifs en pixels pour faciliter la lecture */
@media (max-width: 1024px) {
  :root {
    --container-padding: 40px; /* 40px d'espace sur tablette */
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px; /* 20px d'espace sur tablette étroite/smartphone */
  }
}

@media (max-width: 640px) {
  :root {
    --container-padding: 16px; /* 16px d'espace sur smartphone */
    --header-height: 70px;
  }
}