<Feat> Ajout support téléphone

index.html

@@ -267,6 +267,62 @@
 			font-size: 1em;
 			color: #ff0;
 		}
+
+		/* ====== Responsive mobile ====== */
+		@media (max-width: 900px) {
+			body {
+				flex-direction: column;
+				align-items: center;
+				height: auto;
+				overflow-y: auto;
+				padding: 20px;
+			}
+
+			.colonne {
+				width: 100%;
+			}
+
+			#entrees,
+			#poids {
+				transform: scale(0.8);
+				transform-origin: top center;
+			}
+
+			h2 {
+				font-size: 1.2em;
+			}
+
+			#poids {
+				grid-template-columns: repeat(8, 40px);
+				grid-template-rows: repeat(8, 55px);
+				gap: 4px;
+			}
+
+			.led {
+				width: 30px;
+				height: 30px;
+				margin: 2px;
+			}
+
+			#training-controls {
+				gap: 12px;
+			}
+
+			#training-controls button {
+				font-size: 0.9em;
+				padding: 5px 10px;
+			}
+
+			#ampoule {
+				width: 60px;
+				height: 60px;
+			}
+
+			#jauge {
+				width: 100px;
+				height: 50px;
+			}
+		}
 	</style>
 </head>
 
@@ -579,6 +635,33 @@
 				document.body.style.cursor = 'grabbing';
 			});
 
+			knob.addEventListener('touchstart', (e) => {
+				dragging = true;
+				knob.classList.add('active');
+				startY = e.touches[0].clientY;
+				startAngle = angle;
+				e.preventDefault();
+			}, { passive: false });
+
+			window.addEventListener('touchend', () => {
+				if (dragging) {
+					dragging = false;
+					knob.classList.remove('active');
+				}
+			});
+
+			window.addEventListener('touchmove', (e) => {
+				if (!dragging) return;
+				const dy = startY - e.touches[0].clientY;
+				angle = Math.max(minAngle, Math.min(maxAngle, startAngle + dy));
+				const val = angleToValue(angle);
+				hiddenRange.value = val.toFixed(2);
+				label.textContent = val.toFixed(2);
+				knob.style.transform = `rotate(${angle}deg)`;
+				majHaloIndex(i);
+				majSortie();
+			}, { passive: false });
+
 			window.addEventListener('mouseup', () => {
 				if (dragging) {
 					dragging = false;
@@ -740,28 +823,47 @@
 			}
 
 			// Souris
+			// Souris + tactile
 			let dragging = false, startY = 0, startAngle = 0;
-			knob.addEventListener('mousedown', e => {
+
+			function startDrag(y) {
 				dragging = true;
 				knob.classList.add('active');
-				startY = e.clientY;
+				startY = y;
 				startAngle = angle;
 				document.body.style.cursor = 'grabbing';
-			});
-			window.addEventListener('mouseup', () => {
+			}
+			function moveDrag(y) {
+				if (!dragging) return;
+				const dy = startY - y;
+				angle = Math.max(minAngle, Math.min(maxAngle, startAngle + dy));
+				value = angleToValue(angle);
+				majAffichage();
+			}
+			function stopDrag() {
 				if (dragging) {
 					dragging = false;
 					knob.classList.remove('active');
 					document.body.style.cursor = '';
 				}
-			});
-			window.addEventListener('mousemove', e => {
-				if (!dragging) return;
-				const dy = startY - e.clientY;
-				angle = Math.max(minAngle, Math.min(maxAngle, startAngle + dy));
-				value = angleToValue(angle);
-				majAffichage();
-			});
+			}
+
+			// Événements souris
+			knob.addEventListener('mousedown', e => startDrag(e.clientY));
+			window.addEventListener('mousemove', e => moveDrag(e.clientY));
+			window.addEventListener('mouseup', stopDrag);
+
+			// Événements tactiles
+			knob.addEventListener('touchstart', e => {
+				e.preventDefault();
+				startDrag(e.touches[0].clientY);
+			}, { passive: false });
+			window.addEventListener('touchmove', e => {
+				e.preventDefault();
+				moveDrag(e.touches[0].clientY);
+			}, { passive: false });
+			window.addEventListener('touchend', stopDrag);
+
 
 			// Molette
 			knob.addEventListener('wheel', e => {