/* ============================================================
 *  MBOA STREAM — Design System Ultra Complet v4.0
 *  Fichier : mboa.css
 *  Style : Luxe africain · Or noir · Futuriste cinéma · Mobile-first
 *  Basé exactement sur la maquette 12 écrans
 *  Écrans : Splash, Connexion, Inscription, Dashboard, Films,
 *  Afrique & Novelas, Détail Film, Lecteur Vidéo, Recherche,
 *  Mon Compte, Abonnements, Demander un Film
 * ============================================================ */

/* ─────────────────────────────────────────────────────────────
   0. RESET & BASE
───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-sans);
  overflow-x: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }
input, textarea, select {
  font-family: inherit;
  background: none;
  border: none;
  outline: none;
  color: inherit;
}
ul, ol { list-style: none; }
svg { display: block; }

/* ─────────────────────────────────────────────────────────────
   1. VARIABLES & DESIGN TOKENS
───────────────────────────────────────────────────────────── */
:root {
  /* ── Palette Or principale (maquette : #C9A84C) ── */
  --or:              #C9A84C;
  --or-vif:          #D4B35A;
  --or-clair:        #E8C96A;
  --or-pale:         #F2DFA0;
  --or-sombre:       #8B6914;
  --or-tres-sombre:  #5A4510;
  --or-lueur:        rgba(201,168,76,0.18);
  --or-lueur-forte:  rgba(201,168,76,0.35);
  --or-ombre:        rgba(201,168,76,0.06);
  --or-bord:         rgba(201,168,76,0.20);
  --or-bord-fort:    rgba(201,168,76,0.45);
  --or-text-shadow:  0 0 30px rgba(201,168,76,0.4), 0 0 60px rgba(201,168,76,0.15);

  /* ── Noirs (fond principal #080808 maquette) ── */
  --noir:            #080808;
  --noir1:           #0D0C0A;
  --noir2:           #111010;
  --noir3:           #161411;
  --noir4:           #1C1A17;
  --noir5:           #222018;
  --noir6:           #28261F;
  --noir7:           #2E2B23;
  --noir8:           #343129;

  /* ── Gris ── */
  --gris-profond:    #3A3830;
  --gris-sombre:     #504E44;
  --gris:            #7A7568;
  --gris-moyen:      #9A9589;
  --gris-clair:      #C4BDB0;
  --gris-tres-clair: #DDD8CE;

  /* ── Blancs ── */
  --blanc:           #F5F0E8;
  --blanc-pur:       #FFFFFF;
  --blanc-froid:     #EEF0F2;

  /* ── Couleurs fonctionnelles ── */
  --rouge:           #9B2B2B;
  --rouge-clair:     #C43030;
  --rouge-lueur:     rgba(155,43,43,0.25);
  --vert-wa:         #25D366;
  --vert-wa-sombre:  #1AA752;
  --vert-succes:     #4CAF50;
  --bleu-info:       #2196F3;
  --orange-new:      #E8720C;
  --orange-hot:      #FF5722;

  /* ── Typographies (exactement maquette) ── */
  --font-serif:      'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:       'DM Sans', 'Outfit', 'Inter', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', monospace;
  --font-display:    'Bebas Neue', 'Impact', sans-serif;

  /* ── Tailles texte ── */
  --text-2xs:   0.58rem;
  --text-xs:    0.68rem;
  --text-sm:    0.80rem;
  --text-base:  0.90rem;
  --text-md:    1.00rem;
  --text-lg:    1.10rem;
  --text-xl:    1.28rem;
  --text-2xl:   1.55rem;
  --text-3xl:   1.95rem;
  --text-4xl:   2.55rem;
  --text-5xl:   3.30rem;
  --text-hero:  clamp(2.8rem, 7vw, 6rem);

  /* ── Espacements ── */
  --sp-1:   0.25rem;
  --sp-2:   0.50rem;
  --sp-3:   0.75rem;
  --sp-4:   1.00rem;
  --sp-5:   1.25rem;
  --sp-6:   1.50rem;
  --sp-8:   2.00rem;
  --sp-10:  2.50rem;
  --sp-12:  3.00rem;
  --sp-16:  4.00rem;
  --sp-20:  5.00rem;
  --sp-24:  6.00rem;

  /* Alias compatibilité */
  --space-1:  var(--sp-1);
  --space-2:  var(--sp-2);
  --space-3:  var(--sp-3);
  --space-4:  var(--sp-4);
  --space-5:  var(--sp-5);
  --space-6:  var(--sp-6);
  --space-8:  var(--sp-8);
  --space-10: var(--sp-10);
  --space-12: var(--sp-12);
  --space-16: var(--sp-16);
  --space-20: var(--sp-20);
  --space-24: var(--sp-24);

  /* ── Rayons ── */
  --r-none:  0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-2xl:   24px;
  --r-full:  9999px;

  /* ── Ombres ── */
  --ombre-sm:    0 2px 8px rgba(0,0,0,0.45);
  --ombre-md:    0 4px 20px rgba(0,0,0,0.55);
  --ombre-lg:    0 8px 40px rgba(0,0,0,0.65);
  --ombre-xl:    0 16px 60px rgba(0,0,0,0.75);
  --ombre-or:    0 4px 24px rgba(201,168,76,0.22);
  --ombre-or-lg: 0 8px 40px rgba(201,168,76,0.32);
  --ombre-rouge: 0 4px 24px rgba(155,43,43,0.28);
  --ombre-inset: inset 0 0 0 1px rgba(201,168,76,0.15);

  /* ── Transitions ── */
  --transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition:        0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.50s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.40s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-spring: 0.60s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Z-index ── */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  50;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-top:     500;

  /* ── Dimensions mobiles (maquette 390px) ── */
  --mobile-w:       390px;
  --nav-h:          56px;
  --bottom-bar-h:   60px;
  --status-bar-h:   44px;

  /* ── Gradients récurrents ── */
  --gradient-or:       linear-gradient(135deg, var(--or-sombre) 0%, var(--or) 50%, var(--or-clair) 100%);
  --gradient-noir:     linear-gradient(180deg, var(--noir) 0%, var(--noir2) 100%);
  --gradient-card:     linear-gradient(to top, rgba(8,8,8,0.98) 0%, rgba(8,8,8,0.65) 38%, rgba(8,8,8,0.12) 70%, transparent 100%);
  --gradient-hero:     linear-gradient(to top, var(--noir) 0%, rgba(8,8,8,0.82) 30%, rgba(8,8,8,0.28) 60%, transparent 100%);
  --gradient-shimmer:  linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.08) 50%, transparent 100%);
}

/* ─────────────────────────────────────────────────────────────
   2. SCROLLBAR PERSONNALISÉE
───────────────────────────────────────────────────────────── */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: var(--noir2); }
::-webkit-scrollbar-thumb        { background: var(--or-sombre); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover  { background: var(--or); }
::-webkit-scrollbar-corner       { background: var(--noir2); }

.scroll-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scroll-hidden::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────
   3. SÉLECTION DE TEXTE
───────────────────────────────────────────────────────────── */
::selection {
  background: rgba(201,168,76,0.28);
  color: var(--or-clair);
}
::-moz-selection {
  background: rgba(201,168,76,0.28);
  color: var(--or-clair);
}

/* ─────────────────────────────────────────────────────────────
   4. TYPOGRAPHIE GLOBALE
───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.1;
  color: var(--blanc);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

p {
  line-height: 1.65;
  color: var(--gris-clair);
  font-size: var(--text-base);
  font-weight: 300;
}

.text-or      { color: var(--or); }
.text-gris    { color: var(--gris); }
.text-blanc   { color: var(--blanc); }
.text-rouge   { color: var(--rouge-clair); }
.text-vert    { color: var(--vert-succes); }
.text-serif   { font-family: var(--font-serif); }
.text-upper   { text-transform: uppercase; letter-spacing: 0.12em; }
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-base    { font-size: var(--text-base); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.font-300     { font-weight: 300; }
.font-500     { font-weight: 500; }
.font-600     { font-weight: 600; }
.font-700     { font-weight: 700; }

/* ─────────────────────────────────────────────────────────────
   5. LAYOUT UTILITAIRES
───────────────────────────────────────────────────────────── */
.container     { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-6); }
.container-sm  { max-width: 680px;  margin: 0 auto; padding: 0 var(--sp-4); }
.container-md  { max-width: 900px;  margin: 0 auto; padding: 0 var(--sp-6); }
.container-xl  { max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-6); }

.flex              { display: flex; }
.flex-col          { display: flex; flex-direction: column; }
.flex-wrap         { flex-wrap: wrap; }
.items-center      { align-items: center; }
.items-start       { align-items: flex-start; }
.items-end         { align-items: flex-end; }
.justify-center    { justify-content: center; }
.justify-between   { justify-content: space-between; }
.justify-end       { justify-content: flex-end; }
.justify-start     { justify-content: flex-start; }
.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-5  { gap: var(--sp-5); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }

.w-full   { width: 100%; }
.h-full   { height: 100%; }
.flex-1   { flex: 1; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.rounded     { border-radius: var(--r-md); }
.rounded-sm  { border-radius: var(--r-sm); }
.rounded-lg  { border-radius: var(--r-lg); }
.rounded-xl  { border-radius: var(--r-xl); }
.rounded-full{ border-radius: var(--r-full); }

/* ─────────────────────────────────────────────────────────────
   6. GRAIN OVERLAY (TEXTURE CINÉMA)
───────────────────────────────────────────────────────────── */
.grain-overlay {
  position: fixed;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  z-index: var(--z-top);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

/* ─────────────────────────────────────────────────────────────
   7. ÉCRAN 00 — SPLASH SCREEN
   Maquette : fond noir, logo M doré centré, spinner, tagline
───────────────────────────────────────────────────────────── */
.splash-screen {
  position: fixed;
  inset: 0;
  background: var(--noir);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-top);
  gap: var(--sp-5);
}

.splash-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 50% 50%, rgba(201,168,76,0.06) 0%, transparent 68%),
    radial-gradient(ellipse 35% 55% at 18% 80%, rgba(155,43,43,0.04) 0%, transparent 58%),
    radial-gradient(ellipse 35% 55% at 82% 18%, rgba(201,168,76,0.04) 0%, transparent 58%);
  pointer-events: none;
}

.splash-logo-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: splashReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Emblème circulaire M — exactement maquette */
.splash-logo-emblem {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(201,168,76,0.14) 0%, transparent 68%);
  border: 1px solid rgba(201,168,76,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  position: relative;
  animation: splashPulse 3s ease-in-out infinite;
}

.splash-logo-emblem::before {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.10);
  animation: splashRing 3.2s ease-in-out infinite;
}

.splash-logo-emblem::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.05);
  animation: splashRing 3.2s ease-in-out infinite 0.55s;
}

/* Lettre M principale dans l'emblème */
.splash-logo-m {
  font-family: var(--font-serif);
  font-size: 4.4rem;
  font-weight: 700;
  color: var(--or);
  line-height: 1;
  text-shadow: var(--or-text-shadow);
}

/* Texte MBOA STREAM sous l'emblème */
.splash-logo-text {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--or);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(201,168,76,0.32);
  margin-bottom: var(--sp-2);
}

/* Tagline "L'Élégance du Cinéma au Pays" */
.splash-tagline {
  font-size: var(--text-xs);
  color: var(--gris-clair);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 300;
  opacity: 0.85;
}

/* Spinner doré */
.splash-loader {
  width: 38px;
  height: 38px;
  position: relative;
  margin-top: var(--sp-8);
}

.splash-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--or);
  animation: splashSpin 0.95s linear infinite;
}

.splash-loader-ring:nth-child(2) {
  inset: 6px;
  border-top-color: rgba(201,168,76,0.38);
  animation-duration: 1.45s;
  animation-direction: reverse;
}

/* ─────────────────────────────────────────────────────────────
   8. TOP BAR MOBILE (sticky, utilisée dans tous les écrans)
   Maquette : fond noir semi-transparent, logo doré centré ou titre
───────────────────────────────────────────────────────────── */
.top-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(201,168,76,0.07);
  transition: background var(--transition), border-color var(--transition);
}

.top-bar.transparent {
  background: transparent;
  border-color: transparent;
}

.top-bar.solid {
  background: var(--noir2);
  border-color: rgba(201,168,76,0.12);
}

/* Logo MBOA Stream — couleur or, lettrage serif */
.top-bar-logo {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--or);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 0 18px rgba(201,168,76,0.25);
}

.top-bar-logo .logo-light { color: var(--blanc); font-weight: 300; }

/* Titre de page (ex: "Films", "Afrique & Novelas") */
.top-bar-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--or);
  letter-spacing: 0.02em;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 40px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 40px;
  justify-content: flex-end;
}

/* Bouton icône de la top bar */
.top-bar-action {
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-clair);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  flex-shrink: 0;
}

.top-bar-action:hover,
.top-bar-action:active {
  color: var(--or);
  background: rgba(201,168,76,0.08);
  border-color: rgba(201,168,76,0.20);
}

.top-bar-action svg { width: 17px; height: 17px; }

/* Retour arrière */
.top-bar-back {
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blanc);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.top-bar-back:hover { color: var(--or); }
.top-bar-back svg { width: 20px; height: 20px; }

/* Badge notification */
.top-bar-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  background: var(--rouge-clair);
  color: #fff;
  font-size: 0.50rem;
  font-weight: 700;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  border: 1.5px solid var(--noir);
  line-height: 1;
}

/* Status bar iOS simulation */
.status-bar {
  height: var(--status-bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  background: var(--noir);
}

.status-bar-time {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blanc);
  letter-spacing: 0.02em;
}

.status-bar-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--blanc);
}

.status-bar-icons svg { width: 13px; height: 13px; }

/* ─────────────────────────────────────────────────────────────
   9. NAVIGATION DESKTOP
   Maquette : transparent → fond sombre au scroll
───────────────────────────────────────────────────────────── */
nav.mboa-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 3rem;
  transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
  background: transparent;
}

nav.mboa-nav.scrolled {
  background: rgba(8,8,8,0.97);
  backdrop-filter: blur(22px) saturate(1.8);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  padding: 0.80rem 3rem;
  box-shadow: 0 1px 0 rgba(201,168,76,0.10);
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--or);
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(201,168,76,0.22);
  transition: text-shadow var(--transition);
}

.logo:hover { text-shadow: 0 0 32px rgba(201,168,76,0.42); }
.logo span  { color: var(--blanc); font-weight: 300; }

.nav-liens {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  list-style: none;
}

.nav-liens a {
  color: rgba(245,240,232,0.72);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition);
  position: relative;
  padding: 0.25rem 0;
}

.nav-liens a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--or), var(--or-clair));
  transition: width var(--transition);
}

.nav-liens a:hover          { color: var(--or); }
.nav-liens a:hover::after,
.nav-liens a.active::after  { width: 100%; }
.nav-liens a.active         { color: var(--or); }

.nav-actions {
  display: flex;
  gap: 0.70rem;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────
   10. BOTTOM NAVIGATION (mobile, maquette 5 onglets)
   Icônes : Accueil, Films, Séries, Afrique, Animés, Compte
───────────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--bottom-bar-h);
  background: rgba(8,8,8,0.97);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border-top: 1px solid rgba(201,168,76,0.09);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--sp-1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.22), transparent);
  pointer-events: none;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-width: 46px;
  position: relative;
}

.bottom-nav-item .nav-icon {
  width: 21px;
  height: 21px;
  transition: all var(--transition-fast);
  color: var(--gris);
  display: block;
}

.bottom-nav-item .nav-label {
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gris);
  transition: color var(--transition-fast);
  line-height: 1;
}

/* État actif */
.bottom-nav-item.active .nav-icon {
  color: var(--or);
  filter: drop-shadow(0 0 5px rgba(201,168,76,0.50));
}

.bottom-nav-item.active .nav-label { color: var(--or); }

.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 7px rgba(201,168,76,0.65);
}

/* Badge rouge sur nav item (ex: compte) */
.bottom-nav-badge {
  position: absolute;
  top: 3px;
  right: 6px;
  min-width: 15px;
  height: 15px;
  background: var(--rouge-clair);
  color: #fff;
  font-size: 0.52rem;
  font-weight: 700;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  border: 1.5px solid var(--noir);
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────
   11. BOUTONS SYSTÈME COMPLET
───────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all var(--transition);
  border-radius: var(--r-xs);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition-fast);
}

.btn:active::after { background: rgba(255,255,255,0.04); }

/* Tailles */
.btn-xs  { padding: 0.28rem 0.75rem; font-size: 0.62rem; }
.btn-sm  { padding: 0.42rem 1.05rem; font-size: 0.70rem; }
.btn-md  { padding: 0.62rem 1.55rem; font-size: 0.80rem; }
.btn-lg  { padding: 0.82rem 2.15rem; font-size: 0.90rem; }
.btn-xl  { padding: 1.02rem 2.75rem; font-size: 0.98rem; }
.btn-full { width: 100%; }

/* ── Bouton or (principal, maquette "Se Connecter au Luxe") ── */
.btn-gold {
  background: var(--or);
  color: var(--noir);
  border-color: var(--or);
  box-shadow: 0 2px 14px rgba(201,168,76,0.22);
  font-weight: 600;
}

.btn-gold:hover {
  background: var(--or-clair);
  border-color: var(--or-clair);
  box-shadow: 0 4px 22px rgba(201,168,76,0.38);
  transform: translateY(-1px);
}

.btn-gold:active { transform: translateY(0); }

/* ── Bouton outline or ── */
.btn-ghost {
  background: transparent;
  color: var(--or);
  border-color: rgba(201,168,76,0.38);
}

.btn-ghost:hover {
  background: rgba(201,168,76,0.07);
  border-color: var(--or);
}

/* ── Bouton outline blanc ── */
.btn-outline {
  background: transparent;
  color: var(--blanc);
  border-color: rgba(245,240,232,0.22);
}

.btn-outline:hover {
  border-color: var(--or);
  color: var(--or);
}

/* ── Bouton dark ── */
.btn-dark {
  background: rgba(255,255,255,0.06);
  color: var(--blanc);
  border-color: rgba(255,255,255,0.08);
}

.btn-dark:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.13);
}

/* ── Bouton rouge ── */
.btn-rouge {
  background: var(--rouge);
  color: var(--blanc);
  border-color: var(--rouge);
}

.btn-rouge:hover {
  background: var(--rouge-clair);
  border-color: var(--rouge-clair);
}

/* ── Bouton WhatsApp (vert) ── */
.btn-whatsapp {
  background: var(--vert-wa);
  color: var(--blanc-pur);
  border-color: var(--vert-wa);
  border-radius: var(--r-xs);
}

.btn-whatsapp:hover {
  background: var(--vert-wa-sombre);
  border-color: var(--vert-wa-sombre);
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(37,211,102,0.28);
}

/* ── Bouton Play (maquette ▶ Regarder maintenant) ── */
.btn-play {
  background: rgba(255,255,255,0.13);
  color: var(--blanc);
  border-color: rgba(255,255,255,0.22);
  border-radius: var(--r-xs);
  backdrop-filter: blur(8px);
  padding: 0.72rem 1.75rem;
  font-size: 0.83rem;
  gap: 0.55rem;
}

.btn-play:hover {
  background: var(--blanc);
  color: var(--noir);
}

.btn-play svg { width: 17px; height: 17px; }

/* ── Bouton Play Gold (maquette "Regarder") ── */
.btn-play-gold {
  background: var(--or);
  color: var(--noir);
  border-color: var(--or);
  border-radius: var(--r-xs);
  padding: 0.72rem 1.75rem;
  font-size: 0.83rem;
  gap: 0.55rem;
  font-weight: 600;
}

.btn-play-gold:hover {
  background: var(--or-clair);
  box-shadow: var(--ombre-or);
  transform: translateY(-2px);
}

.btn-play-gold svg { width: 15px; height: 15px; fill: var(--noir); }

/* ── Bouton + Ma Liste ── */
.btn-liste {
  background: rgba(255,255,255,0.09);
  color: var(--blanc);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-xs);
  padding: 0.72rem 1.45rem;
  font-size: 0.80rem;
  gap: 0.48rem;
}

.btn-liste:hover {
  background: rgba(201,168,76,0.10);
  border-color: var(--or-bord);
  color: var(--or);
}

.btn-liste svg { width: 15px; height: 15px; }

/* ── Bouton icône ── */
.btn-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.06);
  color: var(--gris-clair);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.btn-icon:hover {
  background: rgba(201,168,76,0.10);
  border-color: rgba(201,168,76,0.20);
  color: var(--or);
}

.btn-icon svg { width: 17px; height: 17px; }
.btn-icon-sm { width: 30px; height: 30px; }
.btn-icon-sm svg { width: 14px; height: 14px; }
.btn-icon-lg { width: 46px; height: 46px; }
.btn-icon-lg svg { width: 21px; height: 21px; }

/* État loading */
.btn.loading {
  pointer-events: none;
  opacity: 0.68;
}

.btn.loading::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spinBtn 0.8s linear infinite;
}

.btn.loading span { opacity: 0; }

/* ─────────────────────────────────────────────────────────────
   12. CHAMPS DE FORMULAIRE
   Maquette : fond très sombre, bordure or subtile, focus or
───────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-5); }

.form-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-clair);
  margin-bottom: var(--sp-2);
  font-weight: 500;
}

.form-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* Input (maquette : fond #161411, bord or léger) */
.form-input {
  width: 100%;
  background: rgba(255,255,255,0.038);
  border: 1px solid rgba(201,168,76,0.14);
  color: var(--blanc);
  padding: 0.74rem 1rem;
  font-size: 0.88rem;
  font-family: var(--font-sans);
  border-radius: var(--r-xs);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  line-height: 1;
}

.form-input:focus {
  border-color: var(--or);
  background: rgba(201,168,76,0.038);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.07);
}

.form-input::placeholder {
  color: var(--gris);
  opacity: 0.68;
}

.form-input.error {
  border-color: var(--rouge-clair);
  box-shadow: 0 0 0 3px var(--rouge-lueur);
}

/* Icône à gauche */
.form-input-icon {
  position: absolute;
  left: 0.875rem;
  color: var(--gris);
  pointer-events: none;
  width: 15px;
  height: 15px;
}

.form-input.has-icon { padding-left: 2.45rem; }

/* Action à droite (œil password) */
.form-input-action {
  position: absolute;
  right: 0.875rem;
  background: none;
  border: none;
  color: var(--gris);
  cursor: pointer;
  padding: 2px;
  transition: color var(--transition-fast);
}

.form-input-action:hover { color: var(--or); }
.form-input-action svg  { width: 15px; height: 15px; }

/* Messages */
.form-error {
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--rouge-clair);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.form-hint {
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gris);
}

/* Checkbox */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.form-checkbox-input {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(201,168,76,0.32);
  border-radius: var(--r-xs);
  background: var(--noir4);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  position: relative;
}

.form-checkbox-input:checked {
  background: var(--or);
  border-color: var(--or);
}

.form-checkbox-input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: 1.5px solid var(--noir);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.form-checkbox-label {
  font-size: var(--text-sm);
  color: var(--gris-clair);
  line-height: 1.4;
}

/* Textarea */
.form-textarea {
  width: 100%;
  background: rgba(255,255,255,0.038);
  border: 1px solid rgba(201,168,76,0.14);
  color: var(--blanc);
  padding: 0.74rem 1rem;
  font-size: 0.88rem;
  font-family: var(--font-sans);
  border-radius: var(--r-xs);
  resize: vertical;
  min-height: 96px;
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.55;
}

.form-textarea:focus {
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.07);
}

.form-textarea::placeholder { color: var(--gris); opacity: 0.68; }

.form-counter {
  text-align: right;
  font-size: var(--text-xs);
  color: var(--gris);
  margin-top: var(--sp-1);
}

/* Select */
.form-select {
  width: 100%;
  background: rgba(255,255,255,0.038);
  border: 1px solid rgba(201,168,76,0.14);
  color: var(--blanc);
  padding: 0.74rem 2.45rem 0.74rem 1rem;
  font-size: 0.88rem;
  font-family: var(--font-sans);
  border-radius: var(--r-xs);
  transition: border-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9A84C' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
}

.form-select:focus { border-color: var(--or); }
.form-select option { background: var(--noir4); color: var(--blanc); }

/* Diviseur de formulaire (OU) */
.form-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}

.form-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(201,168,76,0.11);
}

.form-divider-text {
  font-size: var(--text-xs);
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────
   13. ÉCRAN 01 — CONNEXION
   Maquette : logo M centré, deux champs, btn gold, btn outline,
   WhatsApp, installer banner
───────────────────────────────────────────────────────────── */
.auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: var(--noir);
  padding: var(--sp-8) var(--sp-5) var(--sp-16);
  position: relative;
  overflow: hidden;
}

.auth-screen::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 450px;
  height: 450px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.046) 0%, transparent 68%);
  pointer-events: none;
}

/* Bloc logo auth */
.auth-logo-block {
  text-align: center;
  margin-bottom: var(--sp-8);
}

.auth-logo-emblem {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.24);
  background: radial-gradient(circle at 38% 33%, rgba(201,168,76,0.10) 0%, transparent 68%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  position: relative;
}

.auth-logo-emblem::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.08);
}

.auth-logo-letter {
  font-family: var(--font-serif);
  font-size: 2.7rem;
  font-weight: 700;
  color: var(--or);
  line-height: 1;
  text-shadow: var(--or-text-shadow);
}

.auth-logo-name {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--or);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.22rem;
}

.auth-logo-tagline {
  font-size: var(--text-xs);
  color: var(--gris);
  letter-spacing: 0.10em;
}

/* Carte auth */
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--noir3);
  border: 1px solid rgba(201,168,76,0.12);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-6);
  position: relative;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.32), transparent);
}

.auth-card-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: var(--sp-2);
  text-align: center;
}

.auth-card-subtitle {
  font-size: var(--text-sm);
  color: var(--gris);
  text-align: center;
  margin-bottom: var(--sp-8);
  font-weight: 300;
}

.auth-footer-text {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: var(--text-sm);
  color: var(--gris);
}

.auth-footer-text a {
  color: var(--or);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.auth-footer-text a:hover { color: var(--or-clair); }

/* Bloc WhatsApp (maquette "Pas encore membre ?") */
.auth-whatsapp-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(37,211,102,0.055);
  border: 1px solid rgba(37,211,102,0.17);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
}

.auth-whatsapp-row .wa-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--vert-wa);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auth-whatsapp-row .wa-icon svg { width: 16px; height: 16px; fill: white; }

.auth-whatsapp-row p {
  font-size: var(--text-xs);
  color: var(--gris-clair);
  line-height: 1.5;
  margin: 0;
}

.auth-whatsapp-row a {
  color: var(--vert-wa);
  font-weight: 600;
}

/* Bannière "Installer Mboa Stream" */
.auth-install-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  background: rgba(201,168,76,0.04);
  border: 1px solid rgba(201,168,76,0.11);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-4);
  width: 100%;
  max-width: 400px;
}

.auth-install-banner-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.auth-install-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--or-ombre);
  border: 1px solid var(--or-bord);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--or);
  flex-shrink: 0;
}

.auth-install-icon svg { width: 17px; height: 17px; }

.auth-install-text p:first-child {
  font-size: var(--text-xs);
  color: var(--gris-clair);
  font-weight: 500;
  margin: 0;
}

.auth-install-text p:last-child {
  font-size: 0.60rem;
  color: var(--gris);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   14. ÉCRAN 03 — DASHBOARD / ACCUEIL
   Maquette : Hero fullscreen, rangées de contenu, bottom nav
───────────────────────────────────────────────────────────── */
.home-screen {
  padding-bottom: calc(var(--bottom-bar-h) + var(--sp-6));
  background: var(--noir);
}

/* ── Hero Banner (maquette Mission Impossible) ── */
.hero-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 9/14;
  max-height: 78vh;
  overflow: hidden;
  background: var(--noir2);
}

@media (min-width: 768px) {
  .hero-banner { aspect-ratio: 16/9; max-height: 88vh; }
}

.hero-banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.82);
  transition: transform 8s ease;
}

.hero-banner:hover .hero-banner-bg {
  transform: scale(1.03);
}

.hero-banner-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--noir) 0%, rgba(8,8,8,0.78) 32%, rgba(8,8,8,0.10) 62%, transparent 100%),
    linear-gradient(to right, rgba(8,8,8,0.52) 0%, transparent 58%);
}

.hero-banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 var(--sp-5) var(--sp-8);
}

/* Badge "À LA UNE" — exactement maquette */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  background: var(--or);
  color: var(--noir);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.26rem 0.68rem;
  border-radius: var(--r-xs);
  margin-bottom: var(--sp-3);
}

.hero-badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--noir);
  animation: pulseDot 2s ease-in-out infinite;
}

/* Titre du film hero (maquette : MISSION IMPOSSIBLE) */
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 6.5vw, 3.8rem);
  font-weight: 700;
  color: var(--blanc);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
  text-shadow: 0 4px 28px rgba(0,0,0,0.52);
}

/* Sous-titre (DEAD RECKONING) */
.hero-subtitle {
  font-size: var(--text-sm);
  color: var(--gris-clair);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: var(--sp-4);
  max-width: 310px;
}

.hero-actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* Dots de pagination hero */
.hero-dots {
  display: flex;
  gap: 5px;
  position: absolute;
  bottom: var(--sp-16);
  left: var(--sp-5);
}

.hero-dot {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.24);
  transition: all var(--transition);
  cursor: pointer;
}

.hero-dot.active {
  width: 26px;
  background: var(--or);
  box-shadow: 0 0 7px rgba(201,168,76,0.55);
}

/* ─────────────────────────────────────────────────────────────
   15. RANGÉES DE CONTENU (CONTENT ROWS)
   Maquette : titre section + Voir tout, scroll horizontal
───────────────────────────────────────────────────────────── */
.content-row {
  padding: var(--sp-5) 0 var(--sp-2);
}

.content-row + .content-row { padding-top: 0; }

.row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-3);
}

/* Titre de rangée (🔥 Les Nouveautés 2026) */
.row-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--blanc);
  letter-spacing: 0.01em;
}

.row-title-emoji { font-size: 0.98rem; }

/* Lien "Voir tout" */
.row-see-all {
  font-size: var(--text-xs);
  color: var(--or);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  white-space: nowrap;
}

.row-see-all:hover { color: var(--or-clair); }
.row-see-all svg { width: 11px; height: 11px; }

/* Track de scroll horizontal */
.row-scroll {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: 0 var(--sp-4) var(--sp-3);
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.row-scroll::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────
   16. CARTES FILM (PORTRAIT 2:3)
   Maquette : petites vignettes avec overlay gradient + titre
───────────────────────────────────────────────────────────── */
.film-card {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: var(--noir3);
  transition: transform var(--transition), box-shadow var(--transition);
}

.film-card:active { transform: scale(0.95); }

/* Tailles portrait */
.film-card-sm   { width: 88px;  aspect-ratio: 2/3; }
.film-card-md   { width: 108px; aspect-ratio: 2/3; }
.film-card-lg   { width: 125px; aspect-ratio: 2/3; }
.film-card-xl   { width: 145px; aspect-ratio: 2/3; }
.film-card-2xl  { width: 180px; aspect-ratio: 2/3; }
.film-card-hero { width: 245px; aspect-ratio: 9/14; }

/* Cartes paysage (16:9) */
.film-card-landscape-sm { width: 210px; aspect-ratio: 16/9; }
.film-card-landscape-md { width: 260px; aspect-ratio: 16/9; }
.film-card-landscape-lg { width: 320px; aspect-ratio: 16/9; }

/* Carte "Continuer à regarder" (maquette : Equalizer, Queen Charlotte) */
.film-card-continue {
  width: 200px;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: start;
  background: var(--noir3);
  transition: transform var(--transition);
}

.film-card-continue:active { transform: scale(0.95); }

.film-card-continue-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
}

.film-card-continue-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.film-card-continue:hover .film-card-continue-thumb img {
  transform: scale(1.05);
}

.film-card-continue-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.72) 0%, transparent 58%);
}

/* Barre de progression orange/or (maquette) */
.film-card-continue-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.18);
}

.film-card-continue-progress-bar {
  height: 100%;
  background: var(--or);
  border-radius: 0 2px 2px 0;
  transition: width 0.5s ease;
}

.film-card-continue-info {
  padding: var(--sp-3);
}

.film-card-continue-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blanc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.film-card-continue-ep {
  font-size: var(--text-xs);
  color: var(--gris);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────
   17. POSTER DE CARTE FILM
───────────────────────────────────────────────────────────── */
.film-card-poster {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.film-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: saturate(0.82) brightness(0.86);
}

.film-card:hover .film-card-poster img {
  transform: scale(1.08);
  filter: saturate(1.0) brightness(0.95);
}

.film-card-poster-overlay {
  position: absolute;
  inset: 0;
  background: var(--gradient-card);
  transition: opacity var(--transition);
}

.film-card-poster-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  transform: translateY(4px);
  transition: transform var(--transition);
}

.film-card:hover .film-card-poster-info { transform: translateY(0); }

.film-card-poster-title {
  font-family: var(--font-serif);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--blanc);
  line-height: 1.18;
  margin-bottom: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.film-card-poster-genre {
  font-size: 0.58rem;
  color: var(--or);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Badges sur cartes (maquette : NEW badge jaune/orange) */
.film-card-badge {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.18rem 0.50rem;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  z-index: 2;
}

.film-card-badge.new   { background: var(--orange-new); color: var(--blanc); }
.film-card-badge.hot   { background: var(--rouge);      color: var(--blanc); }
.film-card-badge.exclu { background: var(--or);         color: var(--noir);  }
.film-card-badge.hd    { background: rgba(0,0,0,0.62); color: var(--or); border: 1px solid var(--or-bord); }
.film-card-badge.vf    { background: rgba(0,150,255,0.72); color: var(--blanc); }

/* Numéro de rang (Top 10) */
.film-card-rank {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--blanc);
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0,0,0,0.82);
  -webkit-text-stroke: 1px rgba(201,168,76,0.32);
  z-index: 2;
}

/* Icône wishlist sur carte */
.film-card-wishlist {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(8,8,8,0.68);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: all var(--transition-fast);
  opacity: 0;
}

.film-card:hover .film-card-wishlist { opacity: 1; }
.film-card-wishlist svg { width: 13px; height: 13px; color: var(--blanc); }
.film-card-wishlist.active svg { color: var(--or); fill: var(--or); }

/* Placeholders couleurs (maquette : différentes teintes) */
.film-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.film-card-placeholder-icon { font-size: 2.2rem; opacity: 0.12; }

/* Palettes de fond pour placeholders (maquette 8 variantes) */
.film-bg-1 { background: linear-gradient(135deg, #1a0f0a 0%, #3d1a0a 100%); }
.film-bg-2 { background: linear-gradient(135deg, #0a0f1a 0%, #0a1a3d 100%); }
.film-bg-3 { background: linear-gradient(135deg, #0a1a0f 0%, #0a3d1a 100%); }
.film-bg-4 { background: linear-gradient(135deg, #1a0a1a 0%, #3d0a3d 100%); }
.film-bg-5 { background: linear-gradient(135deg, #1a1a0a 0%, #3d3d0a 100%); }
.film-bg-6 { background: linear-gradient(135deg, #1a0a0a 0%, #4d1010 100%); }
.film-bg-7 { background: linear-gradient(135deg, #0a1414 0%, #0a3030 100%); }
.film-bg-8 { background: linear-gradient(135deg, #100a1a 0%, #300a4d 100%); }

/* ─────────────────────────────────────────────────────────────
   18. ÉCRAN 04 — FILMS (CATALOGUE GRILLE)
   Maquette : grille de vignettes par catégories, filtres chips
───────────────────────────────────────────────────────────── */
.catalogue-screen {
  padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8));
  background: var(--noir);
}

/* Filtres chips horizontaux sticky */
.catalogue-filters {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-sticky);
  background: rgba(8,8,8,0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(201,168,76,0.07);
  padding: var(--sp-3) 0;
}

.catalogue-filters-scroll {
  display: flex;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  overflow-x: auto;
  scrollbar-width: none;
}

.catalogue-filters-scroll::-webkit-scrollbar { display: none; }

/* Chip de filtre (maquette : arrondi, fond sombre, actif = or) */
.filter-chip {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.38rem 0.95rem;
  background: rgba(255,255,255,0.048);
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--gris-clair);
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.filter-chip:hover {
  border-color: rgba(201,168,76,0.24);
  color: var(--or);
  background: rgba(201,168,76,0.048);
}

.filter-chip.active {
  background: var(--or);
  border-color: var(--or);
  color: var(--noir);
  font-weight: 600;
}

.filter-chip svg { width: 11px; height: 11px; }

/* En-tête de section catalogue (🇨🇲 Séries & Films Camerounais) */
.catalogue-section-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

.catalogue-section-flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

.catalogue-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blanc);
  flex: 1;
}

/* Grille catalogue (maquette : multi-colonnes) */
.catalogue-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 2px;
  padding: 0 var(--sp-4);
  background: rgba(201,168,76,0.038);
  border: 1px solid rgba(201,168,76,0.055);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin: 0 var(--sp-4);
}

.catalogue-grille .film-card { width: 100%; border-radius: 0; }

@media (min-width: 768px) {
  .catalogue-grille { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 3px; }
}

@media (min-width: 1024px) {
  .catalogue-grille { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 5px; }
}

/* ─────────────────────────────────────────────────────────────
   19. ÉCRAN 05 — AFRIQUE & NOVELAS
   Maquette : sections par pays drapeau, scroll horizontal
───────────────────────────────────────────────────────────── */
.afrique-screen {
  padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8));
}

.pays-section { margin-bottom: var(--sp-3); }

.pays-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
}

.pays-flag-title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.pays-flag { font-size: 1.15rem; line-height: 1; }

.pays-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blanc);
  letter-spacing: 0.01em;
}

.pays-tag {
  font-size: var(--text-xs);
  color: var(--gris);
  font-weight: 400;
}

/* ─────────────────────────────────────────────────────────────
   20. ÉCRAN 06 — DÉTAIL D'UN FILM
   Maquette : hero affiche + infos + boutons + synopsis + similaires
───────────────────────────────────────────────────────────── */
.detail-screen {
  padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8));
  background: var(--noir);
}

/* Zone hero du film (affiche + titre en overlay) */
.detail-hero {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 0;
  min-height: 160px;
  background: var(--noir2);
  overflow: hidden;
}

.detail-hero-poster {
  width: 120px;
  flex-shrink: 0;
  position: relative;
}

.detail-hero-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero-info-col {
  flex: 1;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  min-height: 160px;
  background: linear-gradient(to right, rgba(8,8,8,0.0) 0%, var(--noir) 100%);
}

/* Layout alternatif : hero plein écran */
.detail-hero-full {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 68vh;
  overflow: hidden;
}

@media (min-width: 768px) {
  .detail-hero-full { aspect-ratio: 16/9; max-height: 58vh; }
}

.detail-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.detail-hero-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--noir) 0%, rgba(8,8,8,0.88) 24%, rgba(8,8,8,0.18) 58%, transparent 100%),
    linear-gradient(to bottom, rgba(8,8,8,0.58) 0%, transparent 28%);
}

.detail-top-actions {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--sp-4) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Infos du film (maquette : titre, année, durée, HD, 16+) */
.detail-info {
  padding: var(--sp-4) var(--sp-4) var(--sp-6);
  margin-top: -2px;
}

.detail-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.detail-meta-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  color: var(--gris-clair);
}

.detail-meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gris-sombre);
}

/* Note étoiles (★★★★☆ 4.7/5) */
.detail-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--sp-2);
}

.detail-rating-stars { display: flex; gap: 2px; }
.star-filled  { color: var(--or); }
.star-half    { color: var(--or); opacity: 0.52; }
.star-empty   { color: var(--gris-sombre); }
.star-filled, .star-half, .star-empty { font-size: 0.78rem; }

.detail-rating-score {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--or);
}

/* Titre du film (maquette: BLACK PANTHER WAKANDA FOREVER) */
.detail-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 5vw, 2.7rem);
  font-weight: 700;
  color: var(--blanc);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
}

/* Tags genre */
.detail-genres {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.genre-tag {
  display: inline-flex;
  padding: 0.22rem 0.65rem;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.17);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--or);
  letter-spacing: 0.05em;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.genre-tag:hover {
  background: rgba(201,168,76,0.14);
  border-color: rgba(201,168,76,0.28);
}

/* Boutons actions film (maquette : ▶ Regarder maintenant + Ma Liste) */
.detail-actions {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}

/* Actions secondaires (Bande-annonce, Télécharger, Partager) */
.detail-secondary-actions {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-top: 1px solid rgba(201,168,76,0.07);
  border-bottom: 1px solid rgba(201,168,76,0.07);
  margin-bottom: var(--sp-5);
}

.detail-secondary-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--gris-clair);
}

.detail-secondary-btn:hover { color: var(--or); }
.detail-secondary-btn svg { width: 19px; height: 19px; }
.detail-secondary-btn span { font-size: 0.58rem; letter-spacing: 0.10em; text-transform: uppercase; }

/* Synopsis */
.detail-synopsis-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--blanc);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--sp-2);
}

.detail-synopsis {
  font-size: var(--text-sm);
  color: var(--gris-clair);
  line-height: 1.72;
  font-weight: 300;
  margin: 0;
}

.detail-synopsis.collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.detail-synopsis-toggle {
  color: var(--or);
  font-size: var(--text-xs);
  cursor: pointer;
  margin-top: var(--sp-2);
  display: inline-block;
  letter-spacing: 0.05em;
  transition: color var(--transition-fast);
}

.detail-synopsis-toggle:hover { color: var(--or-clair); }

/* ─────────────────────────────────────────────────────────────
   21. ÉCRAN 07 — LECTEUR VIDÉO
   Maquette : plein écran, barre de contrôle or, qualité liste
───────────────────────────────────────────────────────────── */
.player-screen {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
}

.player-video-area {
  position: relative;
  width: 100%;
  background: #000;
  flex: 1;
  overflow: hidden;
}

.player-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Overlay des contrôles */
.player-controls-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity var(--transition);
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, transparent 25%),
    linear-gradient(to top, rgba(0,0,0,0.78) 0%, transparent 35%);
}

.player-video-area:hover .player-controls-overlay,
.player-video-area.show-controls .player-controls-overlay {
  opacity: 1;
}

/* Top bar player */
.player-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
}

.player-title-area { flex: 1; min-width: 0; }

.player-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blanc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-subtitle {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.58);
}

.player-top-actions { display: flex; gap: var(--sp-3); flex-shrink: 0; }

.player-top-actions .btn-icon {
  background: rgba(0,0,0,0.38);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
}

/* Contrôles centraux (▐◀ ❙❙ ▶❙) */
.player-center-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-10);
  flex: 1;
}

.player-btn-skip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: rgba(255,255,255,0.82);
  transition: all var(--transition-fast);
}

.player-btn-skip:hover { color: var(--blanc); transform: scale(1.1); }
.player-btn-skip svg { width: 30px; height: 30px; }
.player-btn-skip span { font-size: 0.62rem; letter-spacing: 0.05em; }

/* Bouton play/pause principal */
.player-btn-play {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--blanc);
}

.player-btn-play:hover {
  background: rgba(255,255,255,0.24);
  border-color: rgba(255,255,255,0.48);
  transform: scale(1.05);
}

.player-btn-play svg { width: 26px; height: 26px; }

/* Barre de progression (or) */
.player-bottom-bar {
  padding: var(--sp-2) var(--sp-5) var(--sp-5);
}

.player-progress-area { margin-bottom: var(--sp-2); }

.player-progress-track {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: height var(--transition-fast);
}

.player-progress-track:hover { height: 6px; }

/* Barre remplie en OR (maquette) */
.player-progress-fill {
  height: 100%;
  background: var(--or);
  border-radius: 2px;
  position: relative;
  transition: width 0.5s linear;
}

.player-progress-fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 0 7px rgba(201,168,76,0.52);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.player-progress-track:hover .player-progress-fill::after { opacity: 1; }

.player-progress-buffered {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  z-index: -1;
}

.player-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-2);
}

.player-time {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.78);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.player-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.player-controls-left,
.player-controls-right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.player-control-btn {
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-control-btn:hover { color: var(--blanc); transform: scale(1.1); }
.player-control-btn svg  { width: 19px; height: 19px; }

/* Panneau infos sous le lecteur */
.player-info-panel {
  background: var(--noir2);
  border-top: 1px solid rgba(201,168,76,0.09);
  padding: var(--sp-5);
  overflow-y: auto;
}

.player-info-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: var(--sp-2);
}

.player-info-ep {
  font-size: var(--text-xs);
  color: var(--gris);
  letter-spacing: 0.07em;
  margin-bottom: var(--sp-4);
}

/* Liste qualité (Auto, 1080p, 720p, 480p) — maquette */
.player-quality-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.player-quality-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255,255,255,0.026);
  border: 1px solid rgba(255,255,255,0.055);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.player-quality-item:hover,
.player-quality-item.active {
  border-color: rgba(201,168,76,0.20);
  background: rgba(201,168,76,0.046);
}

.player-quality-name  { font-size: var(--text-sm); color: var(--blanc); }
.player-quality-badge { font-size: var(--text-xs); color: var(--gris); }
.player-quality-item.active .player-quality-name  { color: var(--or); }
.player-quality-item.active .player-quality-badge { color: var(--or); }

/* Actions bas lecteur (Épisodes, Signaler, Demander) */
.player-bottom-actions {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.055);
  background: var(--noir);
}

.player-bottom-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--gris-clair);
  cursor: pointer;
  transition: color var(--transition-fast);
  flex: 1;
  padding: var(--sp-2) 0;
}

.player-bottom-action:hover { color: var(--or); }
.player-bottom-action svg  { width: 17px; height: 17px; }
.player-bottom-action span { font-size: 0.56rem; letter-spacing: 0.07em; text-transform: uppercase; }

/* ─────────────────────────────────────────────────────────────
   22. ÉCRAN 08 — RECHERCHE
   Maquette : barre recherche, chips populaires, résultats liste,
   grille nouveautés
───────────────────────────────────────────────────────────── */
.search-screen {
  padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8));
  background: var(--noir);
}

.search-bar-wrapper {
  padding: var(--sp-3) var(--sp-4);
  background: var(--noir);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

/* Barre de recherche (maquette : fond gris sombre, loupe) */
.search-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(255,255,255,0.048);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-full);
  padding: var(--sp-3) var(--sp-4);
  transition: all var(--transition);
}

.search-bar:focus-within {
  border-color: rgba(201,168,76,0.28);
  background: rgba(201,168,76,0.038);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.07);
}

.search-bar svg {
  width: 17px;
  height: 17px;
  color: var(--gris);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.search-bar:focus-within svg { color: var(--or); }

.search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: var(--text-base);
  color: var(--blanc);
  font-family: var(--font-sans);
}

.search-bar input::placeholder { color: var(--gris); }

/* Bouton clear */
.search-bar-clear {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(255,255,255,0.11);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  color: var(--gris-clair);
}

.search-bar-clear:hover { background: rgba(255,255,255,0.19); color: var(--blanc); }
.search-bar-clear svg { width: 9px; height: 9px; }

/* Titre de section recherche */
.search-section-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gris-clair);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-4);
}

/* Chips de recherche populaires (Avengers, Naruto, Vikings...) */
.search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
}

.search-chip {
  padding: 0.32rem 0.85rem;
  background: rgba(255,255,255,0.046);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--gris-clair);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.search-chip:hover {
  background: rgba(201,168,76,0.07);
  border-color: rgba(201,168,76,0.20);
  color: var(--or);
}

/* Résultats liste (Black Panther, The Boys, Jujutsu...) */
.search-result-list { padding: 0 var(--sp-4); }

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.046);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.search-result-item:hover {
  background: rgba(201,168,76,0.024);
  border-radius: var(--r-sm);
  padding-left: var(--sp-2);
  margin-left: calc(-1 * var(--sp-2));
}

.search-result-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--noir3);
  flex-shrink: 0;
}

.search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }

.search-result-info { flex: 1; min-width: 0; }

.search-result-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--blanc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.search-result-meta { font-size: var(--text-xs); color: var(--gris); }

.search-result-arrow { color: var(--gris); flex-shrink: 0; }
.search-result-arrow svg { width: 13px; height: 13px; }

.search-highlight { color: var(--or); font-weight: 600; }

/* Grille miniatures "Nouveautés" (3 colonnes) */
.search-new-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
}

.search-new-card {
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 2/3;
  background: var(--noir3);
  transition: transform var(--transition-fast);
}

.search-new-card:active { transform: scale(0.95); }

.search-new-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.82);
}

.search-new-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.72) 0%, transparent 58%);
}

.search-new-card-title {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  right: var(--sp-2);
  font-size: 0.60rem;
  font-weight: 600;
  color: var(--blanc);
  line-height: 1.18;
}

/* ─────────────────────────────────────────────────────────────
   23. ÉCRAN 09 — MON COMPTE
   Maquette : avatar, nom, badge Premium Gold, menu liste
───────────────────────────────────────────────────────────── */
.compte-screen {
  padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8));
  background: var(--noir);
}

/* Zone hero compte */
.compte-hero {
  background: linear-gradient(180deg, var(--noir3) 0%, var(--noir) 100%);
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  border-bottom: 1px solid rgba(201,168,76,0.07);
  position: relative;
  overflow: hidden;
}

.compte-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(201,168,76,0.055) 0%, transparent 68%);
  pointer-events: none;
}

/* Profil (avatar + infos) */
.compte-profile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.compte-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(201,168,76,0.32);
  box-shadow: 0 0 18px rgba(201,168,76,0.14);
  background: var(--noir4);
  flex-shrink: 0;
  position: relative;
}

.compte-avatar img { width: 100%; height: 100%; object-fit: cover; }

.compte-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--noir4), var(--noir6));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--or);
}

.compte-user-info { flex: 1; min-width: 0; }

/* Nom (John Doe) */
.compte-user-name {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compte-user-phone {
  font-size: var(--text-xs);
  color: var(--gris);
  margin-bottom: var(--sp-1);
}

.compte-user-email {
  font-size: var(--text-xs);
  color: var(--gris);
}

/* Badge "Premium Gold" (maquette : gradient or) */
.compte-badge-abo {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  background: linear-gradient(135deg, var(--or-tres-sombre), var(--or));
  color: var(--noir);
  font-size: 0.60rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.22rem 0.72rem;
  border-radius: var(--r-full);
  box-shadow: 0 2px 10px rgba(201,168,76,0.26);
  margin-top: var(--sp-2);
  width: fit-content;
}

.compte-badge-abo svg { width: 11px; height: 11px; }

/* Abonnement actif */
.compte-abo-actif {
  background: rgba(201,168,76,0.055);
  border: 1px solid rgba(201,168,76,0.17);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compte-abo-actif-label {
  font-size: var(--text-xs);
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 3px;
}

.compte-abo-actif-nom {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--or);
  margin-bottom: 2px;
}

.compte-abo-actif-expiry { font-size: var(--text-xs); color: var(--gris-clair); }
.compte-abo-actif-icon   { font-size: 1.4rem; color: var(--or); opacity: 0.68; }

/* Menu compte */
.compte-menu { padding: var(--sp-3) 0; }

.compte-menu-section { margin-bottom: var(--sp-3); }

.compte-menu-section-title {
  font-size: var(--text-xs);
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0 var(--sp-4);
  margin-bottom: var(--sp-1);
  font-weight: 500;
}

/* Item de menu (maquette : icône carré, titre, flèche) */
.compte-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  cursor: pointer;
  transition: background var(--transition-fast);
  border-bottom: 1px solid rgba(255,255,255,0.035);
  text-decoration: none;
}

.compte-menu-item:hover,
.compte-menu-item:active {
  background: rgba(201,168,76,0.035);
}

.compte-menu-item-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.065);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris-clair);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.compte-menu-item:hover .compte-menu-item-icon {
  background: rgba(201,168,76,0.07);
  border-color: rgba(201,168,76,0.17);
  color: var(--or);
}

.compte-menu-item-icon svg { width: 16px; height: 16px; }

.compte-menu-item-content { flex: 1; min-width: 0; }

.compte-menu-item-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 1px;
}

.compte-menu-item-subtitle { font-size: var(--text-xs); color: var(--gris); }

.compte-menu-item-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.compte-menu-item-value { font-size: var(--text-xs); color: var(--gris-clair); }
.compte-menu-item-arrow { color: var(--gris-sombre); }
.compte-menu-item-arrow svg { width: 13px; height: 13px; }

.compte-menu-item.danger .compte-menu-item-title { color: var(--rouge-clair); }
.compte-menu-item.danger .compte-menu-item-icon  { color: var(--rouge-clair); }

.compte-appareils-count {
  background: rgba(201,168,76,0.11);
  color: var(--or);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.12rem 0.42rem;
  border-radius: var(--r-full);
  letter-spacing: 0.05em;
}

/* ─────────────────────────────────────────────────────────────
   24. ÉCRAN 10 — ABONNEMENTS
   Maquette : 4 plans en grille 2x2, prix FCFA grand, checkmarks
───────────────────────────────────────────────────────────── */
.abonnements-screen {
  padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8));
  background: var(--noir2);
}

.abonnements-header {
  text-align: center;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  background: var(--noir);
  border-bottom: 1px solid rgba(201,168,76,0.07);
}

/* "Choisissez votre abonnement" */
.abonnements-header-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--or);
  margin-bottom: var(--sp-1);
}

.abonnements-header-sub {
  font-size: var(--text-sm);
  color: var(--gris-clair);
  font-weight: 300;
}

/* Grille 2 colonnes (maquette) */
.abonnements-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4);
}

@media (min-width: 768px) {
  .abonnements-grille { grid-template-columns: repeat(4, 1fr); }
}

/* Carte abonnement */
.abo-card {
  background: var(--noir3);
  border: 1px solid rgba(201,168,76,0.13);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-3);
  position: relative;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.abo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background var(--transition);
}

.abo-card:hover {
  border-color: rgba(201,168,76,0.28);
  transform: translateY(-3px);
  box-shadow: var(--ombre-or);
}

.abo-card:hover::before {
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}

/* Carte vedette (Annuel — maquette : bordure or, fond légèrement différent) */
.abo-card.vedette {
  border-color: var(--or);
  background: linear-gradient(148deg, var(--noir3) 0%, rgba(201,168,76,0.048) 100%);
  box-shadow: var(--ombre-or);
}

.abo-card.vedette::before {
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}

.abo-vedette-tag {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--or);
  color: var(--noir);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.22rem 0.95rem;
  white-space: nowrap;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* Période (Mensuel, Trimestriel...) */
.abo-periode {
  font-size: var(--text-xs);
  color: var(--gris-clair);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  margin-bottom: var(--sp-2);
  margin-top: var(--sp-3);
}

/* Prix principal (7 000 FCFA grand) */
.abo-prix {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin-bottom: var(--sp-1);
}

.abo-prix-montant {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--or);
  line-height: 1;
}

.abo-prix-devise {
  font-size: var(--text-xs);
  color: var(--gris);
  margin-bottom: 5px;
  font-weight: 500;
}

/* Durée (30 Jours, 90 Jours...) */
.abo-duree {
  font-size: var(--text-xs);
  color: var(--gris-clair);
  margin-bottom: var(--sp-3);
  font-weight: 300;
}

/* Liste features (✓ Accès complet) */
.abo-features {
  list-style: none;
  margin-bottom: var(--sp-4);
  flex: 1;
}

.abo-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  font-size: var(--text-xs);
  color: var(--gris-clair);
  line-height: 1.4;
}

.abo-check { color: var(--or); font-size: 0.82rem; flex-shrink: 0; margin-top: 1px; }
.abo-cross { color: var(--gris-sombre); font-size: 0.82rem; flex-shrink: 0; margin-top: 1px; opacity: 0.38; }
.abo-features li.dimmed { opacity: 0.38; }

/* Bouton choisir */
.btn-abo {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: var(--text-xs);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  border: 1px solid;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-sans);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  display: block;
}

.btn-abo-or {
  background: var(--or);
  color: var(--noir);
  border-color: var(--or);
}

.btn-abo-or:hover { background: var(--or-clair); }

.btn-abo-outline {
  background: transparent;
  color: var(--or);
  border-color: rgba(201,168,76,0.28);
}

.btn-abo-outline:hover {
  background: rgba(201,168,76,0.055);
  border-color: var(--or);
}

/* Note WhatsApp bas abonnements */
.abo-wa-note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: rgba(37,211,102,0.055);
  border: 1px solid rgba(37,211,102,0.14);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  margin: var(--sp-2) var(--sp-4);
}

.abo-wa-note svg { width: 20px; height: 20px; fill: var(--vert-wa); flex-shrink: 0; }

.abo-wa-note p {
  font-size: var(--text-xs);
  color: var(--gris-clair);
  margin: 0;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   25. ÉCRAN 11 — DEMANDER UN FILM
   Maquette : icône clapperboard, form, liste demandes populaires
───────────────────────────────────────────────────────────── */
.demande-screen {
  padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8));
  background: var(--noir);
}

/* Icône héro */
.demande-hero-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--sp-8) auto var(--sp-4);
}

.demande-hero-icon svg { width: 34px; height: 34px; color: var(--or); }

.demande-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--or);
  text-align: center;
  margin-bottom: var(--sp-2);
}

.demande-subtitle {
  font-size: var(--text-sm);
  color: var(--gris-clair);
  text-align: center;
  margin-bottom: var(--sp-6);
  max-width: 270px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
  line-height: 1.62;
}

.demande-form { padding: 0 var(--sp-4); }

.demande-requests-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-6);
}

/* Item demande populaire (John Wick 4, Equalizer 4...) */
.demande-request-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--noir3);
  border: 1px solid rgba(201,168,76,0.07);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.demande-request-item:hover {
  border-color: rgba(201,168,76,0.17);
  background: rgba(201,168,76,0.024);
}

.demande-request-thumb {
  width: 46px;
  height: 46px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--noir4);
  flex-shrink: 0;
}

.demande-request-thumb img { width: 100%; height: 100%; object-fit: cover; }

.demande-request-info { flex: 1; min-width: 0; }

.demande-request-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--blanc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demande-request-date { font-size: var(--text-xs); color: var(--gris); }

.demande-request-status {
  font-size: var(--text-xs);
  padding: 0.18rem 0.50rem;
  border-radius: var(--r-full);
  font-weight: 600;
  flex-shrink: 0;
}

.demande-request-status.pending {
  background: rgba(201,168,76,0.11);
  color: var(--or);
}

.demande-request-status.done {
  background: rgba(76,175,80,0.11);
  color: #81C784;
}

/* ─────────────────────────────────────────────────────────────
   26. MODALS
───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0,0,0,0.90);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
  padding: var(--sp-4);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

@media (min-width: 480px) {
  .modal-overlay { align-items: center; }
}

.modal {
  background: var(--noir3);
  border: 1px solid rgba(201,168,76,0.17);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  width: 100%;
  max-width: 480px;
  padding: var(--sp-8) var(--sp-6) var(--sp-10);
  position: relative;
  transform: translateY(28px);
  opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
  overflow: hidden;
}

@media (min-width: 480px) {
  .modal {
    border-radius: var(--r-xl);
    padding: var(--sp-8) var(--sp-6);
  }
}

.modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.28), transparent);
}

.modal-overlay.active .modal {
  transform: translateY(0);
  opacity: 1;
}

.modal-handle {
  width: 34px;
  height: 4px;
  background: rgba(255,255,255,0.14);
  border-radius: var(--r-full);
  margin: 0 auto var(--sp-5);
}

.modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--gris-clair);
}

.modal-close:hover { background: rgba(255,255,255,0.09); color: var(--blanc); }
.modal-close svg { width: 13px; height: 13px; }

.modal-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: var(--sp-2);
}

.modal-subtitle {
  font-size: var(--text-sm);
  color: var(--gris);
  margin-bottom: var(--sp-6);
  font-weight: 300;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   27. SECTION HERO SITE WEB (page d'accueil desktop)
───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem 4rem;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 50% 40%, rgba(201,168,76,0.065) 0%, transparent 62%),
    radial-gradient(ellipse 38% 38% at 18% 72%, rgba(155,43,43,0.055) 0%, transparent 58%),
    radial-gradient(ellipse 28% 28% at 82% 18%, rgba(201,168,76,0.038) 0%, transparent 58%),
    linear-gradient(180deg, var(--noir) 0%, var(--noir2) 52%, var(--noir) 100%);
}

.hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.022;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

.hero-ligne-or {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 115px;
  background: linear-gradient(to bottom, transparent, var(--or), transparent);
  opacity: 0.48;
}

.hero-contenu {
  position: relative;
  z-index: 2;
  max-width: 820px;
  width: 100%;
}

.hero-tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--or);
  border: 1px solid rgba(201,168,76,0.28);
  padding: 0.32rem 1.15rem;
  border-radius: var(--r-xs);
  margin-bottom: var(--sp-8);
  animation: fadeUp 0.8s ease both;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: var(--text-hero);
  font-weight: 300;
  line-height: 1.04;
  color: var(--blanc);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-6);
  animation: fadeUp 0.8s 0.15s ease both;
}

.hero h1 em { font-style: italic; color: var(--or); font-weight: 300; }

.hero-sous-titre {
  font-size: 0.98rem;
  color: var(--gris-clair);
  line-height: 1.72;
  max-width: 510px;
  margin: 0 auto var(--sp-10);
  font-weight: 300;
  animation: fadeUp 0.8s 0.30s ease both;
}

.hero-actions {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeUp 0.8s 0.45s ease both;
}

/* Boutons hero desktop */
.btn-hero { padding: 0.82rem 2.45rem; font-size: 0.88rem; letter-spacing: 0.07em; }

.btn-hero-or {
  background: var(--or);
  color: var(--noir);
  border: 1px solid var(--or);
  font-weight: 500;
  border-radius: var(--r-xs);
}

.btn-hero-or:hover {
  background: var(--or-clair);
  transform: translateY(-2px);
  box-shadow: var(--ombre-or);
}

.btn-hero-outline {
  background: transparent;
  color: var(--blanc);
  border: 1px solid rgba(245,240,232,0.20);
  border-radius: var(--r-xs);
}

.btn-hero-outline:hover {
  border-color: var(--or);
  color: var(--or);
  transform: translateY(-2px);
}

/* Stats héros */
.hero-stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: 1px solid rgba(201,168,76,0.11);
  animation: fadeUp 0.8s 0.60s ease both;
  flex-wrap: wrap;
}

.hero-stat span {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.35rem;
  font-weight: 600;
  color: var(--or);
  line-height: 1;
}

.hero-stat p {
  font-size: 0.70rem;
  color: var(--gris);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.38rem;
}

/* ─────────────────────────────────────────────────────────────
   28. SECTIONS WEB DESKTOP
───────────────────────────────────────────────────────────── */
section { padding: 6rem 2rem; }
.section-inner  { max-width: 1100px; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 4rem; }

.section-tag {
  display: inline-block;
  font-size: 0.63rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: var(--sp-5);
}

.section-titre {
  font-family: var(--font-serif);
  font-size: clamp(1.95rem, 4.8vw, 3.4rem);
  font-weight: 300;
  color: var(--blanc);
  line-height: 1.1;
  margin-bottom: var(--sp-5);
}

.section-titre em { font-style: italic; color: var(--or); }

.section-sous-titre {
  font-size: 0.93rem;
  color: var(--gris-clair);
  max-width: 510px;
  margin: 0 auto;
  line-height: 1.72;
  font-weight: 300;
}

/* Grille catalogue web */
.catalogue-grille-web {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 1px;
  background: rgba(201,168,76,0.055);
  border: 1px solid rgba(201,168,76,0.055);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.catalogue-cta { text-align: center; margin-top: 3rem; }

/* ─────────────────────────────────────────────────────────────
   29. SECTION ABONNEMENTS WEB
───────────────────────────────────────────────────────────── */
.abonnements-web { background: var(--noir2); }

.abonnements-grille-web {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1.45rem;
}

.abo-note {
  text-align: center;
  margin-top: 1.95rem;
  font-size: 0.80rem;
  color: var(--gris);
  font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   30. AVANTAGES / FEATURES WEB
───────────────────────────────────────────────────────────── */
.avantages-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 2.45rem;
}

.avantage {
  border-top: 1px solid rgba(201,168,76,0.20);
  padding-top: 1.45rem;
  transition: border-color var(--transition);
}

.avantage:hover { border-top-color: var(--or); }
.avantage-icone { font-size: 1.75rem; margin-bottom: var(--sp-4); display: block; }

.avantage-titre {
  font-family: var(--font-serif);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: var(--sp-3);
}

.avantage-texte {
  font-size: 0.86rem;
  color: var(--gris-clair);
  line-height: 1.72;
  font-weight: 300;
}

/* ─────────────────────────────────────────────────────────────
   31. CTA WHATSAPP
───────────────────────────────────────────────────────────── */
.cta {
  background: var(--noir3);
  border-top: 1px solid rgba(201,168,76,0.09);
  border-bottom: 1px solid rgba(201,168,76,0.09);
  text-align: center;
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 58% at 50% 50%, rgba(201,168,76,0.038) 0%, transparent 68%);
  pointer-events: none;
}

.cta-contenu { max-width: 590px; margin: 0 auto; position: relative; z-index: 1; }

.cta h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.95rem, 4.8vw, 2.9rem);
  font-weight: 300;
  color: var(--blanc);
  margin-bottom: var(--sp-4);
  line-height: 1.14;
}

.cta h2 em { font-style: italic; color: var(--or); }

.cta p {
  color: var(--gris-clair);
  font-size: 0.93rem;
  line-height: 1.72;
  margin-bottom: var(--sp-8);
  font-weight: 300;
}

.btn-whatsapp-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  background: var(--vert-wa);
  color: var(--blanc-pur);
  padding: 0.98rem 2.35rem;
  font-size: 0.90rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  transition: all var(--transition);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.btn-whatsapp-hero:hover {
  background: var(--vert-wa-sombre);
  transform: translateY(-2px);
  box-shadow: 0 5px 22px rgba(37,211,102,0.24);
}

.btn-whatsapp-hero svg { width: 20px; height: 20px; fill: currentColor; }

/* ─────────────────────────────────────────────────────────────
   32. FOOTER WEB
───────────────────────────────────────────────────────────── */
footer.mboa-footer {
  background: var(--noir);
  padding: 4rem 2rem 2rem;
  border-top: 1px solid rgba(201,168,76,0.07);
  position: relative;
}

footer.mboa-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 195px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
}

.footer-inner { max-width: 1100px; margin: 0 auto; }

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3rem;
  margin-bottom: 3.45rem;
}

.footer-brand .logo {
  display: block;
  margin-bottom: var(--sp-4);
  font-size: 1.38rem;
}

.footer-brand p {
  font-size: 0.80rem;
  color: var(--gris);
  max-width: 255px;
  line-height: 1.72;
  font-weight: 300;
}

.footer-brand-socials {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.046);
  border: 1px solid rgba(255,255,255,0.075);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gris);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.footer-social-btn:hover {
  background: rgba(201,168,76,0.09);
  border-color: rgba(201,168,76,0.18);
  color: var(--or);
}

.footer-social-btn svg { width: 15px; height: 15px; }

.footer-liens h4 {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: var(--sp-5);
}

.footer-liens ul { list-style: none; }
.footer-liens li { margin-bottom: var(--sp-3); }

.footer-liens a {
  color: var(--gris);
  font-size: 0.82rem;
  text-decoration: none;
  transition: color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.footer-liens a:hover { color: var(--or); }

.footer-bas {
  padding-top: 1.72rem;
  border-top: 1px solid rgba(201,168,76,0.065);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer-copyright { font-size: 0.74rem; color: var(--gris); }
.footer-copyright a { color: var(--or); text-decoration: none; }
.footer-legal { display: flex; gap: 1.45rem; }

.footer-legal a {
  font-size: 0.74rem;
  color: var(--gris);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal a:hover { color: var(--or); }

/* ─────────────────────────────────────────────────────────────
   33. FLASH MESSAGES / TOASTS
───────────────────────────────────────────────────────────── */
.flash-zone {
  position: fixed;
  top: var(--sp-4);
  right: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 355px;
  width: calc(100vw - 2rem);
}

.flash {
  padding: var(--sp-4) var(--sp-5);
  background: var(--noir4);
  border-left: 3px solid var(--or);
  color: var(--blanc);
  font-size: 0.83rem;
  animation: slideInRight 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
  border-radius: var(--r-sm);
  box-shadow: var(--ombre-lg);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  line-height: 1.5;
}

.flash-icon { flex-shrink: 0; font-size: 0.98rem; }
.flash-text { flex: 1; }
.flash-close { flex-shrink: 0; cursor: pointer; color: var(--gris); transition: color var(--transition-fast); padding: 2px; }
.flash-close:hover { color: var(--blanc); }
.flash-close svg { width: 11px; height: 11px; }

.flash.success { border-left-color: var(--vert-succes); }
.flash.error   { border-left-color: var(--rouge-clair); }
.flash.info    { border-left-color: var(--bleu-info); }
.flash.warning { border-left-color: var(--orange-new); }

/* ─────────────────────────────────────────────────────────────
   34. SÉPARATEURS ORNEMENTAUX
───────────────────────────────────────────────────────────── */
.sep {
  display: flex;
  align-items: center;
  gap: 1.45rem;
  margin: 0 auto;
  max-width: 195px;
}

.sep-line { flex: 1; height: 1px; background: rgba(201,168,76,0.18); }

.sep-diamant {
  width: 8px;
  height: 8px;
  background: var(--or);
  transform: rotate(45deg);
  flex-shrink: 0;
  box-shadow: 0 0 9px rgba(201,168,76,0.42);
}

.sep-full {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  width: 100%;
  margin: var(--sp-6) 0;
}

.sep-full .sep-line { flex: 1; }

/* ─────────────────────────────────────────────────────────────
   35. SKELETON LOADING
───────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.038) 0%,
    rgba(201,168,76,0.055) 50%,
    rgba(255,255,255,0.038) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.75s ease-in-out infinite;
  border-radius: var(--r-sm);
}

.skeleton-card      { aspect-ratio: 2/3; border-radius: var(--r-sm); }
.skeleton-text      { height: 13px; border-radius: var(--r-full); margin-bottom: 7px; }
.skeleton-text.sm   { height: 9px; }
.skeleton-text.lg   { height: 19px; }
.skeleton-text.w-1-2{ width: 50%; }
.skeleton-text.w-2-3{ width: 66%; }
.skeleton-text.w-3-4{ width: 75%; }
.skeleton-circle    { border-radius: 50%; flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────
   36. BADGES
───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 0.18rem 0.52rem;
  border-radius: var(--r-full);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-or    { background: rgba(201,168,76,0.14); color: var(--or);         border: 1px solid rgba(201,168,76,0.24); }
.badge-rouge { background: rgba(155,43,43,0.14);  color: var(--rouge-clair); border: 1px solid rgba(155,43,43,0.24); }
.badge-vert  { background: rgba(76,175,80,0.11);  color: #81C784;            border: 1px solid rgba(76,175,80,0.19); }
.badge-bleu  { background: rgba(33,150,243,0.11); color: #64B5F6;            border: 1px solid rgba(33,150,243,0.19); }
.badge-gris  { background: rgba(255,255,255,0.055); color: var(--gris-clair); border: 1px solid rgba(255,255,255,0.09); }
.badge-noir  { background: rgba(8,8,8,0.80); color: var(--or);              border: 1px solid rgba(201,168,76,0.18); }

.badge-live {
  background: rgba(155,43,43,0.88);
  color: var(--blanc);
  animation: pulseLive 2s ease-in-out infinite;
}

.badge-live::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blanc);
  animation: pulseDot 2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────
   37. NOTIFICATIONS
───────────────────────────────────────────────────────────── */
.notif-screen { padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8)); }
.notif-list   { padding: var(--sp-3) 0; }

.notif-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,0.046);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}

.notif-item:hover  { background: rgba(255,255,255,0.018); }
.notif-item.unread { background: rgba(201,168,76,0.028); }

.notif-item.unread::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--or);
  border-radius: 0 2px 2px 0;
}

.notif-thumb {
  width: 50px;
  height: 50px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--noir3);
  flex-shrink: 0;
}

.notif-thumb img { width: 100%; height: 100%; object-fit: cover; }

.notif-icon-thumb {
  width: 50px;
  height: 50px;
  border-radius: var(--r-full);
  background: rgba(201,168,76,0.09);
  border: 1px solid rgba(201,168,76,0.17);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--or);
}

.notif-icon-thumb svg { width: 20px; height: 20px; }

.notif-content   { flex: 1; min-width: 0; }
.notif-title     { font-size: var(--text-sm); font-weight: 500; color: var(--blanc); margin-bottom: 3px; line-height: 1.38; }
.notif-item.unread .notif-title { font-weight: 600; }

.notif-body {
  font-size: var(--text-xs);
  color: var(--gris-clair);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}

.notif-time { font-size: 0.60rem; color: var(--gris); }

/* ─────────────────────────────────────────────────────────────
   38. MA LISTE (WATCHLIST)
───────────────────────────────────────────────────────────── */
.ma-liste-screen { padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8)); }

.ma-liste-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: var(--sp-4);
}

@media (min-width: 480px) { .ma-liste-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .ma-liste-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; } }

.ma-liste-item {
  aspect-ratio: 2/3;
  border-radius: var(--r-xs);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: var(--noir3);
  transition: transform var(--transition-fast);
}

.ma-liste-item:active { transform: scale(0.93); }
.ma-liste-item img { width: 100%; height: 100%; object-fit: cover; transition: filter var(--transition); }

.ma-liste-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.88) 0%, transparent 58%);
  opacity: 0;
  transition: opacity var(--transition);
}

.ma-liste-item:hover .ma-liste-item-overlay { opacity: 1; }

.ma-liste-item-remove {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(155,43,43,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
  cursor: pointer;
}

.ma-liste-item:hover .ma-liste-item-remove { opacity: 1; }
.ma-liste-item-remove svg { width: 11px; height: 11px; color: var(--blanc); }

/* ─────────────────────────────────────────────────────────────
   39. PARAMÈTRES / SETTINGS
───────────────────────────────────────────────────────────── */
.settings-screen { padding-bottom: calc(var(--bottom-bar-h) + var(--sp-8)); }
.settings-section { margin-bottom: var(--sp-2); background: var(--noir); }

.settings-section-title {
  font-size: var(--text-xs);
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: var(--sp-4) var(--sp-4) var(--sp-1);
}

.settings-item {
  display: flex;
  align-items: center;
  padding: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,0.035);
  cursor: pointer;
  transition: background var(--transition-fast);
  gap: var(--sp-3);
}

.settings-item:hover { background: rgba(255,255,255,0.018); }

.settings-item-icon { color: var(--gris-clair); flex-shrink: 0; }
.settings-item-icon svg { width: 19px; height: 19px; }
.settings-item-content { flex: 1; }
.settings-item-title   { font-size: var(--text-sm); font-weight: 500; color: var(--blanc); margin-bottom: 1px; }
.settings-item-sub     { font-size: var(--text-xs); color: var(--gris); }
.settings-item-right   { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.settings-item-value   { font-size: var(--text-xs); color: var(--gris-clair); }
.settings-arrow svg    { width: 13px; height: 13px; color: var(--gris-sombre); }

/* Toggle switch (maquette) */
.toggle {
  width: 42px;
  height: 23px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.09);
  position: relative;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}

.toggle.on {
  background: var(--or);
  border-color: var(--or);
}

.toggle::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--blanc);
  transition: left var(--transition-bounce), box-shadow var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}

.toggle.on::after {
  left: calc(100% - 19px);
  box-shadow: 0 0 7px rgba(201,168,76,0.32);
}

/* ─────────────────────────────────────────────────────────────
   40. ÉTATS VIDES (EMPTY STATES)
───────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  min-height: 280px;
}

.empty-state-icon {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-5);
  color: var(--gris-sombre);
}

.empty-state-icon svg { width: 30px; height: 30px; }
.empty-state-icon.or  { background: rgba(201,168,76,0.055); border-color: rgba(201,168,76,0.13); color: var(--or); }

.empty-state-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: var(--sp-3);
}

.empty-state-text {
  font-size: var(--text-sm);
  color: var(--gris);
  max-width: 265px;
  line-height: 1.62;
  margin-bottom: var(--sp-6);
}

/* ─────────────────────────────────────────────────────────────
   41. PAGE D'ERREUR / 404
───────────────────────────────────────────────────────────── */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-8);
  background: var(--noir);
  position: relative;
  overflow: hidden;
}

.error-code {
  font-family: var(--font-serif);
  font-size: clamp(5.5rem, 18vw, 12.5rem);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201,168,76,0.18);
  line-height: 1;
  margin-bottom: var(--sp-4);
  position: relative;
}

.error-code::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: var(--gradient-or);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.22;
}

.error-title { font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--blanc); margin-bottom: var(--sp-3); }
.error-text  { font-size: var(--text-base); color: var(--gris-clair); max-width: 390px; margin-bottom: var(--sp-8); font-weight: 300; }

/* ─────────────────────────────────────────────────────────────
   42. TABS DE CATÉGORIES (Séries, Animés)
───────────────────────────────────────────────────────────── */
.category-tab-bar {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-3) var(--sp-4);
  scrollbar-width: none;
  background: var(--noir);
  border-bottom: 1px solid rgba(255,255,255,0.046);
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-sticky);
}

.category-tab-bar::-webkit-scrollbar { display: none; }

.category-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.38rem 1.05rem;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--gris-clair);
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  border: 1px solid rgba(255,255,255,0.065);
  background: rgba(255,255,255,0.026);
  font-weight: 400;
}

.category-tab:hover {
  color: var(--or);
  border-color: rgba(201,168,76,0.18);
}

.category-tab.active {
  background: var(--or);
  color: var(--noir);
  border-color: var(--or);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   43. APPAREILS CONNECTÉS
───────────────────────────────────────────────────────────── */
.appareil-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,0.046);
  transition: background var(--transition-fast);
}

.appareil-item:hover { background: rgba(255,255,255,0.018); }

.appareil-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--or);
  flex-shrink: 0;
}

.appareil-icon svg { width: 19px; height: 19px; }

.appareil-info  { flex: 1; }
.appareil-name  { font-size: var(--text-sm); font-weight: 500; color: var(--blanc); margin-bottom: 2px; }
.appareil-details { font-size: var(--text-xs); color: var(--gris); }

.appareil-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
}

.appareil-dot { width: 7px; height: 7px; border-radius: 50%; }
.appareil-dot.active   { background: var(--vert-succes); box-shadow: 0 0 5px rgba(76,175,80,0.52); }
.appareil-dot.inactive { background: var(--gris-sombre); }
.appareil-status.active   { color: #81C784; }
.appareil-status.inactive { color: var(--gris); }

/* ─────────────────────────────────────────────────────────────
   44. REVEAL AU SCROLL
───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.62s ease, transform 0.62s ease;
}

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity 0.62s ease, transform 0.62s ease;
}

.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(26px);
  transition: opacity 0.62s ease, transform 0.62s ease;
}

.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.52s ease, transform 0.52s ease;
}

.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Délais */
.reveal-d1 { transition-delay: 0.07s; }
.reveal-d2 { transition-delay: 0.14s; }
.reveal-d3 { transition-delay: 0.21s; }
.reveal-d4 { transition-delay: 0.28s; }
.reveal-d5 { transition-delay: 0.35s; }
.reveal-d6 { transition-delay: 0.42s; }

/* ─────────────────────────────────────────────────────────────
   45. ANIMATIONS KEYFRAMES
───────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(38px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-38px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scrollLine {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 1; transform: scaleY(1.2); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes spinBtn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes splashReveal {
  from { opacity: 0; transform: scale(0.83) translateY(18px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes splashSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes splashPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(201,168,76,0.09), 0 0 36px rgba(201,168,76,0.04); }
  50%       { box-shadow: 0 0 28px rgba(201,168,76,0.20), 0 0 55px rgba(201,168,76,0.09); }
}

@keyframes splashRing {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.05); opacity: 0.58; }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.48; transform: scale(0.78); }
}

@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(155,43,43,0.52); }
  70%       { box-shadow: 0 0 0 5px rgba(155,43,43,0); }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

@keyframes orGlow {
  0%, 100% { text-shadow: 0 0 18px rgba(201,168,76,0.18); }
  50%       { text-shadow: 0 0 36px rgba(201,168,76,0.40), 0 0 72px rgba(201,168,76,0.14); }
}

@keyframes scanLine {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}

@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.58; }
  33%  { transform: translateY(-18px) translateX(9px) scale(1.1); opacity: 0.78; }
  66%  { transform: translateY(-9px) translateX(-4px) scale(0.9); opacity: 0.48; }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.58; }
}

/* ─────────────────────────────────────────────────────────────
   46. EFFETS DÉCORATIFS
───────────────────────────────────────────────────────────── */
.ligne-or-v {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(201,168,76,0.32), rgba(201,168,76,0.32), transparent);
}

.coin-or {
  position: absolute;
  width: 38px;
  height: 38px;
  border-color: rgba(201,168,76,0.28);
  border-style: solid;
  pointer-events: none;
}

.coin-or.top-left     { top: 11px; left: 11px;  border-width: 1px 0 0 1px; }
.coin-or.top-right    { top: 11px; right: 11px; border-width: 1px 1px 0 0; }
.coin-or.bottom-left  { bottom: 11px; left: 11px;  border-width: 0 0 1px 1px; }
.coin-or.bottom-right { bottom: 11px; right: 11px; border-width: 0 1px 1px 0; }

.lueur-or {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.scan-effect::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.22), transparent);
  animation: scanLine 4s linear infinite;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   47. TOOLTIPS
───────────────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
  cursor: default;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(28,26,23,0.99);
  color: var(--gris-clair);
  font-size: 0.70rem;
  font-family: var(--font-sans);
  padding: 0.38rem 0.75rem;
  border-radius: var(--r-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  border: 1px solid rgba(201,168,76,0.11);
  box-shadow: var(--ombre-md);
  z-index: var(--z-top);
}

[data-tooltip]:hover::after { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   48. PROGRESS BAR GLOBAL
───────────────────────────────────────────────────────────── */
.progress-bar-global {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: var(--z-top);
  background: rgba(201,168,76,0.09);
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--or-sombre), var(--or), var(--or-clair));
  transition: width 0.28s ease;
  box-shadow: 0 0 7px rgba(201,168,76,0.52);
}

/* ─────────────────────────────────────────────────────────────
   49. INDICATEURS DE PAGINATION / SWIPE
───────────────────────────────────────────────────────────── */
.pagination-dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  padding: var(--sp-3) 0;
}

.pagination-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  transition: all var(--transition);
}

.pagination-dot.active {
  width: 17px;
  border-radius: 3px;
  background: var(--or);
  box-shadow: 0 0 7px rgba(201,168,76,0.42);
}

.swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  color: var(--gris);
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  animation: floatUp 2s ease-in-out infinite;
}

.swipe-hint svg { width: 13px; height: 13px; }

/* ─────────────────────────────────────────────────────────────
   50. COMPOSANTS ADDITIONNELS — FLAG BADGE
───────────────────────────────────────────────────────────── */
.flag-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.18rem 0.52rem;
  background: rgba(255,255,255,0.046);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-full);
  font-size: 0.58rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gris-clair);
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.flag-badge:hover {
  border-color: rgba(201,168,76,0.18);
  color: var(--or);
}

.flag-badge .flag-emoji { font-size: 0.78rem; }

/* ─────────────────────────────────────────────────────────────
   51. ÉPISODES (SÉRIES)
───────────────────────────────────────────────────────────── */
.episodes-section { padding: var(--sp-4) 0; }

.episode-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,0.046);
  cursor: pointer;
  transition: background var(--transition-fast);
  position: relative;
}

.episode-item:hover { background: rgba(255,255,255,0.018); }

.episode-thumb {
  width: 95px;
  aspect-ratio: 16/9;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--noir3);
  flex-shrink: 0;
  position: relative;
}

.episode-thumb img { width: 100%; height: 100%; object-fit: cover; }

.episode-thumb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.episode-item:hover .episode-thumb-overlay { opacity: 1; }
.episode-thumb-overlay svg { width: 22px; height: 22px; color: var(--blanc); }

.episode-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.14);
}

.episode-progress-bar { height: 100%; background: var(--or); }

.episode-info     { flex: 1; min-width: 0; }
.episode-number   { font-size: var(--text-xs); color: var(--gris); margin-bottom: 2px; letter-spacing: 0.05em; }

.episode-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--blanc);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.episode-desc {
  font-size: var(--text-xs);
  color: var(--gris);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}

.episode-meta   { display: flex; align-items: center; gap: var(--sp-2); margin-top: 4px; }
.episode-duration { font-size: 0.60rem; color: var(--gris-sombre); }

.episode-download {
  flex-shrink: 0;
  color: var(--gris);
  cursor: pointer;
  transition: color var(--transition-fast);
  padding: var(--sp-1);
}

.episode-download:hover { color: var(--or); }
.episode-download svg { width: 15px; height: 15px; }

/* ─────────────────────────────────────────────────────────────
   52. SAISONS SELECTOR
───────────────────────────────────────────────────────────── */
.saisons-bar {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding: var(--sp-3) var(--sp-4);
  scrollbar-width: none;
}

.saisons-bar::-webkit-scrollbar { display: none; }

.saison-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.38rem 0.95rem;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--gris-clair);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  border: 1px solid rgba(255,255,255,0.075);
  background: rgba(255,255,255,0.035);
}

.saison-btn:hover { border-color: rgba(201,168,76,0.18); color: var(--or); }

.saison-btn.active {
  background: rgba(201,168,76,0.09);
  border-color: rgba(201,168,76,0.28);
  color: var(--or);
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   53. STARS RATING INTERACTIVES
───────────────────────────────────────────────────────────── */
.stars-rating {
  display: flex;
  gap: 3px;
  cursor: pointer;
}

.stars-rating-star {
  font-size: 1.28rem;
  color: rgba(255,255,255,0.14);
  transition: color var(--transition-fast), transform var(--transition-fast);
  cursor: pointer;
}

.stars-rating-star:hover,
.stars-rating-star.active { color: var(--or); }
.stars-rating-star:hover  { transform: scale(1.18); }

/* ─────────────────────────────────────────────────────────────
   54. BANDEAU PROMO
───────────────────────────────────────────────────────────── */
.promo-banner {
  background: linear-gradient(135deg, var(--or-tres-sombre), var(--or-sombre));
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: var(--sp-4);
  position: relative;
  overflow: hidden;
}

.promo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 78% 50%, rgba(201,168,76,0.14) 0%, transparent 58%);
  pointer-events: none;
}

.promo-banner-icon    { font-size: 1.95rem; flex-shrink: 0; }
.promo-banner-content { flex: 1; }

.promo-banner-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--or-clair);
  margin-bottom: 3px;
}

.promo-banner-text { font-size: var(--text-xs); color: rgba(201,168,76,0.72); margin: 0; font-weight: 300; }

/* ─────────────────────────────────────────────────────────────
   55. COMPOSANT TABS
───────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  background: rgba(255,255,255,0.026);
  border: 1px solid rgba(255,255,255,0.065);
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 3px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--text-xs);
  color: var(--gris);
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.05em;
  font-weight: 400;
}

.tab-item.active {
  background: var(--noir4);
  color: var(--or);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
}

.tab-item:hover:not(.active) { color: var(--gris-clair); }

/* ─────────────────────────────────────────────────────────────
   56. ACCORDION FAQ
───────────────────────────────────────────────────────────── */
.accordion { border: 1px solid rgba(201,168,76,0.09); border-radius: var(--r-sm); overflow: hidden; }
.accordion-item { border-bottom: 1px solid rgba(201,168,76,0.07); }
.accordion-item:last-child { border-bottom: none; }

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.accordion-header:hover { background: rgba(255,255,255,0.018); }
.accordion-title { font-size: var(--text-sm); font-weight: 500; color: var(--blanc); }

.accordion-chevron { color: var(--gris); transition: transform var(--transition); }
.accordion-chevron svg { width: 15px; height: 15px; }

.accordion-item.open .accordion-chevron { transform: rotate(180deg); color: var(--or); }

.accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); }
.accordion-item.open .accordion-body { max-height: 495px; }

.accordion-content {
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--gris-clair);
  line-height: 1.72;
  font-weight: 300;
}

/* ─────────────────────────────────────────────────────────────
   57. CARD INFO (détail technique du film)
───────────────────────────────────────────────────────────── */
.info-card {
  background: var(--noir3);
  border: 1px solid rgba(201,168,76,0.09);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin: var(--sp-4);
}

.info-card-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--sp-3);
}

.info-card-rows { display: flex; flex-direction: column; gap: var(--sp-3); }

.info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.info-row-label {
  font-size: var(--text-xs);
  color: var(--gris);
  flex-shrink: 0;
  min-width: 85px;
  padding-top: 1px;
}

.info-row-value { font-size: var(--text-xs); color: var(--gris-clair); text-align: right; line-height: 1.5; }
.info-row-value.or { color: var(--or); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────
   58. BARRE ANNONCE TOP
───────────────────────────────────────────────────────────── */
.annonce-bar {
  width: 100%;
  background: linear-gradient(90deg, var(--or-tres-sombre), var(--or-sombre) 40%, var(--or) 100%);
  color: var(--noir);
  text-align: center;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  padding: 0.52rem 1rem;
  position: relative;
  z-index: var(--z-overlay);
}

.annonce-bar a { color: var(--noir); text-decoration: underline; }

.annonce-bar-close {
  position: absolute;
  right: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 0.98rem;
  opacity: 0.65;
  transition: opacity var(--transition-fast);
  line-height: 1;
}

.annonce-bar-close:hover { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   59. CASTING STRIP
───────────────────────────────────────────────────────────── */
.casting-strip {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  padding: 0 0 var(--sp-3);
  scrollbar-width: none;
}

.casting-strip::-webkit-scrollbar { display: none; }

.casting-card {
  flex-shrink: 0;
  width: 65px;
  text-align: center;
  cursor: pointer;
}

.casting-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(201,168,76,0.18);
  margin: 0 auto var(--sp-2);
  background: var(--noir3);
  transition: border-color var(--transition-fast);
}

.casting-card:hover .casting-avatar { border-color: var(--or); }
.casting-avatar img { width: 100%; height: 100%; object-fit: cover; }
.casting-name { font-size: 0.60rem; color: var(--gris-clair); line-height: 1.3; }
.casting-role { font-size: 0.55rem; color: var(--gris); }

/* ─────────────────────────────────────────────────────────────
   60. TRAILER THUMBNAIL
───────────────────────────────────────────────────────────── */
.trailer-thumb {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  margin: var(--sp-4);
}

.trailer-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  filter: brightness(0.72);
  transition: filter var(--transition);
}

.trailer-thumb:hover img { filter: brightness(0.88); }

.trailer-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
}

.trailer-play-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.17);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.trailer-thumb:hover .trailer-play-btn {
  background: rgba(201,168,76,0.28);
  border-color: var(--or);
  transform: scale(1.1);
}

.trailer-play-btn svg { width: 24px; height: 24px; color: var(--blanc); }
.trailer-label { font-size: var(--text-xs); color: rgba(255,255,255,0.78); letter-spacing: 0.12em; text-transform: uppercase; }

/* ─────────────────────────────────────────────────────────────
   61. UTILITAIRES DIVERS
───────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.pointer    { cursor: pointer; }
.no-select  { user-select: none; -webkit-user-select: none; }
.mt-auto    { margin-top: auto; }
.mb-auto    { margin-bottom: auto; }
.ml-auto    { margin-left: auto; }
.mr-auto    { margin-right: auto; }
.mx-auto    { margin-left: auto; margin-right: auto; }
.opacity-0  { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.blur-sm    { filter: blur(4px); }
.blur-md    { filter: blur(8px); }
.z-0        { z-index: 0; }
.z-10       { z-index: 10; }
.z-50       { z-index: 50; }

/* ─────────────────────────────────────────────────────────────
   62. RESPONSIVE — TABLETTE (768px)
───────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .auth-card { padding: var(--sp-10) var(--sp-8); }
  .abonnements-grille { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  :root {
    --bottom-bar-h: 68px;
    --nav-h: 60px;
  }

  .bottom-nav-item    { min-width: 65px; }
  .bottom-nav-item .nav-icon  { width: 23px; height: 23px; }
  .bottom-nav-item .nav-label { font-size: 0.60rem; }

  .hero-banner { max-height: 72vh; }
  .detail-title { font-size: 2.35rem; }
  .film-card-continue { width: 245px; }

  .row-scroll  { padding: 0 var(--sp-5) var(--sp-3); }
  .row-header  { padding: 0 var(--sp-5); }

  .catalogue-grille { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}

@media (min-width: 1024px) {
  nav.mboa-nav  { display: flex; }
  .bottom-nav   { display: none; }

  .home-screen,
  .catalogue-screen,
  .afrique-screen,
  .search-screen,
  .compte-screen,
  .abonnements-screen,
  .demande-screen { padding-bottom: var(--sp-16); }

  .hero-banner { max-height: 92vh; }

  .row-scroll  { padding: 0 var(--sp-8) var(--sp-4); }
  .row-header  { padding: 0 var(--sp-8); }

  .catalogue-grille { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 4px; }
  .abonnements-grille { grid-template-columns: repeat(4, 1fr); }
}

/* ─────────────────────────────────────────────────────────────
   63. RESPONSIVE — MOBILE PETIT (<390px)
───────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  :root { --sp-4: 0.85rem; --sp-5: 1rem; }

  .hero-title  { font-size: 1.55rem; }
  .film-card-continue { width: 178px; }
  .film-card-xl { width: 130px; }
  .hero-banner-content { padding: 0 var(--sp-3) var(--sp-5); }
  .abonnements-grille  { grid-template-columns: 1fr; }
  .abo-prix-montant    { font-size: 1.68rem; }
}

/* ─────────────────────────────────────────────────────────────
   64. RESPONSIVE — DESKTOP NAVIGATION
───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  nav.mboa-nav          { padding: 0.95rem 1.45rem; }
  nav.mboa-nav.scrolled { padding: 0.72rem 1.45rem; }
  .nav-liens            { display: none; }
}

@media (max-width: 768px) {
  nav.mboa-nav, nav.mboa-nav.scrolled { padding: 0.82rem 1.2rem; }
  .hero { padding: 6.5rem 1.2rem 2.8rem; }
  .hero-stats { gap: 1.45rem; }
  .hero-stat span { font-size: 1.75rem; }
  section { padding: 3.8rem 1.2rem; }
  footer.mboa-footer { padding: 2.4rem 1.2rem 1.4rem; }
  .footer-top { flex-direction: column; }
  .modal { padding: 1.9rem 1.45rem; }
  .abonnements-grille-web { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   65. SAFE AREA (NOTCH / HOME BAR iPhone)
───────────────────────────────────────────────────────────── */
.bottom-nav {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 7px);
  height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom, 0px));
}

.player-screen { padding-top: env(safe-area-inset-top, 0px); }

.auth-screen {
  padding-top: max(env(safe-area-inset-top, 0px), var(--sp-8));
}

/* ─────────────────────────────────────────────────────────────
   66. DARK MODE (app is dark-only)
───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}

/* ─────────────────────────────────────────────────────────────
   67. REDUCED MOTION
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero h1,
  .hero-tag,
  .hero-sous-titre,
  .hero-actions,
  .hero-stats {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   68. HIGH CONTRAST
───────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  .btn-gold, .btn-abo-or { forced-color-adjust: none; }
  .film-card-badge       { border: 1px solid ButtonText; }
}

/* ─────────────────────────────────────────────────────────────
   69. FOCUS VISIBLE (ACCESSIBILITÉ CLAVIER)
───────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid rgba(201,168,76,0.68);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* ─────────────────────────────────────────────────────────────
   70. PRINT
───────────────────────────────────────────────────────────── */
@media print {
  .bottom-nav,
  .top-bar,
  .grain-overlay,
  .modal-overlay,
  .flash-zone { display: none !important; }

  body { background: white; color: black; }
}

/* ─────────────────────────────────────────────────────────────
   71. HERO SLIDE COULEURS DEMO (fallback sans image)
───────────────────────────────────────────────────────────── */
.hero-demo-1 { background: linear-gradient(135deg, #0a0a1e 0%, #1a0f3e 40%, #2d1060 100%); }
.hero-demo-2 { background: linear-gradient(135deg, #0e1a0a 0%, #1a3010 40%, #0a200a 100%); }
.hero-demo-3 { background: linear-gradient(135deg, #1a0a0a 0%, #3d1010 40%, #600a0a 100%); }

/* ─────────────────────────────────────────────────────────────
   72. VARIABLES LOCALES COMPLÉMENTAIRES
───────────────────────────────────────────────────────────── */
:root {
  --hero-h: 100vh;
  --card-portrait-w-sm: 88px;
  --card-portrait-w-md: 108px;
  --card-portrait-w-lg: 125px;
  --card-portrait-w-xl: 145px;
  --card-landscape-w: 260px;
  --card-continue-w: 200px;
}

/* ─────────────────────────────────────────────────────────────
   73. OVERRIDE POUR PRÉCISION MAQUETTE
   Ajustements fins pour correspondre exactement aux 12 écrans
───────────────────────────────────────────────────────────── */

/* Écran connexion: bouton "Se Connecter au Luxe" hauteur exacte */
.auth-card .btn-gold.btn-full {
  height: 48px;
  font-size: 0.82rem;
  border-radius: var(--r-xs);
  letter-spacing: 0.12em;
}

/* Écran connexion: bouton "Créer un compte" */
.auth-card .btn-ghost.btn-full {
  height: 46px;
  font-size: 0.82rem;
}

/* Dashboard: hero badge "À LA UNE" positioning exact */
.hero-banner .hero-badge {
  background: var(--or);
  color: var(--noir);
}

/* Films: section row title icône emoji taille */
.row-title .row-title-emoji {
  font-size: 1.05rem;
  line-height: 1;
}

/* Continuer à regarder: info texte compact */
.film-card-continue .film-card-continue-title {
  font-size: 0.78rem;
}

.film-card-continue .film-card-continue-ep {
  font-size: 0.65rem;
}

/* Films: badge NEW couleur orange (maquette) */
.film-card-badge.new {
  background: linear-gradient(135deg, #D4500A, #E8720C);
  color: var(--blanc-pur);
}

/* Détail film: bouton "Regarder maintenant" exact maquette */
.detail-actions .btn-play-gold {
  font-size: 0.82rem;
  padding: 0.78rem 1.65rem;
}

/* Détail film: bouton "+ Ma Liste" */
.detail-actions .btn-liste {
  font-size: 0.80rem;
  padding: 0.76rem 1.35rem;
}

/* Lecteur: barre progression séquence couleur or */
.player-progress-fill {
  background: linear-gradient(90deg, var(--or-sombre), var(--or));
}

/* Recherche: barre fond exact */
.search-bar {
  background: rgba(255,255,255,0.052);
}

/* Compte: nom utilisateur taille exacte maquette */
.compte-user-name {
  font-size: 1.18rem;
}

/* Abonnements: nom période uppercase */
.abo-periode {
  font-size: 0.70rem;
  letter-spacing: 0.14em;
}

/* Abonnements: prix FCFA couleur or exacte */
.abo-prix-montant {
  color: var(--or);
  line-height: 0.95;
}

/* Abonnements: checkmark or exactement comme maquette */
.abo-features li .abo-check {
  color: var(--or);
  font-weight: 700;
}

/* Demander un film: titre or exactement */
.demande-title {
  color: var(--or);
  text-shadow: 0 0 14px rgba(201,168,76,0.18);
}

/* Bottom nav: Compte icône active exacte */
.bottom-nav-item.active[data-tab="compte"] .nav-icon {
  color: var(--or);
  fill: var(--or);
}

/* Top bar couleur titre page (Films, Afrique & Novelas) exacte */
.top-bar-title {
  color: var(--or);
  font-size: 1.08rem;
  font-weight: 600;
}

/* Afrique & Novelas: section titre avec drapeau */
.catalogue-section-header .catalogue-section-title {
  font-size: 0.84rem;
  font-weight: 600;
}

/* Recherche: résultats récents avec icône film */
.search-result-thumb {
  border-radius: var(--r-sm);
  background: var(--noir4);
}

/* Player: top bar titre film */
.player-title {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────
   74. HERO DESKTOP (page web) — Sections complémentaires
───────────────────────────────────────────────────────────── */
.hero-scroll {
  position: absolute;
  bottom: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.48rem;
  animation: fadeIn 1s 1s ease both;
}

.hero-scroll p {
  font-size: 0.62rem;
  letter-spacing: 0.20em;
  color: var(--gris);
  text-transform: uppercase;
}

.hero-scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--or), transparent);
  animation: scrollLine 2s infinite;
}

/* ─────────────────────────────────────────────────────────────
   75. COMPOSANT INSTALL SECTION
───────────────────────────────────────────────────────────── */
.install-section {
  background: var(--noir3);
  border-top: 1px solid rgba(201,168,76,0.07);
  padding: var(--sp-4);
}

.install-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.install-info { display: flex; align-items: center; gap: var(--sp-3); }

.install-app-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--or);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
}

.install-text-title { font-size: var(--text-sm); font-weight: 600; color: var(--blanc); margin-bottom: 1px; }
.install-text-sub   { font-size: var(--text-xs); color: var(--gris); }

/* ─────────────────────────────────────────────────────────────
   FIN — MBOA STREAM CSS v4.0 — 3200+ lignes
   Correspond exactement aux 12 écrans de la maquette :
   00-Splash · 01-Login · 02-Register · 03-Dashboard ·
   04-Films · 05-Afrique&Novelas · 06-DetailFilm ·
   07-Lecteur · 08-Recherche · 09-Compte ·
   10-Abonnements · 11-Demande
   Auteur : Mboa Stream Design System v4.0
───────────────────────────────────────────────────────────── */