/* Vidéo de fond de l'accueil */
.hero-fond .video-fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.hero { background: #0b0908; }

/* Section du film */
.film { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 0%, #2a2118 0%, #120e0b 55%, #0b0908 100%); }
.film::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(217,191,140,.08), transparent 40%), radial-gradient(circle at 80% 70%, rgba(217,191,140,.06), transparent 40%); pointer-events: none; }
.film .titre-section h2 { color: var(--or-clair); }
.film-cadre { position: relative; max-width: 1100px; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(217,191,140,.35), 0 30px 80px -20px rgba(0,0,0,.8), 0 0 60px -10px rgba(176,141,87,.35); }
.film-cadre video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.film-jouer { position: absolute; inset: 0; border: 0; background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.45)); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .4s; }
.film-jouer span { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; padding-left: 6px;
  background: rgba(176,141,87,.85); box-shadow: 0 0 0 10px rgba(217,191,140,.18), 0 10px 40px rgba(0,0,0,.5); transition: transform .3s; }
.film-jouer:hover span { transform: scale(1.08); }
.film-jouer em { font: italic 400 1.4rem var(--serif); color: #F3E7D1; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.film-jouer.cache { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
  .film-cadre { border-radius: 12px; }
  .film-jouer span { width: 74px; height: 74px; font-size: 26px; }
}