:root {
  /* ——— Palette ——— */
  --rouge: #DC3522;
  --noir: #0C0C0C;
  --blanc: #F0F0F0;
  --gris: #3A3A3A;
  --gris-clair: #6A6A6A;

  /* ——— Transparences dérivées de la palette ——— */
  --blanc-72: rgb(240 240 240 / 0.72);
  --blanc-15: rgb(240 240 240 / 0.15);
  --noir-72: rgb(12 12 12 / 0.72);
  --noir-15: rgb(12 12 12 / 0.15);

  /* ——— Polices ——— */
  --police-titre: 'Syne', sans-serif;
  --police-corps: 'Outfit', sans-serif;

  /* ——— Échelle typographique ——— */
  --texte-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --texte-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --texte: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --texte-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --titre-sm: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --titre: clamp(2rem, min(1rem + 3.4vw, 8vh), 3.8rem);
  --titre-lg: clamp(2.5rem, 1rem + 6vw, 6rem);
  --titre-xl: clamp(3rem, 1rem + 8vw, 8rem);
  --titre-hero: clamp(2.8rem, 1rem + 9vw, 8.5rem);
  --titre-bagarre: 11.4vw;
  --titre-geant: clamp(2.2rem, min(6.2vw, 13vh), 7.5rem);

  /* ——— Espacement (base 4 px) ——— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-24: 96px;
  --s-32: 128px;
  --s-48: 192px;

  --marge: var(--s-4);
  --section: clamp(56px, min(7vw, 10vh), 110px);

  /* ——— Bordures et rayons ——— */
  --rayon-sm: 4px;
  --rayon: 8px;
  --rayon-lg: 16px;
  --rayon-xl: 9999px;

  /* ——— Mouvement ——— */
  --duree: 0.8s;
  --duree-longue: 1.2s;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* ——— Inclinaison titre (comme le logo) ——— */
  --inclinaison: -3deg;

  /* ——— Z-index ——— */
  --z-curseur: 90;
  --z-fiche: 85;
  --z-entete: 80;
  --z-bandeau: 70;
  --z-menu: 60;

  /* ——— Conteneur ——— */
  --largeur-max: 1440px;
  --largeur-contenu: 1200px;
}

@media (min-width: 900px) {
  :root {
    --marge: var(--s-8);
    --titre-bagarre: 11.4vw;
  }
}