/* ================================================================
   FILM PLAY — bouton « Play with sound » en overlay d'un film
   ================================================================
   Composant partagé pro + perso (extrait de backmarket.css, où il
   est né — la classe .bm__film-play est conservée telle quelle car
   utilisée par toutes les sections et par brancherFilmAvecSon).
   Le film hôte doit être en position: relative.
   Quand le film joue avec son (classe *--actif posée par le JS),
   le bouton s'efface.
   ================================================================ */

.bm__film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;

  display: flex;
  align-items: center;
  gap: var(--espace-s);

  padding: 14px 22px;
  border: none;
  border-radius: 999px;

  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;

  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 600, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;

  cursor: pointer;
  transition: transform var(--duree-courte) var(--ease-doux),
              background-color var(--duree-courte) var(--ease-doux),
              opacity var(--duree-moyenne) var(--ease-doux);
}

.bm__film-play svg {
  width: 18px;
  height: 18px;
}

/* essai lot 3 : icône seule, sans « Play with sound » écrit
   (le libellé reste lu par les lecteurs d'écran via aria-label) */
.bm__film-play {
  width: 72px;
  height: 72px;
  padding: 0;
  justify-content: center;
}

.bm__film-play span {
  display: none;
}

.bm__film-play svg {
  width: 26px;
  height: 26px;
  margin-left: 3px;   /* le triangle paraît décentré sinon */
}

.bm__film-play:hover {
  background-color: var(--accent-campagne, var(--couleur-accent));
  transform: translate(-50%, -50%) scale(1.05);
}

/* Variante ronde (icône seule) pour les petits formats verticaux */
.bm__film-play--rond {
  padding: 14px;
}

/* Film actif (son activé) : on masque le bouton */
.bm__film--actif .bm__film-play,
.bm__case-video--actif .bm__film-play {
  opacity: 0;
  pointer-events: none;
}