/* Styles principaux du slider */
#slider-section .custom-slider {
  width: 100%;
  height: var(--height);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
}

#slider-section .custom-slider__list {
  display: flex;
  gap: 20px; /* Espace entre les images */
  width: calc((var(--width) + 20px) * var(--quantity)); /* Largeur totale avec espace */
  position: relative;
}

#slider-section .custom-slider__item {
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: 100%;
  animation: custom-autoRun 40s linear infinite; /* Vitesse de défilement ajustée */
  transition: filter 0.5s;
  animation-delay: calc((40s / var(--quantity)) * (var(--position) - 1) - 40s) !important;
  animation-play-state: running; /* Assure que l'animation démarre en mode "en cours" */
}

#slider-section .custom-slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Évite les déformations d'image */
}

/* Animation principale */
@keyframes custom-autoRun {
  from {
      left: 100%;
  }
  to {
      left: calc(var(--width) * -1 - 20px); /* Prend en compte l'espace entre images */
  }
}

/* Pause toutes les animations au survol */
#slider-section .custom-slider:hover .custom-slider__item {
  animation-play-state: paused; /* Met en pause toutes les animations */
}

/* Effets de survol : grise toutes les images sauf l'image survolée */
#slider-section .custom-slider:hover .custom-slider__item:not(:hover) {
  filter: grayscale(1); /* Applique le gris à toutes sauf celle survolée */
}

/* Effet de survol sur l'image spécifique : celle-ci reste en couleur */
#slider-section .custom-slider__item:hover {
  filter: grayscale(0); /* L'image survolée reste en couleur */
}

/* Animation en mode inverse (optionnel) */
#slider-section .custom-slider[reverse="true"] .custom-slider__item {
  animation: custom-reversePlay 40s linear infinite;
}

@keyframes custom-reversePlay {
  from {
      left: calc(var(--width) * -1 - 20px);
  }
  to {
      left: 100%;
  }
}

/* ===================== */
/* Media Queries Responsives */
/* ===================== */

/* Pour les écrans de moins de 1024px (tablettes) */
@media (max-width: 1024px) {
  #slider-section .custom-slider {
      --width: 300px; /* Taille réduite */
      --height: 300px;
  }

  #slider-section .custom-slider__list {
      gap: 15px; /* Réduction de l'espace entre les images */
  }
}

/* Pour les écrans de moins de 768px (petites tablettes et grands smartphones) */
@media (max-width: 768px) {
  #slider-section .custom-slider {
      --width: 250px;
      --height: 250px;
  }

  #slider-section .custom-slider__list {
      gap: 10px;
  }
}

/* Pour les écrans de moins de 480px (smartphones) */
@media (max-width: 480px) {
  #slider-section .custom-slider {
      --width: 200px;
      --height: 200px;
  }

  #slider-section .custom-slider__list {
      gap: 5px;
  }
}