document.addEventListener("DOMContentLoaded", function () {
  let touchStartX = 0;
  let touchEndX = 0;
  
  const container = document.querySelector(".cards");
  const inputs = document.querySelectorAll("input[name='slider']");
  let currentIndex = Array.from(inputs).findIndex(input => input.checked);

  function updateIndex() {
      currentIndex = Array.from(inputs).findIndex(input => input.checked);
  }

  function checkIndex() {
      inputs[currentIndex].checked = true;
  }

  // Met à jour l'index quand l'utilisateur clique sur un label
  inputs.forEach(input => {
      input.addEventListener("change", updateIndex);
  });

  container.addEventListener("touchstart", function (event) {
      touchStartX = event.touches[0].clientX;
  });

  container.addEventListener("touchend", function (event) {
      touchEndX = event.changedTouches[0].clientX;
      handleGesture();
  });

  function handleGesture() {
      const swipeThreshold = 50; // Distance minimale pour valider un swipe

      if (touchEndX < touchStartX - swipeThreshold) {
          // Swipe gauche (image suivante)
          currentIndex = (currentIndex + 1) % inputs.length;
      } else if (touchEndX > touchStartX + swipeThreshold) {
          // Swipe droite (image précédente)
          currentIndex = (currentIndex - 1 + inputs.length) % inputs.length;
      }

      checkIndex();
  }
});