fix: adapt carousel control on mobile

css/styles.css

@@ -1207,6 +1207,12 @@ img {
     display: flex;
     transition: transform 0.5s ease;
     padding-bottom: 10px;
+    cursor: grab;
+    user-select: none;
+}
+
+.carousel-container:active {
+    cursor: grabbing;
 }
 
 .carousel-item {
@@ -1215,6 +1221,13 @@ img {
     margin-right: 20px;
 }
 
+/* Réduire l'espacement en mobile */
+@media (max-width: 768px) {
+    .carousel-item {
+        margin-right: 10px;
+    }
+}
+
 .carousel-controls {
     display: flex;
     justify-content: center;

js/main.js

@@ -123,20 +123,139 @@ document.addEventListener('DOMContentLoaded', function() {
         const items = carousel.querySelectorAll('.carousel-item');
 
         if (dots.length > 0 && items.length > 0) {
-            dots.forEach((dot, index) => {
+            let currentIndex = 0;
-                dot.addEventListener('click', function() {
+            let startX = 0;
-                    // Calculer la distance à translater
+            let currentX = 0;
-                    const itemWidth = items[0].offsetWidth + parseInt(getComputedStyle(items[0]).marginRight);
+            let isDragging = false;
-                    const newTransform = -index * itemWidth;
+            let startTransform = 0;
 
-                    // Appliquer la transformation
+            function getItemWidth() {
+                return items[0].offsetWidth + parseInt(getComputedStyle(items[0]).marginRight);
+            }
+
+            function updateCarousel(index) {
+                const itemWidth = getItemWidth();
+                const newTransform = -index * itemWidth;
                 container.style.transform = `translateX(${newTransform}px)`;
 
                 // Mettre à jour les dots
                 dots.forEach(d => d.classList.remove('active'));
-                    dot.classList.add('active');
+                if (dots[index]) {
+                    dots[index].classList.add('active');
+                }
+
+                currentIndex = index;
+            }
+
+            dots.forEach((dot, index) => {
+                dot.addEventListener('click', function() {
+                    updateCarousel(index);
                 });
             });
+
+            container.addEventListener('touchstart', function(e) {
+                isDragging = true;
+                startX = e.touches[0].clientX;
+                const transform = window.getComputedStyle(container).transform;
+
+                if (transform !== 'none') {
+                    const matrix = new DOMMatrix(transform);
+                    startTransform = matrix.m41;
+                } else {
+                    startTransform = 0;
+                }
+                container.style.transition = 'none';
+            }, { passive: true });
+
+            container.addEventListener('touchmove', function(e) {
+                if (!isDragging) return;
+
+                currentX = e.touches[0].clientX;
+                const diff = currentX - startX;
+                const newTransform = startTransform + diff;
+
+                container.style.transform = `translateX(${newTransform}px)`;
+            }, { passive: true });
+
+            container.addEventListener('touchend', function(e) {
+                if (!isDragging) return;
+                isDragging = false;
+
+                container.style.transition = 'transform 0.5s ease';
+
+                const diff = currentX - startX;
+                const threshold = 50; // Distance minimale pour considérer un swipe
+
+                // Déterminer la direction du swipe
+                if (Math.abs(diff) > threshold) {
+                    if (diff > 0 && currentIndex > 0) {
+                        // Swipe vers la droite - item précédent
+                        updateCarousel(currentIndex - 1);
+                    } else if (diff < 0 && currentIndex < items.length - 1) {
+                        // Swipe vers la gauche - item suivant
+                        updateCarousel(currentIndex + 1);
+                    } else {
+                        // Retour à la position actuelle
+                        updateCarousel(currentIndex);
+                    }
+                } else {
+                    // Mouvement trop petit, retour à la position actuelle
+                    updateCarousel(currentIndex);
+                }
+
+                currentX = 0;
+            }, { passive: true });
+
+            // Support du drag sur desktop (optionnel)
+            container.addEventListener('mousedown', function(e) {
+                isDragging = true;
+                startX = e.clientX;
+                const transform = window.getComputedStyle(container).transform;
+                if (transform !== 'none') {
+                    const matrix = new DOMMatrix(transform);
+                    startTransform = matrix.m41;
+                } else {
+                    startTransform = 0;
+                }
+                container.style.transition = 'none';
+                container.style.cursor = 'grabbing';
+                e.preventDefault();
+            });
+
+            document.addEventListener('mousemove', function(e) {
+                if (!isDragging) return;
+
+                currentX = e.clientX;
+                const diff = currentX - startX;
+                const newTransform = startTransform + diff;
+
+                container.style.transform = `translateX(${newTransform}px)`;
+            });
+
+            document.addEventListener('mouseup', function(e) {
+                if (!isDragging) return;
+                isDragging = false;
+
+                container.style.transition = 'transform 0.5s ease';
+                container.style.cursor = 'grab';
+
+                const diff = currentX - startX;
+                const threshold = 50;
+
+                if (Math.abs(diff) > threshold) {
+                    if (diff > 0 && currentIndex > 0) {
+                        updateCarousel(currentIndex - 1);
+                    } else if (diff < 0 && currentIndex < items.length - 1) {
+                        updateCarousel(currentIndex + 1);
+                    } else {
+                        updateCarousel(currentIndex);
+                    }
+                } else {
+                    updateCarousel(currentIndex);
+                }
+
+                currentX = 0;
+            });
         }
     });