/* Medias produits : vignettes photo et video dans la fiche.
   Reprend les variables existantes du site, n'en cree aucune. */

.pm-vignettes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pm-vignettes[hidden] { display: none; }

.pm-vignette {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid var(--gris, #E0E0E0);
  border-radius: 8px;
  background: var(--blanc, #FFF);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition, all .35s ease);
}

.pm-vignette img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pm-vignette:hover,
.pm-vignette:focus-visible { border-color: var(--or, #D4AF37); }

.pm-vignette[aria-current="true"] { border-color: var(--v2-accent, #00A651); }

.pm-video-wrap {
  margin-top: 14px;
  border-radius: var(--rayon, 14px);
  overflow: hidden;
  background: #000;
}

.pm-video-wrap[hidden] { display: none; }

.pm-video {
  width: 100%;
  height: auto;
  max-height: 46vh;
  display: block;
}

@media (max-width: 640px) {
  .pm-vignette { width: 48px; height: 48px; }
  .pm-video { max-height: 38vh; }
}