/* Conteneur principal */
.carousel-container {
  max-width: 600px;
  margin: 0 auto;
}

/* Fenêtre de masquage pour ne voir qu'une image à la fois */
.carousel-wrapper {
  overflow: hidden;
  border-radius: 8px;
  width: 100%;
}

/* Conteneur qui défile */
.carousel-animation {
  display: flex;
  width: 400%; /* 4 diapositives au total (3 + 1 clone) = 400% */
  animation: autoplay 10.5s infinite ease-in-out;
}

/* Optionnel : Met en pause le défilement quand la souris survole le carrousel */
.carousel-animation:hover {
  animation-play-state: paused;
}

/* Chaque diapositive prend exactement la largeur du wrapper */
.slide {
  width: 25%; /* 100% divisé par 4 diapositives */
}

/* Image responsive */
.slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Chronologie de l'animation pour 3 images + 1 clone */
@keyframes autoplay {
  /* Image 1 visible */
  0%, 28.5% {
    transform: translateX(0);
  }
  /* Transition vers Image 2 */
  33.3% {
    transform: translateX(-25%);
  }
  /* Image 2 visible */
  33.3%, 61.8% {
    transform: translateX(-25%);
  }
  /* Transition vers Image 3 */
  66.6% {
    transform: translateX(-50%);
  }
  /* Image 3 visible */
  66.6%, 95.1% {
    transform: translateX(-50%);
  }
  /* Transition vers l'Image 1 clonée */
  100% {
    transform: translateX(-75%);
  }
}