feat:avant apres+media queries+modale de suppression

prestations/js/modifier_avant_apres.js

@@ -19,6 +19,11 @@ const galleryPairs = [
     }
 ];
 
+// ===============================
+// Formats d'images autorisés
+// ===============================
+const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
+
 // Sélecteurs
 const editForm = document.getElementById("editPairForm");
 const pairIdInput = document.getElementById("pairId");
@@ -31,6 +36,7 @@ const afterPreview = document.getElementById("afterPreview");
 
 const successMsg = document.getElementById("successMsg");
 const errorMsg = document.getElementById("errorMsg");
+const errorFormat = document.getElementById("errorFormat");
 
 // ===============================
 // Récup ID dans l'URL
@@ -71,23 +77,39 @@ function loadPairData() {
     afterPreview.src = pair.apres;
 }
 
-// Prévisu des nouvelles images
-beforeInput.addEventListener("change", function () {
-    const file = this.files[0];
+// ===============================
+// Gestion du changement d'image
+// ===============================
+function handleImageChange(inputEl, previewEl) {
+    const file = inputEl.files[0];
     if (!file) return;
 
+    // Vérification format
+    if (!allowedTypes.includes(file.type)) {
+        // Format non autorisé
+        errorFormat.classList.remove("d-none");
+        inputEl.value = "";       // reset du champ
+        previewEl.src = "";       // reset de la prévisu
+        return;
+    }
+
+    // Format OK → on cache le message d'erreur
+    errorFormat.classList.add("d-none");
+
     const reader = new FileReader();
-    reader.onload = e => beforePreview.src = e.target.result;
+    reader.onload = e => {
+        previewEl.src = e.target.result;
+    };
     reader.readAsDataURL(file);
+}
+
+// Prévisu des nouvelles images + contrôle format
+beforeInput.addEventListener("change", function () {
+    handleImageChange(beforeInput, beforePreview);
 });
 
 afterInput.addEventListener("change", function () {
-    const file = this.files[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = e => afterPreview.src = e.target.result;
-    reader.readAsDataURL(file);
+    handleImageChange(afterInput, afterPreview);
 });
 
 // Soumission
@@ -96,6 +118,7 @@ editForm.addEventListener("submit", function (e) {
 
     errorMsg.classList.add("d-none");
     successMsg.classList.add("d-none");
+    errorFormat.classList.add("d-none");
 
     if (!titleInput.value.trim()) {
         errorMsg.textContent = "Le titre est obligatoire.";
@@ -103,7 +126,16 @@ editForm.addEventListener("submit", function (e) {
         return;
     }
 
-    // Ici ce serait un fetch vers l'API en vrai.
+    // Double check format côté submit (au cas où)
+    const filesToCheck = [beforeInput.files[0], afterInput.files[0]];
+    for (const file of filesToCheck) {
+        if (!file || !allowedTypes.includes(file.type)) {
+            errorFormat.classList.remove("d-none");
+            return;
+        }
+    }
+
+    
     successMsg.classList.remove("d-none");
 
     setTimeout(() => {