/* =========================================================
   SOMEDAY — effets VHS (remplace vhs-hero.css)
   S'ajoute APRÈS la feuille de style de chaque page.
   1. Hero animée + rotation des films   (accueil uniquement : .hero.vhs-home)
   2. Rembobinage entre les pages         (toutes les pages)
   3. Barre de cassette + OSD au scroll   (toutes les pages)
   Tout est coupé si le visiteur demande moins de mouvement.
   ========================================================= */

/* ---------- 1. HERO (accueil) ---------- */
.hero.vhs-home { isolation: isolate; --vd: 0s; --hero-img: none; }
.hero.vhs-home.vhs-boot { --vd: .95s; }
html.rw-in .hero.vhs-home { --vd: .5s; }

/* l'image dérive lentement */
.vhs-home .hero-overlay::after {
  content: "";
  position: absolute; inset: -3%; z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(8,8,8,.97) 0%, rgba(8,8,8,.72) 40%, rgba(8,8,8,.22) 75%),
    var(--hero-img);
  background-size: cover; background-position: var(--hero-pos, center);
  transform-origin: 60% 50%;
  animation: vhsDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes vhsDrift {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.6%, -1.2%, 0); }
}
@media (max-width: 700px) {
  .vhs-home .hero-overlay::after {
    background-position: var(--hero-pos, 65% center);
    background-image:
      linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.62) 45%, rgba(8,8,8,.9) 100%),
      var(--hero-img);
    transform-origin: 50% 40%;
    animation-name: vhsDriftM;
  }
}
@keyframes vhsDriftM { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.05) translate3d(-.6%,-.6%,0); } }

/* calque d'effets injecté par vhs-fx.js */
.vhs-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.vhs-fx > i { position: absolute; display: block; }

.vhs-fx .g { /* grain de bande */
  inset: -12%; opacity: .13; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 -.15'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: vhsGrain .6s steps(1) infinite;
}
@keyframes vhsGrain {
  0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); }
  60% { transform: translate(-6%,-2%); } 80% { transform: translate(5%,4%); }
}

.vhs-fx .t { /* bande de tracking */
  left: 0; right: 0; top: 0; height: 90px; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.05) 35%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.05) 65%, transparent);
  opacity: 0; transform: translateY(110vh);
  animation: vhsTrack 9s linear 2.5s infinite;
}
.vhs-fx .t::after {
  content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 3px;
  background: linear-gradient(90deg, rgba(255,0,80,.55), rgba(255,255,255,.5), rgba(0,220,255,.55));
  animation: vhsTear .18s steps(2) infinite;
}
@keyframes vhsTrack {
  0%, 84% { opacity: 0; transform: translateY(105%); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-130%); }
}
@keyframes vhsTear { 50% { transform: translateX(14px); } }

.vhs-fx::before { /* commutation des têtes, en bas */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; opacity: .55;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), rgba(255,0,80,.25), rgba(0,220,255,.25), transparent);
  background-size: 300% 100%;
  animation: vhsHead 1.1s steps(7) infinite;
}
@keyframes vhsHead { to { background-position: 300% 0; } }

.vhs-fx .b { /* insertion de la cassette */
  inset: 0; background: #0a1166; animation: vhsBoot 1.7s steps(1, end) forwards;
}
.vhs-fx .b::before {
  content: "▶ PLAY"; position: absolute; left: 6%; top: 118px;
  font: 20px/1 monospace; letter-spacing: 3px; color: #e8e0d0;
  text-shadow: 2px 0 rgba(255,0,80,.5), -2px 0 rgba(0,220,255,.5);
}
.vhs-fx .b::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 7px, rgba(0,0,0,.35) 7px 9px, transparent 9px 18px);
  animation: vhsBars .12s steps(2) infinite;
}
@keyframes vhsBars { 50% { transform: translateY(9px); } }
@keyframes vhsBoot { 0%, 36% { opacity: 1; } 40% { opacity: 0; } 44% { opacity: .85; } 50% { opacity: 0; } 55% { opacity: .5; } 62% { opacity: .12; } 100% { opacity: 0; } }

/* coupure entre deux films (rotation de la hero) */
.vhs-fx .c { inset: 0; opacity: 0; mix-blend-mode: screen; }
.vhs-fx .c::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.55) 0 1px, rgba(0,0,0,.5) 1px 3px, rgba(255,255,255,.18) 3px 6px, rgba(0,0,0,.4) 6px 8px);
}
.vhs-fx .c::after {
  content: ""; position: absolute; left: 0; right: 0; top: 38%; height: 26%;
  background: linear-gradient(90deg, rgba(255,0,80,.55), rgba(255,255,255,.35), rgba(0,220,255,.55));
  filter: blur(1px);
}
.vhs-fx.cut .c { animation: vhsCut .5s steps(1) 1; }
@keyframes vhsCut {
  0% { opacity: 0; } 8% { opacity: .95; transform: translateY(0); } 22% { opacity: .35; transform: translateY(14px); }
  36% { opacity: .85; transform: translateY(-9px); } 56% { opacity: .25; } 78% { opacity: .1; } 100% { opacity: 0; }
}

/* repères de la rotation (en bas à gauche) */
.vhs-ctl { position: absolute; left: 6%; bottom: 20px; z-index: 5; display: flex; align-items: center; gap: 14px; }
.vhs-btn { appearance: none; background: none; border: 1px solid rgba(232,224,208,.22); color: rgba(232,224,208,.7); font: 11px/1 monospace; letter-spacing: 2px; padding: 9px 12px; min-height: 34px; cursor: pointer; text-shadow: 1px 0 rgba(255,0,80,.4), -1px 0 rgba(0,220,255,.4); transition: color .2s, border-color .2s, background .2s; }
.rail-ctl { display: flex; gap: 10px; }
.rail-ctl[hidden] { display: none; }
.vhs-btn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.vhs-btn:hover { color: #e8e0d0; border-color: #c0704a; background: rgba(192,112,74,.14); }
.vhs-btn:active { background: rgba(192,112,74,.3); }
.vhs-btn:focus-visible { outline: 2px solid #c0704a; outline-offset: 2px; }
.vhs-dots { display: flex; gap: 6px; pointer-events: none; }
.vhs-dots i { width: 22px; height: 3px; background: rgba(232,224,208,.22); transition: background .3s; }
.vhs-dots i.on { background: #c0704a; box-shadow: 0 0 6px rgba(192,112,74,.7); }
.vhs-dots i[hidden] { display: none; }
@media (max-width: 700px) { .vhs-ctl { left: 25px; bottom: 10px; gap: 8px; } .vhs-btn { padding: 9px 9px; min-height: 36px; } .vhs-ctl .vhs-btn span { display: none; } .vhs-dots i { width: 14px; } }

/* logo : arrivée + glitch périodique */
.vhs-home .brand {
  animation:
    vhsBrandIn 1.1s cubic-bezier(.2,.7,.2,1) var(--vd) both,
    vhsGlitch 8s steps(1) calc(var(--vd) + 3s) infinite;
}
@keyframes vhsBrandIn {
  0%   { opacity: 0; filter: blur(8px); text-shadow: 26px 0 rgba(255,0,80,.8), -26px 0 rgba(0,220,255,.8); }
  55%  { opacity: 1; filter: blur(1px); }
  100% { opacity: 1; filter: none; text-shadow: 5px 0 rgba(255,0,80,.35), -5px 0 rgba(0,220,255,.35); }
}
@keyframes vhsGlitch {
  0%, 91%, 100% { transform: none; clip-path: none; text-shadow: 5px 0 rgba(255,0,80,.35), -5px 0 rgba(0,220,255,.35); }
  92% { transform: translateX(-7px) skewX(-4deg); text-shadow: 14px 0 rgba(255,0,80,.75), -14px 0 rgba(0,220,255,.75); }
  94% { transform: translateX(8px); clip-path: inset(0 0 55% 0); text-shadow: -10px 0 rgba(255,0,80,.65), 10px 0 rgba(0,220,255,.65); }
  96% { transform: translateX(-3px) skewX(2deg); clip-path: inset(42% 0 0 0); text-shadow: 9px 0 rgba(255,0,80,.6), -9px 0 rgba(0,220,255,.6); }
  98% { transform: translateX(2px); clip-path: none; }
}

/* entrée échelonnée du texte */
.vhs-home .hero-content > *:not(.brand) { animation: vhsUp .8s cubic-bezier(.2,.7,.2,1) both; }
.vhs-home .hero-content > .play { animation-delay: calc(var(--vd) + .05s); }
.vhs-home .hero-content > h1 { animation-delay: calc(var(--vd) + .45s); }
.vhs-home .hero-content > .hero-lead { animation-delay: calc(var(--vd) + .6s); }
.vhs-home .hero-content > .genres { animation-delay: calc(var(--vd) + .75s); }
.vhs-home .hero-content > .hero-actions { animation-delay: calc(var(--vd) + .9s); }
.vhs-home .hero-content > .now { animation-delay: calc(var(--vd) + 1.05s); }
@keyframes vhsUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* compteur de bande + horodatage */
.vhs-home .play.has-tc { animation: none; display: flex; align-items: baseline; gap: 18px; }
.vhs-home .play .pl { animation: blink 1.6s steps(2, start) infinite; }
.vhs-home .play .tc { font-variant-numeric: tabular-nums; color: rgba(232,224,208,.6); letter-spacing: 2px; }
.vhs-home .timestamp { animation: vhsFlick 5s steps(1) infinite; }
@keyframes vhsFlick { 0%, 100% { opacity: 1; } 47% { opacity: .55; } 49% { opacity: 1; } 71% { opacity: .75; } }

/* apparitions au scroll (accueil) */
.rv {
  opacity: 0; translate: 0 26px;
  transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1), border-color .2s, transform .2s, background .25s;
  transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s, 0s;
}
.rv.in { opacity: 1; translate: 0 0; }

/* survol d'une cassette */
.tape:hover .tape-img img { animation: vhsHover .35s steps(3) 1; }
@keyframes vhsHover { 0% { filter: drop-shadow(4px 0 rgba(255,0,80,.55)) drop-shadow(-4px 0 rgba(0,220,255,.55)); } 100% { filter: none; } }

/* pause hors écran */
.vhs-off .vhs-fx *, .vhs-off .vhs-fx::before, .vhs-off .hero-overlay::after, .vhs-off .brand, .vhs-off .timestamp { animation-play-state: paused !important; }

/* ---------- 2. REMBOBINAGE ENTRE LES PAGES ---------- */
.rw {
  position: fixed; inset: 0; z-index: 9999; display: none; pointer-events: all; overflow: hidden;
  background: #07070c; color: #e8e0d0;
}
.rw.on { display: block; animation: rwIn .14s steps(2) both; }
@keyframes rwIn { from { opacity: 0; } to { opacity: 1; } }
.rw::before { /* bandes qui défilent vite vers le haut */
  content: ""; position: absolute; inset: -20% 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.0) 0 22px, rgba(255,255,255,.22) 22px 26px, rgba(255,255,255,0) 26px 61px, rgba(255,0,80,.22) 61px 64px, rgba(0,220,255,.2) 64px 67px, rgba(255,255,255,0) 67px 120px);
  animation: rwRoll .16s linear infinite;
}
@keyframes rwRoll { to { transform: translateY(120px); } }
.rw::after { /* grain */
  content: ""; position: absolute; inset: -10%; opacity: .22; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 -.15'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: vhsGrain .3s steps(1) infinite;
}
.rw .rwt, .rw .rwc {
  position: absolute; left: 6%; z-index: 2; font: 22px/1 monospace; letter-spacing: 3px;
  text-shadow: 2px 0 rgba(255,0,80,.6), -2px 0 rgba(0,220,255,.6);
}
.rw .rwt { top: 110px; }
.rw .rwc { top: 146px; font-size: 16px; color: rgba(232,224,208,.7); font-variant-numeric: tabular-nums; }

/* arrivée sur la page suivante : écran bleu « PLAY ▶ » (classe posée par un mini-script du <head>) */
html.rw-in::before {
  content: "▶ PLAY"; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  padding: 110px 6% 0; font: 22px/1 monospace; letter-spacing: 3px; color: #e8e0d0;
  text-shadow: 2px 0 rgba(255,0,80,.6), -2px 0 rgba(0,220,255,.6);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 2px, transparent 2px 7px, rgba(0,0,0,.3) 7px 9px, transparent 9px 18px),
    #0a1166;
  animation: rwArrive .7s steps(1, end) forwards;
}
@keyframes rwArrive { 0%, 40% { opacity: 1; } 46% { opacity: 0; } 52% { opacity: .8; } 60% { opacity: .2; } 70% { opacity: .5; } 100% { opacity: 0; visibility: hidden; } }

/* ---------- 3. BARRE DE CASSETTE + OSD ---------- */
.tape-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; z-index: 5; }
.tape-bar i {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, #7a3f24, #c0704a);
  box-shadow: 0 0 8px rgba(192,112,74,.6);
}
.tape-bar::after { /* tête de lecture */
  content: ""; position: absolute; top: -3px; left: calc(var(--p, 0) * 100%); width: 9px; height: 9px; margin-left: -4px; border-radius: 50%;
  background: #e8e0d0; opacity: var(--po, 0);
  box-shadow: 2px 0 6px rgba(255,0,80,.7), -2px 0 6px rgba(0,220,255,.7);
}
.tape-osd {
  position: fixed; right: 6%; top: 92px; z-index: 150; pointer-events: none;
  font: 16px/1 monospace; letter-spacing: 2px; color: #e8e0d0; font-variant-numeric: tabular-nums;
  text-shadow: 2px 0 rgba(255,0,80,.5), -2px 0 rgba(0,220,255,.5);
  opacity: 0; transition: opacity .25s;
}
.tape-osd.show { opacity: .9; }
@media (max-width: 700px) { .tape-osd { right: 18px; top: 98px; font-size: 13px; } }

/* ---------- accessibilité : moins de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  .vhs-fx, .rw { display: none !important; }
  html.rw-in::before { display: none !important; }
  .vhs-home .hero-overlay::after, .vhs-home .brand, .vhs-home .hero-content > *, .vhs-home .timestamp, .tape:hover .tape-img img { animation: none !important; }
  .vhs-home .play .pl { animation: none !important; }
  .rv { opacity: 1 !important; translate: none !important; transition: none !important; }
  .tape-osd { display: none !important; }
}

/* nav-6 : six entrées de menu sur téléphone (Classiques ajouté) */
@media (max-width: 700px) {
  .header .nav { gap: 6px; justify-content: space-between; }
  .header .nav a { font-size: 10px; letter-spacing: 0; white-space: nowrap; }
}
@media (max-width: 380px) {
  .header .nav { gap: 4px; }
  .header .nav a { font-size: 9px; }
}
@media (max-width: 340px) {
  .header .nav { flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
  .header .nav a { font-size: 10px; }
}