/* Theme VHS : habillage « videoclub annees 90 » (enseigne bleue et jaune,
   tickets de location, cassettes VHS, affichage de magnetoscope).
   Purement visuel : chaque regle est bornee a :root[data-theme="vhs"], le
   balisage et le comportement des pages sont identiques aux autres themes.
   Aucune image externe : degrades CSS, caracteres Unicode uniquement.
   Palette : bleu enseigne #0b2a8a, bleu nuit #071650, jaune ticket #ffd21f,
   creme d'etiquette #fff4c2, noir de boitier #0a0a10. Ombres dures sans flou. */

:root[data-theme="vhs"]{
  color-scheme:dark;
  --vhs-blue:#0b2a8a; --vhs-night:#071650; --vhs-ink:#020920;
  --vhs-yellow:#ffd21f; --vhs-yellow-hi:#ffe466; --vhs-cream:#fff4c2;
  --vhs-case:#0a0a10; --vhs-screen:#1e3ad8; --vhs-red:#c8102e;
  --vhs-display:"Bowlby One","Arial Black","Segoe UI Black",Impact,sans-serif;
  --vhs-font:"Rubik","Segoe UI",system-ui,sans-serif;
  --vhs-mono:"Share Tech Mono",Consolas,"Courier New",monospace;
  --vhs-osd:"VT323","Share Tech Mono",Consolas,monospace;
  --vhs-hard:4px 4px 0 var(--vhs-ink);
  --vhs-hard-sm:2px 2px 0 var(--vhs-ink);

  --bg:#071650; --bg-soft:#0a1c66;
  --surface:#0e2478; --surface-2:#14308f; --surface-hover:#1b3aa6;
  --border:#5a76e6; --border-soft:#2c44a8;
  --text:#f4f6ff; --text-dim:#c7d2fb; --text-faint:#9fb1ee;
  --accent:#ffd21f; --accent-hover:#ffe466; --accent-dim:#ffd21f;
  --accent-soft:rgba(255,210,31,.14);
  --danger:#ff6b7a; --danger-hover:#ff8b97; --danger-soft:rgba(255,107,122,.16);
  --success:#4ee39a; --success-soft:rgba(78,227,154,.16);
  --warning:#ffd21f; --warning-soft:rgba(255,210,31,.16);
  --purple:#c9b0ff; --purple-soft:rgba(201,176,255,.18);
  --radius-sm:4px; --radius:8px; --radius-lg:12px;
  --shadow:6px 6px 0 var(--vhs-ink);
  --shadow-sm:var(--vhs-hard);
  --nav-bg:#ffd21f;
}

/* ---------- Fond : bleu nuit, lueur d'ecran et lignes de balayage ---------- */
:root[data-theme="vhs"] body{
  font-family:var(--vhs-font);
  background:
    radial-gradient(ellipse at 50% -20%,rgba(60,100,255,.32),transparent 65%),
    linear-gradient(#0a1c66,#071650 40%,#050f3d);
  background-color:#050f3d;background-attachment:fixed;
}
:root[data-theme="vhs"] body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);
}
:root[data-theme="vhs"] ::selection{background:var(--vhs-yellow);color:var(--vhs-blue)}
:root[data-theme="vhs"] *{scrollbar-color:var(--vhs-yellow) #050f3d}

/* ---------- Titres : enseigne + compteur de magnetoscope ---------- */
:root[data-theme="vhs"] h1{
  font-family:var(--vhs-display);font-weight:400;font-size:1.7rem;line-height:1.15;
  letter-spacing:.01em;color:var(--vhs-yellow);text-shadow:3px 3px 0 var(--vhs-ink);
  overflow-wrap:anywhere;
}
:root[data-theme="vhs"] h1::before{
  content:"PLAY ▶  00:00:00";display:block;font-family:var(--vhs-osd);font-size:1.15rem;
  font-weight:400;letter-spacing:.1em;color:#fff;text-shadow:2px 2px 0 var(--vhs-ink);
  margin-bottom:.15rem;
}
:root[data-theme="vhs"] h2,
:root[data-theme="vhs"] h3{
  font-family:var(--vhs-font);font-weight:800;color:var(--vhs-yellow);
  text-transform:uppercase;letter-spacing:.04em;
}
:root[data-theme="vhs"] h2::before{content:"▶ ";font-size:.75em;vertical-align:.1em}
:root[data-theme="vhs"] a{color:var(--vhs-yellow-hi);text-underline-offset:3px;text-decoration-thickness:2px}
:root[data-theme="vhs"] a:hover{color:#fff}
:root[data-theme="vhs"] .meta-line{font-family:var(--vhs-mono);color:var(--text-dim)}

/* ---------- Barre de navigation : enseigne jaune ---------- */
:root[data-theme="vhs"] nav{
  background:var(--vhs-yellow);backdrop-filter:none;
  border-bottom:4px solid var(--vhs-blue);box-shadow:0 4px 0 var(--vhs-ink);
}
/* Rayures d'enseigne le long du bord bas */
:root[data-theme="vhs"] nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:6px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--vhs-blue) 0 14px,var(--vhs-yellow) 14px 28px);
  border-bottom:2px solid var(--vhs-ink);
}
:root[data-theme="vhs"] nav .brand{
  font-family:var(--vhs-display);font-weight:400;font-size:1.1rem;letter-spacing:.01em;
  color:var(--vhs-blue);text-shadow:2px 2px 0 rgba(255,255,255,.7);
}
:root[data-theme="vhs"] nav .brand::after{
  content:"PLAY ▶";font-family:var(--vhs-osd);font-size:1.05rem;font-weight:400;letter-spacing:.08em;
  color:var(--vhs-yellow);background:var(--vhs-case);padding:0 .4rem;margin-left:.3rem;
  text-shadow:none;animation:vhs-blink 1.6s steps(2,jump-none) infinite;
}
:root[data-theme="vhs"] nav a.nav-link{
  color:var(--vhs-blue);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  border:2px solid transparent;border-radius:var(--radius-sm);
}
:root[data-theme="vhs"] nav a.nav-link:hover{background:rgba(11,42,138,.14);color:var(--vhs-blue);border-color:var(--vhs-blue)}
:root[data-theme="vhs"] nav a.nav-link.active{
  color:var(--vhs-yellow);background:var(--vhs-blue);border-color:var(--vhs-ink);box-shadow:var(--vhs-hard-sm);
}
:root[data-theme="vhs"] nav button.btn-ghost{
  background:var(--vhs-blue);color:var(--vhs-yellow);border:2px solid var(--vhs-ink);
  box-shadow:var(--vhs-hard-sm);
}
:root[data-theme="vhs"] nav button.btn-ghost:hover{background:#1a3fb5;color:#fff}
:root[data-theme="vhs"] nav #theme-toggle{font-size:1.05rem;line-height:1;padding:.4rem .7rem}

/* ---------- Panneaux : etiquettes de location a ombre dure ---------- */
:root[data-theme="vhs"] .card,
:root[data-theme="vhs"] details.section,
:root[data-theme="vhs"] .table-wrap,
:root[data-theme="vhs"] table{
  border:2px solid var(--border);box-shadow:var(--vhs-hard);
}
:root[data-theme="vhs"] .table-wrap table{box-shadow:none;border:none}
:root[data-theme="vhs"] .grid a.card:not(.poster-card):hover{
  border-color:var(--vhs-yellow);box-shadow:6px 6px 0 var(--vhs-ink);transform:translate(-2px,-2px);
}
/* En-tete de section : ticket jaune, perfore de chaque cote */
:root[data-theme="vhs"] details.section > summary{
  color:var(--vhs-blue);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  border-radius:6px;
  background:
    radial-gradient(circle at 0 50%,var(--bg-soft) 0 .5rem,transparent .55rem),
    radial-gradient(circle at 100% 50%,var(--bg-soft) 0 .5rem,transparent .55rem),
    var(--vhs-yellow);
}
:root[data-theme="vhs"] details.section > summary:hover{filter:brightness(1.07)}
:root[data-theme="vhs"] details.section[open] > summary{
  border-radius:6px 6px 0 0;border-bottom:2px dashed var(--vhs-blue);
}
:root[data-theme="vhs"] details.section > summary .chevron{color:var(--vhs-blue)}
:root[data-theme="vhs"] details.section > summary .count{
  font-family:var(--vhs-mono);color:var(--vhs-yellow);background:var(--vhs-blue);
  border:2px solid var(--vhs-ink);border-radius:var(--radius-sm);
}
:root[data-theme="vhs"] .chips a:hover .badge{border-color:var(--vhs-yellow)}

/* ---------- Affiches : boitiers de cassette VHS ---------- */
/* Boitier noir, tranche a gauche (texte vertical), etiquette creme dessous.
   La tranche est un ::before, les lignes de tracking un ::after. */
:root[data-theme="vhs"] .poster-card.card{
  --spine:1.15rem;
  background:var(--vhs-cream);color:#14162a;
  border:3px solid var(--vhs-case);border-left-width:0;padding-left:var(--spine);
  border-radius:3px 6px 6px 3px;box-shadow:var(--vhs-hard);
  transition:transform .12s,box-shadow .12s;
}
:root[data-theme="vhs"] .poster-card.card::before{
  content:"NICOFLIX ▶ VIDÉO";position:absolute;left:0;top:0;bottom:0;width:var(--spine);z-index:2;
  display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;
  font-family:var(--vhs-mono);font-size:.62rem;letter-spacing:.14em;white-space:nowrap;
  color:var(--vhs-yellow);pointer-events:none;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,255,255,.14),transparent 30%),
    linear-gradient(var(--vhs-blue) 0 12%,var(--vhs-case) 12%);
  border-right:2px solid #000;
}
:root[data-theme="vhs"] .poster-card.card:hover{
  transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--vhs-ink);
}
:root[data-theme="vhs"] .poster-card .poster-wrap{
  background:var(--vhs-case);border-bottom:3px solid var(--vhs-case);
}
:root[data-theme="vhs"] .poster-card .poster-fallback{color:var(--text-faint)}
/* Etiquette de location : bande creme sous l'affiche, filet pointille */
:root[data-theme="vhs"] .poster-card .card-title{
  flex:1 1 auto;color:#14162a;font-weight:800;line-height:1.25;
}
:root[data-theme="vhs"] .poster-card .card-title::before{
  content:"VIDÉOCLUB ▶";display:block;font-family:var(--vhs-mono);font-size:.6rem;font-weight:400;
  letter-spacing:.12em;color:var(--vhs-blue);border-bottom:2px dashed rgba(11,42,138,.45);
  margin-bottom:.3rem;padding-bottom:.15rem;
}
:root[data-theme="vhs"] .poster-card .card-meta{
  margin-top:0;color:#3a3f66;font-family:var(--vhs-mono);
}
:root[data-theme="vhs"] .poster-card .card-meta .badge{
  color:var(--vhs-blue);background:var(--vhs-yellow);border-color:var(--vhs-blue);
}
:root[data-theme="vhs"] .poster-card .card-actions{padding-top:.1rem}
/* Badges et croix poses sur l'affiche : etiquettes jaunes lisibles sur l'image.
   Le bloc de badges est decale de la largeur de la tranche. */
:root[data-theme="vhs"] .poster-card .overlay{left:calc(var(--spine) + .45rem)}
:root[data-theme="vhs"] .poster-card .overlay .badge{
  background:var(--vhs-yellow);color:var(--vhs-blue);border:2px solid var(--vhs-ink);
  box-shadow:var(--vhs-hard-sm);font-family:var(--vhs-mono);
}
:root[data-theme="vhs"] .poster-card .overlay .badge.s-warn{background:var(--vhs-red);color:#fff}
/* Lignes de tracking au survol : courte rafale sur la zone de l'affiche */
:root[data-theme="vhs"] .poster-card.card::after{
  content:"";position:absolute;top:0;left:var(--spine);right:0;aspect-ratio:2/3;z-index:1;
  pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 2px,transparent 2px 7px),
    linear-gradient(0deg,transparent 40%,rgba(255,255,255,.35) 47%,transparent 54%) 0 0/100% 100%;
}
:root[data-theme="vhs"] .poster-card.card:hover::after{animation:vhs-tracking .45s steps(6) 1}
/* Detail d'un film : l'affiche prend le liseré noir d'un boitier (l'ombre dure
   vient du style en ligne de la page, qui lit --shadow) */
:root[data-theme="vhs"] .holo-frame{align-self:flex-start}
:root[data-theme="vhs"] .holo-art img{border:3px solid var(--vhs-case);border-radius:4px!important}

/* ---------- Champs ---------- */
:root[data-theme="vhs"] label{
  font-family:var(--vhs-mono);font-weight:400;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-dim);
}
:root[data-theme="vhs"] input,
:root[data-theme="vhs"] select,
:root[data-theme="vhs"] textarea{
  background:#050f3d;color:#fff;border:2px solid var(--border);border-radius:var(--radius-sm);
  font-family:var(--vhs-mono);caret-color:var(--vhs-yellow);box-shadow:inset 2px 2px 0 rgba(0,0,0,.35);
}
:root[data-theme="vhs"] input::placeholder{color:#9fb1ee}
:root[data-theme="vhs"] input:focus,
:root[data-theme="vhs"] select:focus,
:root[data-theme="vhs"] textarea:focus{
  border-color:var(--vhs-yellow);box-shadow:0 0 0 3px rgba(255,210,31,.35);
}

/* ---------- Boutons : touches jaunes a ombre dure ---------- */
:root[data-theme="vhs"] button,
:root[data-theme="vhs"] a.btn{
  font-family:var(--vhs-font);font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  background:var(--vhs-yellow);color:var(--vhs-blue);border:2px solid var(--vhs-ink);
  border-radius:var(--radius-sm);box-shadow:var(--vhs-hard-sm);
  transition:transform .08s,box-shadow .08s,background .1s;
}
:root[data-theme="vhs"] button:hover,
:root[data-theme="vhs"] a.btn:hover{background:var(--vhs-yellow-hi);color:var(--vhs-blue);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--vhs-ink)}
:root[data-theme="vhs"] button:active,
:root[data-theme="vhs"] a.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--vhs-ink)}
:root[data-theme="vhs"] button.btn-ghost{
  background:transparent;color:var(--text);border-color:var(--border);box-shadow:none;
}
:root[data-theme="vhs"] button.btn-ghost:hover{background:var(--surface-hover);color:#fff;border-color:var(--vhs-yellow);box-shadow:none}
:root[data-theme="vhs"] button.btn-danger,
:root[data-theme="vhs"] button.btn-remove{
  background:var(--vhs-red);color:#fff;border-color:var(--vhs-ink);
}
:root[data-theme="vhs"] button.btn-danger:hover,
:root[data-theme="vhs"] button.btn-remove:hover{background:#e0223f;color:#fff}
:root[data-theme="vhs"] .poster-card button.btn-remove{background:var(--vhs-red);border-radius:var(--radius-sm);z-index:3;position:relative}
:root[data-theme="vhs"] button.btn-mini{background:transparent;border:none;box-shadow:none;color:var(--text-dim);transform:none}
:root[data-theme="vhs"] button.btn-mini:hover{background:transparent;color:var(--danger);box-shadow:none;transform:none}
:root[data-theme="vhs"] button:disabled,
:root[data-theme="vhs"] button:disabled:hover{
  background:#1a2c7a;color:#9fb1ee;border:2px dashed var(--border);box-shadow:none;transform:none;
}
/* Interrupteur : glissiere de magnetoscope, jaune quand actif */
:root[data-theme="vhs"] button.switch-toggle,
:root[data-theme="vhs"] button.switch-toggle:hover{
  background:transparent;border:none;box-shadow:none;transform:none;color:var(--text);
  text-transform:none;letter-spacing:0;
}
:root[data-theme="vhs"] .switch-track{border-radius:var(--radius-sm);background:#050f3d;border:2px solid var(--border)}
:root[data-theme="vhs"] .switch-thumb{border-radius:2px;background:var(--text-faint)}
:root[data-theme="vhs"] button.switch-toggle[aria-checked="true"] .switch-track{background:var(--vhs-yellow);border-color:var(--vhs-ink)}
:root[data-theme="vhs"] button.switch-toggle[aria-checked="true"] .switch-thumb{background:var(--vhs-blue)}
:root[data-theme="vhs"] button.switch-toggle:focus-visible,
:root[data-theme="vhs"] button:focus-visible,
:root[data-theme="vhs"] a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:var(--radius-sm)}

/* ---------- Badges : pastilles autocollantes ---------- */
:root[data-theme="vhs"] .badge{
  border-radius:3px;font-family:var(--vhs-mono);font-weight:400;letter-spacing:.06em;
  border:2px solid var(--vhs-ink);background:var(--vhs-cream);color:#14162a;
}
:root[data-theme="vhs"] .badge::before{border-radius:0}
:root[data-theme="vhs"] .s-searching,
:root[data-theme="vhs"] .s-warn{background:var(--vhs-yellow);color:var(--vhs-blue);border-color:var(--vhs-ink)}
:root[data-theme="vhs"] .s-downloading,
:root[data-theme="vhs"] .s-info{background:#8fb0ff;color:#041455;border-color:var(--vhs-ink)}
:root[data-theme="vhs"] .s-validating,
:root[data-theme="vhs"] .s-waiting_release{background:#c9b0ff;color:#1e0a4a;border-color:var(--vhs-ink)}
:root[data-theme="vhs"] .s-completed{background:#4ee39a;color:#03230f;border-color:var(--vhs-ink)}
:root[data-theme="vhs"] .s-failed,
:root[data-theme="vhs"] .s-error{background:#ff6b7a;color:#2a0006;border-color:var(--vhs-ink)}
:root[data-theme="vhs"] .s-needs_review,
:root[data-theme="vhs"] .s-waiting_space,
:root[data-theme="vhs"] .s-waiting_approval{background:#ff9a2a;color:#2a1200;border-color:var(--vhs-ink)}
:root[data-theme="vhs"] .s-duplicate_rejected{background:#3a4fa8;color:#e6ebff;border-color:var(--vhs-ink)}
:root[data-theme="vhs"] .s-searching::before,
:root[data-theme="vhs"] .s-downloading::before,
:root[data-theme="vhs"] .s-validating::before{animation:vhs-blink 1s steps(2,jump-none) infinite}
:root[data-theme="vhs"] .chips .badge{border-radius:3px}
:root[data-theme="vhs"] .id-num{font-family:var(--vhs-mono);color:var(--text-dim)}

/* ---------- Tableaux : registre de location ---------- */
:root[data-theme="vhs"] th{
  font-family:var(--vhs-font);font-weight:800;letter-spacing:.06em;color:var(--vhs-blue);
  background:var(--vhs-yellow);border-bottom:2px solid var(--vhs-ink);
}
:root[data-theme="vhs"] td{border-bottom:1px dashed var(--border-soft)}
:root[data-theme="vhs"] tbody tr:nth-child(even){background:rgba(255,255,255,.035)}
:root[data-theme="vhs"] tbody tr:hover{background:rgba(255,210,31,.09)}
:root[data-theme="vhs"] tr.row-link:hover{background:rgba(255,210,31,.16);box-shadow:inset 4px 0 0 var(--vhs-yellow)}
:root[data-theme="vhs"] td small,
:root[data-theme="vhs"] table code,
:root[data-theme="vhs"] time{font-family:var(--vhs-mono)}
:root[data-theme="vhs"] td small{color:var(--text-dim)}

/* ---------- Alertes, journal, etats vides ---------- */
/* Alerte : ticket creme a bande rouge, texte sombre pour rester lisible */
:root[data-theme="vhs"] .warn{
  background:var(--vhs-cream);color:#14162a;border:2px dashed var(--vhs-red);
  border-left:10px solid var(--vhs-red);border-radius:var(--radius-sm);box-shadow:var(--vhs-hard);
}
:root[data-theme="vhs"] .warn strong{color:#9c0a22;text-transform:uppercase;letter-spacing:.04em}
:root[data-theme="vhs"] .warn a{color:var(--vhs-blue)}
:root[data-theme="vhs"] .journal li{
  border-radius:var(--radius-sm);border-left-width:5px;box-shadow:var(--vhs-hard-sm);
}
:root[data-theme="vhs"] .journal .msg{color:var(--text)}
:root[data-theme="vhs"] .journal time{font-family:var(--vhs-mono);color:var(--text-dim)}
/* Etat vide : ecran bleu de magnetoscope sans cassette */
:root[data-theme="vhs"] .empty-state{
  font-family:var(--vhs-osd);font-size:1.3rem;letter-spacing:.06em;color:#fff;
  background:var(--vhs-screen);border:3px solid var(--vhs-ink);box-shadow:var(--vhs-hard);
  text-shadow:2px 2px 0 rgba(0,0,0,.4);
}
:root[data-theme="vhs"] .empty-state::before{content:"■ PAS DE CASSETTE ■";display:block;margin-bottom:.3rem;color:var(--vhs-yellow)}

/* ---------- Indicateur de recherche : « PLAY ▶ » ---------- */
:root[data-theme="vhs"] .search-loading::before{
  content:"PLAY ▶  RECHERCHE EN COURS…";grid-column:1/-1;font-family:var(--vhs-osd);
  font-size:1.5rem;letter-spacing:.08em;color:#fff;text-shadow:2px 2px 0 var(--vhs-ink);
  animation:vhs-blink 1.2s steps(2,jump-none) infinite;
}
:root[data-theme="vhs"] .skeleton{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 6px),
    linear-gradient(100deg,var(--surface-2) 30%,var(--surface-hover) 50%,var(--surface-2) 70%);
  background-size:100% 100%,250% 100%;animation:skeleton-shimmer 1.3s linear infinite;
}
:root[data-theme="vhs"] .search-bar.is-loading button::before{
  content:"▶";width:auto;height:auto;border:none;border-radius:0;margin-right:.4em;vertical-align:baseline;
  animation:vhs-blink .8s steps(2,jump-none) infinite;
}

/* ---------- Menu de choix du theme : ticket creme ---------- */
:root[data-theme="vhs"] #theme-menu{
  background:var(--vhs-cream);border:3px solid var(--vhs-ink);border-radius:var(--radius-sm);
  box-shadow:5px 5px 0 var(--vhs-ink);
}
:root[data-theme="vhs"] #theme-menu button{
  background:transparent;color:#14162a;border:2px solid transparent;box-shadow:none;
  font-weight:700;text-transform:none;letter-spacing:0;transform:none;
}
:root[data-theme="vhs"] #theme-menu button:hover{background:rgba(11,42,138,.14);color:#14162a;box-shadow:none;transform:none}
:root[data-theme="vhs"] #theme-menu button[aria-checked="true"]{
  background:var(--vhs-blue);color:var(--vhs-yellow);border-color:var(--vhs-ink);
}

@keyframes vhs-blink{0%,100%{opacity:1}50%{opacity:.25}}
/* Tracking : la bande claire balaie l'affiche de bas en haut et s'efface */
@keyframes vhs-tracking{
  0%{opacity:.85;background-position:0 0,0 100%}
  60%{opacity:.6;background-position:0 -3px,0 -40%}
  100%{opacity:0;background-position:0 -6px,0 -100%}
}
@media (prefers-reduced-motion:reduce){
  :root[data-theme="vhs"] nav .brand::after,
  :root[data-theme="vhs"] .search-loading::before,
  :root[data-theme="vhs"] .s-searching::before,
  :root[data-theme="vhs"] .s-downloading::before,
  :root[data-theme="vhs"] .s-validating::before,
  :root[data-theme="vhs"] .search-bar.is-loading button::before,
  :root[data-theme="vhs"] .skeleton,
  :root[data-theme="vhs"] .poster-card.card:hover::after{animation:none!important}
  :root[data-theme="vhs"] .poster-card.card:hover::after{opacity:0}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  :root[data-theme="vhs"] h1{font-size:1.35rem}
  :root[data-theme="vhs"] nav .brand::after{display:none}
  :root[data-theme="vhs"] .poster-card.card{--spine:.95rem}
  :root[data-theme="vhs"] .poster-card.card::before{font-size:.55rem}
  :root[data-theme="vhs"] nav::after{height:5px;bottom:-9px}
  :root[data-theme="vhs"] nav{row-gap:.35rem}
  :root[data-theme="vhs"] nav a.nav-link{font-size:.8rem;letter-spacing:0;padding:.45rem .5rem}
}