/* -- VIDEOS PLOUF AVEC ICON PLAY ET VIGNETTE EN LECTURE DIRECTE (pas de popup)--*/


/* Ligne contenant les vidéos */
.videos-row {
  display: flex;
  gap: 16px;           /* espace entre les vidéos */
  justify-content: center;
  flex-wrap: nowrap;   /* pas de retour à la ligne */
}

.videosplouf-container {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  background: black;
  overflow: hidden;
  border-radius: 12px;
}

/* Vignette */
.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Vidéo (cachée au départ) */
.videoPlayer {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* Bouton play */
    .videosplouf-play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease-in-out;
    }

    .videosplouf-play-icon::before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      background: rgba(0, 0, 0, 0.6);
  margin-left: 4px; /* Décale légèrement le triangle vers la droite */
    }

    .videosplouf-container:hover .videosplouf-play-icon {
      background: rgba(0, 0, 0, 0.8);
    }

/* 👉 Optimisations mobile */
@media (max-width: 600px) {
  .videosplouf-container {
    max-width: 100%;
    border-radius: 8px;
  }

  .videosplouf-play-icon {
    width: 56px;
    height: 56px;
  }
}