body {
  overflow: hidden; /* Empêche le défilement de la page */
}

.shop-section {
  display: flex;
  flex-direction: column; /* Aligne les éléments verticalement */
  height: calc(
    100vh - 20vh
  ); /* Hauteur totale entre le header (10vh) et le footer (10vh) */
  margin-top: 10vh; /* Espace sous le header */
  margin-bottom: 10vh; /* Espace au-dessus du footer */
  padding: 20px;
  gap: 20px; /* Espace entre les éléments */
  overflow: hidden; /* Empêche le scroll dans cette section */
}

.shop-section h2,
.shop-section p {
  text-align: center; /* Centre le texte horizontalement */
  margin: 0; /* Supprime les marges */
}

.shop-section h2 {
  font-size: 2.5em;
  color: #f3f3d1;
  margin-bottom: 5px; /* Ajoute un petit espace sous le titre */
}

.shop-section p {
  font-size: 1.2em;
  color: #f3f3d1;
  margin-bottom: 20px; /* Ajoute un espace sous le paragraphe */
}

.shop-items {
  display: flex; /* Active Flexbox pour aligner les items */
  justify-content: center; /* Centre les items horizontalement */
  align-items: flex-start; /* Aligne les items en haut */
  gap: 20px; /* Ajoute un espace entre les items */
  flex-wrap: nowrap; /* Empêche les items de passer à la ligne */
  overflow-x: auto; /* Ajoute un défilement horizontal */
  width: 100%; /* Assure que le conteneur prend toute la largeur */
  white-space: nowrap; /* Empêche les items de passer à la ligne */
}

.shop-item {
  position: relative; /* Permet de positionner les enfants en fonction de ce conteneur */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: rgba(
    255,
    255,
    255,
    0.208
  ); /* Change le fond en transparent */
  max-width: 300px; /* Limite la largeur */
  overflow: hidden; /* Empêche le débordement */
  height: 400px; /* Hauteur fixe pour uniformiser les items */
  justify-content: center; /* Centre les éléments verticalement */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0; /* Empêche les items de rétrécir */
  margin: 15px; /* Ajoute un espace autour de chaque item */
}

.shop-item:hover {
  transform: scale(1.05); /* Grossit légèrement l'élément */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Ajoute un effet d'ombre */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation fluide */
  overflow: visible; /* Assure que le débordement est visible sans scrollbar */
}

.shop-item img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px; /* Réduit l'espace sous l'image */
}

.shop-item img.short-image {
  max-width: 80%; /* Réduit la largeur de l'image à 60% de son conteneur */
  height: auto; /* Maintient les proportions de l'image */
  margin: 0 auto; /* Centre l'image horizontalement */
}

.shop-item h3 {
  position: absolute; /* Positionne le titre par rapport au conteneur parent */
  top: 15px; /* Place le titre à 15px du haut */
  left: 50%; /* Centre horizontalement */
  transform: translateX(-50%); /* Ajuste pour centrer parfaitement */
  font-size: 1.5em; /* Taille du titre */
  color: #f3f3d1; /* Couleur du texte */
  margin: 0; /* Supprime les marges par défaut */
  text-align: center; /* Centre le texte horizontalement */
}

.shop-item p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center; /* Centre le texte horizontalement */
  word-wrap: break-word; /* Permet de couper les mots longs si nécessaire */
  color: #f3f3d1; /* Couleur du texte */
  width: 100%; /* Force le paragraphe à occuper toute la largeur */
  white-space: normal; /* Permet au texte de revenir à la ligne */
}

.image-slider {
  position: relative;
  width: 100%;
  height: 200px; /* Ajustez la hauteur selon vos besoins */
  overflow: hidden; /* Cache les parties des images qui débordent */
}

.image-slider img {
  position: absolute; /* Superpose les images */
  top: 0;
  left: 0;
  width: 100%; /* L'image occupe toute la largeur du conteneur */
  height: 100%; /* L'image occupe toute la hauteur du conteneur */
  object-fit: contain; /* Affiche l'image entière sans la couper */
  opacity: 0; /* Cache toutes les images par défaut */
  transition: opacity 0.5s ease-in-out; /* Animation de transition pour le changement d'image */
}

.image-slider img.active {
  opacity: 1; /* Affiche uniquement l'image active */
  z-index: 1; /* Place l'image active au-dessus des autres */
}