/* -------------------------------------------------------------------
   Produit Slider : parties communes (pagination, conteneur)
   ------------------------------------------------------------------- */

/* .mySwiper : prend 100% largeur et 100% hauteur de son parent */
.dixi-slider .mySwiper {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 100px;
}
.dixi-slider .swiper-wrapper {
  height: 480px !important;
}
/* Pagination verticale (numéros) inchangée */
.dixi-slider .swiper-pagination {
  position: absolute;
  top: 50%;
  right: 40px !important;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
} 
.dixi-slider .swiper-pagination-bullet {
  background: white;
  padding: 0.4rem;
  border-radius: 50%;
  color: #fff;
  position: relative;
  font-size: 14px;
  opacity: 1 !important;
}
.dixi-slider .mySwiper .swiper-pagination .swiper-pagination-bullet-active {
  background: black !important;
  font-weight: bold;
}
.slideNmb {
  position: absolute;
  right: -20px;
  top: -5px;
}

/* -------------------------------------------------------------------
   Slider principal : replacement de <img> par background-image
   ------------------------------------------------------------------- */
.dixi-slider .mySwiper .swiper-slide {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left;
}

/* -------------------------------------------------------------------
   Miniatures : .miniature avec background-image
   ------------------------------------------------------------------- */
.dixi-slider .miniatures {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.dixi-slider .miniatures .miniature {
  cursor: pointer;
  width: 120px;
  height: 80px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid black;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.dixi-slider .miniatures .miniature:hover {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .dixi-slider .mySwiper .swiper-wrapper {
    height: 300px !important;
  }
  .dixi-slider .miniatures {
    bottom: 10px;
  }
  .dixi-slider .miniatures .miniature {
    width: 80px;
    height: 60px;
  }
  
}