/* ══════════════════════════════════════════════════════════════════
   NEXORA — Design system « Noir & Laiton »
   Interface éditoriale cinéma : graphite profond, or champagne,
   Interface éditoriale cinéma : graphite profond, or champagne,
   Nunito (titres & texte) — formes rondes, jamais étirées
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. TOKENS
───────────────────────────────────────────── */
:root {
  /* Scrim cinéma (hero + nav en haut) — toujours sombre, indépendant du thème clair */
  --hero-scrim: #050505;

  /* Fonds */
  --bg-0: #050505;
  --bg-1: #0c0c0c;
  --bg-2: #141414;
  --bg-3: #1c1c1c;

  /* Surfaces & traits */
  --surface:        rgba(255, 255, 255, 0.045);
  --surface-2:      rgba(255, 255, 255, 0.08);
  --border:         rgba(255, 255, 255, 0.07);
  --border-strong:  rgba(255, 255, 255, 0.14);
  --hairline:       rgba(255, 255, 255, 0.09);

  /* Texte */
  --text:      #f4f3f0;
  --text-dim:  #b8b6b0;
  --text-mute: #7d7b75;

  /* Accent — or champagne */
  --accent:      #e3ba58;
  --accent-2:    #efcd7f;
  --accent-deep: #b98f35;
  --accent-ink:  #1d1504;
  --accent-soft: rgba(227, 186, 88, 0.13);
  --accent-line: rgba(227, 186, 88, 0.38);
  --accent-glow: rgba(227, 186, 88, 0.20);

  /* États */
  --danger:      #e5484d;
  --danger-soft: rgba(229, 72, 77, 0.14);
  --success:     #55b467;

  /* Géométrie */
  --radius-xs: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Ombres */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -14px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 30px 80px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* Mouvement — courbes type streaming (snappy, jamais visqueux) */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-cinema: cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast: 140ms;
  --t-med:  220ms;
  --t-slow: 420ms;
  --t-page: 280ms;
  --hero-dwell: 7s;

  /* Typographie */
  --font-display: "Nunito", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Nunito", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Nunito", ui-monospace, "SF Mono", monospace;

  /* Gabarit */
  --shell: 1560px;
  --gutter: clamp(20px, 4vw, 56px);
  --nav-h: 68px;

  /* Compat ancien thème (variables encore référencées par le JS injecté) */
  --purple: var(--accent);
  accent-color: var(--accent);
  color-scheme: dark;
}

/* ─────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; font-stretch: 100%; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg-0);
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}
#app {
  min-height: 70vh;
}
#app.nx-enter {
  animation: nxPageIn var(--t-page) var(--ease-out) both;
}
@keyframes nxPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@supports (view-transition-name: none) {
  ::view-transition-old(root) {
    animation: nxVtFade 180ms var(--ease-smooth) both;
  }
  ::view-transition-new(root) {
    animation: nxVtRise 280ms var(--ease-out) both;
  }
}
@keyframes nxVtFade {
  to { opacity: 0; }
}
@keyframes nxVtRise {
  from { opacity: 0; }
}

/* Accès interdit tant que l'utilisateur n'est pas connecté */
html.site-locked #nav,
html.site-locked #app,
html.site-locked .footer,
html.site-locked #mobileBottomNav,
html.site-locked #searchPanel,
html.site-locked #searchToggle,
html.site-locked #navSearchPill,
html.site-locked #ad-root,
html.site-locked #detailModal,
html.site-locked #playerModal,
html.site-locked #adminPanelModal,
html.site-locked .ambient-bg {
  display: none !important;
}
#gateLanding { display: none; }
html.site-locked #gateLanding { display: grid; }
html.site-locked.gate-pending #gateLanding { display: none; }
html.site-locked.gate-pending #authModal.is-pending .modal-close { display: none !important; }
html.site-locked.gate-pending #authModal .modal-backdrop {
  pointer-events: none;
  background: #0a0a0a;
  opacity: 1;
}
html.site-locked #authModal.open { animation: none; }
html.site-locked #authModal.is-pending .auth-tabs,
html.site-locked #authModal.is-pending #googleSignInBtn,
html.site-locked #authModal.is-pending .auth-divider,
html.site-locked #authModal.is-pending #loginForm,
html.site-locked #authModal.is-pending #registerForm,
html.site-locked #authModal.is-pending .cf-turnstile-slot {
  display: none !important;
}

/* ────────── Page d'accueil avant connexion ────────── */
.gate {
  --gate-gold: #c9a45c;
  --gate-ink: #09090b;
  --gate-mute: #9a9790;
  --gate-text: #f4f2eb;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 48px 28px;
  color: var(--gate-text);
  background:
    radial-gradient(880px 420px at 50% -12%, rgba(201, 164, 92, 0.08), transparent 58%),
    var(--gate-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.gate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  height: 76px;
  flex-shrink: 0;
}
.gate-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gate-mark {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.gate-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.045em;
  color: #f6f3ec;
  line-height: 1;
}
.gate-signin {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  background: transparent;
  color: #f4f2eb;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.gate-signin:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.4);
}

.gate-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.gate-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.35rem, 5vw, 3.55rem);
  letter-spacing: -0.048em;
  color: #f7f4ed;
  margin: 0;
  line-height: 1.06;
}
.gate-lead {
  margin: 14px auto 32px;
  max-width: 28em;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--gate-mute);
  font-weight: 400;
}
.gate-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 0;
}
.gate-btn-primary {
  background: var(--gate-gold);
  color: #161208;
}
.gate-btn-primary:hover { filter: brightness(1.06); }
.gate-link {
  color: #b8b5ae;
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.gate-link:hover { color: #fff; }

.gate-points {
  list-style: none;
  margin: 0 auto;
  padding: 26px 0 22px;
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
}
.gate-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #bdbab3;
}
.gate-points p:last-child {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #8f8c85;
}

.gate-foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding-top: 4px;
  font-size: 12px;
}
.gate-foot a {
  color: #5c5a55;
  text-decoration: none;
}
.gate-foot a:hover { color: #b8b5ae; }

@media (min-width: 761px) {
  .gate {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }
}

@media (max-width: 760px) {
  .gate {
    padding: 0 22px 28px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
  .gate-bar {
    height: 64px;
    padding-top: env(safe-area-inset-top);
  }
  .gate-title { font-size: 2.05rem; }
  .gate-lead { font-size: 0.98rem; margin-bottom: 26px; }
  .gate-btn { width: 100%; max-width: 320px; height: 46px; }
  .gate-points {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 0;
    padding-top: 26px;
    text-align: center;
  }
  .gate-foot { justify-content: center; gap: 8px 18px; padding: 28px 0 0; margin-top: 0; }
}

.auth-pending {
  text-align: center;
  padding: 8px 0 0;
}
.auth-pending p {
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 22px;
}
.admin-user-row.is-pending {
  border-color: rgba(227, 186, 88, 0.35);
  background: rgba(227, 186, 88, 0.06);
}
.admin-user-row.is-rejected { opacity: 0.7; }

.cf-turnstile-slot {
  min-height: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cf-turnstile-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2px 0 8px;
  min-height: 68px;
  min-width: 300px;
  overflow: visible;
  border-radius: 8px;
  background: transparent;
  color-scheme: dark;
}
.cf-turnstile-wrap iframe {
  color-scheme: dark;
}

body {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-0);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; }
p { margin: 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.26); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.muted { color: var(--text-mute); }

/* Micro-label monospace — signature de l'interface */
.mono-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ─────────────────────────────────────────────
   3. FOND AMBIANT
   Voile discret : halo zénithal + grain photographique.
───────────────────────────────────────────── */
.ambient-bg {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 50% -12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 62%),
    radial-gradient(1400px 900px at 85% 115%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    var(--bg-0);
}
.orb { display: none; }
.grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   4. BOUTONS
───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--t-fast) var(--ease-smooth),
    border-color var(--t-fast) var(--ease-smooth),
    color var(--t-fast) var(--ease-smooth),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-smooth);
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn:active { transform: translateY(1px) scale(0.985); }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-deep) 130%);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -8px var(--accent-glow);
}
.btn-primary svg { color: var(--accent-ink); fill: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 28px -6px rgba(227, 186, 88, 0.35);
    filter: brightness(1.05);
    transform: translateY(-1px);
  }
  .btn-secondary:hover { transform: translateY(-1px); }
}

.btn-soon,
.btn.btn-soon:disabled,
.btn:disabled.btn-soon {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-mute);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
  pointer-events: none;
}
.btn-soon:hover,
.btn.btn-soon:disabled:hover {
  filter: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.07);
}
.btn-soon:active,
.btn:disabled:active { transform: none; }

.btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.btn-ghost { color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); }

/* Boutons Regarder / Plus d'infos (hero, fiche, etc.) */
.btn-watch,
.btn-more {
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  gap: 10px;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 13px 40px;
  min-width: 198px;
}
.btn-watch svg,
.btn-more svg {
  width: 15px;
  height: 15px;
}
.btn-watch {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none !important;
}
.btn-watch svg {
  color: var(--accent-ink);
  fill: currentColor;
}
.btn-more {
  background: rgba(50, 50, 50, 0.55);
  color: #f2f2f2;
  border: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
  .btn-watch:hover {
    filter: brightness(1.08);
    box-shadow: none;
    transform: translateY(-1px);
  }
  .btn-more:hover {
    background: rgba(60, 60, 60, 0.72);
    color: #fff;
    transform: translateY(-1px);
  }
}

/* Étiquette générique (métadonnées hero / fiche) */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rating svg { width: 14px; height: 14px; }

/* ─────────────────────────────────────────────
   5. NAVIGATION
───────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--t-med) var(--ease-smooth),
    border-color var(--t-med) var(--ease-smooth),
    backdrop-filter var(--t-med) var(--ease-smooth);
}
.nav::before {
  /* voile de lisibilité permanent en haut de page */
  content: "";
  position: absolute; inset: 0 0 -28px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hero-scrim) 72%, transparent), transparent);
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--t-med);
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg-0) 86%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: var(--hairline);
}
.nav.scrolled::before { opacity: 0; }

.nav-inner {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  height: var(--nav-h);
  padding: 0 28px;
  max-width: none;
  margin: 0;
  position: relative;
  gap: 16px;
}

/* Marque */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  justify-self: start;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
}
.brand-mark svg, .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text {
  display: flex;
  align-items: center;
  line-height: 0;
  position: relative;
}
.brand-text img,
.brand-logo {
  display: block;
  height: 20px;
  width: auto;
  max-width: min(120px, 28vw);
  object-fit: contain;
  object-position: left center;
  transition: opacity var(--t-fast), filter var(--t-med);
}
/* Un seul logo visible : le wordmark clair est masqué hors thème light
   (spécificité > .brand-text img sinon les deux s'affichent). */
.brand-text .brand-logo--on-light { display: none !important; }
.brand:hover .brand-text img { opacity: 0.92; }
/* Wordmark blanc en sombre ; teinté sur tous les thèmes couleur (sauf clair & noir/or). */
html:not([data-theme="light"]):not([data-theme="dark"]) .brand-text .brand-logo--on-dark {
  opacity: 0;
}
html:not([data-theme="light"]):not([data-theme="dark"]) .brand-text::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--accent);
  -webkit-mask: url("logo-nexora-titre.png") left center / contain no-repeat;
  mask: url("logo-nexora-titre.png") left center / contain no-repeat;
  pointer-events: none;
}
html:not([data-theme="light"]):not([data-theme="dark"]) .brand:hover .brand-text::after {
  opacity: 0.88;
}

/* Liens */
.nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-self: center;
  flex: none;
}
.nav-link {
  position: relative;
  padding: 8px 16px;
  font-family: "Plus Jakarta Sans", var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  border-radius: 999px;
  transition: color var(--t-fast) var(--ease-smooth), background-color var(--t-fast) var(--ease-smooth);
}
.nav-link::after { display: none; }
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link.active {
  color: var(--text);
  background: var(--surface-2);
}

/* Actions à droite */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  justify-self: end;
}
.nav-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  min-width: 0;
  max-width: none;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: color-mix(in srgb, var(--text) 80%, transparent);
  cursor: pointer;
  font-family: "Plus Jakarta Sans", var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-align: left;
  box-shadow: none;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.nav-search-pill:hover {
  color: var(--text);
  background: var(--surface);
  border-color: transparent;
}
.nav-search-pill-text {
  flex: none;
  min-width: 0;
}
.nav-search-pill svg {
  flex-shrink: 0;
  color: currentColor;
}
#searchToggle { display: none; }
.account-name { display: none; }
.icon-btn, .discover-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    color var(--t-fast) var(--ease-smooth),
    background-color var(--t-fast) var(--ease-smooth),
    border-color var(--t-fast) var(--ease-smooth);
}
.icon-btn:hover, .discover-btn:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}
#settingsToggle.is-on {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.menu-btn { display: none; }

/* ─────────────────────────────────────────────
   6. RECHERCHE — voile plein écran
───────────────────────────────────────────── */
.search-panel {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--bg-0) 90%, transparent);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-smooth), visibility 0s linear var(--t-med);
  padding: calc(var(--nav-h) + 34px) var(--gutter) 60px;
}
.search-panel.open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-med) var(--ease-smooth);
}

.search-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 860px;
  margin: 0 auto 34px;
  padding: 6px 2px 18px;
  border-bottom: 1px solid var(--border-strong);
  transition: border-color var(--t-med);
}
.search-panel.open .search-inner { animation: searchSlide 0.42s var(--ease-out) both; }
.search-inner:focus-within { border-bottom-color: var(--accent-line); }
@keyframes searchSlide {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.search-icon { color: var(--accent); flex-shrink: 0; }
#searchInput {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: clamp(20px, 3vw, 30px);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 4px 0;
}
#searchInput::placeholder { color: var(--text-mute); }
.search-close {
  width: 38px; height: 38px;
  border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.search-close:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

.search-results {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 18px 14px;
}
.search-results .card { width: auto; }
.search-results .card,
.search-results .search-game-card {
  animation: cardIn 0.4s var(--ease-out) both;
}
.search-results > *:nth-child(1)  { animation-delay: 0.02s; }
.search-results > *:nth-child(2)  { animation-delay: 0.04s; }
.search-results > *:nth-child(3)  { animation-delay: 0.06s; }
.search-results > *:nth-child(4)  { animation-delay: 0.08s; }
.search-results > *:nth-child(5)  { animation-delay: 0.10s; }
.search-results > *:nth-child(6)  { animation-delay: 0.12s; }
.search-results > *:nth-child(7)  { animation-delay: 0.14s; }
.search-results > *:nth-child(8)  { animation-delay: 0.16s; }
.search-results > *:nth-child(9)  { animation-delay: 0.18s; }
.search-results > *:nth-child(10) { animation-delay: 0.20s; }
.search-results > *:nth-child(11) { animation-delay: 0.22s; }
.search-results > *:nth-child(12) { animation-delay: 0.24s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   7. HERO — bannière cinématique
───────────────────────────────────────────── */
.hero {
  position: relative;
  height: min(94vh, 900px);
  min-height: 560px;
  overflow: hidden;
  background: var(--bg-0);
  isolation: isolate;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.85s var(--ease-cinema);
}
.hero-slide.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}

.hero-image {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg-1);
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 22%;
  /* scale proche de 1 = netteté hors plein écran (évite le soft GPU) */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0.92;
  transition:
    transform 1.05s var(--ease-cinema),
    opacity 0.7s var(--ease-smooth);
}
.hero-slide.active .hero-photo {
  opacity: 1;
  animation: heroKen 9s linear forwards;
}
@keyframes heroKen {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(0, -0.6%, 0) scale(1.025); }
}

.hero-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--hero-scrim) 48%, transparent) 0%, color-mix(in srgb, var(--hero-scrim) 8%, transparent) 32%, color-mix(in srgb, var(--hero-scrim) 62%, transparent) 68%, var(--bg-0) 99%),
    linear-gradient(90deg, color-mix(in srgb, var(--hero-scrim) 90%, transparent) 0%, color-mix(in srgb, var(--hero-scrim) 48%, transparent) 44%, transparent 78%);
}
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(108px, 16vh, 188px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.hero-slide:not(.active) .hero-content > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent);
}
.hero-slide.active .hero-eyebrow { animation: riseIn 0.55s var(--ease-out) 0.04s both; }
.hero-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: 0.85;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 20px 0 0;
  max-width: 780px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}
.hero-slide.active .hero-title { animation: riseIn 0.62s var(--ease-out) 0.08s both; }
.hero-logo {
  display: block;
  max-height: 128px;
  max-width: min(460px, 72vw);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left bottom;
  margin: 20px 0 0;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55));
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide.active .hero-photo { animation: none; }
}
.hero-slide.active .hero-logo { animation: riseIn 0.62s var(--ease-out) 0.08s both; }
.hero-logo.hero-logo--large {
  max-height: 168px;
  max-width: min(580px, 84vw);
}
.hero-logo.hero-logo--white,
.detail-logo.detail-logo--white {
  filter: brightness(0) invert(1) drop-shadow(0 4px 20px rgba(0, 0, 0, 0.65));
}
.detail-logo.detail-logo--white {
  max-height: clamp(88px, 16vw, 148px);
  max-width: min(520px, 92%);
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.hero-slide.active .hero-meta { animation: riseIn 0.58s var(--ease-out) 0.14s both; }
.hero-meta .rating { font-size: 13.5px; }

.hero-overview {
  max-width: 560px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 16px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-slide.active .hero-overview { animation: riseIn 0.58s var(--ease-out) 0.2s both; }

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.hero-slide.active .hero-actions { animation: riseIn 0.58s var(--ease-out) 0.26s both; }
.hero-actions .btn {
  padding: 14px 50px;
  min-width: 216px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
}

@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Compteur de slides (01 / 05) */
.hero-count {
  position: absolute;
  right: var(--gutter);
  bottom: calc(clamp(64px, 10vh, 118px) + 44px);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
}
.hero-count .current { color: var(--accent); }

/* Indicateurs — barres de progression fines */
.hero-indicators {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(64px, 10vh, 118px);
  z-index: 3;
  display: flex;
  gap: 7px;
}
.hero-dot {
  position: relative;
  width: 34px;
  height: 22px;           /* zone tactile confortable */
  background: none;
  cursor: pointer;
  padding: 0;
}
.hero-dot::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 10px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  transition: background-color var(--t-fast);
}
.hero-dot:hover::before { background: rgba(255, 255, 255, 0.45); }
.hero-dot::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--accent);
}
.hero-dot.active::after { animation: heroDotFill var(--hero-dwell) linear forwards; }
@keyframes heroDotFill { from { width: 0; } to { width: 100%; } }

/* Bouton admin logo (hero) */
.hero-admin-logo-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  background: rgba(9, 9, 11, 0.72);
  border: 1px solid var(--accent-line);
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(8px);
  position: absolute;
  top: calc(var(--nav-h) + 16px);
  right: var(--gutter);
  z-index: 10;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.hero-admin-logo-btn:hover { background: rgba(227, 186, 88, 0.18); border-color: var(--accent); }
.is-admin .hero-slide.active .hero-admin-logo-btn { display: inline-flex; }

/* ─────────────────────────────────────────────
   8. SECTIONS & RANGÉES
───────────────────────────────────────────── */
.page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-pad-top { padding-top: calc(var(--nav-h) + 52px); }

.section { margin: clamp(40px, 6vh, 64px) 0; }
.section:first-of-type { margin-top: clamp(28px, 4vh, 44px); }
.hero ~ .section {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}
.hero + .section,
.hero + .section + .section {
  content-visibility: visible;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto 4px;
  padding: 0 var(--gutter);
  max-width: var(--shell);
}
.section-title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.section-title .accent {
  color: var(--accent);
  font-weight: 600;
}
.section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-mute);
  white-space: nowrap;
  transition: color var(--t-fast);
}
.section-link svg {
  width: 13px; height: 13px;
  transition: transform var(--t-med) var(--ease-out);
}
.section-link:hover { color: var(--accent); }
.section-link:hover svg { transform: translateX(4px); }

.row-wrap {
  position: relative;
  padding: 0 var(--gutter);
  max-width: var(--shell);
  margin: 0 auto;
}
.row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 22px 2px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.row::-webkit-scrollbar { display: none; }

/* Flèches de défilement */
.row-btn {
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(14, 14, 17, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  color: var(--text);
  display: grid;
  place-items: center;
  z-index: 5;
  opacity: 0;
  transition:
    opacity var(--t-med) var(--ease-smooth),
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    transform var(--t-fast) var(--ease-out);
}
.row-btn svg { width: 17px; height: 17px; }
.row-wrap:hover .row-btn:not(.is-disabled) { opacity: 1; }
.row-btn.is-disabled { opacity: 0 !important; pointer-events: none; }
.row-btn:hover { background: var(--text); border-color: var(--text); color: var(--bg-0); transform: translateY(-50%) scale(1.06); }
.row-btn:active { transform: translateY(-50%) scale(0.96); }
.row-btn.left  { left: calc(var(--gutter) - 21px); }
.row-btn.right { right: calc(var(--gutter) - 21px); }

/* ─────────────────────────────────────────────
   9. CARTES — affiche + légende éditoriale
───────────────────────────────────────────── */
.card {
  flex: 0 0 auto;
  width: 204px;
  scroll-snap-align: start;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  transition: transform var(--t-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-6px); z-index: 3; }
}

.card-poster {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), var(--shadow-1);
  transition:
    transform var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-smooth);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-poster,
  .card:focus-visible .card-poster {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
      inset 0 0 0 1px var(--accent-line),
      0 22px 50px -14px rgba(0, 0, 0, 0.88),
      0 4px 14px rgba(0, 0, 0, 0.4);
  }
}

/* Voile + pastille lecture au survol */
.card-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 9, 11, 0) 46%, rgba(9, 9, 11, 0.82) 100%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-smooth);
}
.card:hover .card-poster::after { opacity: 1; }

.card-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-ink);
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity var(--t-med) var(--ease-smooth), transform var(--t-med) var(--ease-out);
  pointer-events: none;
}
.card-play svg { width: 14px; height: 14px; margin-left: 1px; }
.card:hover .card-play { opacity: 1; transform: translateY(0) scale(1); }

/* Légende sous l'affiche */
.card-info {
  padding: 10px 2px 0;
  opacity: 1;
  transform: none;
}
.card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t-fast);
}
.card:hover .card-title { color: var(--text); }
.card-meta {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}
.card-meta > span {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.card-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  flex-shrink: 0;
}
.card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.card-rating svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Rang Top 10 (ancien badge sur carte standard) */
.card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  background: rgba(9, 9, 11, 0.78);
  backdrop-filter: blur(8px);
  border: 1px solid var(--accent-line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  pointer-events: none;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Top 10 de la semaine — chiffre à côté de l'affiche ── */
.section-top10 {
  --top10-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin-top: 4px;
}
.row-wrap-top10 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.row-top10 {
  gap: 20px;
  align-items: flex-end;
  scroll-padding-left: var(--gutter);
}
.top10-card {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  width: auto;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  scroll-snap-align: start;
  font-family: var(--top10-font);
}
.top10-rank {
  position: static;
  flex: 0 0 auto;
  font-family: var(--top10-font);
  font-size: 118px;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: #3f3f46;
  pointer-events: none;
  user-select: none;
  padding-bottom: 2px;
}
.top10-main {
  display: flex;
  flex-direction: column;
  width: 148px;
  min-width: 148px;
}
.top10-poster {
  position: static;
  width: 148px;
  height: 222px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  background-size: cover;
  background-position: center top;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.7);
}
@media (hover: hover) and (pointer: fine) {
  .top10-card:hover .top10-poster {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 12px 24px -8px rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
  }
  .top10-poster {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
}
.top10-info {
  margin-top: 10px;
  margin-left: 0;
  width: 100%;
  min-width: 0;
}
.top10-title {
  font-family: var(--top10-font);
  font-size: 0.875rem;
  font-weight: 500;
  color: #f3f4f6;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top10-meta {
  margin-top: 3px;
  font-family: var(--top10-font);
  font-size: 0.75rem;
  font-weight: 400;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top10-star {
  color: #e5e7eb;
  font-size: 0.68rem;
}
@media (max-width: 720px) {
  .top10-main { width: 120px; min-width: 120px; }
  .top10-poster { width: 120px; height: 180px; }
  .top10-rank { font-size: 92px; }
  .row-top10 { gap: 14px; }
  .top10-card { gap: 8px; }
}
[data-theme="light"] .top10-title { color: var(--text); }
[data-theme="light"] .top10-meta { color: var(--text-dim); }
[data-theme="light"] .top10-rank { color: #c4bfb6; }
[data-theme="light"] .top10-star { color: var(--text-dim); }

/* Reprise de lecture — barre sur l'affiche uniquement (pas sur année/note) */
.card-progress {
  position: absolute;
  left: 6px; right: 6px; bottom: 6px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}
.card-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(227, 186, 88, 0.35);
}

/* Reprendre la lecture — cartes horizontales */
.row-resume .card-resume {
  width: 340px;
}
.card-resume .card-poster {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background-position: center;
}
.card-resume:hover { transform: none; }
.card-resume:hover .card-poster,
.card-resume:focus-visible .card-poster {
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), var(--shadow-1);
}
.card-resume .card-poster::after { display: none; }
.card-resume .card-play {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 52px;
  height: 52px;
  background: rgba(12, 12, 12, 0.58);
  color: #fff;
  opacity: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.card-resume .card-play svg { width: 18px; height: 18px; margin-left: 2px; }
.card-resume:hover .card-play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(12, 12, 12, 0.74);
}
.card-info-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #050505;
  color: #ececec;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
}
.card-info-btn svg { width: 16px; height: 16px; }
.card-info-btn:hover { color: #fff; background: #111; }
.card-resume .card-admin-btn { display: none !important; }
.card-resume-time {
  position: absolute;
  right: 8px;
  bottom: 10px;
  z-index: 5;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.78);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  letter-spacing: 0.01em;
}
.card-resume .card-progress {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 0 0 12px 12px;
  background: rgba(255, 255, 255, 0.22);
}
.card-resume .card-progress-bar {
  background: #fff;
  box-shadow: none;
  border-radius: 0;
}
.card-resume .card-info {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 2px 0;
}
.card-resume-text { flex: 1; min-width: 0; }
.card-resume .card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}
.card-resume .card-meta {
  margin-top: 2px;
  font-size: 12.5px;
}
.card-resume .card-meta > span + span::before { display: none; }
.card-dismiss {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c8c8c8;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.card-dismiss svg { width: 15px; height: 15px; }
.card-dismiss:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Bouton admin sur carte */
.card-admin-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-xs);
  display: none;
  place-items: center;
  background: rgba(9, 9, 11, 0.82);
  border: 1px solid var(--accent-line);
  color: var(--accent-2);
  backdrop-filter: blur(6px);
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.is-admin .card-admin-btn { display: grid; }
.card-admin-btn:hover { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }

/* Squelettes */
.skeleton {
  background: linear-gradient(105deg, var(--bg-1) 30%, var(--bg-2) 46%, var(--bg-1) 62%);
  background-size: 240% 100%;
  animation: shimmer 1.5s var(--ease-smooth) infinite;
  border: none !important;
  box-shadow: none !important;
}
@keyframes shimmer { to { background-position: -140% 0; } }
.card.skeleton { background: none; }
.card.skeleton .card-poster { box-shadow: none; }

/* Grille (explorer / recherche) */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
  gap: 28px 16px;
  padding: 10px var(--gutter) 60px;
  max-width: var(--shell);
  margin: 0 auto;
}
.grid .card { width: auto; }

/* ─────────────────────────────────────────────
   10. EN-TÊTES DE PAGE & FILTRES
───────────────────────────────────────────── */
.page-header {
  padding: calc(var(--nav-h) + 18px) var(--gutter) 12px;
  max-width: var(--shell);
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent);
}
.page-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: 0.85;
}
.page-title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 6px 0 4px;
}
.page-sub {
  color: var(--text-mute);
  max-width: 560px;
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 4px;
}

.cine-hero {
  position: relative;
  width: 100%;
  min-height: clamp(340px, 48vh, 520px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 56px;
}
.cine-hero--compact {
  min-height: clamp(260px, 38vh, 400px);
  padding-bottom: 40px;
}
.cine-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--bg-1);
  overflow: hidden;
}
.cine-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 22%;
  transform: scale(1.03);
}
.cine-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 42%, transparent) 0%, color-mix(in srgb, var(--bg-0) 8%, transparent) 32%, color-mix(in srgb, var(--bg-0) 62%, transparent) 68%, var(--bg-0) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--bg-0) 32%, transparent) 0%, transparent 40%, transparent 60%, color-mix(in srgb, var(--bg-0) 32%, transparent) 100%);
}
.cine-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.cine-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.4vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}
.cine-hero-sub {
  margin: -2px 0 0;
  max-width: 28em;
  color: rgba(244, 243, 240, 0.78);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
}
.cine-hero-search {
  position: relative;
  display: block;
  width: min(100%, 560px);
  margin-top: 6px;
}
.cine-hero-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.55);
  transform: translateY(-50%);
  pointer-events: none;
}
.cine-hero-search-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.cine-hero-search-input {
  width: 100%;
  height: 52px;
  padding: 0 22px 0 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 12, 16, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  outline: none;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.32);
}
.cine-hero-search-input::placeholder {
  color: rgba(255, 255, 255, 0.46);
}
.cine-hero-search-input:focus {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(12, 12, 16, 0.74);
}

.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 18px var(--gutter) 8px;
  max-width: var(--shell);
  margin: 0 auto;
}
.filters .filters { padding: 0; margin: 0 6px 0 0; }

.filter-chip {
  box-sizing: border-box;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color var(--t-fast) var(--ease-smooth),
    border-color var(--t-fast) var(--ease-smooth),
    color var(--t-fast) var(--ease-smooth),
    transform var(--t-fast) var(--ease-out);
}
.filter-chip:hover { border-color: rgba(255, 255, 255, 0.14); color: var(--text); background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.filter-chip:active { transform: scale(0.97); }
.filter-chip.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: #fff;
  font-weight: 600;
}

.filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 34px 9px 16px;
  border-radius: 999px;
  background-color: var(--bg-1);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237d7b75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.filter-select:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--text); }
.filter-select:focus-visible { outline-offset: 0; }
.filter-select option { background: var(--bg-1); color: var(--text); }

/* État vide */
.empty {
  text-align: center;
  padding: 90px 24px;
  color: var(--text-mute);
}
.empty h3 {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.4rem;
  color: var(--text);
  margin: 12px 0 8px;
}
.empty p { font-size: 14px; }
.empty .btn { margin-top: 20px; }

/* ─────────────────────────────────────────────
   11. MODALES
───────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal.open { display: flex; animation: fadeIn var(--t-med) var(--ease-smooth); }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 7, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  max-width: 980px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-pop);
  animation: popIn 0.45s var(--ease-out);
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-close {
  position: fixed;
  top: 20px;
  right: 24px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(9, 9, 11, 0.72);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 15px;
  z-index: 10;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.modal-close:hover { background: var(--text); color: var(--bg-0); border-color: var(--text); }

/* ─────────────────────────────────────────────
   12. FICHE DÉTAIL (plein écran)
───────────────────────────────────────────── */
#detailModal { padding: 0; }
#detailModal .modal-card {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  background: var(--bg-0);
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.detail-backdrop {
  position: relative;
  width: 100%;
  height: 66vh;
  min-height: 380px;
  background-size: cover;
  background-position: center 18%;
  flex-shrink: 0;
}
.detail-backdrop-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0.3) 0%, rgba(9, 9, 11, 0.45) 45%, var(--bg-0) 98%),
    linear-gradient(90deg, rgba(9, 9, 11, 0.62) 0%, rgba(9, 9, 11, 0.08) 60%);
}

.detail-body {
  position: relative;
  z-index: 2;
  max-width: 1060px;
  margin: -190px auto 0;
  padding: 0 var(--gutter) 90px;
}

.detail-poster {
  width: 176px;
  min-width: 176px;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  float: left;
  margin: 6px 30px 22px 0;
}

.detail-info {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.detail-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  max-width: 820px;
  order: 0;
}
.detail-logo {
  display: block;
  max-height: clamp(72px, 14vw, 118px);
  max-width: min(440px, 88%);
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.55));
  animation: riseIn 0.7s var(--ease-out) both;
}
.detail-title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
  max-width: 820px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.detail-title-block.has-logo .detail-title--small,
.detail-title.detail-title--small {
  font-family: var(--font-body);
  font-stretch: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: none;
  max-width: 440px;
}
.detail-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  color: var(--text-dim);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
  order: 1;
}
.detail-genres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  order: 2;
}
.detail-genres .tag,
.detail-genres span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}
.detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 30px;
  order: 3;
}
.detail-actions .btn { padding: 13px 40px; font-size: 15px; min-width: 198px; }
.detail-actions .btn-watch,
.detail-actions .btn-more,
.detail-actions .btn-soon {
  border-radius: 8px;
}
.detail-overview {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-dim);
  margin-bottom: 26px;
  max-width: 720px;
  order: 4;
}
.detail-overview.is-clamped {
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.detail-overview.is-clamped.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.detail-overview-more {
  display: none;
  order: 4;
}
.detail-overview.is-clamped + .detail-overview-more {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: none;
  border: none;
  padding: 0 0 18px;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.detail-episodes {
  order: 4;
  width: 100%;
  max-width: 820px;
  margin: 4px 0 22px;
  clear: both;
}
.ep-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ep-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ep-season-pill {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.ep-season-pill:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.ep-season-pill.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.ep-season-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e3ba58' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--text);
  border-radius: 999px;
  padding: 8px 34px 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-width: 148px;
}
.ep-season-select:focus {
  outline: none;
  border-color: var(--accent);
}
.ep-list { display: flex; flex-direction: column; gap: 8px; }
.ep-loading {
  color: var(--text-mute);
  font-size: 13.5px;
  padding: 12px 4px;
}
.ep-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 10px;
  color: inherit;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.ep-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.ep-row--soon,
.ep-row--soon:hover,
.ep-row--soon:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}
.ep-thumb {
  flex-shrink: 0;
  width: 132px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #1a1a1e center / cover no-repeat;
}
.ep-body {
  flex: 1;
  min-width: 0;
}
.ep-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.ep-overview {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-mute);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ep-meta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-mute);
  padding-right: 6px;
}
.ep-runtime { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ep-chev { opacity: 0.55; display: grid; place-items: center; }

/* Notation étoiles */
.detail-stars {
  display: flex;
  gap: 2px;
  align-items: center;
  order: 5;
  margin-bottom: 10px;
  width: 100%;
}
.detail-star {
  background: none;
  border: none;
  padding: 4px;
  color: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 120ms var(--ease-smooth), transform 120ms var(--ease-out);
}
.detail-star svg { width: 21px; height: 21px; }
.detail-star:hover { transform: scale(1.15); }
.detail-star.active { color: var(--accent); }
.detail-star.hover { color: var(--accent-2); }
.detail-heart {
  background: none;
  border: none;
  padding: 4px;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 120ms var(--ease-smooth), transform 120ms var(--ease-out);
}
.detail-heart svg { width: 22px; height: 22px; }
.detail-heart:hover { color: #e2556a; transform: scale(1.12); }
.detail-heart.active { color: #e2556a; }
.detail-heart.active:hover { color: #ff7a8a; }
.detail-alert-btn {
  background: none;
  border: none;
  padding: 4px;
  margin-left: 2px;
  color: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 120ms var(--ease-smooth), transform 120ms var(--ease-out);
}
.detail-alert-btn svg { width: 21px; height: 21px; }
.detail-alert-btn:hover { color: var(--accent-2); transform: scale(1.12); }
.detail-alert-btn.active { color: var(--accent); }
.detail-alert-btn.active:hover { color: var(--accent-2); }

/* Ma liste dans le menu profil : téléphone uniquement */
.mylist-mobile-only { display: none !important; }
@media (max-width: 900px) {
  .mylist-mobile-only { display: inline-flex !important; }
  a.account-dropdown-item.mylist-mobile-only { display: block !important; }
}

/* Ligne réalisation / création (fiche détail) */
.detail-crew {
  order: 2;
  margin: -14px 0 22px;
  font-size: 13.5px;
  color: var(--text-mute);
}
.detail-crew a {
  color: var(--text-dim);
  font-weight: 600;
  transition: color var(--t-fast);
}
.detail-crew a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

.detail-section { margin-top: 46px; }
.detail-section h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.detail-section h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.cast-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 18px 14px;
}
.cast-card { text-align: center; }
.cast-photo {
  width: 76px;
  height: 76px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1));
  background-size: cover;
  background-position: center top;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow var(--t-fast);
}
.cast-card:hover .cast-photo { box-shadow: inset 0 0 0 1px var(--accent-line); }
.cast-name { font-size: 12.5px; font-weight: 600; }
.cast-char { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

.similar-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  gap: 26px 16px;
}
.similar-row .card { width: auto; }

/* ─────────────────────────────────────────────
   13. LECTEUR — plein écran cinéma
───────────────────────────────────────────── */
.player-modal {
  padding: 0 !important;
  align-items: stretch;
  justify-content: stretch;
  overscroll-behavior: none;
  z-index: 5000;
}
.player-modal.open {
  display: flex;
  flex-direction: column;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  width: 100dvw !important;
  height: 100% !important;
  height: 100dvh !important;
  min-height: 100svh;
  max-width: none;
  max-height: none;
  padding: 0 !important;
  margin: 0 !important;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  z-index: 5000;
  background: #000;
  animation: none;
  touch-action: manipulation;
}
/* Cache le catalogue : sinon iOS laisse défiler le site sous/après le lecteur. */
html.player-open #nav,
html.player-open #app,
html.player-open .footer,
html.player-open #mobileBottomNav,
html.player-open #searchPanel,
html.player-open #ad-root,
html.player-open .ambient-bg,
html.player-open #detailModal,
html.player-open .nx-apk-banner,
html.player-open #adminPanelModal {
  display: none !important;
}
html.player-open,
html.player-open body {
  overscroll-behavior: none;
  overflow: hidden !important;
  overscroll-behavior-y: none;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  width: 100% !important;
  background: #000 !important;
  color-scheme: dark;
}
html.player-open.player-rotating .player-topbar,
html.player-open.player-rotating .nx-topbar-back,
html.player-open.player-rotating .nx-topbar-btn {
  pointer-events: none !important;
}
.player-card {
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  background: #000;
  border: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.player-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent);
}
html.nexora-app.player-open .player-topbar,
html.nexora-app.player-open .player-meta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
html.nexora-app.player-open.player-chrome .player-topbar,
html.nexora-app.player-open.player-chrome .player-meta {
  opacity: 1;
  pointer-events: auto;
}
.nx-topbar-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.nx-topbar-back:hover { background: rgba(255, 255, 255, 0.16); transform: translateX(-2px); }
.nx-topbar-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.nx-topbar-title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-topbar-badge {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.nx-topbar-actions { display: flex; gap: 8px; }
.nx-topbar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nx-topbar-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.nx-topbar-btn.modal-close {
  position: static;
  top: auto; right: auto;
  font-size: inherit;
  backdrop-filter: none;
}
.nx-topbar-btn.modal-close:hover { background: var(--danger); border-color: transparent; color: #fff; }

.player-frame {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  background: #000;
  position: relative;
  overflow: hidden;
}
.player-meta { display: none !important; }
.player-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Barre inférieure : titre à gauche, menu sources à droite */
.player-meta {
  flex-shrink: 0;
  padding: 12px 18px 14px;
  background: linear-gradient(180deg, rgba(10, 10, 12, 0.6), #0a0a0c);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  overflow: visible;
  position: relative;
  z-index: 25;
}
.player-meta-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.player-meta h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.player-selectors { display: flex; gap: 10px; flex-wrap: wrap; }
.player-selectors .filter-select {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
  border-radius: var(--radius);
  padding: 9px 34px 9px 14px;
}

.player-meta-right {
  flex-shrink: 0;
  position: relative;
}

/* Bouton sources — chip élégant (pas de rond) */
.player-src-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.player-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.player-lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 9px;
  border-radius: 7px;
  cursor: pointer;
  line-height: 1;
}
.player-lang-btn:hover { color: rgba(255, 255, 255, 0.9); }
.player-lang-btn.active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.player-src-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition:
    background-color var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    box-shadow var(--t-fast);
}
.player-src-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.player-src-btn[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-2);
  box-shadow: 0 0 0 1px rgba(227, 186, 88, 0.12);
}
.player-src-btn-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.92;
}
.player-src-btn-label {
  max-width: 118px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-src-btn-chev {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.player-src-btn:hover .player-src-btn-chev,
.player-src-btn[aria-expanded="true"] .player-src-btn-chev { opacity: 0.9; }
.player-src-btn[aria-expanded="true"] .player-src-btn-chev {
  transform: rotate(180deg);
}

/* Menu déroulant sources */
.player-src-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-width: 210px;
  max-width: min(280px, 78vw);
  padding: 8px;
  border-radius: 14px;
  background: rgba(14, 14, 18, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: 40;
  animation: playerSrcIn 0.16s ease-out;
}
@keyframes playerSrcIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.player-src-panel.open { display: flex; }
.player-src-panel-label {
  padding: 4px 10px 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.player-src-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.player-src-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.player-src-item.active {
  background: var(--accent-soft);
  color: var(--accent-2);
  font-weight: 600;
}
.player-src-item .player-src-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0;
}
.player-src-item.active .player-src-check { opacity: 1; }

/* Ancien layout boutons sources (admin / fallback) */
.player-source {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.player-source-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-right: 4px;
}
.player-source button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.player-source button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}
.player-source button.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-2);
  font-weight: 600;
}
.player-source-badge {
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Lecteur vidéo natif Nexora (nx-*) ── */
.nx-player {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}
.nx-player video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  background: #000;
  object-fit: contain;
  object-position: center center;
}
.nx-player:fullscreen,
.nx-player:-webkit-full-screen,
.player-modal:fullscreen,
.player-modal:-webkit-full-screen,
.nx-player.nx-fs {
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  background: #000;
}
.nx-player:fullscreen video,
.nx-player:-webkit-full-screen video,
.nx-player.nx-fs video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nx-spinner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--t-med);
}
.nx-spinner svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.nx-center-action {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}
.nx-center-action.show { animation: centerPulse 0.6s var(--ease-out); }
@keyframes centerPulse {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.25); }
}

.nx-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 15;
  padding: 44px 22px 18px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-med) var(--ease-smooth), transform var(--t-med) var(--ease-out);
  pointer-events: none;
}
.nx-controls.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Barre de progression */
.nx-progress-wrap {
  padding: 10px 0 12px;
  cursor: pointer;
}
.nx-progress-bg {
  position: relative;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
  transition: height var(--t-fast);
}
.nx-progress-wrap:hover .nx-progress-bg { height: 6px; }
.nx-progress-buffered {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
}
.nx-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
}
.nx-progress-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--t-fast) var(--ease-out);
}
.nx-progress-wrap:hover .nx-progress-thumb { transform: translate(-50%, -50%) scale(1); }

.nx-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.nx-bar-left, .nx-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nx-btn {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.nx-btn svg { width: 24px; height: 24px; }
.nx-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.nx-btn:active { transform: scale(0.94); }

.nx-volume-wrap {
  display: flex;
  align-items: center;
}
.nx-vol-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  opacity: 0;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: width var(--t-med) var(--ease-out), opacity var(--t-med);
}
.nx-volume-wrap:hover .nx-vol-slider {
  width: 80px;
  opacity: 1;
  margin-right: 8px;
}
.nx-vol-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.nx-vol-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.nx-time {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.nx-settings-panel {
  position: absolute;
  right: 18px;
  bottom: 74px;
  z-index: 16;
  width: min(92vw, 276px);
  padding: 12px;
  border-radius: 14px;
  background: rgba(12, 12, 14, 0.96);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 48px -18px rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.nx-settings-panel.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nx-settings-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nx-settings-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  padding: 0 4px;
}
.nx-settings-row + .nx-settings-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nx-sub-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 228px;
  overflow-y: auto;
  padding: 2px;
  margin: 0 -2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.nx-sub-list::-webkit-scrollbar { width: 6px; }
.nx-sub-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 99px;
}
.nx-sub-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  line-height: 1.2;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nx-sub-list button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.nx-sub-list button.active {
  background: rgba(227, 186, 88, 0.16);
  color: #f6d78c;
  font-weight: 650;
}
.nx-sub-list button.active::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(227, 186, 88, 0.18);
  flex-shrink: 0;
}
.nx-sub-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  padding: 10px 12px;
}
.nx-speed-opts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}
.nx-speed-opts button {
  padding: 8px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.nx-speed-opts button:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.nx-speed-opts button.active {
  background: var(--accent);
  color: var(--accent-ink);
}
.nx-btn.sub-on {
  color: var(--accent);
}

.nx-cue-overlay {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--nx-sub-pos, 8%));
  z-index: 22;
  pointer-events: none;
  text-align: center;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  transition: bottom 0.2s var(--ease-smooth);
}
.nx-player.nx-hud-on .nx-cue-overlay {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--nx-sub-pos, 8%));
}
.nx-player video::cue {
  color: var(--nx-sub-color, #fff);
  background-color: rgba(0, 0, 0, var(--nx-sub-bg, 0.45));
  font-family: var(--nx-sub-font, "Archivo", system-ui, sans-serif);
  font-size: calc(16px * var(--nx-sub-scale, 1));
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.65);
}
.nx-cue {
  display: inline-block;
  max-width: 100%;
  padding: 0.18em 0.55em 0.22em;
  border-radius: 6px;
  font-family: var(--nx-sub-font, "Archivo", system-ui, sans-serif);
  font-size: calc(clamp(15px, 2.35vw, 28px) * var(--nx-sub-scale, 1));
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--nx-sub-color, #fff);
  background: rgba(0, 0, 0, var(--nx-sub-bg, 0.45));
  text-shadow: calc(var(--nx-sub-stroke, 1) * 0px) calc(var(--nx-sub-stroke, 1) * 1px) calc(var(--nx-sub-stroke, 1) * 3px) rgba(0,0,0,.85),
    calc(var(--nx-sub-stroke, 1) * 0px) calc(var(--nx-sub-stroke, 1) * 0px) calc(var(--nx-sub-stroke, 1) * 8px) rgba(0,0,0,.55);
  -webkit-font-smoothing: antialiased;
}
.nx-cue[hidden] { display: none !important; }
.nx-cue i, .nx-cue em { font-style: italic; }
.nx-cue b, .nx-cue strong { font-weight: 800; }

.nx-src-wrap { position: relative; }
.nx-src-panel {
  position: absolute;
  right: 0;
  bottom: 48px;
  z-index: 18;
  min-width: 232px;
  max-width: min(78vw, 300px);
  max-height: min(52vh, 360px);
  overflow-y: auto;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: rgba(14, 14, 17, 0.96);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  display: none;
  flex-direction: column;
  gap: 4px;
}
.nx-src-panel.open { display: flex; }
.nx-src-heading {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 6px 4px 8px;
}
.nx-src-lang { margin: 0 0 8px; width: 100%; justify-content: stretch; }
.nx-src-lang .player-lang-btn { flex: 1; text-align: center; }
.nx-src-empty {
  color: var(--text-mute);
  font-size: 13px;
  padding: 8px 4px;
}
.nx-src-panel .player-src-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  cursor: pointer;
}
.nx-src-panel .player-src-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.nx-src-panel .player-src-item.active { background: rgba(227, 186, 88, 0.14); color: var(--accent-2); }
.nx-src-panel .player-src-check { width: 14px; height: 14px; opacity: 0; flex-shrink: 0; }
.nx-src-panel .player-src-item.active .player-src-check { opacity: 1; }

.nx-next-wrap {
  position: relative;
  display: inline-flex;
}
.nx-next-wrap[hidden] { display: none !important; }
.nx-next-preview {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  z-index: 22;
  width: min(420px, 86vw);
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nx-next-wrap:hover .nx-next-preview,
.nx-next-wrap:focus-within .nx-next-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nx-next-preview-head {
  background: #2c2c2c;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
}
.nx-next-preview-body {
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 12px;
  padding: 12px;
  background: #000;
  align-items: start;
}
.nx-next-preview-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1a1a;
}
.nx-next-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nx-next-preview-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.28);
}
.nx-next-preview-meta {
  min-width: 0;
  color: #fff;
}
.nx-next-preview-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
}
.nx-next-preview-desc {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (hover: none) {
  .nx-next-preview { display: none; }
}

/* ─────────────────────────────────────────────
   14. TOAST
───────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 400;
  padding: 12px 22px;
  border-radius: var(--radius);
  background: rgba(20, 20, 24, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--accent);
  box-shadow: var(--shadow-2);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0;
  transition:
    transform var(--t-slow) var(--ease-out),
    opacity var(--t-med) var(--ease-smooth);
  pointer-events: none;
  max-width: min(90vw, 480px);
  text-align: center;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ─────────────────────────────────────────────
   15. PIED DE PAGE
───────────────────────────────────────────── */
.footer {
  margin-top: clamp(60px, 10vh, 110px);
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015));
}
.footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 72px) var(--gutter) 36px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.footer-brand-block { max-width: 320px; }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-brand .brand-mark { width: 26px; height: 26px; }
.footer-brand .brand-text img,
.footer-brand .brand-logo {
  height: 17px;
  max-width: 100px;
}
.footer-tagline {
  color: var(--text-mute);
  font-size: 13.5px;
  line-height: 1.7;
}
.footer-cols {
  display: flex;
  gap: clamp(36px, 6vw, 88px);
  flex-wrap: wrap;
}
.footer-cols h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 0 0 16px;
}
.footer-cols a {
  display: block;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--text-dim);
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.footer-cols a:hover { color: var(--text); transform: translateX(2px); }
.footer-cols .footer-link-btn {
  display: block;
  width: 100%;
  padding: 5px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-dim);
  text-align: left;
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.footer-cols .footer-link-btn:hover { color: var(--text); transform: translateX(2px); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-mute);
}
.footer-bottom .footer-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   16. COMPTE & AUTHENTIFICATION
───────────────────────────────────────────── */
.account-btn {
  padding: 9px 18px;
  font-size: 13.5px;
  border-radius: var(--radius);
}
.account-btn svg { width: 15px; height: 15px; }
.account-btn[hidden] { display: none !important; }

.account-menu { position: relative; }
.account-menu[hidden] { display: none !important; }
.account-trigger {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.account-trigger:hover,
.account-menu.open .account-trigger {
  background: var(--surface-2);
  border-color: var(--border);
}
.account-trigger > svg { display: none; }

.account-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.account-avatar.lg { width: 42px; height: 42px; font-size: 16px; }
.account-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dim);
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 250px;
  padding: 8px;
  background: rgba(16, 16, 19, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.account-menu.open .account-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.account-dropdown-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.account-dropdown-name { font-weight: 600; font-size: 14px; }
.account-dropdown-email {
  font-size: 12px;
  color: var(--text-mute);
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-xs);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.account-dropdown-item[hidden] { display: none !important; }
.account-dropdown-item:hover { background: var(--surface-2); color: var(--text); }
a.account-dropdown-item { cursor: pointer; }
.account-dropdown-item.danger { color: #ec8a8d; }
.account-dropdown-item.danger:hover { background: var(--danger-soft); color: #f2a5a7; }

/* Modale d'authentification */
.auth-modal .auth-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 40px 32px 32px;
  background: #101012;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: none;
  animation: none;
}
.auth-modal .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  font-size: 13px;
  background: transparent;
  border-color: transparent;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 28px;
}
.auth-tab {
  padding: 10px 0 12px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mute);
  background: transparent;
  box-shadow: none;
  letter-spacing: 0.01em;
  transition: color var(--t-fast), box-shadow var(--t-fast);
}
.auth-tab:hover { color: var(--text-dim); }
.auth-tab.active {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--text);
}

.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand .brand-mark {
  display: inline-grid;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.auth-brand .brand-mark img {
  width: 36px;
  height: 36px;
  display: block;
}
.auth-brand h2 {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.auth-brand p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  color: var(--text-mute);
  font-weight: 400;
}

.auth-modal .btn-google {
  width: 100%;
  justify-content: center;
  height: 44px;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  font-size: 13.5px;
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: none;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.auth-modal .btn-google:hover {
  filter: none;
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.2);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  color: var(--text-mute);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-body);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-error {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--danger-soft);
  border: 1px solid rgba(229, 72, 77, 0.22);
  color: #f0a3a5;
  font-size: 13px;
  margin-bottom: 16px;
}
.auth-error[hidden] { display: none !important; }
.auth-error.ok {
  background: rgba(88, 163, 94, 0.16);
  border-color: rgba(120, 190, 126, 0.35);
  color: #c8ecc9;
}


.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form[hidden] { display: none !important; }
.auth-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-mute, #b8b6b0);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.auth-modal .field { display: flex; flex-direction: column; gap: 6px; }
.auth-modal .field span:first-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0;
}
.auth-modal .field input {
  padding: 12px 14px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  color-scheme: dark;
  transition: border-color var(--t-fast);
}
.auth-modal .field input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}
.auth-modal .field input:-webkit-autofill,
.auth-modal .field input:-webkit-autofill:hover,
.auth-modal .field input:-webkit-autofill:focus,
.auth-modal .field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  border-color: var(--border-strong);
  transition: background-color 99999s ease-out;
  box-shadow: 0 0 0 1000px #101012 inset !important;
  -webkit-box-shadow: 0 0 0 1000px #101012 inset !important;
}
.auth-modal .field-hint { font-size: 11px; color: var(--text-mute); }

.auth-modal .auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
  height: 44px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
  border: none;
}
.auth-modal .auth-submit:hover {
  background: var(--accent-2);
  filter: none;
}
.auth-submit[disabled] { opacity: 0.6; cursor: not-allowed; transform: none !important; }
.auth-submit .spinner,
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.auth-modal .auth-pending .btn-ghost {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text-dim);
}

/* ─────────────────────────────────────────────
   17. ADMINISTRATION
───────────────────────────────────────────── */
#adminPanelModal.admin-page-modal {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  flex-direction: column;
  z-index: 120;
}
#adminPanelModal.admin-page-modal.open {
  display: flex !important;
  inset: 0;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  padding: 0;
  background: #050505;
}
.admin-page {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  flex: 1;
  border: none;
  border-radius: 0;
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(227, 186, 88, 0.08), transparent 55%),
    var(--bg-0);
  display: flex;
  flex-direction: column;
  overflow: auto;
  color: var(--text);
  box-shadow: none;
}
.admin-page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px var(--gutter) 18px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.admin-page-kicker {
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.admin-page-title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}
.admin-page-bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  user-select: none;
}
.admin-view-toggle input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}
.admin-view-toggle:hover { color: var(--text); border-color: var(--accent-line); }
.admin-page-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(9, 9, 11, 0.55);
  color: var(--text);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.admin-page-close:hover {
  background: var(--text);
  color: var(--bg-0);
  border-color: var(--text);
}
.admin-page-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px var(--gutter) 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.admin-page-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow-x: auto;
  max-width: 100%;
}
.admin-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-mute);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-page-hint {
  padding: 4px var(--gutter) 12px;
  font-size: 13px;
  color: var(--text-mute);
  flex-shrink: 0;
}
.admin-page-content {
  flex: 1 1 auto;
  min-height: 50vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.admin-page-content > [hidden] {
  display: none !important;
}
.admin-dash-host {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 var(--gutter) 40px;
  min-height: 50vh;
  color: var(--text);
  -webkit-overflow-scrolling: touch;
}
.admin-dash-host[hidden] { display: none !important; }
.admin-dash-host:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 50vh;
  height: auto;
  color: var(--text) !important;
}
.admin-user-list[hidden],
#adminPanelBody[hidden] {
  display: none !important;
}
#adminPanelBody:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  min-height: 50vh;
  overflow: auto;
  color: var(--text);
}
.admin-tab.is-on {
  background: var(--bg-2);
  color: var(--text);
  box-shadow: var(--shadow-1);
}
.admin-page-search {
  flex: 1;
  min-width: 220px;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.admin-page-search:focus {
  outline: none;
  border-color: var(--accent-line);
}
.admin-user-list {
  flex: 1;
  overflow: auto;
  padding: 0 var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-loading {
  padding: 48px 0;
  text-align: center;
  color: var(--text-mute);
}
.admin-loading.is-error { color: var(--danger); }
.admin-empty {
  margin: 48px auto 0;
  max-width: 420px;
  text-align: center;
  color: var(--text-mute);
}
.admin-empty strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  margin-bottom: 6px;
}
.admin-user-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast);
}
.admin-user-row:hover { border-color: var(--border-strong); }
.admin-user-row.is-banned {
  border-color: rgba(229, 72, 77, 0.35);
  background: rgba(229, 72, 77, 0.05);
}
.admin-user-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--bg-3) center/cover no-repeat;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid var(--border);
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-user-email {
  font-size: 12.5px;
  color: var(--text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-user-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.4;
  white-space: normal;
}
.admin-user-actions {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.admin-user-actions .btn { padding: 8px 14px; font-size: 12.5px; }
.admin-role-tag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-banned-tag {
  display: inline-block;
  margin-top: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--danger-soft);
  border: 1px solid rgba(229, 72, 77, 0.35);
  color: #ec8a8d;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn-secondary.danger { color: #ec8a8d; border-color: rgba(229, 72, 77, 0.35); }
.btn-secondary.danger:hover { background: var(--danger-soft); border-color: rgba(229, 72, 77, 0.5); }

.auth-modal .admin-editor-card { max-width: 470px; padding: 30px 28px 26px; }
.admin-editor-title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.admin-editor-sub {
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 20px;
  color: var(--text-mute);
}
.admin-editor-form { display: flex; flex-direction: column; gap: 16px; }
.admin-editor-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.admin-editor-actions .btn { width: 100%; justify-content: center; }
.admin-edit-btn { display: none; border-color: var(--accent-line) !important; color: var(--accent-2) !important; }
.is-admin .admin-edit-btn { display: inline-flex; }
.admin-edit-btn:hover { background: var(--accent-soft) !important; }

/* ─────────────────────────────────────────────
   18. JEUX — boutique & fiche
───────────────────────────────────────────── */
.ns-main { padding: 0 0 100px; }
.ns-skeleton {
  background: linear-gradient(105deg, var(--bg-1) 30%, var(--bg-2) 46%, var(--bg-1) 62%);
  background-size: 240% 100%;
  animation: shimmer 1.5s var(--ease-smooth) infinite;
  border-radius: var(--radius);
}
.ns-card-skel { flex: 0 0 140px; height: 210px; border-radius: var(--radius); }

.ns-section-header { padding: 24px var(--gutter) 12px; max-width: var(--shell); margin: 0 auto; }
.ns-section-header h2 {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.ns-carousel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px var(--gutter) 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ns-carousel::-webkit-scrollbar { display: none; }

.ns-game-card {
  flex: 0 0 138px;
  scroll-snap-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ns-game-cover {
  width: 138px;
  height: 207px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow var(--t-fast);
}
.ns-game-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--t-med) var(--ease-out);
}
.ns-game-card:hover .ns-game-cover { box-shadow: inset 0 0 0 1px var(--accent-line); }
.ns-game-card:hover .ns-game-cover img { transform: scale(1.05); }
.ns-no-cover {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-mute);
}
.ns-game-card h3 {
  font-size: 12px;
  font-weight: 600;
  margin: 8px 0 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-dim);
  width: 138px;
  max-width: 138px;
}
.ns-game-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.ns-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 var(--gutter);
  max-width: var(--shell);
  margin: 0 auto;
}
.ns-cat-card {
  height: 88px;
  border-radius: var(--radius);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t-fast);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
  -webkit-tap-highlight-color: transparent;
}
.ns-cat-card:hover { box-shadow: inset 0 0 0 1px var(--accent-line); }
.ns-cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.22;
  transition: opacity var(--t-fast);
}
.ns-cat-card:hover img { opacity: 0.4; }
.ns-cat-card span { position: relative; z-index: 2; }

.ns-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-deep) 130%);
  color: var(--accent-ink);
  border: none;
  padding: 11px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--t-fast);
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ns-btn-primary:hover { filter: brightness(1.06); }

/* Fiche jeu plein écran */
#nsDetailPage {
  position: fixed;
  inset: 0;
  background: var(--bg-0);
  z-index: 300;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-smooth);
}
#nsDetailPage.active { opacity: 1; pointer-events: auto; }

.ns-dp-nav {
  position: absolute;
  top: 22px;
  left: var(--gutter);
  z-index: 310;
}
.ns-btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(9, 9, 11, 0.6);
  backdrop-filter: blur(10px);
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
  font-family: inherit;
}
.ns-btn-back:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }

.ns-dp-hero {
  position: relative;
  width: 100%;
  min-height: 64vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 100px 22px 40px;
}
.ns-dp-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: 0;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
}
.ns-dp-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(9, 9, 11, 0.1) 0%,
    rgba(9, 9, 11, 0.36) 40%,
    rgba(9, 9, 11, 0.86) 76%,
    var(--bg-0) 100%
  );
}
.ns-dp-hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.ns-dp-tags {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.ns-dp-tag {
  background: rgba(9, 9, 11, 0.5);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(6px);
}
.ns-dp-title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: clamp(28px, 6.4vw, 52px);
  font-weight: 800;
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}
.ns-dp-logo {
  display: block;
  max-height: 130px;
  max-width: min(520px, 80vw);
  width: auto;
  object-fit: contain;
  margin: 0 auto 4px;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.8));
  animation: riseIn 0.6s var(--ease-out) both;
}
.ns-dp-desc {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.65;
  max-width: 520px;
  margin: 0;
}
.ns-dp-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ns-btn-download {
  display: flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-deep) 130%);
  color: var(--accent-ink);
  border: none;
  padding: 13px 24px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--t-fast), opacity var(--t-fast);
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ns-btn-download:hover:not([style*="not-allowed"]) { filter: brightness(1.06); }
.ns-btn-install { display: none; }
.ns-btn-trailer {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid var(--border-strong);
  padding: 12px 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
  font-family: inherit;
  backdrop-filter: blur(10px);
}
.ns-btn-trailer:hover { background: rgba(255, 255, 255, 0.14); }
.ns-dp-admin-bar { display: none; }
.is-admin .ns-dp-admin-bar { display: flex !important; }

.ns-dp-content-bottom {
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto 80px;
  padding: 20px 0 0;
}
.ns-dp-gallery-v2 { display: flex; flex-direction: column; gap: 10px; }
.ns-dp-gallery-v2-main {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: var(--bg-1);
}
.ns-dp-gallery-v2-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--t-med);
}
.ns-dp-gallery-v2-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 18px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ns-dp-gallery-v2-thumbs::-webkit-scrollbar { display: none; }
.ns-dp-gallery-v2-thumb {
  flex: 0 0 104px;
  height: 62px;
  object-fit: cover;
  border-radius: var(--radius-xs);
  cursor: pointer;
  scroll-snap-align: start;
  transition: opacity var(--t-fast), outline-color var(--t-fast);
  outline: 2px solid transparent;
  outline-offset: -2px;
  opacity: 0.5;
}
.ns-dp-gallery-v2-thumb.active,
.ns-dp-gallery-v2-thumb:hover {
  opacity: 1;
  outline-color: var(--accent);
}
@media (min-width: 600px) {
  .ns-dp-content-bottom { padding: 20px 18px 0; }
  .ns-dp-gallery-v2-main { border-radius: var(--radius-lg); }
  .ns-dp-gallery-v2-thumb { flex: 0 0 130px; height: 76px; }
  .ns-dp-gallery-v2-thumbs { padding: 4px 0 10px; }
}

.ns-dp-stars-section {
  padding: 40px var(--gutter) 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}
.ns-dp-stars-label {
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0;
}
.ns-dp-stars { gap: 6px; }
.ns-dp-stars .detail-star svg { width: 26px; height: 26px; }

.ns-btn-admin-artwork {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-2);
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.03em;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.ns-btn-admin-artwork:hover { background: rgba(227, 186, 88, 0.24); border-color: var(--accent); }
.is-admin .ns-btn-admin-artwork { display: inline-flex; }
body:not(.is-admin) .ns-btn-admin-artwork { display: none !important; }

.nx-hero-admin-bar { display: none !important; pointer-events: none; }
.is-admin .nx-hero-admin-bar { display: flex !important; pointer-events: auto; z-index: 30; }
.nx-hero-admin-btn { pointer-events: auto !important; position: relative; z-index: 30; }
.nx-hero-admin-btn:hover {
  background: rgba(227, 186, 88, 0.4) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
#nsAdminArtworkPicker [data-img]:hover {
  border-color: var(--accent) !important;
  transform: scale(1.02);
  transition: transform var(--t-fast), border-color var(--t-fast);
}

/* Héros boutique jeux (crossfade) */
.ns-hero {
  position: relative;
  width: 100%;
  height: 72vh;
  min-height: 420px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 30px;
}
.ns-hero-bg-a, .ns-hero-bg-b {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  transition: opacity 1.2s var(--ease-smooth);
}
.ns-hero-bg-a { opacity: 1; z-index: 0; }
.ns-hero-bg-b { opacity: 0; z-index: 1; }
.ns-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0.1) 0%, rgba(9, 9, 11, 0.05) 22%, rgba(9, 9, 11, 0.5) 58%, rgba(9, 9, 11, 0.9) 80%, var(--bg-0) 100%),
    linear-gradient(90deg, rgba(9, 9, 11, 0.92) 0%, rgba(9, 9, 11, 0.55) 38%, rgba(9, 9, 11, 0.05) 100%);
}
.ns-hero-content {
  position: absolute;
  z-index: 3;
  bottom: 40px;
  left: var(--gutter);
  max-width: 480px;
}
.ns-hero-content h1 {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.05;
  color: #fff;
}
.ns-hero-logo {
  display: block;
  max-height: 110px;
  max-width: 400px;
  width: auto;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 12px;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.75));
  animation: riseIn 0.6s var(--ease-out) both;
}
.ns-hero-content p {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 16px;
}
@keyframes nsFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cartes jeux héritées (gc-*) et fiche modale (gd-*) */
.gc-hero-logo {
  display: block;
  max-height: 60px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.85));
  margin-bottom: 4px;
}
.gd-title-slot { margin-bottom: 4px; }
.gd-logo {
  display: block;
  max-height: 80px;
  max-width: 340px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.85));
}
.gd-backdrop {
  position: absolute;
  inset: 0 0 auto;
  height: 60vh;
  background-size: cover;
  background-position: center 20%;
}
.gd-scrim {
  position: absolute;
  inset: 0 0 auto;
  height: 60vh;
  background: linear-gradient(180deg, rgba(9, 9, 11, 0.25), var(--bg-0) 96%);
}
.gd-body {
  position: relative;
  z-index: 2;
  padding: max(26vh, 200px) var(--gutter) 70px;
  max-width: 980px;
  margin: 0 auto;
}
.gd-top { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; }
.gd-cover {
  width: 170px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}
.gd-cover-empty {
  width: 170px;
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  color: var(--text-mute);
  border-radius: var(--radius);
}
.gd-meta { flex: 1; min-width: 240px; }
.gd-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gd-tag {
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gd-tag-game { border-color: var(--accent-line); color: var(--accent); }
.gd-title {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.gd-dev { color: var(--text-mute); font-size: 13px; margin: 0 0 14px; }
.gd-score-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.gd-score-text { display: flex; flex-direction: column; }
.gd-score-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gd-score-max { font-size: 12px; color: var(--text-mute); font-weight: 500; }
.gd-score-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.gd-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gd-btn-dl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-deep) 130%);
  color: var(--accent-ink);
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 13.5px;
  transition: filter var(--t-fast);
}
.gd-btn-dl:hover { filter: brightness(1.06); }
.gd-btn-dl.active { background: var(--bg-2); color: var(--success); box-shadow: inset 0 0 0 1px var(--border-strong); }
.gd-btn-wish {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.gd-btn-wish:hover, .gd-btn-wish.active { color: var(--danger); border-color: rgba(229, 72, 77, 0.5); }
.gd-section { margin-top: 40px; }
.gd-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 16px;
}
.gd-section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.gd-overview { color: var(--text-dim); line-height: 1.7; font-size: 14.5px; max-width: 720px; }
.gd-platforms { display: flex; gap: 8px; flex-wrap: wrap; }
.gd-platform {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 12px;
  color: var(--text-dim);
}
.gd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.gd-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-xs);
  cursor: pointer;
  opacity: 0.6;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: opacity var(--t-fast), outline-color var(--t-fast);
}
.gd-thumb:hover, .gd-thumb.active { opacity: 1; outline-color: var(--accent); }
.gd-ring { flex-shrink: 0; }

/* Cartes gc-* héritées (anciens carrousels jeux) */
.gc, .gc-feat { cursor: pointer; }
.gc-poster {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  background-color: var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.gc-no-cover { display: grid; place-items: center; height: 100%; color: var(--text-mute); }
.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
}
.gc-info { padding: 8px 2px 0; }
.gc-title { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.gc-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-mute); margin-top: 2px; }

/* Recherche jeux — aligné sur les cartes standard */
.search-results .search-game-card {
  width: auto;
  min-width: 0;
  flex: none;
  scroll-snap-align: unset;
}
.search-results .search-game-card .card-poster {
  aspect-ratio: 2 / 3;
  width: 100%;
}

/* ─────────────────────────────────────────────
   19. PANNEAU PROFIL (plein écran)
───────────────────────────────────────────── */
.profile-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  pointer-events: none;
  visibility: hidden;
}
.profile-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 7, 0.72);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth);
  cursor: pointer;
}
.profile-panel {
  position: relative;
  width: 100vw;
  height: 100%;
  background: var(--bg-0);
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 -20px 80px rgba(0, 0, 0, 0.8);
  transform: translateY(100%);
  transition: transform 0.55s var(--ease-out);
  will-change: transform;
}
.profile-panel-overlay.open { pointer-events: all; visibility: visible; }
.profile-panel-overlay.open .profile-panel-backdrop { opacity: 1; }
.profile-panel-overlay.open .profile-panel { transform: translateY(0); }
.profile-panel-body { padding: 0; clear: both; }
.profile-panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
}
.profile-panel-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes profileContentIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.profile-panel-overlay.open .profile-panel-body > * {
  animation: profileContentIn 0.5s var(--ease-out) both;
}

/* ─────────────────────────────────────────────
   20. NAVIGATION MOBILE (barre basse)
───────────────────────────────────────────── */
.mobile-bottom-nav { display: none; }

/* ─────────────────────────────────────────────
   21. RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .nav-link { font-size: 13px; padding: 7px 12px; }
}

@media (max-width: 1080px) {
  .account-name { display: none; }
}

@media (max-width: 860px) {
  :root {
    /* hauteur totale nav = contenu + marge haut (safe-area / status bar) */
    --nav-h: calc(60px + max(10px, env(safe-area-inset-top, 0px)));
  }

  /* Navigation : liens masqués, barre basse prend le relais */
  .nav {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }
  .nav-links { display: none; }
  .nav-inner {
    display: flex;
    gap: 10px;
    height: 60px;
    justify-content: space-between;
    padding: 0 16px;
  }
  .nav-actions {
    margin-left: auto;
    gap: 2px;
  }
  .nav-search-pill { display: none !important; }
  #searchToggle { display: grid; }
  .account-trigger {
    padding: 3px;
    gap: 0;
  }
  .account-trigger > svg { display: none; }
  .account-btn span { display: none; }
  .account-btn { padding: 6px; border-radius: 999px; }
  .brand-text img,
  .brand-logo { height: 17px; max-width: 96px; }
  .discover-btn { display: none; }

  .cine-hero {
    min-height: min(64vh, 540px);
    align-items: flex-end;
    padding: calc(var(--nav-h) + 12px) 18px 28px;
  }
  .cine-hero--compact { min-height: min(48vh, 380px); }
  .cine-hero-photo { object-position: center 16%; }
  .cine-hero-overlay {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 46%, transparent) 0%, color-mix(in srgb, var(--bg-0) 10%, transparent) 26%, color-mix(in srgb, var(--bg-0) 58%, transparent) 58%, var(--bg-0) 100%);
  }
  .cine-hero-inner { gap: 12px; }
  .cine-hero-title {
    font-size: clamp(1.55rem, 7vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .cine-hero-search { width: 100%; }
  .cine-hero-search-input { height: 50px; }

  .mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg-0) 92%, transparent);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-top: 1px solid var(--hairline);
  }
  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 7px 2px 5px;
    border-radius: var(--radius);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-mute);
    background: none;
    border: none;
    transition: color var(--t-fast);
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-item svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.7;
    transition: transform var(--t-fast) var(--ease-out);
  }
  .mobile-nav-item.active { color: var(--accent); }
  .mobile-nav-item.active svg { transform: translateY(-1px); }
  .mobile-nav-item:active svg { transform: scale(0.92); }

  body { padding-bottom: 66px; }
  .footer { margin-bottom: -66px; padding-bottom: 66px; }

  /* Hero mobile : contenu centré bas */
  .hero {
    height: min(78vh, 640px);
    min-height: 480px;
  }
  .hero-overlay {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--hero-scrim) 52%, transparent) 0%, color-mix(in srgb, var(--hero-scrim) 8%, transparent) 30%, color-mix(in srgb, var(--hero-scrim) 68%, transparent) 66%, var(--bg-0) 99%);
  }
  .hero-content {
    align-items: center;
    text-align: center;
    padding-bottom: 92px;
  }
  .hero-photo { object-position: center 16%; }
  .hero-title {
    font-size: clamp(2rem, 9.5vw, 2.9rem);
    max-width: 100%;
  }
  .hero-logo {
    object-position: center bottom;
    margin-inline: auto;
    max-width: 82vw;
    max-height: 96px;
  }
  .hero-overview { display: none; }
  .hero-meta { justify-content: center; gap: 10px; }
  .hero-actions {
    width: 100%;
    max-width: 420px;
    margin-top: 22px;
    gap: 10px;
  }
  .hero-actions .btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
    padding: 13px 18px;
  }
  .hero-count { display: none; }
  .hero-indicators {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 24px;
    max-width: calc(100vw - 32px);
    gap: 5px;
  }
  .hero-dot { width: 22px; }

  /* Rangées : cartes plus étroites, flèches masquées */
  .card { width: 128px; }
  .row-resume .card-resume { width: 300px; }
  .card-title { font-size: 13px; }
  .card-meta > span:nth-child(3) { display: none; }
  .row-btn { display: none; }
  .section { margin: 34px 0; }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 20px 10px;
  }

  /* Fiche détail mobile — hero plus haut pour voir le backdrop */
  .detail-backdrop {
    height: 52vh;
    min-height: 280px;
    max-height: none;
    background-position: center 28%;
  }
  .detail-backdrop-fade {
    background:
      linear-gradient(180deg, rgba(9, 9, 11, 0.18) 0%, rgba(9, 9, 11, 0.28) 42%, rgba(9, 9, 11, 0.72) 78%, var(--bg-0) 100%),
      linear-gradient(90deg, rgba(9, 9, 11, 0.2) 0%, transparent 58%);
  }
  .detail-body {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 6px;
    margin-top: -72px;
    padding: 0 16px calc(108px + env(safe-area-inset-bottom, 0px));
    max-width: none;
  }
  .detail-info {
    display: contents;
  }
  .detail-title-block,
  .detail-title,
  .detail-meta,
  .detail-genres,
  .detail-crew,
  .detail-actions,
  .detail-overview,
  .detail-overview-more,
  .detail-episodes,
  .detail-stars,
  .detail-section,
  .comments-section {
    order: 0;
  }
  .detail-poster {
    float: none;
    width: 100px;
    min-width: 100px;
    margin: 0;
    border-radius: 10px;
    grid-column: 1;
    grid-row: 2 / span 3;
    align-self: start;
    order: 0;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.55),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  .detail-title {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 1.5rem;
    line-height: 1.12;
    margin: 0 0 6px;
    letter-spacing: -0.03em;
    max-width: none;
  }
  .detail-title-block {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 8px;
    gap: 7px;
    max-width: none;
  }
  .detail-title-block .detail-title {
    grid-column: auto;
    grid-row: auto;
    margin: 0;
  }
  .detail-logo {
    max-height: 70px;
    max-width: min(300px, 82vw);
  }
  .detail-title-block.has-logo .detail-title--small,
  .detail-title.detail-title--small {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    line-height: 1.3;
  }
  .detail-meta {
    grid-column: 2;
    grid-row: 2;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    align-self: end;
  }
  .detail-genres {
    grid-column: 2;
    grid-row: 3;
    gap: 5px;
    margin: 0;
    align-self: start;
  }
  .detail-genres .tag,
  .detail-genres span {
    padding: 3px 8px;
    font-size: 10.5px;
  }
  .detail-crew {
    grid-column: 2;
    grid-row: 4;
    margin: 0;
    font-size: 11.5px;
    align-self: start;
  }
  .detail-actions {
    grid-column: 1 / -1;
    grid-row: 5;
    clear: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 6px;
  }
  .detail-actions .btn {
    flex: none;
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13.5px;
  }
  .detail-actions .btn-primary,
  .detail-actions .btn-watch,
  .detail-actions .btn-soon {
    flex: 1 0 100%;
    width: 100%;
  }
  .detail-actions .btn-secondary,
  .detail-actions .btn-more {
    flex: 1 1 100%;
    width: 100%;
    padding: 11px 16px;
    font-size: 13px;
  }
  .detail-actions .admin-edit-btn {
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 500;
    opacity: 0.9;
  }
  .detail-overview {
    grid-column: 1 / -1;
    grid-row: 6;
    clear: none;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-mute);
    margin: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .detail-overview.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .detail-overview-more {
    grid-column: 1 / -1;
    grid-row: 7;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: none;
    border: none;
    padding: 4px 0 8px;
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
  }
  .detail-episodes {
    grid-column: 1 / -1;
    grid-row: 8;
    margin: 4px 0 10px;
    max-width: none;
  }
  .ep-thumb { width: 104px; }
  .ep-title { font-size: 13.5px; }
  .ep-overview { -webkit-line-clamp: 2; font-size: 12px; }
  .detail-stars {
    grid-column: 1 / -1;
    grid-row: 9;
    margin: 0 0 2px;
  }
  .detail-stars .detail-star svg { width: 18px; height: 18px; }
  .detail-section,
  .comments-section {
    grid-column: 1 / -1;
    grid-row: auto;
    clear: none;
    margin-top: 20px;
  }
  .detail-section h4 {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .modal-close {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 12px;
  }

  /* Lecteur mobile — barre compacte, tout visible */
  .player-meta { padding: 12px 14px 14px; }
  .player-topbar { padding: 12px 14px; }
  .nx-volume-wrap { display: none; }
  #nxPip { display: none; }
  .nx-controls { padding: 26px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .nx-btn { width: 40px; height: 40px; min-width: 40px; }
  .nx-btn svg { width: 20px; height: 20px; }
  .nx-bar { gap: 4px; min-width: 0; }
  .nx-bar-left { flex: 1; min-width: 0; gap: 0; }
  .nx-bar-right { flex-shrink: 0; gap: 0; }
  #nxFullscreen { display: grid; }
  .nx-bar-left .nx-time {
    display: inline;
    margin-left: 2px;
    font-size: 10.5px;
    letter-spacing: 0.02em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Recherche mobile */
  .search-panel { padding: calc(var(--nav-h) + 18px) 18px 40px; }
  #searchInput { font-size: 19px; }
  .search-results { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }

  /* Pied de page mobile */
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Boutique jeux */
  .ns-hero { height: 60vh; min-height: 380px; }
  .ns-hero-content { left: 20px; right: 20px; bottom: 28px; }
  .ns-dp-nav { left: 16px; }
  .ns-game-card { flex: 0 0 116px; }
  .ns-game-cover { width: 116px; height: 174px; }
  .ns-game-card h3 { width: 116px; max-width: 116px; }
  .ns-dp-stars-section { padding: 32px 20px 50px; }

  /* Auth mobile */
  .auth-modal .auth-card { padding: 28px 22px 24px; }

  /* Admin mobile */
  .admin-page-toolbar { padding: 14px 20px 8px; }
  .admin-page-bar { padding: 16px 20px; }
  .admin-page-hint, .admin-user-list { padding-left: 20px; padding-right: 20px; }
  .admin-user-row { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .card { width: 112px; }
  .row-resume .card-resume { width: 276px; }
  .card-title { font-size: 12px; }
  .hero-actions { max-width: 100%; }
  .page-title { font-size: 1.35rem; }
  .detail-title {
    font-size: 1.38rem;
  }
  .detail-title-block {
    grid-column: 1 / -1;
    margin: 4px 0 10px;
    gap: 8px;
  }
  .detail-logo {
    max-height: 64px;
    max-width: min(280px, 78vw);
  }
  .detail-title-block.has-logo .detail-title--small,
  .detail-title.detail-title--small {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
  }
  .detail-poster {
    width: 92px;
    min-width: 92px;
    margin: 0;
  }
  .detail-body {
    grid-template-columns: 92px minmax(0, 1fr);
    margin-top: -64px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .detail-backdrop {
    height: 48vh;
    min-height: 260px;
    max-height: none;
  }
  .cast-row { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .cast-photo { width: 62px; height: 62px; }
  .similar-row { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
}

/* Tactile : la légende joue le rôle du survol */
@media (hover: none) {
  .row-btn { display: none; }
  .card-play { display: none; }
  .card:active .card-poster { transform: scale(0.97); }
  .nx-progress-thumb { transform: translate(-50%, -50%) scale(1); }
  .nx-vol-slider { width: 70px; opacity: 1; margin-right: 8px; }
}

/* ─────────────────────────────────────────────
   22. ACCESSIBILITÉ — mouvement réduit
───────────────────────────────────────────── */
@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-photo,
  .hero-slide.active .hero-photo { animation: none !important; transform: none !important; opacity: 1 !important; }
  .hero-dot.active::after { width: 100%; animation: none; }
  #app.nx-enter { animation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}

/* ─────────────────────────────────────────────
   23. THÈME CLAIR — Studio Blanc (noir & blanc)
   Hero reste cinéma ; le reste = éditorial propre.
───────────────────────────────────────────── */
:root[data-theme="light"] {
  --bg-0: #f8f8f8;
  --bg-1: #ffffff;
  --bg-2: #f0f0f0;
  --bg-3: #e4e4e4;

  --surface:        rgba(255, 255, 255, 0.88);
  --surface-2:      rgba(0, 0, 0, 0.045);
  --border:         rgba(0, 0, 0, 0.07);
  --border-strong:  rgba(0, 0, 0, 0.12);
  --hairline:       rgba(0, 0, 0, 0.08);

  --text:      #0c0c0c;
  --text-dim:  #3d3d3d;
  --text-mute: #6b6b6b;

  --accent:      #0c0c0c;
  --accent-2:    #2a2a2a;
  --accent-deep: #000000;
  --accent-ink:  #ffffff;
  --accent-soft: rgba(0, 0, 0, 0.05);
  --accent-line: rgba(0, 0, 0, 0.18);
  --accent-glow: rgba(0, 0, 0, 0.14);

  --danger:      #dc2626;
  --danger-soft: rgba(220, 38, 38, 0.09);
  --success:     #15803d;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -12px rgba(0, 0, 0, 0.10);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.06), 0 24px 48px -20px rgba(0, 0, 0, 0.12);
  --shadow-pop: 0 24px 64px -20px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.05);

  color-scheme: light;
}

html[data-theme="light"] {
  background: var(--bg-0);
}

/* Transition fluide lors du basculement (classe posée ~600 ms par le JS) */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color 0.45s var(--ease-smooth),
    border-color 0.45s var(--ease-smooth),
    color 0.3s var(--ease-smooth),
    fill 0.3s var(--ease-smooth),
    box-shadow 0.45s var(--ease-smooth),
    filter 0.35s var(--ease-smooth) !important;
}

/* Bouton bascule (soleil / lune) */
.theme-toggle { position: relative; overflow: hidden; }
.theme-toggle svg {
  position: absolute;
  transition: opacity 0.3s var(--ease-smooth), transform 0.5s var(--ease-out);
}
.theme-toggle .theme-icon-sun  { opacity: 1; transform: rotate(0) scale(1); }
.theme-toggle .theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.4); }
[data-theme="light"] .theme-toggle .theme-icon-sun  { opacity: 0; transform: rotate(-90deg) scale(0.4); }
[data-theme="light"] .theme-toggle .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }

/* Logo wordmark : blanc sur sombre / noir sur clair */
[data-theme="light"] .brand-text .brand-logo--on-dark { display: none !important; }
[data-theme="light"] .brand-text .brand-logo--on-light { display: block !important; }
[data-theme="light"] .brand-text::after { display: none !important; }

/* ── Chrome clair ── */
[data-theme="light"]:not(.on-home) .nav,
[data-theme="light"] .nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 24px -18px rgba(0, 0, 0, 0.12);
}
[data-theme="light"]:not(.on-home) .nav::before { display: none; }
[data-theme="light"] .nav.scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.14);
}
[data-theme="light"].on-home .nav:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}
[data-theme="light"].on-home .nav:not(.scrolled)::before {
  display: block;
  opacity: 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hero-scrim) 72%, transparent), transparent);
}
[data-theme="light"] .nav-link { color: var(--text-mute); }
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active { color: var(--text); background: var(--accent-soft); }
[data-theme="light"].on-home .nav:not(.scrolled) .nav-link {
  color: rgba(255, 255, 255, 0.78);
}
[data-theme="light"].on-home .nav:not(.scrolled) .nav-link:hover,
[data-theme="light"].on-home .nav:not(.scrolled) .nav-link.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}
[data-theme="light"].on-home .nav:not(.scrolled) .brand-text .brand-logo--on-dark { display: block !important; }
[data-theme="light"].on-home .nav:not(.scrolled) .brand-text .brand-logo--on-light { display: none !important; }
[data-theme="light"].on-home .nav:not(.scrolled) .brand:hover .brand-text img { opacity: 0.88; }
[data-theme="light"] .brand:hover .brand-text img { opacity: 0.78; }
[data-theme="light"] .icon-btn,
[data-theme="light"] .discover-btn,
[data-theme="light"] .theme-toggle {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text-dim);
}
[data-theme="light"].on-home .nav:not(.scrolled) .icon-btn,
[data-theme="light"].on-home .nav:not(.scrolled) .discover-btn,
[data-theme="light"].on-home .nav:not(.scrolled) .theme-toggle {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}
[data-theme="light"].on-home .nav:not(.scrolled) .icon-btn:hover,
[data-theme="light"].on-home .nav:not(.scrolled) .discover-btn:hover,
[data-theme="light"].on-home .nav:not(.scrolled) .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.32);
}
[data-theme="light"] .icon-btn:hover,
[data-theme="light"] .discover-btn:hover,
[data-theme="light"] .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
  border-color: rgba(0, 0, 0, 0.14);
}
[data-theme="light"] .search-panel {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
[data-theme="light"] .nav-search-pill {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.42);
  box-shadow: none;
}
[data-theme="light"].on-home .nav:not(.scrolled) .nav-search-pill {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}
[data-theme="light"] .nav-search-pill:hover {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.22);
}
[data-theme="light"].on-home .nav:not(.scrolled) .nav-search-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.34);
  color: rgba(255, 255, 255, 0.78);
}
[data-theme="light"] .nav-search-pill svg { color: rgba(0, 0, 0, 0.65); }
[data-theme="light"].on-home .nav:not(.scrolled) .nav-search-pill svg { color: rgba(255, 255, 255, 0.82); }

[data-theme="light"] .btn-secondary {
  background: var(--bg-1);
  border-color: var(--border-strong);
  color: var(--text);
  box-shadow: var(--shadow-1);
}
[data-theme="light"] .btn-secondary:hover {
  background: var(--bg-2);
  border-color: rgba(0, 0, 0, 0.22);
}
[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  box-shadow: 0 8px 22px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
[data-theme="light"] .btn-primary:hover {
  background: var(--accent-deep);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.22);
}
[data-theme="light"] .btn-soon,
[data-theme="light"] .btn.btn-soon:disabled {
  background: rgba(20, 22, 28, 0.06);
  color: var(--text-mute);
  border-color: var(--border);
}
[data-theme="light"] .filter-chip {
  background: var(--bg-1);
  border-color: var(--border);
  color: var(--text-dim);
}
[data-theme="light"] .filter-chip:hover,
[data-theme="light"] .filter-chip.active {
  border-color: var(--text);
  color: var(--text);
  background: var(--bg-2);
}

/* ── Hero clair : 100 % cinéma (jamais de voile blanc sur l'image) ── */
[data-theme="light"] .hero {
  background: #0a0a0a;
}
[data-theme="light"] .hero-slide::after {
  opacity: 0.02;
  mix-blend-mode: soft-light;
}
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-overview,
[data-theme="light"] .hero-meta,
[data-theme="light"] .hero-meta .tag,
[data-theme="light"] .hero-meta .rating,
[data-theme="light"] .hero-meta .muted,
[data-theme="light"] .hero-count,
[data-theme="light"] .hero-count .current {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}
[data-theme="light"] .hero-overview {
  color: rgba(255, 255, 255, 0.88) !important;
}
[data-theme="light"] .hero-meta .tag {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="light"] .hero-eyebrow {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .hero-eyebrow::before {
  background: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .hero-logo {
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.65));
}
[data-theme="light"] .hero-count .current {
  color: #ffffff !important;
}
[data-theme="light"] .hero-dot::before {
  background: rgba(255, 255, 255, 0.35);
}
[data-theme="light"] .hero-dot.active::before,
[data-theme="light"] .hero-dot:hover::before {
  background: rgba(255, 255, 255, 0.65);
}
[data-theme="light"] .hero-dot::after,
[data-theme="light"] .hero-dot.active::after {
  background: #ffffff !important;
}
[data-theme="light"] .hero .btn-more,
[data-theme="light"] .hero .btn-secondary {
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
[data-theme="light"] .hero .btn-more:hover,
[data-theme="light"] .hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
}
[data-theme="light"] .hero-admin-logo-btn {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
[data-theme="light"] .hero + .section {
  margin-top: clamp(20px, 3vh, 36px);
}
[data-theme="light"] .section-title .accent {
  color: var(--text-mute);
  font-weight: 700;
}
[data-theme="light"] .row-btn {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--text);
  box-shadow: var(--shadow-1);
}
[data-theme="light"] .row-btn:hover {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}

[data-theme="light"] .modal-backdrop { background: rgba(0, 0, 0, 0.42); }
[data-theme="light"] .modal-close {
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  border: 1px solid var(--border);
}
[data-theme="light"] .account-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--border);
  box-shadow: var(--shadow-2);
}
[data-theme="light"] .toast {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: var(--shadow-2);
}
[data-theme="light"] .detail-star { color: rgba(0, 0, 0, 0.16); }
[data-theme="light"] .detail-star.active { color: var(--text); }
[data-theme="light"] .detail-heart { color: rgba(0, 0, 0, 0.24); }
[data-theme="light"] .detail-heart.active,
[data-theme="light"] .detail-heart:hover { color: #dc2626; }
[data-theme="light"] .detail-alert-btn { color: rgba(0, 0, 0, 0.24); }
[data-theme="light"] .detail-alert-btn.active,
[data-theme="light"] .detail-alert-btn:hover { color: var(--text); }

[data-theme="light"] .detail-actions .btn-more {
  background: rgba(50, 50, 50, 0.55);
  color: #f2f2f2;
  border: 0;
}
[data-theme="light"] .detail-actions .btn-more:hover {
  background: rgba(60, 60, 60, 0.72);
  color: #fff;
}
[data-theme="light"] .card-poster {
  background-color: var(--bg-2);
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.05),
    0 12px 28px -16px rgba(0, 0, 0, 0.14);
}
[data-theme="light"] .card:hover .card-poster {
  box-shadow:
    inset 0 0 0 1px var(--accent-line),
    0 18px 40px -16px rgba(0, 0, 0, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .card-title { color: var(--text) !important; }
[data-theme="light"] .card:hover .card-title { color: var(--text) !important; }
[data-theme="light"] .card-meta { color: var(--text-mute) !important; }
[data-theme="light"] .card-meta .card-rating { color: var(--accent); }
[data-theme="light"] .card-meta > span + span::before {
  background: var(--text-mute);
  opacity: 0.4;
}
[data-theme="light"] .detail-backdrop-fade {
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0.15) 0%, rgba(9, 9, 11, 0.35) 40%, var(--bg-0) 98%),
    linear-gradient(90deg, rgba(9, 9, 11, 0.55) 0%, rgba(9, 9, 11, 0.08) 62%);
}
[data-theme="light"] .detail-title {
  color: #f4f3f0;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .detail-title-block.has-logo .detail-title--small,
[data-theme="light"] .detail-title.detail-title--small {
  color: rgba(244, 243, 240, 0.55);
}
[data-theme="light"] .detail-logo {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}
[data-theme="light"] .detail-overview,
[data-theme="light"] .detail-meta,
[data-theme="light"] .detail-meta .tag {
  color: rgba(244, 243, 240, 0.88);
}
[data-theme="light"] .detail-body,
[data-theme="light"] .detail-section { color: var(--text); }
[data-theme="light"] .detail-section h3 { color: var(--text); }
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.20);
  border-color: var(--bg-0);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.34); }
[data-theme="light"] .grain {
  opacity: 0.035;
  mix-blend-mode: multiply;
}
[data-theme="light"] #profileInnerClose { background: rgba(255, 255, 255, 0.9); }
[data-theme="light"] .cat-card-name { color: var(--text); }
[data-theme="light"] .cat-card-count { color: var(--text-mute); }
[data-theme="light"] .cat-card:hover .cat-card-name { color: var(--text); }
[data-theme="light"] .cat-card:hover .cat-card-count { color: var(--text-mute); }
[data-theme="light"] .section-head h2,
[data-theme="light"] .section-kicker { color: var(--text); }
[data-theme="light"] .section-link { color: var(--text-mute); }
[data-theme="light"] .section-link:hover { color: var(--text); }
[data-theme="light"] .cat-card-art {
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.7);
}
[data-theme="light"] .col-card { box-shadow: var(--shadow-1); }
[data-theme="light"] .col-card-shade {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(9, 9, 11, 0.2) 0%, rgba(9, 9, 11, 0.58) 100%),
    linear-gradient(180deg, rgba(9, 9, 11, 0.1), rgba(9, 9, 11, 0.48));
}
[data-theme="light"] .col-card-info,
[data-theme="light"] .col-card-info h3,
[data-theme="light"] .col-card-info p {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .collection-hero-fade {
  background: linear-gradient(180deg, rgba(9, 9, 11, 0.35) 0%, rgba(9, 9, 11, 0.15) 40%, var(--bg-0) 97%);
}
[data-theme="light"] .cat-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: var(--shadow-1);
}
[data-theme="light"] .cat-card:hover {
  background: var(--bg-2);
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: var(--shadow-2);
}
[data-theme="light"] .footer {
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.55));
}
[data-theme="light"] .mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 28px -18px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .mobile-nav-item { color: var(--text-mute); }
[data-theme="light"] .mobile-nav-item.active { color: var(--accent); }
[data-theme="light"] .page-header h1,
[data-theme="light"] .section-head h2 {
  color: var(--text);
}
[data-theme="light"] .filter-select,
[data-theme="light"] .player-selectors .filter-select {
  background: var(--bg-1);
  border-color: var(--border-strong);
  color: var(--text);
}
[data-theme="light"] .legal-page,
[data-theme="light"] .auth-card,
[data-theme="light"] .admin-page,
[data-theme="light"] .profile-panel {
  background: var(--bg-1);
  border-color: var(--border);
  box-shadow: var(--shadow-2);
}
[data-theme="light"] .ns-hero-fade,
[data-theme="light"] .gc-hero-fade {
  background: linear-gradient(180deg, rgba(9, 9, 11, 0.2) 0%, rgba(9, 9, 11, 0.45) 55%, var(--bg-0) 100%);
}

/* Chat IA / CinéBot */
[data-theme="light"] .ai-shell,
[data-theme="light"] .pixel-shell,
[data-theme="light"] .chat-shell {
  background: var(--bg-1);
  border-color: var(--border);
}
[data-theme="light"] .ai-msg.bot,
[data-theme="light"] .pixel-msg.bot {
  background: var(--bg-2);
  color: var(--text);
}

/* Le lecteur vidéo reste volontairement sombre (expérience cinéma). */

/* ─────────────────────────────────────────────
   24. CATÉGORIES — cartes horizontales (accueil)
───────────────────────────────────────────── */
.cat-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 22px 2px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cat-row::-webkit-scrollbar { display: none; }

.section:has(.cat-row) .section-title,
.section:has(.col-row) .section-title {
  font-size: clamp(1.28rem, 2.1vw, 1.62rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.section:has(.cat-row) .section-title .accent,
.section:has(.col-row) .section-title .accent {
  font-weight: 800;
}

.cat-card {
  position: relative;
  flex: 0 0 292px;
  height: 118px;
  scroll-snap-align: start;
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--bg-1) 70%, #000 30%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 118px 0 20px;
  text-align: left;
  box-shadow: none;
  transition:
    transform var(--t-med) var(--ease-out),
    background-color var(--t-med) var(--ease-smooth),
    border-color var(--t-fast) var(--ease-smooth),
    box-shadow var(--t-med) var(--ease-smooth);
}
.cat-card:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--accent) 16%, #0a0a0a);
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  box-shadow: none;
}
.cat-card:hover .cat-card-name { color: var(--text); }
.cat-card:hover .cat-card-count {
  color: color-mix(in srgb, var(--accent) 55%, var(--text-mute));
  opacity: 1;
}
.cat-card-name {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  transition: color var(--t-fast) var(--ease-smooth);
}
.cat-card-count {
  position: relative;
  z-index: 1;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  min-height: 17px;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease-smooth), opacity var(--t-fast) var(--ease-smooth);
}
.cat-card-count.loading {
  width: 90px;
  border-radius: 4px;
  background: linear-gradient(105deg, var(--surface) 30%, var(--surface-2) 46%, var(--surface) 62%);
  background-size: 240% 100%;
  color: transparent;
  animation: shimmer 1.5s var(--ease-smooth) infinite;
}
.cat-card-art {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 64px;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  background: var(--bg-3) center / cover no-repeat;
  transform: translateY(-46%) rotate(8deg);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.75);
  transition: transform var(--t-med) var(--ease-out);
}
.cat-card:hover .cat-card-art {
  transform: translateY(-48%) rotate(4deg) scale(1.05);
}

/* ─────────────────────────────────────────────
   25. COLLECTIONS — sagas mises en avant
───────────────────────────────────────────── */
.col-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 22px 2px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.col-row::-webkit-scrollbar { display: none; }

.col-card {
  position: relative;
  flex: 0 0 340px;
  aspect-ratio: 16 / 9;
  scroll-snap-align: start;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--bg-2);
  transition:
    transform var(--t-med) var(--ease-out),
    border-color var(--t-fast) var(--ease-smooth),
    box-shadow var(--t-med) var(--ease-smooth);
}
.col-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-line);
  box-shadow: var(--shadow-2);
}
.col-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.001);
  transition: transform 0.55s var(--ease-out);
}
.col-card:hover .col-card-bg { transform: scale(1.07); }
.col-card-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.82) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.28) 0%, transparent 42%);
}
.col-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px;
  text-align: left;
  padding: 14px 14px 12px;
}
.col-card-name {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.col-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.col-card-count {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.col-card.skeleton { border: 1px solid var(--border); }

.col-card-shots {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 92px;
  height: 108px;
  z-index: 2;
  pointer-events: none;
}
.col-card-shots .col-shot {
  position: absolute;
  width: 48px;
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  background-size: cover;
  background-position: center top;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.col-card-shots.n-1 .col-shot {
  right: 4px;
  top: 6px;
  transform: rotate(8deg);
}
.col-card-shots.n-2 .col-shot:nth-child(1) {
  left: 8px;
  top: 10px;
  transform: rotate(-10deg);
  z-index: 1;
}
.col-card-shots.n-2 .col-shot:nth-child(2) {
  left: 30px;
  top: 6px;
  transform: rotate(9deg);
  z-index: 2;
}
.col-card-shots.n-3 .col-shot:nth-child(1) {
  left: 0;
  top: 12px;
  transform: rotate(-12deg);
  z-index: 1;
}
.col-card-shots.n-3 .col-shot:nth-child(2) {
  left: 18px;
  top: 4px;
  transform: rotate(1deg);
  z-index: 2;
}
.col-card-shots.n-3 .col-shot:nth-child(3) {
  left: 38px;
  top: 10px;
  transform: rotate(12deg);
  z-index: 3;
}

.collections-head {
  padding: calc(var(--nav-h) + clamp(28px, 5vh, 52px)) var(--gutter) 8px;
  max-width: var(--shell);
  margin: 0 auto;
}
.collections-head .page-title {
  margin: 0 0 8px;
}
.collections-head .page-sub {
  max-width: 38em;
  margin: 0;
}
.collections-search {
  position: relative;
  display: block;
  margin-top: 22px;
}
.collections-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.38);
  transform: translateY(-50%);
  pointer-events: none;
}
.collections-search-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.collections-search-input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 46px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 14.5px;
  outline: none;
}
.collections-search-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.collections-search-input:focus {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}
.collections-empty {
  grid-column: 1 / -1;
  padding: 36px 4px;
  color: var(--text-mute);
  font-size: 14px;
}

.col-card-chev { display: none; }
.col-section-sub { display: none; margin: 0 auto 4px; padding: 0 var(--gutter); max-width: var(--shell); font-size: 13.5px; color: var(--text-mute); }
.col-see-all { display: none; }
.collections-mobile-head { display: none; }

.collections-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 8px var(--gutter) 80px;
}
.collections-grid .col-card {
  flex: none;
  width: 100%;
  max-width: none;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.06);
}
.col-card-page .col-card-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.col-card-page .col-card-shots {
  width: 108px;
  height: 122px;
  right: 14px;
  top: 12px;
}
.col-card-page .col-card-shots .col-shot {
  width: 54px;
}
.col-card-page .col-card-shots.n-3 .col-shot:nth-child(2) { left: 22px; }
.col-card-page .col-card-shots.n-3 .col-shot:nth-child(3) { left: 44px; }
@media (min-width: 560px) {
  .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .collections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1120px) {
  .collections-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .collections-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}

.collection-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mute);
}
.collection-back:hover { color: var(--accent-2); }

/* Page d'une collection */
.collection-hero {
  position: relative;
  height: 46vh;
  min-height: 320px;
  background-size: cover;
  background-position: center 25%;
}
.collection-hero-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0.4) 0%, rgba(9, 9, 11, 0.2) 40%, var(--bg-0) 97%);
}
.collection-head {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: -110px auto 0;
  padding: 0 var(--gutter);
}
.collection-overview {
  color: var(--text-dim);
  max-width: 680px;
  font-size: 14.5px;
  line-height: 1.7;
  margin: 14px 0 0;
}
.collection-grid-wrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 8px 0 40px;
}

/* ─────────────────────────────────────────────
   26. EXPLORER — pagination « Voir plus »
───────────────────────────────────────────── */
.load-more-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 0 8px;
}
.load-more-btn { min-width: 200px; justify-content: center; }
.load-more-btn svg { transition: transform var(--t-med) var(--ease-out); }
.load-more-btn:hover svg { transform: translateY(2px); }
.load-more-btn.loading { opacity: 0.65; pointer-events: none; }
.load-more-btn.loading svg { animation: spin 0.9s linear infinite; }
.load-more-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

/* Ma liste */
.mylist-card-wrap { position: relative; }
.mylist-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(9, 9, 11, 0.82);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.18s, transform 0.18s, background 0.18s, color 0.18s;
}
.mylist-card-wrap:hover .mylist-remove-btn,
.mylist-card-wrap:focus-within .mylist-remove-btn {
  opacity: 1;
  transform: scale(1);
}
.mylist-remove-btn:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn.is-in-mylist {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent-2, var(--accent));
  background: var(--accent-soft);
}
.catalogue-filters {
  position: sticky;
  top: 72px;
  z-index: 4;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--bg-0) 88%, transparent);
  padding-top: 8px;
  padding-bottom: 10px;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .catalogue-filters { top: 56px; }
  .mylist-remove-btn { opacity: 1; transform: scale(1); }
}

/* ─────────────────────────────────────────────
   27. PAGES LÉGALES
───────────────────────────────────────────── */
.legal-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--gutter) 90px;
}
.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.legal-updated::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 8px;
}
.legal-toc a {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 500;
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.legal-toc a:hover {
  border-color: var(--accent-line);
  color: var(--accent-2);
  background: var(--accent-soft);
}
.legal-doc h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 46px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.legal-doc h2 .legal-num {
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.legal-doc h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 24px 0 10px;
}
.legal-doc p {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.78;
  margin: 0 0 14px;
}
.legal-doc ul {
  margin: 0 0 16px;
  padding-left: 22px;
  display: grid;
  gap: 9px;
}
.legal-doc li {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
}
.legal-doc li::marker { color: var(--accent); }
.legal-doc strong { color: var(--text); font-weight: 600; }
.legal-doc a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.legal-callout {
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 15px 18px;
  margin: 18px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-dim);
}
.legal-table-wrap { overflow-x: auto; margin: 16px 0 22px; }
.legal-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.legal-table th {
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.legal-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  vertical-align: top;
  line-height: 1.55;
}
.legal-table td code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-2);
  background: var(--accent-soft);
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.legal-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 54px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

/* ─────────────────────────────────────────────
   28. COMMENTAIRES
───────────────────────────────────────────── */
.comments-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.08em;
}
.comment-form {
  display: flex;
  gap: 13px;
  margin-bottom: 28px;
}
.comment-avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--accent-2), var(--accent-deep));
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 14px;
  user-select: none;
}
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-form-main { flex: 1; min-width: 0; }
.comment-input {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.comment-input:focus { border-color: var(--accent-line); background: var(--surface-2); }
.comment-input::placeholder { color: var(--text-mute); }
.comment-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.comment-chars {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.comment-chars.warn { color: var(--danger); }
.comment-submit { padding: 10px 20px; font-size: 13.5px; }

.comment-login-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
  color: var(--text-dim);
  font-size: 14px;
}
.comment-login-cta .btn { padding: 10px 18px; font-size: 13px; }

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.comment-item {
  display: flex;
  gap: 13px;
  padding: 12px 10px;
  margin: 0 -10px;
  border-radius: var(--radius);
  transition: background-color var(--t-fast);
  animation: riseIn 0.35s var(--ease-out) both;
}
.comment-item:hover { background: var(--surface); }
.comment-body { flex: 1; min-width: 0; }
.comment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.comment-author { font-weight: 600; font-size: 13.5px; color: var(--text); }
.comment-author.is-admin::after {
  content: "STAFF";
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-2);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  vertical-align: 2px;
}
.comment-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--text-mute);
}
.comment-text {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.comment-del {
  align-self: flex-start;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-xs);
  display: grid;
  place-items: center;
  color: var(--text-mute);
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.comment-item:hover .comment-del,
.comment-del:focus-visible { opacity: 1; }
.comment-del:hover { color: var(--danger); background: var(--danger-soft); }
@media (hover: none) { .comment-del { opacity: 1; } }

.comments-empty {
  padding: 26px 0 10px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13.5px;
}
.comments-more {
  align-self: center;
  margin-top: 14px;
  padding: 9px 22px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.comments-more:hover { border-color: var(--accent-line); color: var(--accent-2); }
.comments-loading {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  color: var(--text-mute);
  font-size: 13px;
}

/* Section commentaires sur la fiche jeu (fond sombre du shop) */
.ns-dp-comments {
  max-width: 1060px;
  margin: 0 auto;
  padding: 10px 40px 70px;
}
@media (max-width: 640px) { .ns-dp-comments { padding: 6px 20px 50px; } }

/* ─────────────────────────────────────────────
   29. PAGES PERSONNES (acteurs / réalisateurs)
───────────────────────────────────────────── */
.person-page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(36px, 6vh, 64px)) var(--gutter) 90px;
}
.person-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
  transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.person-back:hover { border-color: var(--accent-line); color: var(--accent-2); transform: translateX(-2px); }
.person-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 64px);
  align-items: start;
}
.person-side { position: sticky; top: calc(var(--nav-h) + 24px); }
.person-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--bg-2), var(--bg-1)) center top / cover no-repeat;
  box-shadow: var(--shadow-2), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.person-facts {
  margin-top: 24px;
  display: grid;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.person-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 16px;
}
.person-fact + .person-fact { border-top: 1px solid var(--border); }
.person-fact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  flex-shrink: 0;
}
.person-fact-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  text-align: right;
}
.person-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent);
}
.person-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}
.person-name {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.03;
  margin: 14px 0 20px;
}
.person-bio {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.78;
  max-width: 760px;
  white-space: pre-line;
}
.person-bio.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.person-bio-more {
  margin-top: 12px;
  align-self: flex-start;
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.person-bio-more:hover { text-decoration: underline; text-underline-offset: 3px; }

.person-section { margin-top: 48px; }
.person-section > h4 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 20px;
}
.person-section > h4::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.person-section > h4 .count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-mute);
  letter-spacing: 0.06em;
}

/* Récompenses */
.award-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.award-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color var(--t-fast);
}
.award-item:hover { border-color: var(--accent-line); }
.award-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.award-icon svg { width: 17px; height: 17px; }
.award-name { font-size: 13.5px; font-weight: 600; line-height: 1.4; }

/* Galerie photos */
.person-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}
.person-photos .ph {
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  background: var(--bg-2) center top / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-fast);
  cursor: zoom-in;
}
.person-photos .ph:hover { transform: scale(1.035); box-shadow: inset 0 0 0 1px var(--accent-line); }

/* Filmographie chronologique */
.filmo-list { display: flex; flex-direction: column; }
.filmo-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 12px;
  margin: 0 -12px;
  border-radius: var(--radius);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.filmo-item:hover { background: var(--surface); }
.filmo-item:last-child { border-bottom: none; }
.filmo-year {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.filmo-title { font-size: 14.5px; font-weight: 600; }
.filmo-role { margin-top: 2px; font-size: 12.5px; color: var(--text-mute); }
.filmo-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.filmo-note svg { width: 12px; height: 12px; }
.filmo-more-wrap { display: flex; justify-content: center; margin-top: 18px; }

/* Visionneuse photo plein écran */
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 7, 0.9);
  backdrop-filter: blur(14px);
  padding: 32px;
  animation: fadeIn var(--t-med) var(--ease-smooth);
  cursor: zoom-out;
}
.photo-lightbox img {
  max-width: min(92vw, 640px);
  max-height: 88vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}

@media (max-width: 860px) {
  .person-layout { grid-template-columns: 1fr; gap: 28px; }
  .person-side {
    position: static;
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .person-photo { border-radius: var(--radius); }
  .person-facts { margin-top: 0; }
  .filmo-item { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; }
}
@media (max-width: 540px) {
  .person-side { grid-template-columns: 132px minmax(0, 1fr); }
  .person-fact { padding: 10px 12px; }
  .award-list { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   30. LECTEUR — retouches mobile & tactile
───────────────────────────────────────────── */
.player-card {
  height: 100%;
  max-height: none;
  width: 100%;
}
#detailModal .modal-card {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

/* Zones de double-tap (reculer / avancer) — activées par JS sur tactile */
.nx-tap-zone {
  position: absolute;
  top: 15%;
  bottom: 22%;
  width: 30%;
  z-index: 5;
}
.nx-tap-zone.left { left: 0; }
.nx-tap-zone.right { right: 0; }
.nx-tap-feedback {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}
.nx-tap-zone.left .nx-tap-feedback { left: 24%; }
.nx-tap-zone.right .nx-tap-feedback { right: 24%; }
.nx-tap-zone.pulse .nx-tap-feedback { opacity: 1; }

@media (max-width: 640px) {
  /* Contrôles compacts — tout tient sur petit écran (ép. suivant, sources, etc.) */
  .nx-btn { width: 36px; height: 36px; min-width: 36px; }
  .nx-btn svg { width: 18px; height: 18px; }
  .nx-bar { gap: 2px; }
  .nx-bar-left .nx-time { font-size: 10px; margin-left: 1px; }
  .nx-controls {
    padding: 24px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .nx-progress-wrap { padding: 10px 0 8px; }
  .nx-progress-bg { height: 4px; }
  .nx-settings-panel { right: 8px; bottom: 72px; width: min(94vw, 276px); }
  .nx-src-panel { right: 0; bottom: 44px; min-width: 200px; }
  .player-topbar {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: 10px;
    padding-right: 10px;
  }
  .player-meta {
    max-height: none;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }
  .player-selectors .filter-select { flex: 1; min-width: 0; }
  .player-src-btn { height: 34px; padding: 0 10px 0 9px; border-radius: 9px; }
  .player-src-btn-label { max-width: 96px; font-size: 12px; }
}

@media (max-width: 380px) {
  .nx-btn { width: 32px; height: 32px; min-width: 32px; }
  .nx-btn svg { width: 16px; height: 16px; }
  .nx-bar-left .nx-time { font-size: 9px; }
  .nx-controls { padding-left: 6px; padding-right: 6px; }
}

/* Paysage sur téléphone : plein cadre pour la vidéo, méta repliée */
@media (orientation: landscape) and (max-height: 540px) {
  .player-meta { display: none; }
  .player-topbar { padding: 8px 12px; }
  html.player-open .player-modal.open,
  html.player-open .player-card,
  html.player-open .player-frame,
  html.player-open .nx-player {
    background: #000;
  }
}

/* ─────────────────────────────────────────────
   31. RESPONSIVE — retouches globales
───────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Filtres Explorer : rangée défilante, pas de retour à la ligne */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .filters { padding: 0; flex-wrap: nowrap; }
  .filter-chip, .filter-select { flex-shrink: 0; }

  /* Catégories & collections : cartes légèrement réduites */
  .cat-card { flex-basis: 240px; height: 104px; padding-right: 102px; }
  .cat-card-art { width: 56px; right: 14px; }
  .row-resume .card-resume { width: 292px; }
  .col-section .col-card:nth-child(n+5) { display: none; }

  .col-section .section-header { margin-bottom: 2px; }
  .col-section .section-link { display: none; }
  .col-section .section-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; }
  .col-section .section-title .accent { display: none; }
  .col-section-sub { display: block; }
  .col-section .row-wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
  .col-section .row-btn { display: none; }
  .col-row {
    flex-direction: column;
    overflow: visible;
    gap: 10px;
    padding: 10px 0 4px;
    scroll-snap-type: none;
  }
  .col-section .col-card,
  .collections-grid .col-card {
    flex: none;
    width: 100%;
    aspect-ratio: auto;
    height: 96px;
    border-radius: 10px;
    border-color: rgba(255, 255, 255, 0.06);
  }
  .col-section .col-card:hover,
  .collections-grid .col-card:hover {
    transform: none;
    box-shadow: none;
  }
  .col-section .col-card:hover .col-card-bg,
  .collections-grid .col-card:hover .col-card-bg { transform: none; }
  .col-section .col-card-shade,
  .collections-grid .col-card-shade {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 46%, rgba(0, 0, 0, 0.16) 100%);
  }
  .col-section .col-card-shots,
  .col-card-page .col-card-shots { display: none; }
  .col-section .col-card-info,
  .col-card-page .col-card-info {
    left: 0;
    right: 44px;
    top: 0;
    bottom: 0;
    padding: 0 18px;
    justify-content: center;
    gap: 3px;
  }
  .col-section .col-card-name,
  .col-card-page .col-card-name { font-size: 17px; }
  .col-card-chev {
    display: grid;
    place-items: center;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    color: rgba(255, 255, 255, 0.88);
  }
  .col-card-chev svg { width: 18px; height: 18px; }
  .col-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px var(--gutter) 0;
    height: 52px;
    border-radius: 10px;
    background: #161616;
    color: var(--text);
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
  }
  .col-see-all:hover { background: #1c1c1c; color: #fff; }

  html.page-collections .cine-hero { display: none; }
  .collections-mobile-head {
    display: block;
    padding: calc(var(--nav-h) + 18px) var(--gutter) 12px;
  }
  .collections-mobile-head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.03em;
  }
  .collections-mobile-head p {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--text-mute);
  }
  .collections-grid { grid-template-columns: 1fr; gap: 10px; padding-top: 4px; }
  .collection-hero { height: 26vh; min-height: 168px; }
  .collection-head { margin-top: -48px; }

  /* Légal : tableaux défilants déjà gérés, titres resserrés */
  .legal-doc h2 { font-size: 1.15rem; gap: 10px; }

  /* Commentaires : avatar réduit */
  .comment-avatar { width: 33px; height: 33px; font-size: 12.5px; }
  .comment-form { gap: 10px; }
  .comment-item { gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════
   MODE TV — même rendu visuel, optimisations perf + focus télécommande
   Activé via data-tv="1" sur <html> (détection auto dans index.html)
   ══════════════════════════════════════════════════════════════════ */

[data-tv="1"] {
  scroll-behavior: auto;
}

/* Rendu hors-écran différé : accélère le scroll sans changer l'apparence */
[data-tv="1"] .section,
[data-tv="1"] .hero {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

[data-tv="1"] .card {
  contain: layout style paint;
}

/* Anneau de focus discret (or Nexora) — visible à la télécommande uniquement */
[data-tv="1"] .card:focus-visible,
[data-tv="1"] .gc:focus-visible,
[data-tv="1"] .gc-feat:focus-visible,
[data-tv="1"] .cat-card:focus-visible,
[data-tv="1"] .col-card:focus-visible,
[data-tv="1"] .nav-link:focus-visible,
[data-tv="1"] .brand:focus-visible,
[data-tv="1"] .btn:focus-visible,
[data-tv="1"] .icon-btn:focus-visible,
[data-tv="1"] .hero-dot:focus-visible,
[data-tv="1"] .section-link:focus-visible,
[data-tv="1"] .mobile-nav-item:focus-visible,
[data-tv="1"] .player-source button:focus-visible,
[data-tv="1"] .detail-play:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

[data-tv="1"] .card:focus-visible .card-poster {
  box-shadow: inset 0 0 0 2px var(--accent-line);
}

/* Pas de curseur souris sur TV / webOS */
[data-tv="1"] body,
[data-webos="1"] body {
  cursor: none;
}

[data-webos="1"] * {
  cursor: none !important;
}

/* ── Bannière install APK (Android navigateur uniquement) ── */
.nx-apk-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-0) 88%, transparent);
  border: 1px solid var(--border-strong);
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
  pointer-events: none;
}
.nx-apk-banner.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.nx-apk-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
}
.nx-apk-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.nx-apk-banner-text strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.nx-apk-banner-text span {
  font-size: 0.78rem;
  color: var(--muted, rgba(255,255,255,0.62));
  line-height: 1.25;
}
.nx-apk-banner-dl {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-deep) 130%);
  color: var(--accent-ink);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.nx-apk-banner-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, rgba(255,255,255,0.7));
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
[data-theme="light"] .nx-apk-banner {
  background: color-mix(in srgb, #fff 92%, transparent);
  box-shadow: 0 16px 40px -18px rgba(20, 16, 8, 0.28);
}
[data-theme="light"] .nx-apk-banner-text span {
  color: rgba(40, 32, 18, 0.62);
}
html[data-reduce-motion="1"],
html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
  animation: none !important;
  transition: none !important;
}

@media (min-width: 900px) {
  .nx-apk-banner { display: none !important; }
}

/* ─────────────────────────────────────────────
   THÈMES COULEUR (Paramètres)
───────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="blue"] {
  --bg-0: #050910;
  --bg-1: #0b121c;
  --bg-2: #141c28;
  --bg-3: #1c2634;
  --surface: rgba(120, 170, 255, 0.06);
  --surface-2: rgba(120, 170, 255, 0.11);
  --border: rgba(140, 180, 255, 0.10);
  --border-strong: rgba(140, 180, 255, 0.18);
  --hairline: rgba(140, 180, 255, 0.12);
  --text: #eef3fb;
  --text-dim: #a8b6cc;
  --text-mute: #6d7d96;
  --accent: #5ba3e8;
  --accent-2: #8ec4f5;
  --accent-deep: #2e6eab;
  --accent-ink: #061018;
  --accent-soft: rgba(91, 163, 232, 0.14);
  --accent-line: rgba(91, 163, 232, 0.42);
  --accent-glow: rgba(91, 163, 232, 0.22);
  --purple: var(--accent);
  accent-color: var(--accent);
  color-scheme: dark;
}
:root[data-theme="violet"] {
  --bg-0: #0a0510;
  --bg-1: #140c1c;
  --bg-2: #1c1426;
  --bg-3: #261c32;
  --surface: rgba(180, 140, 255, 0.06);
  --surface-2: rgba(180, 140, 255, 0.11);
  --border: rgba(190, 160, 255, 0.10);
  --border-strong: rgba(190, 160, 255, 0.18);
  --hairline: rgba(190, 160, 255, 0.12);
  --text: #f3eefb;
  --text-dim: #b8abc8;
  --text-mute: #7d718f;
  --accent: #b794f6;
  --accent-2: #d4b8ff;
  --accent-deep: #7c5cbf;
  --accent-ink: #14081c;
  --accent-soft: rgba(183, 148, 246, 0.14);
  --accent-line: rgba(183, 148, 246, 0.42);
  --accent-glow: rgba(183, 148, 246, 0.22);
  --purple: var(--accent);
  accent-color: var(--accent);
  color-scheme: dark;
}
:root[data-theme="red"] {
  --bg-0: #100505;
  --bg-1: #1a0c0c;
  --bg-2: #241414;
  --bg-3: #2c1a1a;
  --surface: rgba(255, 120, 120, 0.06);
  --surface-2: rgba(255, 120, 120, 0.11);
  --border: rgba(255, 150, 150, 0.10);
  --border-strong: rgba(255, 150, 150, 0.18);
  --hairline: rgba(255, 150, 150, 0.12);
  --text: #fbf0ee;
  --text-dim: #c8b0ac;
  --text-mute: #8f7571;
  --accent: #e85d5d;
  --accent-2: #f08a8a;
  --accent-deep: #b13a3a;
  --accent-ink: #1c0808;
  --accent-soft: rgba(232, 93, 93, 0.14);
  --accent-line: rgba(232, 93, 93, 0.42);
  --accent-glow: rgba(232, 93, 93, 0.22);
  --purple: var(--accent);
  accent-color: var(--accent);
  color-scheme: dark;
}
:root[data-theme="green"] {
  --bg-0: #05100a;
  --bg-1: #0c1a12;
  --bg-2: #14241a;
  --bg-3: #1c2c22;
  --surface: rgba(100, 220, 150, 0.06);
  --surface-2: rgba(100, 220, 150, 0.11);
  --border: rgba(120, 220, 160, 0.10);
  --border-strong: rgba(120, 220, 160, 0.18);
  --hairline: rgba(120, 220, 160, 0.12);
  --text: #eef8f2;
  --text-dim: #a8c4b4;
  --text-mute: #6d8a7c;
  --accent: #5dce8a;
  --accent-2: #8ae0ad;
  --accent-deep: #2e9a5c;
  --accent-ink: #06140c;
  --accent-soft: rgba(93, 206, 138, 0.14);
  --accent-line: rgba(93, 206, 138, 0.42);
  --accent-glow: rgba(93, 206, 138, 0.22);
  --purple: var(--accent);
  accent-color: var(--accent);
  color-scheme: dark;
}

/* ── Miami (rose · violet · cyan) ── */
:root[data-theme="miami"] {
  --bg-0: #120828;
  --bg-1: #1a0c38;
  --bg-2: #241050;
  --bg-3: #2e1868;
  --surface: rgba(255, 45, 160, 0.07);
  --surface-2: rgba(0, 212, 255, 0.10);
  --border: rgba(255, 110, 199, 0.12);
  --border-strong: rgba(0, 212, 255, 0.22);
  --hairline: rgba(255, 110, 199, 0.14);
  --text: #faf5ff;
  --text-dim: #c8b8e8;
  --text-mute: #8a78b8;
  --accent: #ff2da0;
  --accent-2: #00d4ff;
  --accent-deep: #b81878;
  --accent-ink: #0a0418;
  --accent-soft: rgba(255, 45, 160, 0.16);
  --accent-line: rgba(0, 212, 255, 0.45);
  --accent-glow: rgba(255, 45, 160, 0.28);
  --purple: var(--accent);
  accent-color: var(--accent);
  color-scheme: dark;
}
html[data-theme="miami"] {
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255, 45, 160, 0.22) 0%, transparent 55%),
    radial-gradient(100% 80% at 10% 100%, rgba(0, 212, 255, 0.14) 0%, transparent 50%),
    linear-gradient(180deg, #1a0533 0%, #120828 100%);
  background-attachment: fixed;
}
html[data-theme="miami"] body { background: transparent; }
[data-theme="miami"] .nav {
  border-bottom-color: var(--accent-line);
  box-shadow: 0 0 24px -8px var(--accent-glow);
}
[data-theme="miami"] .btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #a81878 50%, var(--accent-2) 100%);
  box-shadow: 0 8px 28px -6px var(--accent-glow);
}

.st-theme-swatch--triple {
  background: linear-gradient(135deg, var(--sw1) 0%, var(--sw2) 48%, var(--sw3, var(--sw2)) 100%);
}

.notif-btn { position: relative; }
.notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg-0);
}
.notif-badge[hidden] { display: none !important; }

/* Panneau notifications */
.notif-overlay {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(9, 9, 11, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-smooth), visibility 0s linear var(--t-med);
}
.notif-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-med) var(--ease-smooth);
}
.notif-panel {
  position: absolute;
  top: calc(var(--nav-h) + 10px);
  right: var(--gutter);
  width: min(420px, calc(100vw - 32px));
  max-height: min(72vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-smooth);
}
.notif-overlay.open .notif-panel {
  transform: translateY(0);
  opacity: 1;
}
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.notif-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
}
.notif-head-actions { display: flex; align-items: center; gap: 6px; }
.notif-list {
  overflow-y: auto;
  padding: 8px;
  flex: 1;
}
.notif-empty {
  padding: 36px 20px;
  text-align: center;
  color: var(--text-mute);
  font-size: 0.92rem;
}
.notif-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.notif-item:hover { background: var(--surface); border-color: var(--border); }
.notif-item.unread { background: var(--accent-soft); }
.notif-item img {
  width: 48px;
  height: 68px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-3);
}
.notif-item-title { font-weight: 650; font-size: 0.92rem; color: var(--text); }
.notif-item-body { font-size: 0.8rem; color: var(--text-mute); margin-top: 2px; }
.notif-item-time { font-size: 0.7rem; color: var(--text-mute); font-family: var(--font-mono); white-space: nowrap; }
.notif-foot {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border);
}

/* Page paramètres */
.st-page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) 110px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}
.st-nav {
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.st-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 550;
  text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.st-nav-ico {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: inherit;
}
.st-nav-ico svg,
.st-nav-btn > svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px;
  max-height: 18px;
  flex-shrink: 0;
}
.st-nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.st-nav-name { font-weight: 600; }
.st-nav-sub {
  display: none;
  font-size: 0.75rem;
  font-weight: 450;
  color: var(--text-mute);
  line-height: 1.3;
}
.st-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
}
.st-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.st-section { scroll-margin-top: calc(var(--nav-h) + 24px); }
.st-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.st-section-title svg { width: 15px; height: 15px; }
.st-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.st-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-top: 1px solid var(--border);
}
.st-row:first-child { border-top: 0; }
.st-row-label { font-weight: 600; color: var(--text); font-size: 0.95rem; }
.st-row-hint { margin: 4px 0 0; font-size: 0.8rem; color: var(--text-mute); line-height: 1.4; }
.st-select, .st-input {
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 8px 12px;
  font: inherit;
  font-size: 0.88rem;
  min-width: 160px;
}
.st-input { width: min(280px, 100%); }
.st-toggle {
  --w: 44px;
  --h: 26px;
  position: relative;
  width: var(--w);
  height: var(--h);
  border-radius: 999px;
  border: 0;
  background: var(--bg-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s var(--ease-smooth);
}
.st-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform 0.2s var(--ease-out);
}
.st-toggle.on { background: var(--accent); }
.st-toggle.on::after { transform: translateX(18px); }
.st-color-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.st-color {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  cursor: pointer;
  padding: 0;
}
.st-color.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.st-sub-preview {
  margin: 4px 18px 10px;
  padding: 36px 16px 28px;
  border-radius: var(--radius);
  background: #0b0b0e;
  background-image: linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%);
  display: grid;
  place-items: end center;
  min-height: 110px;
}
.st-sub-preview .nx-cue { pointer-events: none; }
.st-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
  padding: 16px 18px;
}
.st-theme {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-2);
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.st-theme:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.st-theme.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.st-theme-swatch {
  height: 46px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--sw1, #09090b) 0 55%, var(--sw2, #e3ba58) 55% 100%);
}
.st-theme-name { font-size: 0.82rem; font-weight: 650; }
.st-hist-item, .st-device {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.st-hist-item:first-child, .st-device:first-child { border-top: 0; }
.st-hist-item img, .st-hist-ph {
  width: 42px;
  height: 60px;
  object-fit: cover;
  border-radius: 6px;
  background: var(--bg-3);
}
.st-hist-title { font-weight: 650; font-size: 0.9rem; }
.st-hist-meta { font-size: 0.75rem; color: var(--text-mute); margin-top: 2px; }
.st-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.st-icon-btn:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.st-empty { padding: 22px 18px; color: var(--text-mute); font-size: 0.9rem; }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.st-danger { color: var(--danger) !important; }
.btn.st-btn-danger {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
}
.btn.st-btn-danger:hover { background: var(--danger); color: #fff; }
.st-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 0;
  grid-column: 1 / -1;
}
.st-form .st-input { width: 100%; min-width: 0; max-width: 360px; }
.st-about-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--border); font-size: 0.9rem; }
.st-about-row:first-child { border-top: 0; }
.st-about-k { color: var(--text-mute); }
.st-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; }

.detail-notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-2);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
}
.detail-notify-btn.active {
  border-color: var(--success);
  background: rgba(85, 180, 103, 0.12);
  color: var(--success);
}

.nx-dialog {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  padding: 20px;
}
.nx-dialog[hidden] { display: none !important; }
.nx-dialog-card {
  width: min(440px, 100%);
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-pop);
}
.nx-dialog-card h3 { margin: 0 0 8px; font-family: var(--font-display); }
.nx-dialog-card p { margin: 0 0 16px; color: var(--text-dim); font-size: 0.92rem; line-height: 1.45; }
.nx-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .st-page {
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
    padding-bottom: 128px;
  }
  .st-nav {
    position: static;
    z-index: auto;
    flex-direction: column;
    overflow: visible;
    width: 100%;
    min-width: 0;
    padding: 6px;
  }
  .st-nav-btn {
    width: 100%;
    flex: none;
    white-space: normal;
    padding: 14px 14px;
    font-size: 0.95rem;
  }
  .st-nav-btn svg { width: 18px; height: 18px; }
  .st-nav-sub { display: block; }
  .st-nav-btn::after {
    content: "›";
    margin-left: auto;
    color: var(--text-mute);
    font-size: 1.35rem;
    line-height: 1;
  }
  .st-row { grid-template-columns: 1fr; gap: 10px; }
  .st-select, .st-input { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   Calendrier
══════════════════════════════════════════════════════════════ */
.cal-page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 22px) var(--gutter) 80px;
}
html.has-cine-hero .cal-page {
  padding-top: 12px;
}
.cal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.cal-head--nav-only {
  justify-content: flex-end;
  align-items: center;
}
.cal-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 6px;
}
.cal-sub {
  margin: 0;
  max-width: 42rem;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.5;
}
.cal-month-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}
.cal-month-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cal-month-btn svg { width: 16px; height: 16px; }
.cal-month-btn:hover { background: var(--surface-2); }
.cal-month-label {
  min-width: 9.5rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-bottom: 18px;
  font-size: 0.78rem;
  color: var(--text-mute);
}
.cal-legend-item { color: var(--accent); letter-spacing: 0.01em; }
.cal-legend-item--movie { color: #8aa0b8; }
.cal-legend-note { color: var(--text-mute); }

.cal-week { display: none; }
.cal-week-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 14px 10px 16px;
}
.cal-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 4px;
}
.cal-week-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: var(--text);
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cal-week-btn svg { width: 16px; height: 16px; }
.cal-week-btn:active { background: var(--surface-2); }
.cal-week-range {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-align: center;
  flex: 1;
}
.cal-week-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: start;
}
.cal-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px 0 2px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  min-width: 0;
}
.cal-week-day.is-skel {
  pointer-events: none;
  opacity: 0.35;
  min-height: 72px;
}
.cal-week-dow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-mute);
  line-height: 1;
}
.cal-week-num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}
.cal-week-day.is-selected .cal-week-dow { color: #c5a059; }
.cal-week-day.is-selected .cal-week-num {
  background: #c5a059;
  color: #141210;
}
.cal-week-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 6px;
}
.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.cal-dot--upcoming { background: #c5a059; }
.cal-dot--available { background: #4ecb71; }
.cal-dot--release { background: #5b86e5; }
.cal-week-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 8px;
  margin-top: 14px;
  padding: 0 4px;
  font-size: 0.72rem;
  color: var(--text-mute);
}
.cal-week-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cal-grid-wrap {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.cal-dow-cell {
  padding: 10px 12px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 600;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 118px;
}
.cal-cell {
  box-sizing: border-box;
  min-height: 0;
  height: 118px;
  max-height: 118px;
  overflow: hidden;
  padding: 8px 8px;
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.is-out {
  opacity: 1;
  background: rgba(255, 255, 255, 0.015);
  cursor: default;
  pointer-events: none;
}
.cal-cell.is-out .cal-cell-num { visibility: hidden; }
.cal-cell.is-today { box-shadow: inset 0 0 0 1px var(--accent-line); }
.cal-cell.is-selected { background: rgba(227, 186, 88, 0.05); }
.cal-cell:hover:not(.is-skel) { background: var(--surface); }
.cal-cell.is-skel {
  min-height: 0;
  height: 118px;
  max-height: 118px;
  background: linear-gradient(90deg, transparent, var(--surface), transparent);
  cursor: default;
}
.cal-cell-num {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.cal-pills {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  flex: 1;
}
.cal-pill {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 550;
  line-height: 1.35;
}
.cal-pill--tv {
  background: rgba(227, 186, 88, 0.14);
  color: #efcd7f;
}
.cal-pill--movie {
  background: rgba(122, 148, 178, 0.16);
  color: #b7c7d8;
}
.cal-more {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 650;
  padding-left: 4px;
}
.cal-panel { margin-top: 36px; }
.cal-panel-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
  margin-bottom: 16px;
}
.cal-empty {
  color: var(--text-mute);
  font-size: 0.92rem;
}
.cal-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.cal-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.cal-card-poster {
  width: 64px;
  height: 94px;
  border-radius: 8px;
  background: var(--bg-3) center/cover no-repeat;
  cursor: pointer;
}
.cal-card-body { display: flex; flex-direction: column; min-width: 0; }
.cal-card-top { display: flex; align-items: flex-start; gap: 8px; }
.cal-card-text { flex: 1; min-width: 0; }
.cal-card-title {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-card-meta, .cal-card-status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-mute);
}
.cal-card-status { margin-top: 4px; }
.cal-bell {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--text-mute);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cal-bell svg { width: 16px; height: 16px; }
.cal-bell:hover, .cal-bell.active { color: var(--accent); }
.cal-card-actions { margin-top: auto; padding-top: 10px; }
.cal-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 12px;
  padding: 9px 16px 9px 14px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.cal-cta svg { width: 13px; height: 13px; }
.cal-cta--play { background: var(--accent); color: var(--accent-ink); }
.cal-cta--soon,
.cal-cta--soon:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-mute);
  border: 1px solid var(--border);
  cursor: not-allowed;
  pointer-events: none;
}

/* Tiroirs Ma liste */
.ml-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  max-width: var(--shell);
  margin: 0 auto 16px;
  padding: 10px var(--gutter) 0;
}
.ml-add-shelf {
  margin-left: 2px;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ml-add-shelf svg { width: 15px; height: 15px; }
.ml-add-shelf:hover { color: var(--accent); border-color: var(--accent-line); }
.ml-create {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: var(--shell);
  margin: 0 auto 16px;
  padding: 12px var(--gutter);
  border: 0;
  background: transparent;
}
.ml-create.is-open { display: flex; }
.ml-create input {
  flex: 1;
  min-width: 160px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
}
.ml-swatches { display: flex; gap: 6px; }
.ml-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.ml-swatch.is-on { border-color: var(--text); }
.ml-shelf { margin-bottom: 8px; }
.ml-shelves {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
}
.ml-shelf-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-1);
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.ml-shelf-head:hover { border-color: var(--border-strong); }
.ml-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ml-shelf-name { font-weight: 650; }
.ml-shelf-count {
  font-size: 0.78rem;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.ml-chev {
  margin-left: auto;
  color: var(--text-mute);
  transition: transform var(--t-fast) var(--ease-out);
}
.ml-shelf.is-open .ml-chev { transform: rotate(90deg); }
.ml-shelf-body {
  display: none;
  padding: 14px 2px 8px;
}
.ml-shelf.is-open .ml-shelf-body { display: block; }
.ml-shelf-empty {
  color: var(--text-mute);
  font-size: 0.88rem;
  padding: 4px 14px 12px;
}
.ml-move {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(9, 9, 11, 0.82);
  color: var(--text-dim);
  font-size: 0.68rem;
  cursor: pointer;
  opacity: 0;
}
.mylist-card-wrap:hover .ml-move,
.mylist-card-wrap:focus-within .ml-move { opacity: 1; }

@media (max-width: 860px) {
  .cal-head { flex-direction: column; align-items: flex-start; }
  .cal-title { font-size: 1.35rem; }
  .cal-grid { grid-auto-rows: 96px; }
  .cal-cell, .cal-cell.is-skel { height: 96px; max-height: 96px; min-height: 0; padding: 6px; }
  .cal-pill { font-size: 0.62rem; padding: 2px 6px; }
  .cal-dow-cell { padding: 8px 4px; font-size: 0.6rem; }
  .ml-move { opacity: 1; }
}
@media (max-width: 640px) {
  .cal-page { padding-top: calc(var(--nav-h) + 12px); padding-bottom: 96px; }
  html.has-cine-hero .cal-page { padding-top: 4px; }
  .cine-hero {
    min-height: min(68vh, 560px);
    padding: calc(var(--nav-h) + 8px) 16px 24px;
  }
  .cine-hero--compact { min-height: min(52vh, 400px); }
  .cine-hero-title { font-size: clamp(1.5rem, 7.4vw, 1.95rem); }
  .cine-hero-search-input { height: 48px; font-size: 14.5px; }
  .cal-head,
  .cal-legend,
  .cal-grid-wrap { display: none; }
  .cal-week { display: block; }
  .cal-panel { margin-top: 22px; }
  .cal-cards { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   MODE FORCÉ (Paramètres > Apparence)
   data-device="phone" : barre bas + nav compact, même sur grand écran
   data-device="tv"    : nav bureau + télécommande, même sur petit écran
   data-device="pc"    : nav bureau souris/clavier, sans mode TV
   ══════════════════════════════════════════════════════════════════ */

html[data-device="phone"] {
  --nav-h: calc(60px + max(10px, env(safe-area-inset-top, 0px)));
}
html[data-device="phone"] .nav {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
}
html[data-device="phone"] .nav-links,
html[data-device="phone"] .nav-search-pill,
html[data-device="phone"] .discover-btn {
  display: none !important;
}
html[data-device="phone"] .nav-inner {
  display: flex;
  gap: 10px;
  height: 60px;
  justify-content: space-between;
  padding: 0 16px;
}
html[data-device="phone"] .nav-actions { margin-left: auto; gap: 2px; }
html[data-device="phone"] #searchToggle { display: grid; }
html[data-device="phone"] .account-trigger { padding: 3px; gap: 0; }
html[data-device="phone"] .account-trigger > svg,
html[data-device="phone"] .account-btn span,
html[data-device="phone"] .account-name { display: none; }
html[data-device="phone"] .brand-text img,
html[data-device="phone"] .brand-logo { height: 17px; max-width: 96px; }
html[data-device="phone"] body { padding-bottom: 66px; }
html[data-device="phone"] .footer { margin-bottom: -66px; padding-bottom: 66px; }
html[data-device="phone"] .mobile-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg-0) 92%, transparent);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-top: 1px solid var(--hairline);
}
html[data-device="phone"] .mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 2px 5px;
  border-radius: var(--radius);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-mute);
  background: none;
  border: none;
  transition: color var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
html[data-device="phone"] .mobile-nav-item svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.7;
}
html[data-device="phone"] .mobile-nav-item.active { color: var(--accent); }

html[data-device="tv"] .mobile-bottom-nav,
html[data-device="pc"] .mobile-bottom-nav { display: none !important; }
html[data-device="tv"] .nav-links,
html[data-device="pc"] .nav-links { display: flex !important; }
html[data-device="tv"] .nav-search-pill,
html[data-device="pc"] .nav-search-pill { display: flex !important; }
html[data-device="tv"] #searchToggle,
html[data-device="pc"] #searchToggle { display: none !important; }
html[data-device="tv"] .discover-btn,
html[data-device="pc"] .discover-btn { display: grid !important; }
html[data-device="tv"] body,
html[data-device="pc"] body { padding-bottom: 0; }
html[data-device="tv"] .footer,
html[data-device="pc"] .footer { margin-bottom: 0; padding-bottom: 0; }