.galerie-masonry{
    width: 100%;
}

.bbs-masonry-media {
  display: block !important;
  position: relative;
  width: auto;
  max-width: none;

  /* Désactivation de l’ancienne masonry CSS */
  columns: auto !important;
  column-count: auto !important;
  column-width: auto !important;
  column-gap: normal !important;

  /* Compensation du padding des éléments */
  margin: 0 -0.9vw;
}

/* Desktop : 4 colonnes */
.bbs-masonry-media__item {
  display: block;
  width: 25%;
  box-sizing: border-box;
  padding: 0 0.9vw 1.8vw;
  margin: 0;
  overflow: hidden;

  break-inside: auto !important;
  page-break-inside: auto !important;
}

.bbs-masonry-media__image,
.bbs-masonry-media__video,
.bbs-masonry-media__video-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
}

.bbs-masonry-media__image,
.bbs-masonry-media__video {
  height: auto;
  object-fit: cover;
}

.bbs-masonry-media__video {
  background: #000;
}

/* Bouton Charger plus */

.bbs-masonry-media__load-more {
  display: block;
  margin: 3.9vw auto 0;
}

.bbs-masonry-media__load-more:hover {
  background-color: #e5ecf3;
}

.bbs-masonry-media__load-more.is-loading,
.bbs-masonry-media__load-more:disabled {
  cursor: wait;
  opacity: 0.7;
}

.bbs-masonry-media-empty,
.bbs-masonry-media-error {
  margin: 1rem 0;
}

/* Vidéos */

.bbs-masonry-media__video-wrap {
  position: relative;
}

.bbs-masonry-media__control {
  position: absolute;
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  cursor: pointer;

  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Bouton lecture */

.bbs-video-play {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
}

.bbs-video-play[data-state="playing"] {
  background-image: url("https://touringsummertour.be/wp-content/uploads/2026/06/pause_circle.svg");
}

.bbs-video-play[data-state="paused"] {
  background-image: url("https://touringsummertour.be/wp-content/uploads/2026/06/play_circle.svg");
}

/* Bouton son */

.bbs-video-sound {
  right: 15px;
  bottom: 15px;
  transform: scale(0.9);
}

.bbs-video-sound[data-state="muted"] {
  background-image: url("https://touringsummertour.be/wp-content/uploads/2026/06/volume_mute.svg");
}

.bbs-video-sound[data-state="unmuted"] {
  background-image: url("https://touringsummertour.be/wp-content/uploads/2026/06/volume_up.svg");
}

/* Vidéo en pause : contrôles visibles */

.bbs-masonry-media__video-wrap[data-playing="0"]
  .bbs-masonry-media__control {
  opacity: 1;
  pointer-events: auto;
}

.bbs-masonry-media__video-wrap[data-playing="0"] .bbs-video-play {
  transform: translate(-50%, -50%) scale(1);
}

.bbs-masonry-media__video-wrap[data-playing="0"] .bbs-video-sound {
  transform: scale(1);
}

/* Vidéo en lecture : contrôles visibles au survol desktop */

@media (hover: hover) {
  .bbs-masonry-media__video-wrap[data-playing="1"]:hover
    .bbs-masonry-media__control {
    opacity: 1;
    pointer-events: auto;
  }

  .bbs-masonry-media__video-wrap[data-playing="1"]:hover
    .bbs-video-play {
    transform: translate(-50%, -50%) scale(1);
  }

  .bbs-masonry-media__video-wrap[data-playing="1"]:hover
    .bbs-video-sound {
    transform: scale(1);
  }
}

/* Mobile : 2 colonnes */

@media (max-width: 767px) {
  .bbs-masonry-media {
    margin: 0 -1vw;
  }

  .bbs-masonry-media__item {
    width: 50% !important;
    padding: 0 1vw 2vw;
  }

  .bbs-masonry-media__load-more {
    margin-top: 8vw;
  }

  .bbs-masonry-media__control {
    width: 40px;
    height: 40px;
  }
}