/* Styles pour le comportement plein écran des conteneurs d'offre du jour */

/* Modification du conteneur défilant pour qu'il n'affiche qu'un conteneur à la fois */
.produit-vedette .conteneur-defilant {
  display: block; /* Remplace flex pour empêcher l'affichage côte à côte */
  overflow-x: hidden; /* Masque le défilement horizontal */
  position: relative; /* Pour le positionnement absolu des conteneurs inactifs */
  min-height: 500px; /* Hauteur minimale pour éviter les sauts de page */
}

/* Modification des conteneurs pour qu'ils occupent 100% de la largeur */
.produit-vedette .conteneur-vitrine {
  width: 100%; /* Occupe toute la largeur */
  min-width: 100%; /* Occupe toute la largeur */
  flex: 0 0 100%; /* Base pour flexbox */
  margin-bottom: 20px; /* Espace entre les conteneurs */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Animation de transition */
  position: relative; /* Pour le positionnement correct */
}

/* S'assurer que les images sont entièrement visibles */
.produit-vedette .carousel-item img,
.produit-vedette .conteneur-vitrine img {
  width: 100%;
  height: auto;
  object-fit: contain; /* Assure que l'image est entièrement visible */
  max-height: 350px; /* Hauteur maximale augmentée pour les images */
  display: block; /* Évite les espaces blancs sous l'image */
  margin: 0 auto; /* Centre l'image horizontalement */
}

/* Style spécifique pour les images dans la vitrine */
.produit-vedette .vitrine img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 350px;
  margin: 0 auto 15px auto;
}

/* Conteneur d'image avec hauteur fixe */
.produit-vedette .conteneur-image {
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  background-color: #f8f8f8;
  border-radius: 8px;
  overflow: hidden;
}

/* Ajustement du carrousel pour afficher les images complètes */
.produit-vedette .carousel,
.produit-vedette .image-produit {
  background-color: #f8f8f8; /* Fond léger pour le carrousel */
  border-radius: 8px; /* Coins arrondis */
  padding: 10px; /* Espace autour des images */
  margin-bottom: 15px; /* Espace sous le carrousel */
  text-align: center; /* Centre le contenu */
  overflow: hidden; /* Évite les débordements */
}

/* Style pour le conteneur actif */
.produit-vedette .conteneur-vitrine.actif {
  display: block;
  opacity: 1;
  transform: translateX(0);
  z-index: 2; /* Au-dessus des autres conteneurs */
}

/* Style pour le conteneur inactif */
.produit-vedette .conteneur-vitrine.inactif {
  display: none; /* Complètement masqué */
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(100%);
  z-index: 1; /* En dessous du conteneur actif */
}

/* Styles pour les boutons de navigation */
.produit-vedette .btn-vers-1,
.produit-vedette .btn-vers-2 {
  opacity: 1; /* Toujours visible */
  pointer-events: auto; /* Toujours cliquable */
  background-color: rgba(0, 86, 179, 0.8); /* Fond semi-transparent */
  z-index: 10; /* S'assurer qu'ils sont au-dessus du contenu */
  position: absolute; /* Positionnement absolu */
  top: 50%; /* Centré verticalement */
  transform: translateY(-50%); /* Ajustement pour centrage parfait */
  width: 40px; /* Largeur fixe */
  height: 40px; /* Hauteur fixe */
  border-radius: 50%; /* Forme ronde */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre légère */
  transition: all 0.3s ease; /* Transition douce */
}

/* Positionnement spécifique pour chaque bouton */
.produit-vedette .btn-vers-1 {
  left: 10px; /* À gauche */
}

.produit-vedette .btn-vers-2 {
  right: 10px; /* À droite */
}

/* Effet au survol */
.produit-vedette .btn-vers-1:hover,
.produit-vedette .btn-vers-2:hover {
  background-color: rgba(0, 86, 179, 1); /* Bleu plus opaque au survol */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée */
  transform: translateY(-50%) scale(1.1); /* Légère augmentation de taille */
}

/* Styles responsifs */
@media (max-width: 768px) {
  .produit-vedette .conteneur-vitrine {
    min-width: 100%;
    flex-basis: 100%;
  }

  /* Ajustement des boutons de navigation pour tablettes */
  .produit-vedette .btn-vers-1,
  .produit-vedette .btn-vers-2 {
    width: 36px;
    height: 36px;
  }

  /* Ajustement de la taille des icônes de flèche */
  .produit-vedette .icone-fleche {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  .produit-vedette .conteneur-vitrine {
    min-width: 100%;
    flex-basis: 100%;
  }

  /* Ajustement des boutons de navigation pour mobiles */
  .produit-vedette .btn-vers-1,
  .produit-vedette .btn-vers-2 {
    width: 32px;
    height: 32px;
    top: 40%; /* Légèrement plus haut sur mobile */
  }

  /* Ajustement de la taille des icônes de flèche */
  .produit-vedette .icone-fleche {
    font-size: 16px;
  }

  /* Ajustement des transitions pour une meilleure performance sur mobile */
  .produit-vedette .conteneur-vitrine {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* Ajustement de la hauteur des images pour mobile */
  .produit-vedette .carousel-item img,
  .produit-vedette .conteneur-vitrine img,
  .produit-vedette .vitrine img {
    max-height: 250px; /* Hauteur réduite pour mobile */
  }

  /* Ajustement du conteneur d'image pour mobile */
  .produit-vedette .conteneur-image {
    height: 250px; /* Hauteur réduite pour mobile */
  }

  /* Ajustement de la hauteur minimale du conteneur défilant */
  .produit-vedette .conteneur-defilant {
    min-height: 400px; /* Hauteur minimale réduite pour mobile */
  }
}

@media (max-width: 380px) {
  .produit-vedette .conteneur-vitrine {
    min-width: 100%;
    flex-basis: 100%;
  }

  /* Ajustement des boutons de navigation pour petits mobiles */
  .produit-vedette .btn-vers-1,
  .produit-vedette .btn-vers-2 {
    width: 28px;
    height: 28px;
  }

  /* Ajustement de la taille des icônes de flèche */
  .produit-vedette .icone-fleche {
    font-size: 14px;
  }

  /* Ajustement de la hauteur des images pour très petits écrans */
  .produit-vedette .carousel-item img,
  .produit-vedette .conteneur-vitrine img,
  .produit-vedette .vitrine img {
    max-height: 200px; /* Hauteur encore plus réduite */
  }

  /* Ajustement du conteneur d'image pour très petits écrans */
  .produit-vedette .conteneur-image {
    height: 200px; /* Hauteur réduite */
  }

  /* Ajustement de la hauteur minimale du conteneur défilant */
  .produit-vedette .conteneur-defilant {
    min-height: 350px; /* Hauteur minimale encore plus réduite */
  }

  /* Réduire les marges et paddings pour maximiser l'espace */
  .produit-vedette .vitrine {
    padding: 10px;
  }

  .produit-vedette .carousel,
  .produit-vedette .image-produit {
    padding: 5px;
    margin-bottom: 10px;
  }
}