/* ============================================================
   FIT n FIGHT — Jetons de design
   Design éditorial « Anton / Inter » repris de la version en ligne
   (thème enfant v3.0.2).

   Le principe visuel : pas de profondeur, pas d'arrondi. La structure
   naît de filets d'un pixel et d'aplats. Toute valeur brute vit ici.
   ============================================================ */

:root {
  /* --- Fonds --- */
  --bg:      #111110;   /* noir chaud, légèrement verdi */
  --bg-alt:  #0a0a0a;   /* sections alternées, pied de page */
  --bg-field:#161615;   /* champs de formulaire */
  --bg-ph:   #1a1a1a;   /* réserve média */

  /* --- Marque --- */
  --red:     #e8142c;

  /* --- Texte --- */
  --text:      #ffffff;
  --text-80:   rgba(255, 255, 255, 0.80);
  --text-70:   rgba(255, 255, 255, 0.70);
  --text-60:   rgba(255, 255, 255, 0.60);
  --text-50:   rgba(255, 255, 255, 0.50);
  --text-35:   rgba(255, 255, 255, 0.35);
  --on-red:    #111110;   /* texte posé sur un aplat rouge */

  /* --- Filets : toute la hiérarchie repose dessus --- */
  --line:      rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);
  --line-btn:  rgba(255, 255, 255, 0.40);

  /* --- Composantes RVB, pour composer des alphas --- */
  --red-rgb:  232, 20, 44;
  --bg-rgb:   17, 17, 16;

  /* --- Typographie --- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* --- Échelle typographique --- */
  --fs-hero:    clamp(38px, 6.4vw, 68px);
  --fs-page-h:  clamp(36px, 6vw, 60px);
  --fs-sec-h:   clamp(28px, 4.2vw, 40px);
  --fs-sub-h:   clamp(20px, 2.6vw, 26px);

  /* --- Rythme --- */
  --wrap-max: 1280px;
  --wrap-px:  clamp(20px, 5vw, 64px);
  /* Rythme vertical. 100px de part et d'autre faisaient 200px entre
     deux sections : le contenu se perdait. 72px en donnent 144, encore
     amples mais tenus. */
  --sec-py:   clamp(44px, 5.5vw, 72px);
  --header-h: 74px;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: clamp(24px, 4vw, 56px);

  /* --- Mouvement --- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.3s;

  /* --- Traitement des médias ---
     Une désaturation légère et un assombrissement unifient des rushes
     tournés dans des conditions différentes, et garantissent le
     contraste du texte blanc posé par-dessus. */
  --media-filter:      grayscale(0.2) contrast(1.05) brightness(0.7);
  --media-filter-soft: grayscale(0.15) contrast(1.05) brightness(0.92);
  --media-filter-dim:  grayscale(0.25) contrast(1.05) brightness(0.55);
}