/* Jetons de design de ToonFlix, issus du kit Figma validé.
   Tout le reste des feuilles de style ne lit que ces variables.
   Bascule Mobile / Desktop à 900 px de large : seules les variables changent. */

:root {
  /* Couleurs */
  --primaire: #00dc64;
  --primaire-survol: #4fff8c;
  --sur-primaire: #0a0a0a; /* texte sombre sur tout aplat vert */
  --fond: #141414;
  --fond-translucide: rgba(20, 20, 20, 0.8);
  --surface: #1f1f1f;
  --surface-haute: #2f2f2f;
  --trait: #3c3c3c;
  --texte: #ffffff;
  --texte-doux: #b3b3b3;
  --texte-discret: #808080;
  --voile: #000000;
  --erreur: #ff5a4f;

  /* Espacements */
  --espace-4: 4px;
  --espace-8: 8px;
  --espace-12: 12px;
  --espace-16: 16px;
  --espace-20: 20px;
  --espace-24: 24px;
  --espace-32: 32px;
  --espace-40: 40px;
  --espace-48: 48px;
  --espace-64: 64px;
  --espace-80: 80px;
  --espace-96: 96px;
  --gouttiere: 16px;

  /* Arrondis */
  --arrondi-affiche: 6px;
  --arrondi-carte: 12px;
  --arrondi-panneau: 20px;
  --arrondi-pilule: 999px;

  /* Affiches, au format 2:3 */
  --affiche-petite-largeur: 108px;
  --affiche-petite-hauteur: 162px;
  --affiche-moyenne-largeur: 168px;
  --affiche-moyenne-hauteur: 252px;
  --affiche-grande-largeur: 216px;
  --affiche-grande-hauteur: 324px;

  /* Texte */
  --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --titre-hero-graisse: 800;
  --titre-hero-taille: 32px;
  --titre-hero-interligne: 1.1;

  --titre-ecran-graisse: 700;
  --titre-ecran-taille: 24px;
  --titre-ecran-interligne: 1.2;

  --titre-rangee-graisse: 700;
  --titre-rangee-taille: 18px;
  --titre-rangee-interligne: 1.25;

  --corps-graisse: 400;
  --corps-taille: 15px;
  --corps-interligne: 1.5;

  --petit-graisse: 400;
  --petit-taille: 13px;
  --petit-interligne: 1.45;

  --libelle-graisse: 600;
  --libelle-taille: 14px;
  --libelle-interligne: 1;

  --legende-graisse: 500;
  --legende-taille: 11px;
  --legende-interligne: 1.3;
  --legende-approche: 0.02em;

  --chapitres-graisse: 700;
  --chapitres-taille: 12px;

  --rang-graisse: 900;
  --rang-taille: 96px;
  --rang-interligne: 0.9;

  /* Composants dont une mesure change en Desktop */
  --bouton-hauteur: 44px;
  --rangee-ecart: 8px; /* entre deux affiches */
  --rangee-ecart-titre: 12px; /* entre le titre et les affiches */
}

@media (min-width: 900px) {
  :root {
    --gouttiere: 56px;

    --titre-hero-taille: 64px;
    --titre-hero-interligne: 1.05;
    --titre-ecran-taille: 32px;
    --titre-rangee-taille: 22px;
    --corps-taille: 17px;
    --petit-taille: 14px;
    --libelle-taille: 15px;
    --legende-taille: 12px;
    --chapitres-taille: 13px;
    --rang-taille: 160px;
    --bouton-hauteur: 48px;
    --rangee-ecart: 12px;
    --rangee-ecart-titre: 16px;
  }
}