/**
 * Vidéos de la galerie produit : MÉCANIQUE seulement (superposition de
 * l'aperçu, de la vidéo et des commandes).
 *
 * Tout est écrit en :where(), donc sans spécificité : cette feuille est
 * chargée après theme.css et hors couche, elle gagnerait sinon contre
 * n'importe quelle règle du thème. Ainsi le thème habille les vidéos
 * (couleurs, format du cadre, rayons) avec des sélecteurs ordinaires.
 * Pépinova : src/scss/module-overrides/_product-video.scss.
 *
 * Réglages exposés au thème :
 *   --pv-bg   fond du cadre autour d'une vidéo d'un autre format, et fond
 *             de la diapositive d'un son
 *   --pv-fit  cadrage de la vidéo et de son aperçu (contain | cover)
 * Couleurs de la forme d'onde d'un son : `color` de .pv-wave__bars (reste
 * à jouer) et de .pv-wave__bars--played (joué).
 */

:where(.pv-slide) {
  position: relative;
}

:where(.pv-media) {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pv-bg, #f2f2f2);
  /* Unités cqw / cqh pour dimensionner le lecteur YouTube à son format. */
  container-type: size;
}

/* L'aperçu est une <img> dans une diapositive : les règles d'image de la
   galerie du thème (format imposé, recadrage, marge des visuels détourés)
   le visent aussi. Il reprend ici la géométrie du cadre. */
:where(.pv-poster, .pv-video) {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  padding: 0;
  object-fit: var(--pv-fit, contain);
  background: transparent;
  border: 0;
}

/* YouTube : l'aperçu reste entier, comme le lecteur qui lui succède. Un
   lecteur recadré perdrait ses commandes et son logo sur les bords, ce que
   les règles d'intégration de YouTube interdisent. */
:where(.pv-slide[data-pv-source="youtube"]) :where(.pv-poster) {
  object-fit: contain;
}

:where(.pv-poster) {
  z-index: 1;
  transition: opacity 0.3s ease, visibility 0.3s;
}

:where(.pv-slide.is-started) :where(.pv-poster) {
  visibility: hidden;
  opacity: 0;
}

:where(.pv-video) {
  z-index: 0;
  cursor: pointer;
}

/* Plein écran : image entière, quel que soit le cadrage de la galerie.
   Deux règles séparées : un sélecteur inconnu invaliderait toute la liste. */
.pv-video:fullscreen {
  object-fit: contain;
  cursor: auto;
}

.pv-video:-webkit-full-screen {
  object-fit: contain;
  cursor: auto;
}

:where(.pv-frame) {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.pv-frame:empty) {
  pointer-events: none;
}

/* flex: none : élément flex, l'iframe serait sinon ramenée à la largeur du
   cadre, et un cadrage `cover` (lecteur plus large que le cadre, rogné) ne
   prendrait jamais. */
:where(.pv-iframe) {
  flex: none;
  width: min(100cqw, calc(100cqh * var(--pv-ratio, 1.7778)));
  height: auto;
  aspect-ratio: var(--pv-ratio, 1.7778);
  border: 0;
}

/* --- Bouton de lecture ------------------------------------------------ */

:where(.pv-play) {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  /* Pas de retrait : le tracé du triangle porte déjà sa compensation
     optique (views/templates/front/slide.tpl). */
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: rgb(0 0 0 / 55%);
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

:where(.pv-play) svg {
  width: 45%;
  height: 45%;
}

/* --- Commandes : pause, son, plein écran ------------------------------ */

/* En bas à gauche (demande client du 2026-09-24) : le coin droit reste
   libre pour l'image. */
:where(.pv-controls) {
  position: absolute;
  inset-inline-start: 0.75rem;
  inset-block-end: 0.75rem;
  z-index: 3;
  display: flex;
  gap: 0.4rem;
}

:where(.pv-control) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: rgb(0 0 0 / 55%);
  border: 0;
  border-radius: 50%;
}

:where(.pv-icon-play, .pv-icon-sound) {
  display: none;
}

:where(.pv-slide.is-paused) :where(.pv-icon-play),
:where(.pv-slide.is-unmuted) :where(.pv-icon-sound) {
  display: block;
}

:where(.pv-slide.is-paused) :where(.pv-icon-pause),
:where(.pv-slide.is-unmuted) :where(.pv-icon-muted) {
  display: none;
}

/* --- Miniature --------------------------------------------------------- */

:where(.pv-thumb) {
  position: relative;
}

:where(.pv-thumb__image) {
  padding: 0;
  object-fit: cover;
}

:where(.pv-thumb__image--empty) {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--pv-bg, #f2f2f2);
}

:where(.pv-thumb__icon) {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: #fff;
  pointer-events: none;
  background: rgb(0 0 0 / 55%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* --- Son (MP3) ---------------------------------------------------------- */

/* Pas d'image. Trois rangées : le bouton occupe celle du milieu, donc le
   centre exact du cadre, à hauteur des flèches du carrousel (qui passent de
   part et d'autre) ; titre, forme d'onde et durées prennent la rangée du
   bas, que les flèches ne croisent pas. */
:where(.pv-audio) {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
}

/* Le bouton reste dans la grille (celui d'une vidéo est posé au centre de
   l'aperçu), et il sert aussi de pause. */
:where(.pv-audio__play) {
  position: relative;
  inset: auto;
  grid-row: 2;
  transform: none;
}

:where(.pv-audio__details) {
  display: flex;
  flex-direction: column;
  grid-row: 3;
  gap: 0.75rem;
  align-items: center;
  align-self: start;
  /* 70 % : les flèches du carrousel (Bootstrap) sont des zones cliquables
     de 15 % de large sur toute la hauteur ; la forme d'onde reste entre. */
  width: min(70%, 22rem);
  padding-block-start: 1rem;
}

:where(.pv-audio__icon-pause),
:where(.pv-slide.is-playing) :where(.pv-audio__icon-play) {
  display: none;
}

:where(.pv-slide.is-playing) :where(.pv-audio__icon-pause) {
  display: block;
}

:where(.pv-audio__play:disabled) {
  cursor: default;
  opacity: 0.4;
}

:where(.pv-audio__title) {
  margin: 0;
  text-align: center;
}

/* Forme d'onde : deux couches de barres superposées ; la seconde (jouée)
   est rognée à droite d'après --pv-progress, de 0 à 1. */
:where(.pv-wave) {
  position: relative;
  width: 100%;
  height: 4rem;
}

:where(.pv-wave__bars) {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 2px;
  align-items: center;
  color: rgb(0 0 0 / 20%);
  pointer-events: none;
}

:where(.pv-wave__bars) > span {
  flex: 1 1 0;
  min-width: 1px;
  height: calc(var(--pv-peak, 0.3) * 100%);
  background: currentColor;
  border-radius: 999px;
}

:where(.pv-wave__bars--played) {
  color: inherit;
  clip-path: inset(0 calc(100% - var(--pv-progress, 0) * 100%) 0 0);
}

/* Curseur natif invisible posé sur la forme d'onde : clic, glisser,
   clavier et lecteurs d'écran, sans dessiner de piste. */
:where(.pv-wave__seek) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  background: transparent;
  opacity: 0;
  appearance: none;
}

:where(.pv-wave__seek:disabled) {
  cursor: default;
}

:where(.pv-audio__time) {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Miniature : la forme d'onde réduite, sous le pictogramme. */
:where(.pv-thumb__audio) {
  display: flex;
  gap: 2px;
  align-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0 15%;
  color: rgb(0 0 0 / 20%);
  background: var(--pv-bg, #f2f2f2);
}

:where(.pv-thumb__audio) > span {
  flex: 1 1 0;
  height: calc(var(--pv-peak, 0.3) * 45%);
  background: currentColor;
  border-radius: 999px;
}

/* Spécificité réelle, volontairement : un `display` posé par le thème sur
   un bouton ne doit pas empêcher l'attribut `hidden` de le masquer. */
.pv-slide [hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  :where(.pv-poster) {
    transition: none;
  }
}