/* --- Styles spécifiques aux éléments du coupon (conservés) --- */

.img-slide-promo-code {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.custom-img {
  border: 2px solid #e6e6e6;
  width: 211px;
  height: 127px;
}
.custom-img2 {
  border: 2px solid #e6e6e6;
  position: relative;
  width: 211px;
  height: 127px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-img3 {
  position: absolute;
  top: 40%;
  left: 5%;
}
.custom-img4 {
  position: absolute;
  top: 20%;
  left: 8%;
}

/* --- Styles du Carrousel (Optimisés pour Visibilité) --- */

.hot-deals-carousel {
    /* Ajoute un padding pour les flèches pour qu'elles restent dans le conteneur */
    position: relative;
    padding: 0 45px; /* Augmenté légèrement pour s'assurer que la flèche entière est visible */
}

/* Ajustement des indicateurs (POINTS SOUS LE CAROUSEL) */
.hot-deals-carousel .carousel-indicators {
    /* Positionnement sous le carrousel, en utilisant un décalage par rapport au bas */
    bottom: -30px; 
    z-index: 2; /* S'assurer qu'ils sont au-dessus de tout fond */
    margin-bottom: 0; /* Réinitialiser la marge par défaut */
}

/* Indicateurs de couleur */
.hot-deals-carousel .carousel-indicators button {
    background-color: #333; /* Rendre les points noirs ou d'une couleur visible */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: 0.5;
}
.hot-deals-carousel .carousel-indicators button.active {
    opacity: 1;
    background-color: #185463; /* Couleur active plus marquante */
}

/* Les éléments du carrousel pour l'alignement */
.coupons-wrapper {
    position: relative;
    min-height: 250px; 
    display: flex;
    align-items: center;
}
.carousel-inner .row.justify-content-center {
    justify-content: center !important;
}
.carousel-item {
    padding: 1rem 0;
}
.carousel-item .col-12,
.carousel-item .col-sm-6,
.carousel-item .col-md-4, 
.carousel-item .col-lg-3 { 
    display: flex;
    justify-content: center;
    align-items: stretch; 
}


/* --- Styles des Contrôles (Flèches) - Flèches Sombre et Ronde --- */

.carousel-control-prev,
.carousel-control-next {
    /* Style de base pour les contrôles Bootstrap */
    width: 40px; 
    height: 40px;
    /* UTILISATION D'UN FOND SOMBRE POUR CONTRASTER AVEC LE FOND GRIS/BLANC */
    background-color: rgba(0, 0, 0, 0.6); 
    border-radius: 50%;
    opacity: 0.8;
    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 10; /* Assurer qu'elles sont au-dessus des coupons */
    border: none; 
}

/* Positionnement des contrôles à l'EXTRÉMITÉ du padding du carrousel */
.carousel-control-prev {
    left: 0; 
}
.carousel-control-next {
    right: 0;
}

/* Style de l'icône à l'intérieur du contrôle (Force l'icône à être BLANCHE) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
    /* Inverse la couleur de l'icône Bootstrap par défaut pour la rendre blanche */
    filter: invert(1) drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
    background-size: 100% 100%;
}

/* Hover : plus visible */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.8); 
}


/* --- Styles divers (conservés) --- */

.slider-image-div-origin {
  margin-top: 20px;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
}
.image-slideh {
  margin-top: 20px;
}

/* @media (min-width: 1200px) */
@media (min-width: 1200px) {
  .my_contenair {
    width: 938px;
  }
  .slider-image-div-origin {
    margin-top: 44px;
  }
  .image-slideh {
    margin-top: 40px;
    height: 505px;
    background-color: white;
  }
}

/* --- Responsive mobile (max-width: 576px) --- */

@media (max-width: 575.98px) {
  .hot-deals-carousel {
    padding: 0 15px; 
  }
  .carousel-control-prev,
  .carousel-control-next {
    /* Afficher ou cacher les flèches sur mobile */
    display: none; 
  }
  .carousel-indicators {
    bottom: -20px; /* Moins d'espace sur mobile */
  }
  
  /* Styles spécifiques au mobile */
  .slider-image-div-origin {
    margin-top: 10px;
  }
  .image-slideh {
    margin-top: 10px;
  }
  .img-slide-promo-code {
    width: 100%;
  }
  .custom-img4 {
    position: absolute;
    top: 20%;
  }
  .custom-img3 {
    position: absolute;
    top: 40%;
  }
  .carousel-item .col-12 {
        margin-bottom: 1rem; 
    }
}