:root {
  --bg: #0f1d2a;
  --bg-soft: #14283a;
  --card: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.2);
  --text: #eaf4ff;
  --muted: #9fc2d9;
  --accent: #f2b705;
  --accent-alt: #ff6b35;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Space Grotesk", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 20%, rgba(242, 183, 5, 0.35) 0, transparent 35%),
    radial-gradient(circle at 90% 0%, rgba(255, 107, 53, 0.3) 0, transparent 30%),
    linear-gradient(130deg, #07121c 0%, #0f1d2a 45%, #173147 100%);
  padding: 20px;
}

.siteFooter {
  max-width: 1100px;
  margin: 24px auto 0;
  padding: 16px 20px 4px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.siteFooter a {
  color: var(--muted);
  text-decoration: none;
}

.siteFooter a:hover {
  text-decoration: underline;
}

.footerSep {
  margin: 0 8px;
  opacity: 0.6;
}

.legalPage h2 {
  margin-top: 28px;
}

.legalPage p,
.legalPage li {
  color: var(--text);
  line-height: 1.6;
}

.legalPage ul {
  padding-left: 20px;
}

.layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  padding: 18px;
  animation: rise 0.45s ease;
}

/* backdrop-filter cree un contexte d'empilement par carte : une infobulle
   (badgeDetails, synopsisDetails...) ouverte dans une carte ne peut pas
   passer au-dessus d'une carte suivante par simple z-index interne, car
   cette derniere carte peint entierement par-dessus la precedente. On eleve
   explicitement la carte qui contient l'infobulle ouverte. */
.card:has(details[open]) {
  position: relative;
  z-index: 5;
}

.eyebrow {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

h1,
h2 {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.03em;
  margin: 6px 0;
}

h1 {
  font-size: clamp(2rem, 6vw, 3.6rem);
}

.subtitle {
  color: var(--muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--accent);
  color: #18212d;
  font-weight: 700;
  cursor: pointer;
}

.linkButton {
  display: inline-block;
  border-radius: 10px;
  padding: 10px 14px;
  background: #2ec4b6;
  color: #10212f;
  font-weight: 700;
  text-decoration: none;
}

.liveButton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e63946;
  color: #ffffff;
}

.liveDot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  animation: livePulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

button.secondary {
  background: var(--accent-alt);
  color: #ffffff;
}

button.successButton {
  background: #2ec4b6;
  color: #0f2c2a;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.label {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

strong {
  display: block;
  margin-top: 2px;
  font-size: 1.05rem;
}

form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

input {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 8px;
  border-radius: 8px;
  width: 100px;
}

select {
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: white;
  padding: 8px;
  border-radius: 8px;
}

select option {
  background: #0f1d2a;
  color: white;
}

.importProgressWrap {
  margin: 8px 0 16px;
}

.importProgressTrack {
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.importProgressBar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-alt));
  border-radius: 999px;
  transition: width 0.5s ease;
}

.goalProgressBar {
  background: linear-gradient(90deg, #2ec4b6, #f2b705);
}

.importProgressLabel {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 4px 0 0;
  text-align: right;
}

.cronControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0 14px;
}

#cronExpression {
  width: 140px;
}

.tableWrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.movieGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.movieCard {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  position: relative;
}

.moviePosterWrap {
  aspect-ratio: 2 / 3;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.moviePosterWrap a {
  display: block;
  width: 100%;
  height: 100%;
}

.movieTitle a,
.tableWrap a,
.movieMeta a {
  color: inherit;
  text-decoration: none;
}

.movieTitle a:hover,
.tableWrap a:hover,
.movieMeta a:hover {
  text-decoration: underline;
}

@keyframes imgShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Effet de chargement (shimmer) pour toutes les images chargees directement
   depuis TMDB : le degrade tourne derriere l'image tant qu'elle n'est pas
   arrivee, puis disparait naturellement une fois l'image affichee par-dessus. */
.moviePoster,
.filmPoster,
.castPhoto,
.pinPoster,
.spotlightPoster,
.upcomingPosterThumb {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.12) 37%,
    rgba(255, 255, 255, 0.05) 63%
  );
  background-size: 400% 100%;
  animation: imgShimmer 1.4s ease infinite;
}

/* Pas de shimmer sur les placeholders "pas d'affiche" : c'est definitif, pas en cours de chargement */
.moviePoster.placeholder,
.filmPoster.placeholder,
.castPhoto.placeholder,
.pinPoster.placeholder,
.spotlightPoster.placeholder,
.upcomingPosterThumb.placeholder {
  animation: none;
  background-image: none;
}

.moviePoster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.moviePoster.placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  padding: 12px;
  text-align: center;
}

.movieBody {
  padding: 14px;
}

.movieTitle {
  margin: 8px 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.movieOriginalTitle {
  margin: -4px 0 8px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted);
}

.categorySwitch {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 18px;
}

.categoryButton {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.categoryButton.active {
  background: var(--accent);
  color: #10212f;
}

.categoryPanel {
  display: none;
}

.categoryPanel.active {
  display: block;
}

.movieBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Infobulles de badges, mobile first : accrochees a la RANGEE (pleine
   largeur) plutot qu au badge, sinon un badge place a droite fait deborder
   l infobulle hors de l ecran. Des 701px, retour a l ancrage sous le badge. */
.badgeDetails {
  position: static;
}

.movieBadges,
.metricRow,
.filmMetaRow {
  position: relative;
}

.badgeDetails summary {
  list-style: none;
  cursor: pointer;
}

.badgeDetails summary::-webkit-details-marker {
  display: none;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.badge.prestige {
  background: #f2b705;
  color: #1c2028;
}

.badge.nominee {
  background: #8ecae6;
  color: #0d2030;
}

.badge.boxoffice {
  background: #2ec4b6;
  color: #0d2e2a;
}

.badge.success {
  background: #ff6b35;
  color: #fff7f2;
}

.badgeExplanation {
  position: absolute;
  z-index: 10;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: auto;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(7, 18, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

@media (min-width: 701px) {
  .badgeDetails {
    position: relative;
  }

  .badgeExplanation {
    right: auto;
    width: min(240px, 70vw);
  }
}

.metricRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.metricChip {
  min-width: 68px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.metricLabel {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
}

.metricValue {
  display: block;
  margin-top: 2px;
  font-size: 0.95rem;
}

.movieMeta,
.movieSource,
.sourceNote {
  color: var(--muted);
  margin: 6px 0;
}

.overviewFallbackNote {
  font-style: italic;
  color: var(--muted);
}

.synopsisDetails summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.synopsisDetails[open] summary {
  margin-bottom: 6px;
}

.collectionMore {
  margin-top: 10px;
}

.collectionMore summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}

.collectionMore[open] summary {
  margin-bottom: 10px;
}

.collectionMore .whenOpen,
.collectionMore[open] .whenClosed {
  display: none;
}

.collectionMore[open] .whenOpen {
  display: inline;
}

a.creditLink {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 183, 5, 0.35);
  transition: border-color 0.15s ease, color 0.15s ease;
}

a.creditLink:hover {
  color: var(--accent-alt);
  border-color: var(--accent-alt);
}

.liveHero {
  position: relative;
}

.liveCompactLayout {
  max-width: 1380px;
  gap: 10px;
}

.liveHeroBar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
}

.liveHeroBar .eyebrow {
  margin: 0;
  font-size: 0.82rem;
}

.liveHeroBar h1 {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.95rem);
  justify-self: center;
}

.liveHeroBar .actions {
  justify-self: end;
}

.liveHeroBar .linkButton {
  padding: 6px 10px;
  font-size: 0.82rem;
}

.liveDashboardGrid {
  display: grid;
  grid-template-columns: minmax(420px, 1.08fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.liveLeftColumn {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.liveImportPage .card {
  padding: 12px;
}

.liveStatsGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
}

.liveStatsGrid strong {
  font-size: 0.97rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compactCountdownCard h2 {
  margin-bottom: 6px;
}

.countdownItem {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 8px;
  margin-top: 8px;
}

.countdownItem:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.countdownTitleRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.countdownTitleRow h3 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.03em;
  font-size: 1.38rem;
}

.releaseDateBadge {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.76rem;
  white-space: nowrap;
}

.spiderFrSubtitle {
  margin-top: 6px;
}

.liveImportPage .countdownLine {
  font-size: clamp(1.02rem, 1.55vw, 1.42rem);
  line-height: 1.18;
}

.liveImportPage .subtitle {
  margin: 4px 0;
  font-size: 0.85rem;
}

.liveImportPage .importProgressWrap {
  margin: 6px 0 10px;
}

.liveImportPage .importProgressLabel {
  font-size: 0.76rem;
}

.livePinBoardCard {
  min-height: 620px;
  max-height: calc(100vh - 106px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.livePinHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.livePinHeader h2 {
  margin: 0;
}

.livePinHeader .pinCadence {
  margin: 0;
  white-space: nowrap;
}

.livePinBoardCard .pinBoard {
  height: 100%;
  overflow: auto;
  padding-right: 6px;
}

.liveAncillary {
  display: none;
}

.liveStateCard {
  border-color: rgba(46, 196, 182, 0.45);
}

.liveStateTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pauseBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
}

.pauseBadge.active {
  background: rgba(46, 196, 182, 0.2);
  border-color: rgba(46, 196, 182, 0.8);
  color: #d9fff9;
}

.pauseBadge.paused {
  background: rgba(255, 107, 53, 0.22);
  border-color: rgba(255, 107, 53, 0.85);
  color: #ffe2d8;
}

.pauseBadge.completed {
  background: rgba(242, 183, 5, 0.22);
  border-color: rgba(242, 183, 5, 0.85);
  color: #fff4cf;
}

.pauseBadge.idle {
  background: rgba(159, 194, 217, 0.22);
  border-color: rgba(159, 194, 217, 0.85);
  color: #ecf7ff;
}

.liveFeedGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.pinCadence {
  margin-top: 4px;
}

.pinBoard {
  display: block;
  column-width: 240px;
  column-gap: 14px;
}

.pinCard {
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  position: relative;
}

.pinCard.fresh {
  animation: pinPopIn 0.42s ease both;
}

.pinPoster {
  width: 100%;
  display: block;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}

.pinBody {
  padding: 10px 12px 12px;
}

.pinType {
  margin: 0;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

.pinTitle {
  margin: 5px 0;
  font-size: 1rem;
  font-weight: 700;
}

.pinSubtitle,
.pinMeta,
.pinDetail {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.badge.anniv {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.badge.anniv-round {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text);
}

.badge.anniv-decade {
  background: #5fa8d3;
  color: #07192a;
}

.badge.anniv-major {
  background: linear-gradient(135deg, #f2b705 0%, #ff6b35 100%);
  color: #14080a;
}

.badgeAnnivDetails {
  display: inline-block;
  margin: 0 0 6px;
}

.badgeAnnivDetails > summary {
  list-style: none;
  cursor: pointer;
}

.badgeAnnivDetails > summary::-webkit-details-marker {
  display: none;
}

.badgeAnnivExplanation {
  display: block;
  margin-top: 5px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(7, 18, 28, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.6;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.liveMovieCard {
  animation: rise 0.35s ease;
}

.liveCountdownCard {
  border-color: rgba(242, 183, 5, 0.45);
}

.countdownGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.zoeSupportLogoWrap {
  margin-top: 8px;
}

.zoeSupportLogo {
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.countdownLine {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 0.03em;
  font-size: clamp(1.3rem, 4.5vw, 2.6rem);
  color: #ffe8a3;
}

.countdownAudioRow {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 10px;
}

#spiderTickToggle {
  min-width: 150px;
}

.liveSpotlightCard {
  border-color: rgba(46, 196, 182, 0.42);
}

.spotlightTimer {
  color: #dffbf7;
  font-size: clamp(1.1rem, 3.2vw, 2rem);
  margin-bottom: 10px;
}

.spotlightMovieCard {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 12px;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  animation: pinPopIn 0.34s ease both;
}

.spotlightPosterWrap {
  background: rgba(255, 255, 255, 0.06);
}

.spotlightPoster {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 2 / 3;
}

.spotlightMeta {
  padding: 12px;
}

.spotlightTitle {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.spotlightLine {
  margin: 6px 0 0;
  color: var(--muted);
}

.spotlightLoading {
  display: grid;
  place-items: center;
  min-height: 160px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.26);
  color: var(--muted);
  animation: rise 0.25s ease;
}

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

th,
td {
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
}

.upcomingPeriod {
  margin-top: 18px;
}

.inTheatersSection summary {
  cursor: pointer;
}

.inTheatersSection .inlineHeading {
  display: inline;
}

.upcomingPeriod h3 {
  margin-bottom: 4px;
}

.upcomingPosterThumb {
  width: 40px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.upcomingPosterThumb.placeholder {
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.countryTag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: help;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pinPopIn {
  from {
    opacity: 0;
    transform: translateY(9px) scale(0.985);
    filter: saturate(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1);
  }
}

.heroTopBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 4px;
  flex-wrap: wrap;
  row-gap: 6px;
}

.heroTopBarRight {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Badge SEO reserve aux admins (score/indexation/mode) — jamais visible pour
   un visiteur normal, injecte uniquement quand une session admin est
   detectee cote serveur. Rendu discret et compact, volontairement distinct
   du reste de l'UI (police mono, bordure en pointilles) pour signaler que
   c'est un outil interne. */
.seoAdminBadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  white-space: nowrap;
}

.seoAdminBadgeTag {
  opacity: 0.7;
  font-weight: 700;
}

.seoAdminBadgeStatus {
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.seoAdminBadge.seoBadgeIndexed .seoAdminBadgeStatus {
  background: #1f9d55;
  color: #fff;
}

.seoAdminBadge.seoBadgeNoindex .seoAdminBadgeStatus {
  background: #c0392b;
  color: #fff;
}

.seoAdminBadgeMode {
  opacity: 0.85;
}

@media (max-width: 480px) {
  .seoAdminBadge {
    font-size: 0.62rem;
    padding: 3px 6px;
  }
}

.langToggleBtn {
  font-size: 0.78rem;
  padding: 5px 14px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--accent-alt);
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border: none;
}

.dateNav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}

.dateNavBtn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.dateNavBtn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.dateNavBtn.today:not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}

.dateNavBtn.active {
  background: var(--accent);
  color: #18212d;
  border-color: var(--accent);
}

.dateNavBtn.future {
  opacity: 0.55;
}

.siteBanner {
  padding: 8px 16px;
  text-align: center;
  font-size: 0.85rem;
}

.siteBannerInner {
  max-width: 1100px;
  margin: 0 auto;
}

.siteBannerFeature {
  background: rgba(46, 196, 182, 0.16);
  color: var(--text);
  border-bottom: 1px solid rgba(46, 196, 182, 0.35);
}

.siteBannerPromo {
  background: rgba(255, 107, 53, 0.1);
  color: var(--muted);
  border-bottom: 1px solid rgba(255, 107, 53, 0.25);
  font-style: italic;
}

.dateNavBtn.future.active {
  opacity: 1;
}

.consentBanner {
  position: fixed;
  z-index: 1000;
  right: 14px;
  bottom: 14px;
  width: min(460px, calc(100vw - 28px));
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(7, 18, 28, 0.95);
  padding: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

.consentTitle {
  margin: 0;
  font-weight: 700;
}

.consentText {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.consentActions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.consentCategories {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.consentCategory {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.consentCategory input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}

.consentCategoryLabel {
  font-weight: 600;
  font-size: 0.88rem;
}

.consentCategoryDesc {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.consentManageBtn {
  position: fixed;
  z-index: 999;
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(7, 18, 28, 0.92);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
}

.consentManageBtn:hover {
  background: rgba(20, 40, 60, 0.98);
}

@media (max-width: 700px) {
  body {
    padding: 12px;
  }

  .card {
    padding: 14px;
  }

  .spotlightMovieCard {
    grid-template-columns: minmax(0, 1fr);
  }

  .countdownGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .liveHeroBar {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .liveHeroBar h1 {
    justify-self: start;
  }

  .liveHeroBar .actions {
    justify-self: start;
  }

  .liveDashboardGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .liveStatsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .livePinBoardCard {
    min-height: 440px;
    max-height: none;
  }

  .livePinHeader {
    flex-wrap: wrap;
  }

  .consentBanner {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }
}

@media (max-width: 1200px) {
  .liveDashboardGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .livePinBoardCard {
    min-height: 520px;
    max-height: none;
  }
}

dialog {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 20px;
  max-width: 720px;
  width: calc(100vw - 40px);
}

dialog::backdrop {
  background: rgba(7, 18, 28, 0.7);
}

dialog table th,
dialog table td {
  font-size: 0.9rem;
}

/* Fiche serie TV : saisons repliables + liste d'episodes (mobile first) */
.seasonDetails {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 0;
}

.seasonDetails summary {
  cursor: pointer;
  overflow-wrap: anywhere;
}

/* strong est en display:block globalement : le garder sur la ligne du resume */
.seasonDetails summary strong {
  display: inline;
  margin: 0;
  font-size: inherit;
}

.episodeList {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.episodeList li {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow-wrap: anywhere;
}

.episodeNumber {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}

.episodeDate {
  color: var(--muted);
  font-size: 0.85rem;
  margin-left: auto;
  white-space: nowrap;
}

/* Bouton "Où le voir ?" en haut de fiche film */
.filmStreamingRow {
  margin-top: 14px;
}

/* Historique MAJ quotidienne (admin) : une carte par passage, mobile first.
   Aucune info n'est cachée derrière un survol (inexistant sur mobile). */
.runHistoryList {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.runCard {
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
}

.runCard--error {
  border-color: var(--accent-alt);
}

.runCardHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.runBadge {
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  color: var(--muted);
}

.runCard--error .runBadge {
  color: var(--accent-alt);
  border-color: var(--accent-alt);
}

.runMeta {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--muted);
}

.runError {
  margin: 8px 0 0;
  color: var(--accent-alt);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.runSection {
  margin-top: 10px;
}

.runSectionTitle {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--accent);
}

.runStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.runStat {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 6px 8px;
  min-width: 0;
}

.runStat dt {
  font-size: 0.75rem;
  color: var(--muted);
}

.runStat dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.runNames {
  margin-top: 8px;
}

.runNames summary {
  cursor: pointer;
  padding: 6px 0;
  font-weight: 500;
}

.runNames ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.runNames li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.runName {
  overflow-wrap: anywhere;
}

.runNameDate {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

@media (min-width: 600px) {
  .runStats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .runMeta {
    flex-basis: auto;
    margin-left: auto;
  }
}

/* Fiche film individuelle — mobile first : affiche centree au-dessus des
   infos sur petit ecran, affiche a gauche + infos a droite des 701px.
   (L ancienne surcharge max-width:700px etait declaree AVANT cette regle,
   donc toujours ecrasee : la colonne d infos restait coincee a ~70px.) */
.filmHeroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: 14px;
}

.filmHeroGrid .filmPoster {
  max-width: 220px;
}

.filmHeroGrid .actions,
.filmHeroGrid .filmMetaRow,
.filmStreamingRow {
  justify-content: center;
}

.filmHeroGrid .movieMeta {
  text-align: left;
  width: 100%;
}

@media (min-width: 701px) {
  .filmHeroGrid {
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
    justify-items: stretch;
    text-align: left;
    gap: 20px;
  }

  .filmHeroGrid .filmPoster {
    max-width: none;
  }

  .filmHeroGrid .actions,
  .filmHeroGrid .filmMetaRow,
  .filmStreamingRow {
    justify-content: flex-start;
  }

  .filmHeroGrid .movieMeta {
    width: auto;
  }
}

.filmPoster {
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background-color: rgba(255, 255, 255, 0.08);
}

.filmPoster.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 12px;
}

.filmMetaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

html:not([data-spoilers="on"]) .spoiler-content {
  display: none !important;
}

.spoilerControl {
  padding: 12px 20px;
}

.spoilerToggleBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(0, 220, 120, 0.1);
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}

.spoilerToggleBtn[data-state="shown"] {
  background: rgba(255, 180, 0, 0.15);
  border-color: rgba(255, 180, 0, 0.4);
}

.spoilerToggleBtn::before {
  content: "\1F6E1";
}

.spoilerToggleBtn[data-state="shown"]::before {
  content: "\26A0";
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 10px;
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbCurrent {
  color: var(--text);
}

.breadcrumbSep {
  opacity: 0.5;
}

.filmBornLine a {
  color: inherit;
}

.filmBornLine {
  font-size: 1.1rem;
  margin: 4px 0 10px;
}

.timelineRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.timelineItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  opacity: 0.45;
  min-width: 64px;
}

.timelineItem.passed {
  opacity: 0.85;
  border-color: rgba(0, 220, 120, 0.4);
}

.timelineItem.next {
  opacity: 1;
  border-color: rgba(255, 180, 0, 0.6);
  background: rgba(255, 180, 0, 0.08);
}

.timelineAge {
  font-weight: 700;
}

.timelineYear {
  font-size: 0.75rem;
  color: var(--muted);
}

.filmCastGrid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.castCard {
  text-align: center;
  padding: 10px;
  display: block;
  text-decoration: none;
  color: inherit;
}

.castPhoto {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background-color: rgba(255, 255, 255, 0.08);
  margin: 0 auto;
}

.castPhoto.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.4rem;
  font-weight: 600;
}

.castName {
  margin: 8px 0 2px;
  font-weight: 600;
  font-size: 0.9rem;
}

.castAge {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
}

.castCharacter {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  margin: 0;
}

.generationGroup {
  margin-top: 16px;
}

.miniFilmGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.miniFilmCard {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  text-decoration: none;
  color: var(--text);
  min-width: 100px;
  max-width: 160px;
  flex: 1 1 100px;
}

.miniFilmPoster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.miniFilmPoster.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 1.3rem;
}

.miniFilmTitle {
  font-size: 0.82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.miniFilmYear {
  font-size: 0.72rem;
  color: var(--muted);
}

/* Fiche personne individuelle */
.personHeroPhoto {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}

.filterTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 16px;
}

.filterTab {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  text-decoration: none;
  color: var(--text);
  font-size: 0.82rem;
}

.filterTab.active {
  background: var(--accent-alt);
  color: #ffffff;
  border-color: transparent;
}

.personFilmGrid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.personFilmCard {
  text-align: left;
  text-decoration: none;
  color: var(--text);
  display: block;
}

.personFilmCard .filmPoster {
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  height: auto;
}