html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 79vh; /* hauteur du slider */
}

#slides {
  display: flex;
  width: 100%; /* 3 images donc 3 x 100% */
  height: 100%;
  transition: transform 0.5s ease-in-out;
}

#slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Animation pour les cartes */
.slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}