From 16ab4707e2c38b8bdb075172eeb6e1a27e3d5e3f Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 12:34:15 +0100
Subject: [PATCH] feat:modifier_avant_apres rechangement structure

---
 prestations/html/ajouter_avant_apres.html  | 146 +++++++++++----------
 prestations/html/liste_avant_apres.html    |   2 +-
 prestations/html/modifier_avant_apres.html |   2 +-
 3 files changed, 79 insertions(+), 71 deletions(-)

diff --git a/prestations/html/ajouter_avant_apres.html b/prestations/html/ajouter_avant_apres.html
index e758895..be53e9e 100644
--- a/prestations/html/ajouter_avant_apres.html
+++ b/prestations/html/ajouter_avant_apres.html
@@ -82,77 +82,85 @@
     </header>
 
 
-    <div class="container mt-5">
-
-        <h1 class="mb-4 text-center">Ajouter un résultat en images (Avant / Après)</h1>
-
-        <!-- Message succès -->
-        <div id="successMsg" class="alert alert-success d-none">
-            Nouveau résultat ajouté avec succès !
-        </div>
-
-        <!-- Message erreur -->
-        <div id="errorMsg" class="alert alert-danger d-none">
-            Merci de remplir tous les champs obligatoires.
-        </div>
-
-        <!-- Erreur : format invalide -->
-        <div id="errorFormat" class="alert alert-danger d-none">
-            Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
-        </div>
-
-        <form id="addPairForm" class="mt-3">
-
-            <!-- Titre / label -->
-            <div class="mb-3">
-                <label class="form-label fw-bold" for="pairTitle">Titre du résultat (obligatoire)</label>
-                <input type="text" id="pairTitle" class="form-control" required>
-            </div>
-
-            <!-- Type -->
-            <div class="mb-3">
-                <label class="form-label fw-bold" for="pairType">Type (obligatoire)</label>
-                <select id="pairType" class="form-select" required>
-                    <option value="">-- Choisir --</option>
-                    <option value="Chien">Chien</option>
-                    <option value="Chat">Chat</option>
-                </select>
-            </div>
-
-            <!-- Image AVANT -->
-            <div class="mb-4">
-                <label class="form-label fw-bold" for="beforeImage">Image AVANT (obligatoire, formats acceptés : jpg,
-                    png, webp)</label>
-                <input type="file" id="beforeImage" class="form-control" accept="image/*" required>
-
-                <img id="beforePreview" class="img-preview border mt-2" src="#" alt="image avant">
-            </div>
-
-            <!-- Image APRÈS -->
-            <div class="mb-4">
-                <label class="form-label fw-bold" for="afterImage">Image APRÈS (obligatoire, formats acceptés : jpg,
-                    png, webp)</label>
-                <input type="file" id="afterImage" class="form-control" accept="image/*" required>
-
-                <img id="afterPreview" class="img-preview border mt-2" src="#" alt="image après">
-            </div>
-
-            <!-- Boutons : empilés en mobile, côte à côte en md+ -->
-            <div class="row mt-4 g-3">
-                <div class="col-12 col-md-6">
-                    <a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
-                        Annuler
-                    </a>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title fs-2">Ajouter un résultat en images (Avant / Après)</h1>
+                <!-- Message succès -->
+                <div id="successMsg" class="alert alert-success d-none">
+                    Nouveau résultat ajouté avec succès !
                 </div>
-                <div class="col-12 col-md-6">
-                    <button type="submit" class="btn btn-primary w-100">
-                        Ajouter
-                    </button>
-                </div>
-            </div>
 
-        </form>
-    </div>
+                <!-- Message erreur -->
+                <div id="errorMsg" class="alert alert-danger d-none">
+                    Merci de remplir tous les champs obligatoires.
+                </div>
+
+                <!-- Erreur : format invalide -->
+                <div id="errorFormat" class="alert alert-danger d-none">
+                    Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
+                </div>
+            </header>
+            <div class="section">
+
+                <form id="addPairForm" class="mt-3">
+
+                    <!-- Titre -->
+                    <div class="mb-3">
+                        <label class="form-label fw-bold" for="pairTitle">Titre du résultat (obligatoire)</label>
+                        <input type="text" id="pairTitle" class="form-control" required>
+                    </div>
+
+                    <!-- Type -->
+                    <div class="mb-3">
+                        <label class="form-label fw-bold" for="pairType">Type (obligatoire)</label>
+                        <select id="pairType" class="form-select" required>
+                            <option value="">-- Choisir --</option>
+                            <option value="Chien">Chien</option>
+                            <option value="Chat">Chat</option>
+                        </select>
+                    </div>
+
+                    <!-- Image AVANT -->
+                    <div class="mb-4">
+                        <label class="form-label fw-bold" for="beforeImage">Image AVANT (obligatoire, formats acceptés :
+                            jpg,
+                            png, webp)</label>
+                        <input type="file" id="beforeImage" class="form-control" accept="image/*" required>
+
+                        <img id="beforePreview" class="img-preview border mt-2" src="#" alt="image avant">
+                    </div>
+
+                    <!-- Image APRÈS -->
+                    <div class="mb-4">
+                        <label class="form-label fw-bold" for="afterImage">Image APRÈS (obligatoire, formats acceptés :
+                            jpg,
+                            png, webp)</label>
+                        <input type="file" id="afterImage" class="form-control" accept="image/*" required>
+
+                        <img id="afterPreview" class="img-preview border mt-2" src="#" alt="image après">
+                    </div>
+
+                    <!-- Boutons : empilés en mobile, côte à côte en md+ -->
+                    <div class="row mt-4 g-3">
+                        <div class="col-12 col-md-6">
+                            <a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
+                                Annuler
+                            </a>
+                        </div>
+                        <div class="col-12 col-md-6">
+                            <button type="submit" class="btn btn-primary w-100">
+                                Ajouter
+                            </button>
+                        </div>
+                    </div>
+
+                </form>
+
+            </div>
+        </div>
+    </main>
+
 
     <script src="../js/ajouter_avant_apres.js"></script>
     <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index 6dc589b..18343c8 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -85,7 +85,7 @@
         </div>
       </header>
 
-      <div>
+      <div class="section">
 
         <div class="d-flex justify-content-start mb-4">
           <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
diff --git a/prestations/html/modifier_avant_apres.html b/prestations/html/modifier_avant_apres.html
index 846bba4..3e77746 100644
--- a/prestations/html/modifier_avant_apres.html
+++ b/prestations/html/modifier_avant_apres.html
@@ -96,7 +96,7 @@
             </header>
 
            
-            <div>
+            <div class="section">
 
                 <!-- Formulaire de modification -->
                 <form id="editPairForm" class="mt-3">