/* =========================================================
   🌍 VARIABLES CSS GLOBALES — WPZ / Movie & Play
   - Base + Alias modernes + Tokens UI complets
   - Prépare la centralisation du style.css (sans casser l’existant)
   ========================================================= */

:root{

  /* =========================
     🎨 BRAND / COULEURS PRINCIPALES
     ========================= */
  --primary: #c0392b;
  --primary-hover: #a93226;
  --primary-soft: rgba(192,57,43,.12);

  --couleur-rouge: var(--primary);
  --couleur-noir: #111111;
  --couleur-gris: #999999;
  --couleur-blanc: #ffffff;

  --couleur-titres: #222222;
  --couleur-textes: #333333;

  /* Couleurs “status” (utile badges, messages, etc.) */
  --success: #27ae60;
  --success-soft: rgba(39,174,96,.14);

  --warning: #f39c12;
  --warning-soft: rgba(243,156,18,.16);

  --info: #2980b9;
  --info-soft: rgba(41,128,185,.16);

  --danger: #e74c3c;
  --danger-soft: rgba(231,76,60,.16);

  /* =========================
     🧱 BACKGROUNDS
     ========================= */
  --couleur-fond: #1e1e1e;
  --couleur-fond-clair: #2a2a2a;

  /* Alias modernes (utilisés partout) */
  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --bg-muted: #eef0f3;
  --bg-dark: #0b0c0f;
  --bg-darker: #07080a;

  /* Fond “glass” */
  --glass-bg: rgba(255,255,255,.08);
  --glass-bg-strong: rgba(255,255,255,.12);

  /* =========================
     ✍️ TEXTES
     ========================= */
	   --font-brand: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;

  --texte-principal: #ffffff;
  --texte-secondaire: #cccccc;

  --text: #111111;
  --text-soft: rgba(0,0,0,.62);
  --text-muted: rgba(0,0,0,.72);
  --text-invert: #ffffff;

  /* Texte sur fond dark */
  --text-on-dark: rgba(255,255,255,.92);
  --text-on-dark-soft: rgba(255,255,255,.72);
  --text-on-dark-muted: rgba(255,255,255,.62);

  /* =========================
     📐 STRUCTURE / LAYOUT
     ========================= */
  --header-height: 70px;
  --wpz-container: 1200px;

  /* Espacements génériques */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* =========================
     🟦 BORDURES & RADIUS
     ========================= */
  --border: rgba(0,0,0,.12);
  --border-strong: rgba(0,0,0,.20);
  --border-soft: rgba(0,0,0,.08);

  --border-light: rgba(255,255,255,.14);
  --border-light-strong: rgba(255,255,255,.20);

  --border-dark: rgba(0,0,0,.25);

  --rayon-bord: 6px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* =========================
     🌫️ OMBRES
     ========================= */
  --ombre-soft: 0 0 8px rgba(0,0,0,.20);
  --ombre-medium: 0 0 12px rgba(0,0,0,.40);

  --shadow-xs: 0 2px 6px rgba(0,0,0,.06);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.12);
  --shadow: 0 12px 30px rgba(0,0,0,.18);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.30);

  /* =========================
     🖤 OVERLAYS / HERO / GLASS
     ========================= */
  --overlay-dark: rgba(0,0,0,.55);
  --overlay-darker: rgba(0,0,0,.72);
  --overlay-deep: rgba(0,0,0,.88);
  --overlay-light: rgba(255,255,255,.06);

  --glass-border: rgba(255,255,255,.14);
  --glass-border-strong: rgba(255,255,255,.20);
  --glass-blur: blur(6px);

  /* =========================
     🔵 INTERACTIONS / FOCUS
     ========================= */
  --ring: rgba(192,57,43,.35);
  --ring-strong: rgba(192,57,43,.55);

  --transition-fast: 150ms ease;
  --transition: 180ms ease;
  --transition-slow: 260ms ease;

  /* =========================
     ⭐ NOTES / ÉTOILES
     ========================= */
  --wpz-star: #f1c40f;
  --wpz-star-empty: #dddddd;

  /* =========================
     ➡️ FLÈCHES / CAROUSELS
     ========================= */
  --wpz-arrow-color: var(--primary);
  --wpz-arrow-bg: rgba(192,57,43,.12);
  --wpz-arrow-bg-hover: rgba(192,57,43,.22);

  /* Dimension “standard” boutons ronds (carousels, close, etc.) */
  --btn-round: 44px;

  /* =========================
     🎭 BADGES / CHIPS (cohérence UI)
     ========================= */
  --badge-bg: rgba(255,255,255,.10);
  --badge-br: rgba(255,255,255,.14);
  --badge-tx: #ffffff;

  --chip-bg: rgba(0,0,0,.35);
  --chip-br: rgba(255,255,255,.14);
  --chip-tx: #ffffff;

  /* =========================
     🎬 HERO (tokens utiles)
     ========================= */
  --hero-content-max: 1200px;
  --hero-height-min: 380px;
  --hero-height-max: 560px;

  /* =========================
     🧩 Z-INDEX (cohérence globale)
     ========================= */
  --z-header: 999;
  --z-overlay: 1000;
  --z-modal: 2000;
}