/* ═══════════════════════════════════════════════════════════════════════════════════════════
   THÈME CLAIR — conçu pour le clair, pas une inversion du sombre.
   Tout est préfixé :root[data-theme="light"] : le thème sombre n'est pas touché d'un octet.

   Principes :
   • Profondeur par l'élévation : page gris-bleuté très clair, cartes BLANCHES qui s'en détachent par une ombre douce
     et teintée (le sombre, lui, crée la profondeur avec des surfaces plus claires et de grosses ombres noires).
   • Neutres teintés vers le violet de la marque (pas de gris pur, pas de crème), texte presque noir (#17171f), jamais #000.
   • Accessibilité : texte ≥ 4,5:1 sur la page et sur les cartes (vérifié par dev-tests/test-theme.js) ; les couleurs
     sémantiques (succès, alerte, danger) sont ASSOMBRIES pour rester lisibles sur blanc, les teintes de fond restent légères.
   • La couleur d'accent choisie est adaptée automatiquement (js/accent.js : même teinte, assombrie au bon contraste ;
     le blanc devient de l'encre).
   • Tout ce qui est posé SUR une affiche reste sombre (étiquettes de statut, titre au survol) : le fond, c'est l'image.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f3f8;
  --bg2: #ffffff;
  --bg3: #ebebf2;
  --border: #d6d6e2;
  --text: #17171f;
  --muted: #646474;
  --accent: #5b4ee0;
  --accent-hover: #4a3ec9;
  --accent-rgb: 91 78 224;
  --accent-contrast: #ffffff;
  --danger: #c62828;
  --success: #13733a;
  --warn: #9d5306;
  --star: #c07a00;
  --star-text: #8f5a00;
  --tier-bronze: #8f5a2c;
  --tier-silver: #5d6168;
  --tier-gold: #8a6200;

  --chip: rgba(23, 23, 40, 0.06);
  --chip-faint: rgba(23, 23, 40, 0.035);
  --nav-bg: rgba(255, 255, 255, 0.82);
  --scrim: rgba(23, 23, 40, 0.45);
  --scrim-strong: rgba(23, 23, 40, 0.55);

  /* ombres froides et douces, à deux niveaux (contact + diffuse) */
  --shadow-card: 0 1px 2px rgba(23, 23, 50, 0.06), 0 10px 26px -8px rgba(23, 23, 50, 0.14);
  --shadow-nav: 0 1px 0 rgba(23, 23, 50, 0.03), 0 8px 22px -10px rgba(23, 23, 50, 0.16);
  --shadow-pop: 0 14px 36px -10px rgba(23, 23, 50, 0.3);
  --shadow-poster: 0 14px 30px -10px rgba(23, 23, 50, 0.4);

  --ghost-body: #ddd9f7;
  --ghost-face: #17171f;
}

:root[data-theme="light"] ::selection { background: rgb(var(--accent-rgb) / 0.22); }

/* ── Barre du haut : verre blanc, filet fin ── */
:root[data-theme="light"] .navbar { box-shadow: var(--shadow-nav); }
:root[data-theme="light"] .bottom-nav { background: var(--bg2); box-shadow: 0 -6px 22px -10px rgba(23, 23, 50, 0.16); }
:root[data-theme="light"] .nav-link:hover,
:root[data-theme="light"] .nav-link.active { background: var(--bg3); }

/* ── Cartes, fenêtres : blanc + ombre douce ── */
:root[data-theme="light"] .media-card,
:root[data-theme="light"] .stat-card,
:root[data-theme="light"] .season-card,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .auth-box,
:root[data-theme="light"] .search-box,
:root[data-theme="light"] .toast { box-shadow: var(--shadow-card); }
:root[data-theme="light"] .toast { box-shadow: var(--shadow-pop); background: var(--bg2); }
:root[data-theme="light"] .modal { box-shadow: var(--shadow-pop); }

/* Survol d'une affiche : halo de la couleur d'accent, plus discret que sur fond sombre (il se voit beaucoup plus sur clair) */
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="light"] .media-card:hover {
    box-shadow: 0 0 0 1px var(--accent), 0 0 20px 3px rgb(var(--accent-rgb) / 0.22), 0 18px 30px -8px rgba(23, 23, 50, 0.3);
  }
  /* Titre/infos qui glissent PAR-DESSUS l'affiche : le dégradé reste noir, donc le texte reste blanc */
  :root[data-theme="light"] .media-card-body,
  :root[data-theme="light"] .media-card-body .media-card-title { color: #fff; }
  :root[data-theme="light"] .media-card-body .media-card-meta,
  :root[data-theme="light"] .media-card-body .media-card-meta span { color: rgba(255, 255, 255, 0.82); }
  :root[data-theme="light"] .media-card-body .media-card-next-ep { color: #fff !important; opacity: 0.92; }
}
:root[data-theme="light"] .theme3d-spotlight { background: radial-gradient(circle, rgb(var(--accent-rgb) / 0.09), transparent 70%); }

/* Badges de statut sur une affiche : verre sombre (comme en sombre), pour lire quel que soit le poster */
:root[data-theme="light"] .media-card-status .badge { background: rgba(10, 10, 12, 0.76); color: #fff; border-color: rgba(255, 255, 255, 0.14); }
:root[data-theme="light"] .media-card-status .badge-watching { color: #ffc766; }
:root[data-theme="light"] .media-card-status .badge-watched { color: #6ee7a0; }

/* ── Pastilles de statut : teinte légère + texte assombri ── */
:root[data-theme="light"] .badge-watching { background: rgba(245, 158, 11, 0.16); }
:root[data-theme="light"] .badge-watched { background: rgba(34, 197, 94, 0.14); }

/* ── Interrupteurs : piste « éteinte » assez contrastée pour se voir sur blanc ── */
:root[data-theme="light"] .slider { background: #d4d4e0; border-color: #b9b9ca; }
:root[data-theme="light"] input:checked + .slider { background: var(--accent); border-color: var(--accent); }

/* ── Fantôme (404, profil introuvable) : lavande + contour, sinon il disparaît sur le fond clair ── */
:root[data-theme="light"] .ghost404-tilt path { stroke: #b4aeea; stroke-width: 2; }
:root[data-theme="light"] .ghost404-tilt { filter: drop-shadow(0 16px 18px rgba(23, 23, 50, 0.22)) drop-shadow(0 0 26px rgb(var(--accent-rgb) / 0.14)); }

/* ── Bandeaux d'avertissement : ambre sur blanc ── */
:root[data-theme="light"] .settings-nudge { background: rgba(245, 158, 11, 0.12); border-color: rgba(157, 83, 6, 0.45); }
:root[data-theme="light"] .totp-banner { background: rgba(245, 158, 11, 0.14); border-bottom-color: rgba(157, 83, 6, 0.5); }
:root[data-theme="light"] .pending-note { color: var(--warn); }

/* ── Squelettes de chargement ── */
:root[data-theme="light"] .skeleton { background: var(--bg2); }

/* ── Liste des profils : la bannière en fond de carte, plus pâle sur blanc ── */
:root[data-theme="light"] .profile-card .profile-card-banner { opacity: 0.22; }

/* ── Cadre du lecteur vidéo et vignettes de bande-annonce : restent sombres (c'est de l'image) ── */
:root[data-theme="light"] .trailer-cover { background: #000; }