/* Mise en page du slider */
.slider-container {
  display: flex;
  position: relative;
  width: 85%;
  height: 300px;
  margin: auto;
  overflow: hidden;
  margin-top: 2%;
  margin-bottom: 2%;
  border-radius: 10px;
}

.slide{
  opacity: 0;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

.slide.active{
  opacity: 1;
}

/* Animation du slider vers la gauche (suivant) */
.slide.active.next{
  animation: slideInLeft 1.5s ease forwards;;
}
.slide.next{
  animation: slideOutLeft 1.5s ease forwards;;
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translate(100%, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translate(0, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-100%, -50%);
    
  }
}

/* Animation du slider vers la droite (précédent) */
.slide.active.previous{
  animation: slideInRight 1.5s ease forwards;;
}

.slide.previous{
  animation: slideOutRight 1.5s ease forwards;;
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translate(-100%, -50%);
  }
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translate(0, -50%);
  }
  to {
    opacity: 0;
    transform: translate(100%, -50%);
  }
}

/* Mise en page du texte de chaque slide */
.slide_texte{
  position: absolute;
  color: rgb(255, 255, 255);
  text-shadow: 5px 5px 10px black;
  width: 75%;
  text-align: center;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

/* Taille de l'image de chaque slide */
.slide img {
  width: 105%;
  height: auto;
}

/* Mise en page des boutons du slider */
.bouton_slide button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 10px;
  font-size: 20px;
}
.prev {
  left: 3%;
}
.next {
  right: 3%;
}