/* =========================================================================
   MEETennis — assets/produit-medias.css
   La galerie d'images et la vidéo teaser d'une fiche produit.

   Chargée uniquement quand la fiche en a l'usage (plusieurs images, ou un
   teaser) : une fiche à une seule image ne télécharge pas ce fichier.
   ========================================================================= */

/* ---- La galerie ---------------------------------------------------------
   Un défilement horizontal avec accrochage (scroll-snap), et pas un
   carrousel en JavaScript. C'est le geste que tout le monde connaît sur
   téléphone, il fonctionne sans script, et il ne peut pas se retrouver
   bloqué entre deux vues. Le script n'ajoute que la synchronisation des
   pastilles — s'il ne se charge pas, on peut toujours tout voir. */
.pd-gal { position: relative; margin: 0 0 14px; }

.pd-gal-piste {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--r-md, 20px);
}

.pd-gal-piste::-webkit-scrollbar { display: none; }

.pd-gal-vue {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 16 / 10;
  background: var(--body-bg, #e9e6e3);
  border-radius: var(--r-md, 20px);
  overflow: hidden;
}

.pd-gal-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Les pastilles. Assez grandes pour être touchées : une cible de 8 px est
   décorative, pas cliquable. La zone tactile fait 22 px, le point visible 7. */
.pd-gal-points {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 10px;
}

.pd-gal-pt {
  width: 22px; height: 22px;
  border: 0; padding: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

.pd-gal-pt::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .26;
  transition: .2s;
}

.pd-gal-pt.on::before { opacity: 1; background: var(--brand, #e15e01); transform: scale(1.25); }

/* ---- Le teaser ----------------------------------------------------------
   Une vignette, pas une iframe. L'iframe n'est fabriquée qu'au clic : tant
   que personne n'a lancé la vidéo, YouTube ne reçoit aucune requête et ne
   sait pas que la page a été ouverte. */
.pd-teaser {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--r-md, 20px);
  overflow: hidden;
  background: #000;
  margin: 0 0 16px;
  aspect-ratio: 16 / 9;
}

.pd-teaser img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .82; }

.pd-teaser-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--brand, #e15e01);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  transition: transform .18s;
}

.pd-teaser:active .pd-teaser-play { transform: translate(-50%, -50%) scale(.92); }
.pd-teaser-play svg { width: 26px; height: 26px; margin-left: 3px; }

.pd-teaser-txt {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .72));
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  text-align: left;
}

/* ---- La fenêtre de la vidéo --------------------------------------------- */
.pd-modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(10, 8, 6, .88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: pdModalIn .18s ease both;
}

.pd-modal[hidden] { display: none; }

@keyframes pdModalIn { from { opacity: 0 } to { opacity: 1 } }

.pd-modal-boite {
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}

.pd-modal-boite iframe { width: 100%; height: 100%; border: 0; display: block; }

.pd-modal-x {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 26px; line-height: 1;
  cursor: pointer;
}

.pd-modal-x:active { background: rgba(255, 255, 255, .28); }