/* Charte GE Vernova, comme les autres sites du serveur. */
:root {
  --evergreen: #005E60;
  --evergreen-fonce: #00494B;
  --accent: #C8FF08;
  --nuit: #212121;
  --blanc-chaud: #FAFAF7;
  --surface: #FFFFFF;
  --filet: #E2E2DD;
  --encre-2: #55554F;
  --r: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blanc-chaud: #14201F;
    --surface: #1B2A29;
    --filet: #2C3B3A;
    --nuit: #FAFAF7;
    --encre-2: #A9B8B6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
  color: var(--nuit);
  background: var(--blanc-chaud);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  background: var(--evergreen);
  color: #FFF;
}
.bar h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.bar input, .bar select {
  font: inherit; height: 40px; padding: 0 12px;
  border: none; border-radius: var(--r);
  background: rgba(255,255,255,.14); color: #FFF;
}
.bar input::placeholder { color: rgba(255,255,255,.7); }
.bar input { flex: 1; min-width: 160px; }
.bar input:focus, .bar select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.bar select option { color: var(--nuit); }
.compte { margin-left: auto; font-size: 13px; opacity: .85; white-space: nowrap; }

/* `auto-fill` avec un minimum de 150 px : quatre colonnes sur un iPhone,
   davantage sur un écran large, sans point de rupture à maintenir. */
.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 14px;
  padding: 18px 16px 40px;
  max-width: 1500px; margin: 0 auto;
}
.film { cursor: pointer; border: 0; padding: 0; background: none; text-align: left; font: inherit; color: inherit; }
.film img, .film .sans {
  display: block; width: 100%; aspect-ratio: 2 / 3;
  object-fit: cover; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--filet);
}
.film .sans {
  display: grid; place-items: center; padding: 10px;
  font-size: 12px; text-align: center; color: var(--encre-2);
}
.film:hover img { outline: 2px solid var(--accent); outline-offset: 2px; }
.film h2 { margin: 7px 0 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.film p { margin: 1px 0 0; font-size: 12px; color: var(--encre-2); }

.vide { text-align: center; color: var(--encre-2); padding: 40px 16px; }
.pied { text-align: center; font-size: 12px; color: var(--encre-2); padding: 0 16px 28px; }

.fiche {
  border: none; border-radius: 14px; padding: 0;
  max-width: 640px; width: calc(100% - 32px);
  background: var(--surface); color: var(--nuit);
}
.fiche::backdrop { background: rgba(0,0,0,.55); }
.fiche-corps { display: flex; gap: 18px; padding: 20px; }
.fiche img { width: 150px; flex-shrink: 0; border-radius: var(--r); }
.fiche h2 { margin: 0 0 6px; font-size: 19px; line-height: 1.25; }
.meta { margin: 0 0 10px; font-size: 13px; color: var(--encre-2); }
.fermer {
  position: absolute; top: 8px; right: 10px;
  border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--encre-2); cursor: pointer; padding: 4px 8px;
}
@media (max-width: 560px) {
  .fiche-corps { flex-direction: column; }
  .fiche img { width: 120px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px 10px; }
  .compte { margin-left: 0; }
}

/* ── Onglets Films / Séries ──────────────────────────────────────────── */
.onglets { display: flex; gap: 4px; background: rgba(255,255,255,.12); padding: 3px; border-radius: var(--r); }
.onglet {
  font: inherit; font-size: 13.5px; font-weight: 600;
  height: 34px; padding: 0 16px;
  border: 0; border-radius: 8px;
  background: transparent; color: rgba(255,255,255,.85);
  cursor: pointer;
}
.onglet.actif { background: var(--accent); color: var(--nuit); }
.onglet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .bar h1 { font-size: 16px; }
  .onglets { order: 3; width: 100%; }
  .onglet { flex: 1; }
}