.slider-fade {
  position: relative;
  max-width: 1024px;
  margin: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden; 
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.slider-fade figure {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fadeOnce 50s ease-in-out forwards; 
  margin: 0;
}



/* FLÈCHES */
.slider-fade .nav {
  display: none; /* MASQUÉES PAR DÉFAUT */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  font-size: 2rem;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  cursor: pointer;
  z-index: 10;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slider-fade .prev { left: 10px; }
.slider-fade .next { right: 10px; }

/* VISIBILITÉ APRÈS FIN D’ANIMATION */
.slider-fade.show-nav .nav {
  display: flex;
}


/* Animation des 9 premières images */
.slider-fade figure:nth-child(1)  { animation: fadeOnce 50s ease-in-out forwards; animation-delay: 0s; }
.slider-fade figure:nth-child(2)  { animation: fadeOnce 50s ease-in-out forwards; animation-delay: 5s; }
.slider-fade figure:nth-child(3)  { animation: fadeOnce 50s ease-in-out forwards; animation-delay: 10s; }
.slider-fade figure:nth-child(4)  { animation: fadeOnce 50s ease-in-out forwards; animation-delay: 15s; }
.slider-fade figure:nth-child(5)  { animation: fadeOnce 50s ease-in-out forwards; animation-delay: 20s; }
.slider-fade figure:nth-child(6)  { animation: fadeOnce 50s ease-in-out forwards; animation-delay: 25s; }
.slider-fade figure:nth-child(7)  { animation: fadeOnce 50s ease-in-out forwards; animation-delay: 30s; }
.slider-fade figure:nth-child(8)  { animation: fadeOnce 50s ease-in-out forwards; animation-delay: 35s; }
.slider-fade figure:nth-child(9)  { animation: fadeOnce 50s ease-in-out forwards; animation-delay: 40s; }

/* Dernière image : reste affichée */
.slider-fade figure:nth-child(10) {
  animation: fadeFinal 5s ease-in-out forwards;
  animation-delay: 45s;
}




@keyframes fadeOnce {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  8%   { opacity: 1; }
  10%  { opacity: 0; }
  100% { opacity: 0; }
}


@keyframes fadeFinal {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 1; }
}



.slider-fade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider-fade figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  text-align: center;
  font-weight: bold;
}