@font-face {
  font-family: "Bebas Neue";
  src: url("bebas-neue.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* SOMEDAY — habillage commun des pages annexes (en-tête du nouveau design) */
.header {
  height: 90px; display: flex; justify-content: space-between; align-items: center;
  padding: 0 6%; position: absolute; inset: 0 0 auto 0; z-index: 200;
  border-bottom: 1px solid rgba(255,255,255,.15);
  font-family: Arial, Helvetica, sans-serif;
}
.header.static { position: relative; background: #0f0c08; }
.header .logo {
  color: #e8e0d0; text-decoration: none; font-size: 30px; font-weight: 900; letter-spacing: 2px; line-height: 1;
  text-shadow: 2px 0 rgba(255,0,80,.18), -2px 0 rgba(0,220,255,.18);
}
.header .logo span { display: block; margin-top: 6px; font: 8px/1.2 monospace; letter-spacing: 2px; }
.header .nav { display: flex; align-items: center; gap: 36px; }
.header .nav a {
  color: #e8e0d0; text-decoration: none; text-transform: uppercase;
  font: 13px/1 Arial, Helvetica, sans-serif; letter-spacing: 1px; transition: opacity .2s ease;
}
.header .nav a:hover { opacity: .6; }
.header .nav a.accent, .header .nav a[aria-current] { color: #c0704a; }
h1 { letter-spacing: -0.02em !important; }
@media (max-width: 900px) { .header .nav { gap: 22px; } .header .nav .opt { display: none; } }
@media (max-width: 700px) {
  .header { height: 70px; padding: 0 25px; }
  .header .logo { font-size: 22px; }
  .header .logo span { display: none; }
  .header .nav { gap: 15px; }
  .header .nav a { font-size: 10px; }
}
/* neutralise les anciens sélecteurs génériques "nav" */
.header .nav { position: static; inset: auto; background: none; padding: 0; border: 0; width: auto; height: auto; justify-content: flex-end; }
.header .nav a { border: 0; padding: 0; background: none; }
/* l'ancien sélecteur "nav" collait aussi le menu du pied de page en haut de l'écran */
footer nav, .footer-nav { position: static !important; inset: auto !important; background: none !important; }

/* ===== v5 — en-tête figé, marque SOMEDAY, signature ===== */
.header {
  position: fixed !important; inset: 0 0 auto 0; z-index: 200;
  height: 76px; gap: 24px;
  background: rgba(15,12,8,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.header.static { position: sticky !important; top: 0; }
.header .logo {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: 38px; line-height: .9; letter-spacing: 3px;
  text-shadow: 3px 0 rgba(255,0,80,.35), -3px 0 rgba(0,220,255,.35);
}
.header .logo span { margin-top: 4px; text-shadow: none; color: rgba(232,224,208,.66); font-family: monospace; }
.header .nav { gap: 30px; }
.header .nav a[aria-current] { color: #e8e0d0; opacity: 1; box-shadow: 0 2px 0 #c0704a; padding-bottom: 4px; }
.header .search { font-size: 22px !important; padding-left: 22px !important; border-left: 1px solid rgba(255,255,255,.4) !important; }
.foot-id { display: flex; flex-direction: column; gap: 8px; }
.footer-logo {
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif !important; font-weight: 400 !important;
  font-size: 26px !important; letter-spacing: 2px !important; color: #e8e0d0 !important; text-decoration: none;
  text-shadow: 2px 0 rgba(255,0,80,.35), -2px 0 rgba(0,220,255,.35);
}
.signature-prod { margin: 0; font: 11px/1.6 monospace; letter-spacing: .5px; color: rgba(232,224,208,.66); text-transform: none; }
.signature-prod a { color: #e8e0d0; text-underline-offset: 3px; }
[id] { scroll-margin-top: 96px; }
@media (max-width: 900px) { .header .nav { gap: 20px; } }
@media (max-width: 700px) {
  .header { height: auto !important; flex-direction: column; align-items: stretch !important; gap: 6px; padding: 10px 18px 8px !important; }
  .header .logo { font-size: 28px; letter-spacing: 2px; text-align: center; }
  .header .logo span, .header .search { display: none; }
  .header .nav { gap: 0; justify-content: space-between; }
  .header .nav a { font-size: 10px; letter-spacing: 1px; }
}
/* hiérarchie : les titres de pages restent sous la marque */
body > main h1, body > section h1, .hero h1 { font-size: clamp(36px, 5.5vw, 76px) !important; line-height: 1 !important; }

/* ===== v6 — ergonomie mobile & accessibilité ===== */
/* les ancres (#films, #q…) ne se cachent plus sous l'en-tête fixe */
html { scroll-padding-top: 96px; }
/* focus clavier bien visible (2px, couleur de la marque) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, video:focus-visible, audio:focus-visible {
  outline: 2px solid #c0704a; outline-offset: 3px;
}
/* zone de clic du menu élargie sans changer l'apparence */
.nav a, .header .nav a { position: relative; }
.nav a::after, .header .nav a::after { content: ""; position: absolute; inset: -16px 0; }
/* « Séries TV » reste accessible partout, y compris sur mobile */
.nav .opt, .header .nav .opt { display: inline; }
@media (max-width: 700px) {
  .nav a, .header .nav a { font-size: 11px; letter-spacing: .5px; white-space: nowrap; }
  .nav, .header .nav { justify-content: space-between; }
}
@media (max-width: 360px) {
  .nav a, .header .nav a { font-size: 10px; letter-spacing: 0; }
}

/* nav-6 : six entrées de menu sur téléphone (comme vhs-fx.css, pour les pages qui ne le chargent pas, ex. podcast) */
@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; } }