/* ===================================================================
   PDP · Galerie produit (stage unique + pagination dots) — feuille clean
   =================================================================== */

/* ---- Conteneur global ---- */
.pdp-media{
  margin: 6px 12px 18px; /* espace haut réduit, bas un peu plus long */
  display: grid;
  gap: 10px;
}

/* ---- Stage (image principale) ---- */
.pdp-media__stage{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #fafafa;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  aspect-ratio: 1 / 1; /* mobile: carré propre */
}

.pdp-media__stage .swiper,
.pdp-media__stage .swiper-wrapper,
.pdp-media__stage .swiper-slide{
  width: 100%;
  height: 100%;
}

.pdp-media__img{
  width: 100%;
  height: 100%;
  object-fit: contain;      /* jamais de crop agressif */
  background: #fafafa;      /* halo neutre autour des visuels non carrés */
  display: block;
}

/* ---- Compteur x / y (facultatif) ---- */
.pdp-media__counter{
  position: absolute;
  top: 8px; left: 8px;
  padding: 4px 8px;
  font-size: 12px; font-weight: 600;
  color: #fff; background: rgba(0,0,0,.55);
  border-radius: 999px;
  line-height: 1;
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  font-variant-numeric: tabular-nums;
  z-index: 3;
}

/* ---- Pagination (dots) en overlay ---- */
.pdp-pagination{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  z-index: 4;
}

.pdp-bullet{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}
.pdp-bullet.is-active{
  background: #fff;
}

/* Focus clavier sur bullets (accessibilité) */
.pdp-pagination .pdp-bullet:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ---- Zoom plein écran ---- */
.pdp-zoom{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 2147483647; /* top absolu */
  display: none;       /* .is-open => visible */
}
.pdp-zoom.is-open{ display: block; }

.pdp-zoom__close{
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 10px;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(255,255,255,.16);
  z-index: 3;             /* au-dessus du swiper */
  pointer-events: auto;
}
.pdp-zoom .swiper,
.pdp-zoom .swiper-wrapper,
.pdp-zoom .swiper-slide{
  width: 100%;
  height: 100%;
}
.pdp-zoom .swiper-slide{
  display: flex; align-items: center; justify-content: center;
}
.pdp-zoom .swiper-zoom-container img{
  max-width: 100%;
  height: auto;
}

/* Empêche le scroll de la page quand zoom ouvert */
.mhgn-no-scroll{ overflow: hidden; }

/* ---- Lazy skeleton (tant que l'image n'est pas chargée) ---- */
.pdp-media__stage .swiper-slide{ position: relative; }
.pdp-media__stage .swiper-slide .swiper-lazy:not([src]){
  background: linear-gradient(90deg, #f0f0f0, #f6f6f6, #f0f0f0);
  background-size: 200% 100%;
  animation: pdpShimmer 1.2s linear infinite;
}
@keyframes pdpShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ---- Kill-switch (si vieux styles thumbs demeurent dans d'autres CSS) ---- */
.pdp-thumbs, .pdp-media__thumbs, .pdp-media .thumbs, .swiper-thumbs{ display: none !important; }
.mobile-product-carousel .custom-slide-counter{ display: none !important; }

/* ---- Quand le titre est sous la galerie ---- */
.pdp-media + .product-title{ margin-top: 16px; }

/* ---- Responsive ---- */
@media (min-width: 768px){
  .pdp-media{ margin: 8px 16px 20px; gap: 12px; }
  .pdp-media__stage{ aspect-ratio: 4 / 3; }
}

/* ---- Mode sombre ---- */
@media (prefers-color-scheme: dark){
  .pdp-media__stage{
    background: #0f1115;
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
  }
  .pdp-bullet{ background: rgba(255,255,255,.45); }
  .pdp-bullet.is-active{ background: #fff; }
}

/* === Fix Swiper qui étire la pagination : garder un “badge” centré === */
.pdp-media__stage .pdp-pagination {
  position: absolute;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  right: auto !important;
  display: inline-flex !important;      /* évite l'étirement */
  justify-content: center;              /* au cas où */
  padding: 6px 10px;
  gap: 8px;
  background: rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  z-index: 4;
}

/* Swiper ajoute ces classes : on les neutralise pour ce composant seulement */
.pdp-media__stage .swiper-horizontal > .pdp-pagination,
.pdp-media__stage .pdp-pagination.swiper-pagination-horizontal {
  left: 50% !important;
  width: auto !important;
}