/* Le conteneur pour le diaporama */
.slideshow {
    width: 100%;
    overflow: hidden;
  }
  
  /* Les images du diaporama */
  .slideshow img {
    float: left;
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 1s ease-in-out;
  }
  
  /* Les contrôles du diaporama */
  .slideshow .controls {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  
  /* Le bouton pour avancer */
  .slideshow .controls .next {
    margin-left: 20px;
  }
  
  /* Le bouton pour reculer */
  .slideshow .controls .prev {
    margin-right: 20px;
  }
  
  /* Le style des boutons */
  .slideshow .controls button {
    background-color: white;
    border: none;
    padding: 10px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.5s ease-in-out;
  }
  
  /* Le style des boutons survolés */
  .slideshow .controls button:hover {
    background-color: lightgray;
  }
  
  /* Ajouter une classe active à l'image actuelle */
  .slideshow img.active {
    transform: translateX(0);
  }
  
  /* Déplacer les images vers la gauche ou la droite */
  .slideshow img.previous {
    transform: translateX(-100%);
  }
  
  .slideshow img.next {
    transform: translateX(100%);
  }