/* STYLES POUR SLIDER AVEC FONDU ENCHAÎNÉ EXTRÊMEMENT LONG */

/* Reset complet pour éviter les conflits */
.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  
  /* Style de base pour TOUTES les diapositives */
  .mySlides {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Transition extraordinairement longue pour un fondu quasi imperceptible */
    transition: opacity 15s cubic-bezier(0.25, 0.1, 0.25, 1);
    
    /* Très important: toujours afficher les slides mais avec opacity:0 */
    /* Ceci évite les saccades dues aux changements de display */
    display: block !important;
    visibility: visible !important;
    
    /* Empêcher tout autre effet qui pourrait causer des saccades */
    transform: none !important;
    animation: none !important;
  }
  
  /* Slide actif - simplement changer l'opacité */
  .mySlides.active {
    opacity: 1;
  }
  
  /* Images à l'intérieur des diapositives */
  .mySlides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Conteneur de légende simplifié */
  .caption-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 15px;
    text-align: center;
    font-size: 1rem;
    z-index: 100; /* Toujours au-dessus des images */
  }
  
  /* Transition beaucoup plus longue pour le texte de légende */
  #slide-caption {
    opacity: 1;
    transition: opacity 8s ease;
    margin: 0;
  }
  
  #slide-caption.fade-out {
    opacity: 0;
  }