/* Essai « offre du 24/09 », accueil : le film du studio (film-studio/, version web dans assets/film/).
   Chargé après styles.css, seulement par index-essai-offre.html. */

.film {
  position: relative;
  margin: clamp(32px, 4vw, 48px) 0 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #241b2f;
  box-shadow: 0 1px 0 var(--line), var(--shadow-card);
}
.film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-controls {
  position: absolute;
  right: clamp(10px, 2vw, 18px);
  bottom: clamp(10px, 2vw, 18px);
  display: flex;
  gap: 8px;
}
.film-controls[hidden] { display: none; }
.film-btn {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(250, 247, 243, 0.94);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(36, 27, 47, 0.18);
  transition: background-color 0.2s ease;
}
.film-btn:hover { background: #fff; }
.film-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Sur téléphone, les boutons passent sous la vidéo pour ne pas la cacher */
@media (max-width: 600px) {
  .film { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .film video {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background: #241b2f;
    box-shadow: 0 1px 0 var(--line), var(--shadow-card);
  }
  .film-controls { position: static; justify-content: flex-end; margin-top: 12px; }
  .film-btn { background: var(--surface, #fff); box-shadow: inset 0 0 0 1px var(--line-strong); }
}

/* Accueil, bloc « Votre studio » réduit (retour de Jack, 25/09) : une phrase, puis le détail sur Content OS */
.studio-text .studio-cta { margin-top: 28px; }
.dark .studio-cta { color: var(--plum); }