/* ═══════════════════════════════════════════════════════════════
   FILMOGRAPHIE.CSS - Grille des films, 3 par ligne max
   Format 16:9. Zoom sur le wrapper au hover.
   Overlay titre glisse de bas en haut au hover.
   L'année/durée restent toujours visibles sous la vignette.
   Diaporama automatique à l'entrée dans le viewport.
═══════════════════════════════════════════════════════════════ */

#filmographie {
  background-color: var(--noir);
}

#filmographie .section-titre {
  color: var(--blanc-pur);
}

/* ── Grille (lignes incomplètes centrées) ────────────────────── */
.grille-films {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.8rem;
}

/* ── Carte film ──────────────────────────────────────────────── */
.film-carte {
  width: calc(33.33% - 1.2rem);
  min-width: 220px;
  max-width: 480px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ── Wrapper 16:9 ────────────────────────────────────────────── */
/*
  border-radius: 1px + clip-path: inset(0) forcent le navigateur
  à recalculer les bords lors du scale, ce qui élimine le trait
  clair parasite sur les côtés et en bas.
*/
.film-jaquette-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--noir);
  isolation: isolate;
  border-radius: 1px;
  clip-path: inset(0 round 1px);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease;
}

.film-carte:hover .film-jaquette-wrapper {
  transform: scale(1.04);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* ── Images du diaporama ─────────────────────────────────────── */
.film-diapo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  filter: grayscale(20%) brightness(0.88);
  transition: opacity 0.8s ease, filter 0.4s ease;
}

.film-diapo-img.active {
  opacity: 1;
}

.film-carte:hover .film-diapo-img.active {
  filter: grayscale(0%) brightness(1);
}

/* ── Overlay glissant (bas en haut) ──────────────────────────── */
/* Contient uniquement le titre */
.film-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem 1.1rem 0.9rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    transparent 100%
  );
  display: flex;
  align-items: flex-end;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}

.film-carte:hover .film-overlay {
  transform: translateY(0);
}

.film-overlay-titre {
  font-family: var(--font-corps);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--blanc-pur);
  line-height: 1.3;
}

/* ── Infos sous la jaquette ──────────────────────────────────── */
/*
  Hauteur fixe pour ne jamais perturber le flux de la page.
  Seul .film-titre disparaît au hover (il s'affiche dans l'overlay).
  .film-meta (année/durée) reste toujours visible.
*/
.film-infos {
  height: 52px;
  padding: 0.75rem 0 0;
  text-align: center;
  overflow: hidden;
}

.film-titre {
  font-family: var(--font-corps);
  font-weight: 300;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  color: var(--blanc);
  line-height: 1.4;
  margin-bottom: 0.15rem;
  transition: opacity 0.3s ease;
}

/* Seul le titre s'efface au hover */
.film-carte:hover .film-titre {
  opacity: 0;
}

/* L'année/durée reste toujours visible (pas de transition) */
.film-meta {
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--blanc);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .film-carte {
    width: calc(50% - 0.9rem);
  }
}

@media (max-width: 600px) {
  .film-carte {
    width: 100%;
    max-width: 480px;
    min-width: 0;
  }

  .grille-films {
    gap: 1.2rem;
  }

  /* Sur mobile, le :hover reste actif après un tap, on désactive
     le scale du wrapper pour éviter le trait parasite au touch */
  .film-jaquette-wrapper {
    transition: none;
  }

  .film-carte:hover .film-jaquette-wrapper {
    transform: none;
    box-shadow: none;
  }
}