/* ILANA Daily, site vitrine : le film de l'accueil (Remotion,
   marketing/videos/remotion/src/site/FilmOuverture.tsx), sous le héros, en
   carte de taille moyenne. Il démarre quand on arrive dessus, une fois, sans
   son, jamais en boucle ; un bouton le met en pause (WCAG 2.2.2). */

.film { padding: 8px var(--marge) 24px; }
.film__cadre {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--elevation-3);
}
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__description {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.film__bouton {
  position: absolute;
  right: 12px; bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--carte);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  box-shadow: var(--elevation-2);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.film__bouton[hidden] { display: none; }
.film__bouton:active { transform: scale(0.97); }
.film__bouton:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.film__icone { display: none; }
.film__bouton[data-etat="pause"] .film__icone--pause,
.film__bouton[data-etat="lecture"] .film__icone--lecture,
.film__bouton[data-etat="revoir"] .film__icone--revoir { display: block; }

/* Sur téléphone, la carte est trop petite : le bouton posé sur l'image en
   cachait un quart. Il passe sous le film, aligné à droite ; le cadre ne
   coupe plus ce qui dépasse, c'est la vidéo qui porte l'arrondi. */
@media (max-width: 639.98px) {
  .film__cadre { overflow: visible; margin-bottom: 68px; }
  .film__video { border-radius: inherit; }
  .film__bouton { top: calc(100% + 12px); bottom: auto; right: 0; }
}
@media (min-width: 640px) {
  .film__bouton { right: 16px; bottom: 16px; }
}