/* ==========================================================================
   Vidéo de fond des blocs premium

   Habillage de la couche montée par initBackgroundVideos() dans
   assets/js/premium-interactions.js, à partir d'un élément porteur de
   data-bg-video. Les deux sources vivent ensemble : le hero d'accueil et le
   hero Services partagent ce comportement, il n'est donc écrit qu'une fois.

   Les noms de classes viennent du thème (hero-three-bg-*) : ils sont conservés
   pour ne pas casser les gabarits déjà en place.
   ========================================================================== */

.tpl-premium .hero-three-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tpl-premium .hero-three-bg-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Cadrage « couvrant » d'une iframe 16/9 : la plus grande des deux dimensions
   déborde, l'autre remplit, et le centrage cache le débordement. */
.tpl-premium .hero-three-bg-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 56.25vw;
  min-height: 100%;
  /* Léger zoom : le lecteur Vimeo dessine une fine barre claire (barre de
     progression) tout au bas de son cadre. En agrandissant le cadre de 12 %
     autour de son centre, ce bas — et les bords — sortent du bloc, masqués par
     le overflow:hidden du conteneur. */
  transform: translate(-50%, -50%) scale(1.12);
  transform-origin: center center;
  border: 0;
}

/* La vidéo se pose en fondu sur l'image de fond, jamais l'inverse : tant qu'elle
   n'est pas prête, c'est la photo du bloc qui reste visible. */
.tpl-premium .hero-three-bg-video,
.tpl-premium .hero-three-bg-embed {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.tpl-premium .hero-three-bg-video.is-ready,
.tpl-premium .hero-three-bg-embed.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tpl-premium .hero-three-bg-video,
  .tpl-premium .hero-three-bg-embed {
    transition: none;
  }
}