@charset "UTF-8";

/*
 * Maison YAMM — Product Gallery HD Viewer V2
 *
 * Adaptation native V2 du viewer historique #525.
 * Aucun moteur galerie parallèle : le viewer lit uniquement
 * les images actuellement rendues par product-gallery.
 */

html.yamm-gallery-viewer-open,
html.yamm-gallery-viewer-open body {
  overflow: hidden !important;
}

.yamm-product-gallery__frame:not(.yamm-product-gallery__frame--video) img {
  cursor: default;
}

#yamm-gallery-viewer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    #dcdbda 0%,
    #f4f3f2 100%
  );
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .18s ease,
    visibility 0s linear .18s;
}

#yamm-gallery-viewer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .18s ease;
}

#yamm-gallery-viewer .yamm-gallery-viewer__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding:
    clamp(38px, 5vh, 72px)
    clamp(50px, 7vw, 112px);
  touch-action: none;
}

#yamm-gallery-viewer .yamm-gallery-viewer__image {
  --yamm-pan-x: 0px;
  --yamm-pan-y: 0px;

  display: block;
  width: auto;
  height: auto;
  max-width: min(88vw, 1680px);
  max-height: 86dvh;
  margin: 0 auto;
  object-fit: contain;
  object-position: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;

  transform:
    translate3d(
      var(--yamm-pan-x),
      var(--yamm-pan-y),
      0
    )
    scale(1);

  transform-origin: 50% 50%;

  transition:
    transform .34s cubic-bezier(.22,.72,.22,1),
    opacity .14s ease;

  will-change: transform;
}

#yamm-gallery-viewer .yamm-gallery-viewer__image.is-loading {
  opacity: .18;
}

#yamm-gallery-viewer[data-zoom="2"]
.yamm-gallery-viewer__image {
  transform:
    translate3d(
      var(--yamm-pan-x),
      var(--yamm-pan-y),
      0
    )
    scale(1.55);
  cursor: grab;
}

#yamm-gallery-viewer[data-zoom="3"]
.yamm-gallery-viewer__image {
  transform:
    translate3d(
      var(--yamm-pan-x),
      var(--yamm-pan-y),
      0
    )
    scale(2.25);
  cursor: grab;
}

#yamm-gallery-viewer
.yamm-gallery-viewer__image.is-dragging {
  cursor: grabbing;
  transition: opacity .14s ease;
}

#yamm-gallery-viewer button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
}

#yamm-gallery-viewer .yamm-gallery-viewer__close,
#yamm-gallery-viewer .yamm-gallery-viewer__nav,
#yamm-gallery-viewer .yamm-gallery-viewer__quickzoom,
#yamm-gallery-viewer .yamm-gallery-viewer__tool {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #111;
  box-shadow: 0 2px 14px rgba(0,0,0,.055);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  cursor: pointer;
  line-height: 1;
  transition:
    background .16s ease,
    transform .16s ease,
    opacity .16s ease;
}

#yamm-gallery-viewer .yamm-gallery-viewer__close,
#yamm-gallery-viewer .yamm-gallery-viewer__nav {
  border: 1px solid rgba(20,20,20,.09);
}

#yamm-gallery-viewer .yamm-gallery-viewer__close:hover,
#yamm-gallery-viewer .yamm-gallery-viewer__nav:hover,
#yamm-gallery-viewer .yamm-gallery-viewer__quickzoom:hover,
#yamm-gallery-viewer .yamm-gallery-viewer__tool:hover {
  background: #fff;
}

#yamm-gallery-viewer .yamm-gallery-viewer__close:active,
#yamm-gallery-viewer .yamm-gallery-viewer__quickzoom:active,
#yamm-gallery-viewer .yamm-gallery-viewer__tool:active {
  transform: scale(.96);
}

#yamm-gallery-viewer .yamm-gallery-viewer__close {
  top: 22px;
  right: 24px;
  width: 42px;
  height: 42px;
}

#yamm-gallery-viewer .yamm-gallery-viewer__close svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: #111 !important;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

#yamm-gallery-viewer .yamm-gallery-viewer__nav {
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.075);
}

#yamm-gallery-viewer .yamm-gallery-viewer__nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #111;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#yamm-gallery-viewer .yamm-gallery-viewer__nav:active {
  transform: translateY(-50%) scale(.95);
}

#yamm-gallery-viewer .yamm-gallery-viewer__prev {
  left: 22px;
}

#yamm-gallery-viewer .yamm-gallery-viewer__next {
  right: 22px;
}

#yamm-gallery-viewer[data-single="1"]
.yamm-gallery-viewer__nav {
  display: none;
}

#yamm-gallery-viewer .yamm-gallery-viewer__quickzoom {
  left: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(20,20,20,.08);
  background: rgba(255,255,255,.84);
}

#yamm-gallery-viewer .yamm-gallery-viewer__quickzoom svg,
#yamm-gallery-viewer .yamm-gallery-viewer__tool svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#yamm-gallery-viewer
.yamm-gallery-viewer__quickzoom-icon--close {
  display: none;
}

#yamm-gallery-viewer.is-tools-open
.yamm-gallery-viewer__quickzoom-icon--loupe {
  display: none;
}

#yamm-gallery-viewer.is-tools-open
.yamm-gallery-viewer__quickzoom-icon--close {
  display: block;
}

#yamm-gallery-viewer .yamm-gallery-viewer__tools {
  position: absolute;
  left: 20px;
  bottom: 84px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      rgba(135,126,115,.92) 0%,
      rgba(173,165,153,.92) 100%
    );
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility 0s linear .18s;
}

#yamm-gallery-viewer.is-tools-open
.yamm-gallery-viewer__tools {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity .18s ease,
    transform .18s ease;
}

#yamm-gallery-viewer .yamm-gallery-viewer__tool {
  position: relative;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(0,0,0,.04);
  background: rgba(255,255,255,.96);
  color: #171717;
}

#yamm-gallery-viewer .yamm-gallery-viewer__tool[disabled] {
  opacity: .35;
  cursor: default;
}

@media (max-width: 980px) {
  #yamm-gallery-viewer .yamm-gallery-viewer__stage {
    padding: 58px 38px 48px;
  }

  #yamm-gallery-viewer .yamm-gallery-viewer__image {
    max-width: 92vw;
    max-height: 82dvh;
  }

  #yamm-gallery-viewer .yamm-gallery-viewer__close {
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    width: 38px;
    height: 38px;
    font-size: 24px;
  }

  #yamm-gallery-viewer .yamm-gallery-viewer__nav {
    width: 44px;
    height: 44px;
  }

  #yamm-gallery-viewer .yamm-gallery-viewer__prev {
    left: 14px;
  }

  #yamm-gallery-viewer .yamm-gallery-viewer__next {
    right: 14px;
  }

  #yamm-gallery-viewer .yamm-gallery-viewer__quickzoom {
    left: 16px;
    bottom: calc(
      92px + env(safe-area-inset-bottom)
    );
    width: 48px;
    height: 48px;
  }

  #yamm-gallery-viewer .yamm-gallery-viewer__tools {
    left: 14px;
    bottom: calc(
      148px + env(safe-area-inset-bottom)
    );
    padding: 9px 7px;
    gap: 8px;
    border-radius: 24px;
  }

  #yamm-gallery-viewer .yamm-gallery-viewer__tool {
    width: 46px;
    height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #yamm-gallery-viewer,
  #yamm-gallery-viewer .yamm-gallery-viewer__image,
  #yamm-gallery-viewer .yamm-gallery-viewer__tools {
    transition: none !important;
  }
}