/* ============================================
   CHARTE GRAPHIQUE — ALL PPITES
   Thème : Football | Noir & Blanc
   Polices : Bebas Neue (titres) + Inter (corps)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

:root {

  /* ---- COULEURS ---- */

  /* Noirs */
  --noir-pur        : #000000;
  --noir-profond    : #0A0A0A;
  --anthracite      : #1A1A1A;
  --charbon         : #2D2D2D;

  /* Gris foncés */
  --gris-fonce      : #4A4A4A;
  --gris-neutre     : #6E6E6E;

  /* Gris clairs */
  --gris-moyen      : #A0A0A0;
  --gris-clair      : #C8C8C8;
  --gris-perle      : #DEDEDE;

  /* Blancs */
  --gris-creme      : #EBEBEB;
  --blanc-casse     : #F5F5F5;
  --blanc-pur       : #FFFFFF;

  /* ---- ALIASES SÉMANTIQUES ---- */
  --couleur-fond         : var(--blanc-pur);
  --couleur-fond-alt     : var(--blanc-casse);
  --couleur-fond-sombre  : var(--anthracite);
  --couleur-texte        : var(--noir-profond);
  --couleur-texte-doux   : var(--gris-neutre);
  --couleur-texte-inverse: var(--blanc-pur);
  --couleur-bordure      : var(--gris-perle);
  --couleur-accent       : var(--noir-pur);

  /* ---- TYPOGRAPHIE ---- */
  --font-titre   : 'Bebas Neue', sans-serif;
  --font-corps   : 'Inter', sans-serif;

  --taille-xs    : 0.75rem;    /* 12px */
  --taille-sm    : 0.875rem;   /* 14px */
  --taille-base  : 1rem;       /* 16px */
  --taille-md    : 1.125rem;   /* 18px */
  --taille-lg    : 1.5rem;     /* 24px */
  --taille-xl    : 2rem;       /* 32px */
  --taille-2xl   : 3rem;       /* 48px */
  --taille-3xl   : 4.5rem;     /* 72px */
  --taille-4xl   : 6rem;       /* 96px */

  --poids-light  : 300;
  --poids-normal : 400;
  --poids-medium : 500;
  --poids-semi   : 600;
  --poids-bold   : 700;

  /* ---- ESPACEMENTS ---- */
  --espace-xs    : 0.25rem;    /* 4px */
  --espace-sm    : 0.5rem;     /* 8px */
  --espace-md    : 1rem;       /* 16px */
  --espace-lg    : 1.5rem;     /* 24px */
  --espace-xl    : 2rem;       /* 32px */
  --espace-2xl   : 3rem;       /* 48px */
  --espace-3xl   : 5rem;       /* 80px */
  --espace-4xl   : 8rem;       /* 128px */

  /* ---- BORDURES ---- */
  --rayon-sm     : 4px;
  --rayon-md     : 8px;
  --rayon-lg     : 16px;
  --rayon-full   : 9999px;

  /* ---- OMBRES ---- */
  --ombre-sm     : 0 1px 3px rgba(0, 0, 0, 0.08);
  --ombre-md     : 0 4px 12px rgba(0, 0, 0, 0.10);
  --ombre-lg     : 0 8px 30px rgba(0, 0, 0, 0.15);
  --ombre-xl     : 0 20px 60px rgba(0, 0, 0, 0.20);

  /* ---- TRANSITIONS ---- */
  --transition-rapide  : 150ms ease;
  --transition-normale : 300ms ease;
  --transition-lente   : 500ms ease;

  /* ---- LAYOUT ---- */
  --max-largeur       : 1280px;
  --largeur-contenu   : 960px;
  --largeur-etroite   : 680px;
}