/**
 * Media Facade CSS
 * Vidéos locales format short / reel (9:16)
 * La hauteur est pilotée par .my-advantages > div (custom.css : height 36rem) ;
 * aspect-ratio 9/16 calcule la largeur correspondante.
 */

.media-facade {
  position: relative;
  aspect-ratio: 9 / 16;
  background-color: #000;
  border-radius: var(--border, 8px);
  overflow: hidden;
  flex-shrink: 0;
}

.media-facade__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Curseur pointer tant que la vidéo n'est pas lancée */
.media-facade:not(.media-facade--auto):not(.media-facade--playing) {
  cursor: pointer;
}

/* Bouton play neutre */
.media-facade__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s ease,
    transform 0.25s ease,
    opacity 0.25s ease;
  z-index: 10;
  pointer-events: none;
}

.media-facade:hover .media-facade__play-btn {
  background: rgba(0, 0, 0, 0.65);
  transform: translate(-50%, -50%) scale(1.08);
}

.media-facade__play-btn svg {
  width: 28px;
  height: 28px;
  margin-left: 3px; /* recentre le triangle optiquement */
}

/* Une fois lancée : on masque le bouton play */
.media-facade--playing .media-facade__play-btn {
  opacity: 0;
}