From 50b3904af6989942e3a1c5375ad7ba8dc2390fa5 Mon Sep 17 00:00:00 2001
From: ben <ben.voydie64@gmail.com>
Date: Wed, 10 Dec 2025 19:24:00 +0100
Subject: [PATCH 01/17] mise a jour categorie (liste deroulante et remplissage
 obligatoire) + mise a jour checkbox + insertion de TinyMCE (pas finis)

---
 blog/html/ajouter_article.html | 62 +++++++++++++++++++++-------------
 blog/js/ajouter_article.js     | 29 ++++++++++++++--
 2 files changed, 66 insertions(+), 25 deletions(-)

diff --git a/blog/html/ajouter_article.html b/blog/html/ajouter_article.html
index 3540f42..0da4488 100644
--- a/blog/html/ajouter_article.html
+++ b/blog/html/ajouter_article.html
@@ -100,18 +100,19 @@
     <div id="successMsg" class="alert alert-success d-none">Article ajouté avec succès !</div>
 
         <!-- Catégorie -->
-<div class="mb-3">
-    <label class="form-label fw-bold">Catégorie de l'article</label>
-    <input list="categories" id="articleCategory" class="form-control" placeholder="Entrez une catégorie">
-
-    <datalist id="categories">
-        <option value="actualités">
-        <option value="chien">
-        <option value="chat">
-        <option value="boutique">
-    </datalist>
+    <div class="mb-3">
+    <label class="form-label fw-bold">Catégorie de l'article (obligatoire)</label>
+    <select id="articleCategory" class="form-select" required>
+        <option value="" disabled selected>Choisissez une catégorie</option>
+        <option value="actualités">Actualités</option>
+        <option value="chien">Chien</option>
+        <option value="chat">Chat</option>
+        <option value="boutique">Boutique</option>
+    </select>
 </div>
 
+
+
 <!-- Titre -->
 <div class="mb-4">
     <label class="form-label fw-bold">Titre de l'article (obligatoire)</label>
@@ -137,7 +138,7 @@
         <!--Publié-->
         <div class="form-check mb-3">
         <input class="form-check-input" type="checkbox" id="articlePublished">
-        <label class="form-check-label" for="articlePublished">Publié (sera publié sur le blog)</label>
+        <label class="form-check-label" for="articlePublished">Publié (sera publié sur le facebook)</label>
         </div>
 
 
@@ -152,25 +153,40 @@
 
 <script src="../js/ajouter_article.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-<script>
-  
-ClassicEditor
+<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
+
+  <script>
+tinymce.init({
+    selector: '#articleContent',
+    height: 400,
+    language: 'fr',
+    plugins: 'lists fullscreen',
+    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen'
+});
+</script>
+
+
+
+
+
+
+
+    
+</body>
+</html>
+
+
+
+<!--ClassicEditor
   .create(document.querySelector('#articleContent'), {
     language: 'fr',
     toolbar: [
       'heading',
-      'bold', 'italic', 'underline',
+      'bold', 'italic', 
       'bulletedList', 'numberedList',
       'undo', 'redo'
     ]
   })
   .catch(error => {
     console.error(error);
-  });
-
-
-
-</script>
-    
-</body>
-</html>
\ No newline at end of file
+  });
\ No newline at end of file
diff --git a/blog/js/ajouter_article.js b/blog/js/ajouter_article.js
index 70c5f93..633d300 100644
--- a/blog/js/ajouter_article.js
+++ b/blog/js/ajouter_article.js
@@ -1,7 +1,6 @@
 const form = document.getElementById('ajouterArticleForm');
 const imgField = document.getElementById('articleImage');
 const titleField = document.getElementById('articleTitle');
-const contentField = document.getElementById('articleContent');
 const categoryField = document.getElementById('articleCategory');
 const publishedField = document.getElementById('articlePublished');
 
@@ -18,6 +17,8 @@ form.addEventListener('submit', function(e) {
 
     const titre = titleField.value.trim().toLowerCase();
     const fichierImage = imgField.files[0];
+    const contenu = tinymce.get("articleContent").getContent();  // ← CORRECTION IMPORTANTE
+    const categorie = categoryField.value;
 
     // Reset messages
     errorEmpty.classList.add('d-none');
@@ -25,8 +26,16 @@ form.addEventListener('submit', function(e) {
     errorExists.classList.add('d-none');
     successMsg.classList.add('d-none');
 
+    // Catégorie obligatoire
+    if (categorie === "") {
+        errorEmpty.textContent = "Veuillez choisir une catégorie.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
     // Titre obligatoire
     if (titre === "") {
+        errorEmpty.textContent = "Le titre de l'article est obligatoire.";
         errorEmpty.classList.remove('d-none');
         return;
     }
@@ -37,6 +46,13 @@ form.addEventListener('submit', function(e) {
         return;
     }
 
+    // Contenu obligatoire
+    if (contenu.trim() === "") {
+        errorEmpty.textContent = "Le contenu de l'article ne peut pas être vide.";
+        errorEmpty.classList.remove('d-none');
+        return;
+    }
+
     // Image invalide
     if (fichierImage) {
         const validFormats = ['image/jpeg', 'image/png'];
@@ -52,8 +68,17 @@ form.addEventListener('submit', function(e) {
     // Succès
     successMsg.classList.remove('d-none');
 
-    // Redirection après 1 seconde
+    // Redirection
     setTimeout(() => {
         window.location.href = "../html/liste_categorie_article.html";
     }, 1000);
 });
+
+// TinyMCE
+tinymce.init({
+    selector: '#articleContent',
+    height: 400,
+    language: 'fr',
+    plugins: 'lists fullscreen',
+    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen',
+});

From 2923a9eb52638468f140ca99fe650083b6072313 Mon Sep 17 00:00:00 2001
From: pestak <wawawaformation@gmail.com>
Date: Wed, 10 Dec 2025 20:57:30 +0100
Subject: [PATCH 02/17] correction page accueil blog

---
 blog/html/accueil_blog.html            | 241 +++++++++++++++----------
 blog/html/liste_categorie_article.html | 185 -------------------
 2 files changed, 145 insertions(+), 281 deletions(-)
 delete mode 100644 blog/html/liste_categorie_article.html

diff --git a/blog/html/accueil_blog.html b/blog/html/accueil_blog.html
index 5c5b14b..21a15c0 100644
--- a/blog/html/accueil_blog.html
+++ b/blog/html/accueil_blog.html
@@ -1,114 +1,163 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin - Blog</title>
+    <title>Admin |Modifier le blog</title>
+    <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
+    <link rel="stylesheet" href="../../css/style.css">
+
 
-    <!-- BOOTSTRAP -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
-    <style>
-        body {
-            background: #f4f6f9;
-            
-        }
-        .menu-card {
-            transition: 0.2s;
-            cursor: pointer;
-        }
-        .menu-card:hover {
-            transform: scale(1.03);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
-        }
-        .menu-icon {
-            font-size: 40px;
-        }
-        .page-wrapper {
-            padding: 40px;
-            margin-top: 80px; 
-}
 
-    </style>
 </head>
 
 <body>
+    <header>
+        <nav class="navbar navbar-expand-xxl bg-body-tertiary">
+            <div class="container-fluid align-items-center">
+                <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
 
-     <!-- HEADER -->
-<header>
-    <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
-        <div class="container-fluid align-items-center">
-            <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Boutique</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Prestations</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">FAQ</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Fiche de renseignements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Partenaires</a>
+                        </li>
+                    </ul>
 
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-                aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
 
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
+                                <li><a class="dropdown-item" href="#">Profil</a></li>
+                                <li>
+                                    <hr class="dropdown-divider">
+                                </li>
+                                <li><a class="dropdown-item" href="#">Sortir</a></li>
+                            </ul>
+                        </li>
+                    </ul>
 
-                <!-- MENU GAUCHE -->
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item"><a class="nav-link active" href="#">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Boutique</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Prestations</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Fiche de renseignements</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Partenaires</a></li>
-                </ul>
-
-                <!-- MENU DROIT -->
-                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
-                    </li>
-
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-bs-toggle="dropdown">
-                            <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end">
-                            <li><a class="dropdown-item" href="#">Profil</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="#">Sortir</a></li>
-                        </ul>
-                    </li>
-                </ul>
-
-            </div>
-        </div>
-    </nav>
-</header>
-
-<div class="container text-center mt-5">
-    <h2 class="mb-5">Gestion du blog</h2>
-
-    <div class="row g-4 justify-content-center">
-
-        <!-- UNE SEULE CARTE : Articles + Catégories -->
-        <div class="col-md-4">
-            <a href="../html/liste_categorie_article.html" class="text-decoration-none">
-                <div class="card p-4 menu-card">
-                    <div class="menu-icon">📝</div>
-                    <h4 class="mt-3 text-dark">Articles & Catégories</h4>
-                    <p class="text-muted">
-                        Gérer les articles et organiser les catégories du blog.
-                    </p>
                 </div>
-            </a>
+            </div>
+        </nav>
+
+    </header>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title fs-2">Modifier la page blog</h1>
+            </header>
+            <main>
+
+                
+                <section class="mb-5 section-categories">
+                    <h2 class="my-4 fs-3">Liste des catégories</h2>
+
+                    <!-- Message succès catégories -->
+                    <div id="successCategoriesMsg" class="alert alert-success d-none"></div>
+
+                    <!-- Bouton ajouter catégorie -->
+                    <div class="d-flex justify-content-start mb-4">
+                        <a href="ajouter_categorie.html" class="btn btn-primary">Ajouter une catégorie</a>
+                    </div>
+
+                    <!-- Tableau catégories -->
+                    <table class="table table-striped table-hover">
+                        <thead class="table-dark">
+                            <tr>
+                                <th>Nom</th>
+                                <th class="text-end">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="categoriesTableBody">
+                            <!-- rempli en JS -->
+                        </tbody>
+                    </table>
+                </section>
+
+             
+
+                <section class="section-articles">
+                    <h2 class="my-4 fs-3">Liste des articles</h2>
+
+                    <!-- Message succès articles -->
+                    <div id="successArticlesMsg" class="alert alert-success d-none"></div>
+
+                    <!-- Bouton ajouter article -->
+                    <div class="d-flex justify-content-start mb-4">
+                        <a href="ajouter_article.html" class="btn btn-primary">Ajouter un article</a>
+                    </div>
+
+                    <!-- Tableau articles -->
+                    <table class="table table-striped table-hover">
+                        <thead class="table-dark">
+                            <tr>
+                                <th>Titre</th>
+                                <th class="text-end">Actions</th>
+                            </tr>
+                        </thead>
+
+                        <tbody id="articlesTableBody">
+                            <tr>
+                                <td>Mon premier article</td>
+                                <td class="text-end">
+                                    <a href="modifier_article.html"
+                                        class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                    <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Mon deuxième article</td>
+                                <td class="text-end">
+                                    <a href="modifier_article.html"
+                                        class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                    <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </section>
+            </main>
         </div>
+    </main>
+    <script src="../js/liste_categorie.js"></script>
+    <script src="../js/liste_articles.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-    </div>
-</div>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-
-</body>
-</html>
+</body>
\ No newline at end of file
diff --git a/blog/html/liste_categorie_article.html b/blog/html/liste_categorie_article.html
deleted file mode 100644
index b5df79a..0000000
--- a/blog/html/liste_categorie_article.html
+++ /dev/null
@@ -1,185 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Blog – Catégories & Articles</title>
-
-    <!-- BOOTSTRAP CSS -->
-    <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-
-    <!-- BOOTSTRAP ICONS -->
-    <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
-
-    <style>
-        body {
-            background: #f4f6f9;
-        }
-
-        .page-container {
-            padding: 30px;
-            margin: 40px auto;
-        }
-
-        .navbar-brand { 
-            font-size: 1.2rem; 
-            line-height: 1; 
-            padding-top: 0.25rem; 
-            padding-bottom: 0.25rem; 
-        }
-
-        @media (max-width: 1399.98px) {
-            .navbar .nav-item { 
-                background-color: var(--bs-light);
-                border: 1px solid var(--bs-border-color);
-                border-radius: .25rem;
-                margin-bottom: .375rem;
-                text-align: center;
-            }
-            #navbarSupportedContent > ul:first-child { margin-top: .5rem; }
-            #navbarSupportedContent > ul:last-child { margin-top: 1rem; }
-            .bi { display: none; }
-        }
-    </style>
-</head>
-
-<body>
-
-<!-- HEADER -->
-<header>
-    <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
-        <div class="container-fluid align-items-center">
-            <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
-
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-                aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-
-            <div class="collapse navbar-collapse" id="navbarSupportedContent">
-
-                <!-- MENU GAUCHE -->
-                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                    <li class="nav-item"><a class="nav-link active" href="#">Blog</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Boutique</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Prestations</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Fiche de renseignements</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#">Partenaires</a></li>
-                </ul>
-
-                <!-- MENU DROIT -->
-                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
-                    </li>
-
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-bs-toggle="dropdown">
-                            <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end">
-                            <li><a class="dropdown-item" href="#">Profil</a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><a class="dropdown-item" href="#">Sortir</a></li>
-                        </ul>
-                    </li>
-                </ul>
-
-            </div>
-        </div>
-    </nav>
-</header>
-
-<!-- CONTENU -->
-<main class="page-container">
-
-    <!-- ===================== -->
-    <!--   LISTE CATEGORIES    -->
-    <!-- ===================== -->
-    <section class="mb-5">
-        <h2 class="text-center mb-4">Liste des catégories</h2>
-
-        <!-- Message succès catégories -->
-        <div id="successCategoriesMsg" class="alert alert-success d-none"></div>
-
-        <!-- Bouton ajouter catégorie -->
-        <div class="d-flex justify-content-end mb-4">
-            <a href="ajouter_categorie.html" class="btn btn-primary">Ajouter une catégorie</a>
-        </div>
-
-        <!-- Tableau catégories -->
-        <table class="table table-striped table-hover">
-            <thead class="table-dark">
-                <tr>
-                    <th>Nom</th>
-                    <th class="text-end">Actions</th>
-                </tr>
-            </thead>
-            <tbody id="categoriesTableBody">
-                <!-- rempli en JS -->
-            </tbody>
-        </table>
-    </section>
-
-    <!-- ===================== -->
-    <!--   LISTE ARTICLES      -->
-    <!-- ===================== -->
-    
-    <section style="margin-top: 120px;">
-        <h2 class="text-center mb-4">Liste des articles</h2>
-
-        <!-- Message succès articles -->
-        <div id="successArticlesMsg" class="alert alert-success d-none"></div>
-
-        <!-- Bouton ajouter article -->
-        <div class="d-flex justify-content-end mb-4">
-            <a href="ajouter_article.html" class="btn btn-primary">Ajouter un article</a>
-        </div>
-
-        <!-- Tableau articles -->
-        <table class="table table-striped table-hover">
-            <thead class="table-dark">
-                <tr>
-                    <th>Titre</th>
-                    <th class="text-end">Actions</th>
-                </tr>
-            </thead>
-
-            <tbody id="articlesTableBody">
-                <tr>
-                    <td>Mon premier article</td>
-                    <td class="text-end">
-                        <a href="modifier_article.html" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
-                        <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
-                    </td>
-                </tr>
-                <tr>
-                    <td>Mon deuxième article</td>
-                    <td class="text-end">
-                        <a href="modifier_article.html" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
-                        <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </section>
-
-</main>
-
-<!-- SCRIPTS -->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-<script src="../js/liste_categorie.js"></script>
-<script src="../js/liste_articles.js"></script>
-
-</body>
-</html>

From 8867ae1b0657388817593d3ffb2d52e065ef087d Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Wed, 10 Dec 2025 14:34:35 +0100
Subject: [PATCH 03/17] travail en cours

---
 prestations/html/ajouter_avant_apres.html |  2 +-
 prestations/html/liste_avant_apres.html   | 42 +++++++++++++++++++----
 prestations/html/voir_avant_apres.html    | 10 +++---
 prestations/js/liste_avant_apres.js       |  4 +--
 4 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/prestations/html/ajouter_avant_apres.html b/prestations/html/ajouter_avant_apres.html
index 92a4caf..1e29a7f 100644
--- a/prestations/html/ajouter_avant_apres.html
+++ b/prestations/html/ajouter_avant_apres.html
@@ -140,7 +140,7 @@
             <!-- 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="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary w-100">
+                    <a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
                         Annuler
                     </a>
                 </div>
diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index a6d829e..4352e28 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -5,7 +5,41 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Liste des paires avant/après</title>
+  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+
+<style>
+
+.navbar-brand { font-size: 1.2rem; line-height: 1; padding-top: 0.25rem; padding-bottom: 0.25rem; }
+     
+        .brand-sep { height: 1.2rem; }
+
+        
+        @media (max-width: 1399.98px) {
+            .navbar .nav-item { 
+                background-color: var(--bs-light);
+                border: 1px solid var(--bs-border-color);
+                border-radius: .25rem;
+                margin-bottom: .375rem;
+                text-align: center;
+            }
+           
+            #navbarSupportedContent > ul:first-child { margin-top: .5rem; }
+            #navbarSupportedContent > ul:last-child { margin-top: 1rem; }
+
+            .bi{
+                display: none;
+            }
+           
+        }
+
+  .container {
+            max-width: 600px;
+            margin-top: 50px;
+        }
+</style>
+
 </head>
 
 <body class="bg-light py-4 py-md-5">
@@ -19,7 +53,7 @@
     </div>
 
     <div class="d-flex justify-content-end mb-4">
-      <a href="../ajouter_avant_apres/ajouter_avant_apres.html" class="btn btn-primary">
+      <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
         Ajouter une paire
       </a>
     </div>
@@ -43,10 +77,6 @@
     </div>
   </div>
 
-
-
-
-
   <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
@@ -74,7 +104,7 @@
 
 
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-  <script src="liste_avant_apres.js"></script>
+  <script src="../js/liste_avant_apres.js"></script>
 
 
 
diff --git a/prestations/html/voir_avant_apres.html b/prestations/html/voir_avant_apres.html
index 0189e2d..552f95e 100644
--- a/prestations/html/voir_avant_apres.html
+++ b/prestations/html/voir_avant_apres.html
@@ -14,11 +14,11 @@
         }
     </style>
 </head>
-<body class="bg-light py-4 py-md-5">
+<body>
 
-<div class="container" style="max-width: 800px;">
+<div class="container">
 
-    <h1 class="mb-4 mb-md-5 text-center">Détails de la paire avant/après</h1>
+    <h1 class="mb-4 text-center">Détails de la paire avant/après</h1>
 
     <!-- Message erreur -->
     <div id="errorMsg" class="alert alert-danger d-none">
@@ -47,7 +47,7 @@
 
         <!-- Bouton retour -->
         <div class="text-center mt-4">
-            <a href="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary">
+            <a href="../html/liste_avant_apres.html" class="btn btn-secondary">
                 Retour à la liste
             </a>
         </div>
@@ -56,7 +56,7 @@
 
 </div>
 
-<script src="voir_avant_apres.js"></script>
+<script src="../js/voir_avant_apres.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
diff --git a/prestations/js/liste_avant_apres.js b/prestations/js/liste_avant_apres.js
index b1eaaec..7515ff6 100644
--- a/prestations/js/liste_avant_apres.js
+++ b/prestations/js/liste_avant_apres.js
@@ -55,13 +55,13 @@ function displayPairs() {
                 <div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-start gap-2">
 
                     <!-- Bouton Voir -->
-                    <a href="../voir_avant_apres/voir_avant_apres.html?id=${pair.id}" 
+                    <a href="../html/voir_avant_apres.html?id=${pair.id}" 
                        class="btn btn-info btn-sm">
                         Voir
                     </a>
 
                     <!-- Bouton Modifier -->
-                    <a href="../modifier_avant_apres/modifier_avant_apres.html?id=${pair.id}" 
+                    <a href="../html/modifier_avant_apres.html?id=${pair.id}" 
                        class="btn btn-warning btn-sm">
                         Modifier
                     </a>

From aa5f003be8e5bca4bd3d045953a340f4b595602a Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 09:45:06 +0100
Subject: [PATCH 04/17] feat:work in progress

---
 prestations/html/ajouter_avant_apres.html  |  11 +-
 prestations/html/liste_avant_apres.html    | 146 +++++++++++++--------
 prestations/html/modifier_avant_apres.html | 107 +++++++++++----
 prestations/html/voir_avant_apres.html     |  70 +++++-----
 4 files changed, 213 insertions(+), 121 deletions(-)

diff --git a/prestations/html/ajouter_avant_apres.html b/prestations/html/ajouter_avant_apres.html
index 1e29a7f..6da48db 100644
--- a/prestations/html/ajouter_avant_apres.html
+++ b/prestations/html/ajouter_avant_apres.html
@@ -4,12 +4,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ajouter une paire avant/après</title>
-    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <title>Ajouter un résultat avant/après</title>
+    <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
     <link rel="stylesheet" href="../../css/style.css">
-    
+
 </head>
 
 
@@ -155,7 +154,7 @@
     </div>
 
     <script src="../js/ajouter_avant_apres.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
 
diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index 4352e28..7cb0b76 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -4,48 +4,84 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Liste des paires avant/après</title>
-  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+  <title>Liste des résultats avant/après</title>
+  <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
+  <link rel="stylesheet" href="../../css/style.css">
 
-<style>
-
-.navbar-brand { font-size: 1.2rem; line-height: 1; padding-top: 0.25rem; padding-bottom: 0.25rem; }
-     
-        .brand-sep { height: 1.2rem; }
-
-        
-        @media (max-width: 1399.98px) {
-            .navbar .nav-item { 
-                background-color: var(--bs-light);
-                border: 1px solid var(--bs-border-color);
-                border-radius: .25rem;
-                margin-bottom: .375rem;
-                text-align: center;
-            }
-           
-            #navbarSupportedContent > ul:first-child { margin-top: .5rem; }
-            #navbarSupportedContent > ul:last-child { margin-top: 1rem; }
-
-            .bi{
-                display: none;
-            }
-           
-        }
-
-  .container {
-            max-width: 600px;
-            margin-top: 50px;
-        }
-</style>
 
 </head>
 
-<body class="bg-light py-4 py-md-5">
+<body>
 
-  <div class="container">
-    <h1 class="mb-4 mb-md-5 text-center">Liste des résultat avant/après</h1>
+  <header>
+    <nav class="navbar navbar-expand-xxl bg-body-tertiary">
+      <div class="container-fluid align-items-center">
+        <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
+
+
+
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">Boutique</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">Prestations</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">FAQ</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">Fiche de renseignements</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link left-label" href="#">Partenaires</a>
+            </li>
+          </ul>
+
+
+          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown"
+                aria-expanded="false">
+                <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
+              </a>
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
+                <li><a class="dropdown-item" href="#">Profil</a></li>
+                <li>
+                  <hr class="dropdown-divider">
+                </li>
+                <li><a class="dropdown-item" href="#">Sortir</a></li>
+              </ul>
+            </li>
+          </ul>
+
+        </div>
+      </div>
+    </nav>
+
+  </header>
+
+
+  <div class="container mt-5">
+    <h1 class="mb-4 text-center">Liste des résultats avant/après</h1>
 
     <!-- Message succès -->
     <div id="succesDeleteMsg" class="alert alert-success d-none">
@@ -78,32 +114,28 @@
   </div>
 
   <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-      
-      <div class="modal-header">
-        <h2 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h2>
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
-      </div>
+    <div class="modal-dialog">
+      <div class="modal-content">
 
-      <div class="modal-body">
-        Voulez-vous vraiment supprimer cette paire avant/après ?
-      </div>
+        <div class="modal-header">
+          <h2 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h2>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
+        </div>
 
-      <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
-        <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
-      </div>
+        <div class="modal-body">
+          Voulez-vous vraiment supprimer cette paire avant/après ?
+        </div>
 
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+          <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
+        </div>
+
+      </div>
     </div>
   </div>
-</div>
 
-
-
-
-
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/liste_avant_apres.js"></script>
 
 
diff --git a/prestations/html/modifier_avant_apres.html b/prestations/html/modifier_avant_apres.html
index 8b90c0d..78f76ee 100644
--- a/prestations/html/modifier_avant_apres.html
+++ b/prestations/html/modifier_avant_apres.html
@@ -4,25 +4,87 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Modifier une paire avant/après</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <title>Modifier un résultat avant/après</title>
+    <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
+    <link rel="stylesheet" href="../../css/style.css">
 
-    <style>
-        .img-preview {
-            max-width: 150px;
-            border-radius: 8px;
-        }
-    </style>
 </head>
 
-<body class="bg-light py-4 py-md-5">
+<body>
 
-    <div class="container" style="max-width: 800px;">
-        <h2 class="mb-4 mb-md-5 text-center">Modifier une paire avant/après</h2>
+    <header>
+        <nav class="navbar navbar-expand-xxl bg-body-tertiary">
+            <div class="container-fluid align-items-center">
+                <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
+
+
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Boutique</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Prestations</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">FAQ</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Fiche de renseignements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Partenaires</a>
+                        </li>
+                    </ul>
+
+
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
+                                <li><a class="dropdown-item" href="#">Profil</a></li>
+                                <li>
+                                    <hr class="dropdown-divider">
+                                </li>
+                                <li><a class="dropdown-item" href="#">Sortir</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+
+                </div>
+            </div>
+        </nav>
+
+    </header>
+
+    <div class="container mt-5">
+        <h1 class="mb-4 text-center">Modifier un résultat en images (Avant / Après)</h1>
 
         <!-- Messages -->
         <div id="successMsg" class="alert alert-success d-none">
-            La paire avant/après a été modifiée avec succès.
+            Le résultat a été modifié avec succès.
         </div>
         <div id="errorMsg" class="alert alert-danger d-none">
             Une erreur est survenue. Merci de vérifier le formulaire.
@@ -41,13 +103,13 @@
 
             <!-- Titre / label -->
             <div class="mb-3">
-                <label for="pairTitle" class="form-label">Titre / label de la paire (obligatoire)</label>
+                <label for="pairTitle" class="form-label fw-bold">Titre / label de la paire (obligatoire)</label>
                 <input type="text" class="form-control" id="pairTitle" required>
             </div>
 
             <!-- Type -->
             <div class="mb-3">
-                <label class="form-label" for="pairType">Type (obligatoire)</label>
+                <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>
@@ -58,16 +120,16 @@
             <!-- Images AVANT / APRÈS sur une ligne en md+, empilées en mobile -->
             <div class="row gy-4 mb-4">
                 <!-- Image AVANT -->
-                <div class="col-12 col-md-6">
-                    <label class="form-label" for="beforeImage">Image AVANT (obligatoire)</label>
+                <div class="col-12 ">
+                    <label class="form-label fw-bold" for="beforeImage">Image AVANT (obligatoire)</label>
                     <input type="file" class="form-control" id="beforeImage" accept="image/*" required>
                     <!-- Aperçu éventuel -->
                     <img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant">
                 </div>
 
                 <!-- Image APRÈS -->
-                <div class="col-12 col-md-6">
-                    <label class="form-label" for="afterImage">Image APRÈS (obligatoire)</label>
+                <div class="col-12">
+                    <label class="form-label fw-bold" for="afterImage">Image APRÈS (obligatoire)</label>
                     <input type="file" class="form-control" id="afterImage" accept="image/*" required>
                     <!-- Aperçu éventuel -->
                     <img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après">
@@ -77,7 +139,7 @@
             <!-- 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="../liste_avant_apres/liste_avant_apres.html" class="btn btn-secondary w-100">
+                    <a href="../html/liste_avant_apres.html" class="btn btn-secondary w-100">
                         Annuler
                     </a>
                 </div>
@@ -91,8 +153,9 @@
         </form>
     </div>
 
-    <script src="modifier_avant_apres.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../js/modifier_avant_apres.js"></script>
+
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/prestations/html/voir_avant_apres.html b/prestations/html/voir_avant_apres.html
index 552f95e..20c03cc 100644
--- a/prestations/html/voir_avant_apres.html
+++ b/prestations/html/voir_avant_apres.html
@@ -1,64 +1,62 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Voir la paire avant/après</title>
+    <title>Voir le résultat avant/après</title>
+    <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
+    <link rel="stylesheet" href="../../css/style.css">
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-
-    <style>
-        .img-preview {
-            max-width: 250px;
-            border-radius: 10px;
-        }
-    </style>
 </head>
+
 <body>
 
-<div class="container">
+    <div class="container">
 
-    <h1 class="mb-4 text-center">Détails de la paire avant/après</h1>
+        <h1 class="mb-4 text-center">Détails du résultat en images (Avant / Après)</h1>
 
-    <!-- Message erreur -->
-    <div id="errorMsg" class="alert alert-danger d-none">
-        Impossible d'afficher cette paire.
-    </div>
+        <!-- Message erreur -->
+        <div id="errorMsg" class="alert alert-danger d-none">
+            Impossible d'afficher ce résultat.
+        </div>
 
-    <div id="detailsSection" class="mt-3">
+        <div id="detailsSection" class="mt-3">
 
-      <h2 id="pairTitle" class="text-center mb-4" aria-live="polite">Chargement...</h2>
+            <h2 id="pairTitle" class="text-center mb-4" aria-live="polite">Chargement...</h2>
 
 
-        <!-- AVANT / APRÈS : empilés en mobile, côte à côte en md+ -->
-        <div class="row justify-content-center align-items-start mb-4 g-4">
+            <!-- AVANT / APRÈS : empilés en mobile, côte à côte en md+ -->
+            <div class="row justify-content-center align-items-start mb-4 g-4">
+
+                <div class="col-12 col-md-6 text-center">
+                    <p class="fw-bold">AVANT</p>
+                    <img id="beforePreview" class="img-preview border img-fluid" src="#" alt="Photo avant">
+                </div>
+
+                <div class="col-12 col-md-6 text-center">
+                    <p class="fw-bold">APRÈS</p>
+                    <img id="afterPreview" class="img-preview border img-fluid" src="#" alt="Photo après">
+                </div>
 
-            <div class="col-12 col-md-6 text-center">
-                <p class="fw-bold">AVANT</p>
-                <img id="beforePreview" class="img-preview border img-fluid" src="#" alt="Photo avant">
             </div>
 
-            <div class="col-12 col-md-6 text-center">
-                <p class="fw-bold">APRÈS</p>
-                <img id="afterPreview" class="img-preview border img-fluid" src="#" alt="Photo après" >
+            <!-- Bouton retour -->
+            <div class="text-center mt-4">
+                <a href="../html/liste_avant_apres.html" class="btn btn-secondary">
+                    Retour à la liste
+                </a>
             </div>
 
         </div>
 
-        <!-- Bouton retour -->
-        <div class="text-center mt-4">
-            <a href="../html/liste_avant_apres.html" class="btn btn-secondary">
-                Retour à la liste
-            </a>
-        </div>
-
     </div>
 
-</div>
+    <script src="../js/voir_avant_apres.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
-<script src="../js/voir_avant_apres.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
-</html>
 
+</html>
\ No newline at end of file

From 417ff38b59a9cafb0cbfa39f0eb099d0a35420a7 Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 10:06:53 +0100
Subject: [PATCH 05/17] =?UTF-8?q?feat:liste=5Favant=5Fapres=20pr=C3=AAte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/avant_apres.css                        |  10 ++
 css/style.css                              |  11 +--
 prestations/html/ajouter_avant_apres.html  |   1 +
 prestations/html/liste_avant_apres.html    | 108 +++++++++++----------
 prestations/html/modifier_avant_apres.html |   1 +
 prestations/html/voir_avant_apres.html     |   1 +
 6 files changed, 69 insertions(+), 63 deletions(-)
 create mode 100644 css/avant_apres.css

diff --git a/css/avant_apres.css b/css/avant_apres.css
new file mode 100644
index 0000000..dc587d0
--- /dev/null
+++ b/css/avant_apres.css
@@ -0,0 +1,10 @@
+/*=============================================================================
+    Image Preview Styles
+    =============================================================================*/ 
+    
+  .img-preview {
+      max-width: 150px;
+      border-radius: 8px;
+      display: none;
+      /* cachée tant qu'il n'y a pas d'image */
+  }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index a2429b1..d591513 100644
--- a/css/style.css
+++ b/css/style.css
@@ -38,13 +38,4 @@ Header Navbar Styles
   }
 
 
- /*=============================================================================
-    Image Preview Styles
-    =============================================================================*/ 
-    
-  .img-preview {
-      max-width: 150px;
-      border-radius: 8px;
-      display: none;
-      /* cachée tant qu'il n'y a pas d'image */
-  }
\ No newline at end of file
+ 
\ No newline at end of file
diff --git a/prestations/html/ajouter_avant_apres.html b/prestations/html/ajouter_avant_apres.html
index 6da48db..e758895 100644
--- a/prestations/html/ajouter_avant_apres.html
+++ b/prestations/html/ajouter_avant_apres.html
@@ -8,6 +8,7 @@
     <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
     <link rel="stylesheet" href="../../css/style.css">
+    <link rel="stylesheet" href="../../css/avant_apres.css">
 
 </head>
 
diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index 7cb0b76..024d308 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -8,8 +8,7 @@
   <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
   <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
   <link rel="stylesheet" href="../../css/style.css">
-
-
+  <link rel="stylesheet" href="../../css/avant_apres.css">
 </head>
 
 <body>
@@ -19,8 +18,6 @@
       <div class="container-fluid align-items-center">
         <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
 
-
-
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
           aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -47,7 +44,6 @@
             </li>
           </ul>
 
-
           <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
@@ -79,68 +75,74 @@
 
   </header>
 
-
-  <div class="container mt-5">
-    <h1 class="mb-4 text-center">Liste des résultats avant/après</h1>
-
-    <!-- Message succès -->
-    <div id="succesDeleteMsg" class="alert alert-success d-none">
-      Paire supprimée avec succès !
-    </div>
-
-    <div class="d-flex justify-content-end mb-4">
-      <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
-        Ajouter une paire
-      </a>
-    </div>
-
-    <!-- Table responsive -->
-    <div class="table-responsive">
-      <table class="table table-striped table-hover align-middle mb-0">
-        <thead class="table-dark">
-          <tr>
-            <th>Titre paire</th>
-            <th>Type</th>
-            <th>Avant</th>
-            <th>Après</th>
-            <th class="text-center">Actions</th>
-          </tr>
-        </thead>
-        <tbody id="prestationTableBody">
-          <!-- JS -->
-        </tbody>
-      </table>
-    </div>
-  </div>
-
-  <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
-    <div class="modal-dialog">
-      <div class="modal-content">
-
-        <div class="modal-header">
-          <h2 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h2>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
+  <main class="my-5 fs-6">
+    <div class="container">
+      <header>
+        <h1 class="title fs-2 my-4">Liste des résultats avant/après</h1>
+        <!-- Message succès -->
+        <div id="succesDeleteMsg" class="alert alert-success d-none">
+          Paire supprimée avec succès !
         </div>
 
-        <div class="modal-body">
-          Voulez-vous vraiment supprimer cette paire avant/après ?
+      </header>
+      <main>
+
+        <div class="d-flex justify-content-start mb-4">
+          <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
+            Ajouter une paire
+          </a>
         </div>
 
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
-          <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
+        <!-- Table responsive -->
+        <div class="table-responsive">
+          <table class="table table-striped table-hover align-middle mb-0">
+            <thead class="table-dark">
+              <tr>
+                <th>Titre paire</th>
+                <th>Type</th>
+                <th>Avant</th>
+                <th>Après</th>
+                <th class="text-center">Actions</th>
+              </tr>
+            </thead>
+            <tbody id="prestationTableBody">
+              <!-- JS -->
+            </tbody>
+          </table>
         </div>
+    </div>
 
+    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+
+          <div class="modal-header">
+            <h2 class="modal-title" id="deleteModalLabel">Confirmer la suppression</h2>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
+          </div>
+
+          <div class="modal-body">
+            Voulez-vous vraiment supprimer cette paire avant/après ?
+          </div>
+
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
+            <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Supprimer</button>
+          </div>
+
+        </div>
       </div>
     </div>
+
+
+  </main>
   </div>
+  </main>
 
   <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/liste_avant_apres.js"></script>
 
 
-
-
 </body>
 
 </html>
\ No newline at end of file
diff --git a/prestations/html/modifier_avant_apres.html b/prestations/html/modifier_avant_apres.html
index 78f76ee..86a26e0 100644
--- a/prestations/html/modifier_avant_apres.html
+++ b/prestations/html/modifier_avant_apres.html
@@ -8,6 +8,7 @@
     <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
     <link rel="stylesheet" href="../../css/style.css">
+    <link rel="stylesheet" href="../../css/avant_apres.css">
 
 </head>
 
diff --git a/prestations/html/voir_avant_apres.html b/prestations/html/voir_avant_apres.html
index 20c03cc..e4d7a9d 100644
--- a/prestations/html/voir_avant_apres.html
+++ b/prestations/html/voir_avant_apres.html
@@ -8,6 +8,7 @@
     <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
     <link rel="stylesheet" href="../../css/style.css">
+    <link rel="stylesheet" href="../../css/avant_apres.css">
 
 </head>
 

From 8fe2e99953ebf5f9e765a5e326a63cf3ff3c2467 Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 10:10:07 +0100
Subject: [PATCH 06/17] =?UTF-8?q?feat:liste=5Favant=5Fapres=20pr=C3=AAte2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 prestations/html/liste_avant_apres.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index 024d308..b0ee0d1 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -81,7 +81,7 @@
         <h1 class="title fs-2 my-4">Liste des résultats avant/après</h1>
         <!-- Message succès -->
         <div id="succesDeleteMsg" class="alert alert-success d-none">
-          Paire supprimée avec succès !
+          Résultat supprimé avec succès !
         </div>
 
       </header>
@@ -89,7 +89,7 @@
 
         <div class="d-flex justify-content-start mb-4">
           <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
-            Ajouter une paire
+            Ajouter un résultat
           </a>
         </div>
 
@@ -122,7 +122,7 @@
           </div>
 
           <div class="modal-body">
-            Voulez-vous vraiment supprimer cette paire avant/après ?
+            Voulez-vous vraiment supprimer ce résultat avant/après ?
           </div>
 
           <div class="modal-footer">

From e2fe18ec042acd5d52f74ee9e2e0d372311acc72 Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 10:49:11 +0100
Subject: [PATCH 07/17] feat:modifier_avant_apres changement structure

---
 prestations/html/liste_avant_apres.html    |  17 +--
 prestations/html/modifier_avant_apres.html | 164 +++++++++++----------
 2 files changed, 94 insertions(+), 87 deletions(-)

diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index b0ee0d1..6dc589b 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -22,6 +22,7 @@
           aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
+
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
           <ul class="navbar-nav me-auto mb-2 mb-lg-0">
             <li class="nav-item">
@@ -72,7 +73,6 @@
         </div>
       </div>
     </nav>
-
   </header>
 
   <main class="my-5 fs-6">
@@ -83,9 +83,9 @@
         <div id="succesDeleteMsg" class="alert alert-success d-none">
           Résultat supprimé avec succès !
         </div>
-
       </header>
-      <main>
+
+      <div>
 
         <div class="d-flex justify-content-start mb-4">
           <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
@@ -98,7 +98,7 @@
           <table class="table table-striped table-hover align-middle mb-0">
             <thead class="table-dark">
               <tr>
-                <th>Titre paire</th>
+                <th>Titre résultat</th>
                 <th>Type</th>
                 <th>Avant</th>
                 <th>Après</th>
@@ -110,8 +110,11 @@
             </tbody>
           </table>
         </div>
+
+      </div>
     </div>
 
+    <!--- modale de suppression-->
     <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
@@ -134,15 +137,11 @@
       </div>
     </div>
 
-
-  </main>
-  </div>
   </main>
 
   <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="../js/liste_avant_apres.js"></script>
 
-
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/prestations/html/modifier_avant_apres.html b/prestations/html/modifier_avant_apres.html
index 86a26e0..846bba4 100644
--- a/prestations/html/modifier_avant_apres.html
+++ b/prestations/html/modifier_avant_apres.html
@@ -6,10 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Modifier un résultat avant/après</title>
     <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
+    <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
     <link rel="stylesheet" href="../../css/style.css">
     <link rel="stylesheet" href="../../css/avant_apres.css">
-
 </head>
 
 <body>
@@ -19,13 +18,12 @@
             <div class="container-fluid align-items-center">
                 <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
 
-
-
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                     data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                     aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
+
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                         <li class="nav-item">
@@ -48,7 +46,6 @@
                         </li>
                     </ul>
 
-
                     <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                         <li class="nav-item">
                             <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
@@ -77,86 +74,97 @@
                 </div>
             </div>
         </nav>
-
     </header>
 
-    <div class="container mt-5">
-        <h1 class="mb-4 text-center">Modifier un résultat en images (Avant / Après)</h1>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title fs-2">Modifier un résultat en images (Avant / Après)</h1>
 
-        <!-- Messages -->
-        <div id="successMsg" class="alert alert-success d-none">
-            Le résultat a été modifié avec succès.
+                <!-- Messages -->
+                <div id="successMsg" class="alert alert-success d-none">
+                    Le résultat a été modifié avec succès.
+                </div>
+                <div id="errorMsg" class="alert alert-danger d-none">
+                    Une erreur est survenue. Merci de vérifier le formulaire.
+                </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>
+
+                <!-- Formulaire de modification -->
+                <form id="editPairForm" class="mt-3">
+
+                    <!-- ID caché -->
+                    <input type="hidden" id="pairId">
+
+                    <!-- Titre-->
+                    <div class="mb-3">
+                        <label for="pairTitle" class="form-label fw-bold">Titre du résultat
+                            (obligatoire)</label>
+                        <input type="text" class="form-control" id="pairTitle" 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>
+
+                    <!-- Images AVANT / APRÈS -->
+                    <div class="row gy-4 mb-4">
+                        <!-- Image AVANT -->
+                        <div class="col-12">
+                            <label class="form-label fw-bold" for="beforeImage">
+                                Image AVANT (obligatoire, formats acceptés : jpg, png, webp)
+                            </label>
+                            <input type="file" class="form-control" id="beforeImage" accept="image/*" required>
+                            <img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant">
+                        </div>
+
+                        <!-- Image APRÈS -->
+                        <div class="col-12">
+                            <label class="form-label fw-bold" for="afterImage">
+                                Image APRÈS (obligatoire, formats acceptés : jpg, png, webp)
+                            </label>
+                            <input type="file" class="form-control" id="afterImage" accept="image/*" required>
+                            <img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après">
+                        </div>
+                    </div>
+
+                    <!-- Boutons -->
+                    <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">
+                                Enregistrer les modifications
+                            </button>
+                        </div>
+                    </div>
+
+                </form>
+
+            </div>
         </div>
-        <div id="errorMsg" class="alert alert-danger d-none">
-            Une erreur est survenue. Merci de vérifier le formulaire.
-        </div>
-
-        <!-- Erreur : format invalide -->
-        <div id="errorFormat" class="alert alert-danger d-none">
-            Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
-        </div>
-
-        <!-- Formulaire de modification -->
-        <form id="editPairForm" class="mt-3">
-
-            <!-- ID caché -->
-            <input type="hidden" id="pairId">
-
-            <!-- Titre / label -->
-            <div class="mb-3">
-                <label for="pairTitle" class="form-label fw-bold">Titre / label de la paire (obligatoire)</label>
-                <input type="text" class="form-control" id="pairTitle" 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>
-
-            <!-- Images AVANT / APRÈS sur une ligne en md+, empilées en mobile -->
-            <div class="row gy-4 mb-4">
-                <!-- Image AVANT -->
-                <div class="col-12 ">
-                    <label class="form-label fw-bold" for="beforeImage">Image AVANT (obligatoire)</label>
-                    <input type="file" class="form-control" id="beforeImage" accept="image/*" required>
-                    <!-- Aperçu éventuel -->
-                    <img id="beforePreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu avant">
-                </div>
-
-                <!-- Image APRÈS -->
-                <div class="col-12">
-                    <label class="form-label fw-bold" for="afterImage">Image APRÈS (obligatoire)</label>
-                    <input type="file" class="form-control" id="afterImage" accept="image/*" required>
-                    <!-- Aperçu éventuel -->
-                    <img id="afterPreview" class="img-preview mt-2 d-none" src="#" alt="Aperçu après">
-                </div>
-            </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">
-                        Enregistrer les modifications
-                    </button>
-                </div>
-            </div>
-
-        </form>
-    </div>
+    </main>
 
     <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="../js/modifier_avant_apres.js"></script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>

From a0e14bfa9234fc6fc01b02debd1056e71739725f Mon Sep 17 00:00:00 2001
From: ben <ben.voydie64@gmail.com>
Date: Thu, 11 Dec 2025 11:04:42 +0100
Subject: [PATCH 08/17] =?UTF-8?q?Mise=20en=20place=20tinymce=20dans=20accu?=
 =?UTF-8?q?eil=20blog=20avec=20cl=C3=A9=20et=20domaine?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog/js/ajouter_article.js | 30 ++++++++++++++++++++++++++----
 package-lock.json          |  3 +--
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/blog/js/ajouter_article.js b/blog/js/ajouter_article.js
index 633d300..5a9223d 100644
--- a/blog/js/ajouter_article.js
+++ b/blog/js/ajouter_article.js
@@ -17,8 +17,9 @@ form.addEventListener('submit', function(e) {
 
     const titre = titleField.value.trim().toLowerCase();
     const fichierImage = imgField.files[0];
-    const contenu = tinymce.get("articleContent").getContent();  // ← CORRECTION IMPORTANTE
+    const contenu = tinymce.get("articleContent").getContent();
     const categorie = categoryField.value;
+    const published = publishedField.checked;   // ← récupère la case cochée
 
     // Reset messages
     errorEmpty.classList.add('d-none');
@@ -62,9 +63,30 @@ form.addEventListener('submit', function(e) {
         }
     }
 
-    // Simuler enregistrement
+    // Simuler enregistrement (ancienne logique)
     titreExistants.push(titre);
 
+    // -------------------------------
+    // 📌 CRÉATION DE L'ARTICLE
+    // -------------------------------
+    const nouvelArticle = {
+        id: Date.now(),
+        titre: titleField.value.trim(),
+        contenu: contenu,
+        categorie: categorie,
+        published: published,     // ← valeur TRUE/FALSE pour afficher le badge Facebook
+        date: new Date().toISOString()
+    };
+
+    // --------------------------------
+    // 📌 SAUVEGARDE DANS LOCALSTORAGE
+    // --------------------------------
+    let articles = JSON.parse(localStorage.getItem("articles")) || [];
+    articles.push(nouvelArticle);
+    localStorage.setItem("articles", JSON.stringify(articles));
+
+    console.log("Article enregistré :", nouvelArticle);
+
     // Succès
     successMsg.classList.remove('d-none');
 
@@ -74,11 +96,11 @@ form.addEventListener('submit', function(e) {
     }, 1000);
 });
 
-// TinyMCE
+// TinyMCE INIT
 tinymce.init({
     selector: '#articleContent',
     height: 400,
     language: 'fr',
     plugins: 'lists fullscreen',
-    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen',
+    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen'
 });
diff --git a/package-lock.json b/package-lock.json
index 1bfd43d..890a3bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,8 +76,7 @@
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "peer": true
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="
     },
     "node_modules/tinymce": {
       "version": "8.2.2",

From 9e80b99abed648ab7772aaf347a159a1d2119e2e Mon Sep 17 00:00:00 2001
From: ben <ben.voydie64@gmail.com>
Date: Thu, 11 Dec 2025 11:11:57 +0100
Subject: [PATCH 09/17] correction erreur

---
 blog/js/ajouter_article.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/blog/js/ajouter_article.js b/blog/js/ajouter_article.js
index 5a9223d..3224329 100644
--- a/blog/js/ajouter_article.js
+++ b/blog/js/ajouter_article.js
@@ -63,24 +63,24 @@ form.addEventListener('submit', function(e) {
         }
     }
 
-    // Simuler enregistrement (ancienne logique)
+    // Simuler enregistrement 
     titreExistants.push(titre);
 
-    // -------------------------------
-    // 📌 CRÉATION DE L'ARTICLE
-    // -------------------------------
+    
+    //  CRÉATION DE L'ARTICLE
+    
     const nouvelArticle = {
         id: Date.now(),
         titre: titleField.value.trim(),
         contenu: contenu,
         categorie: categorie,
-        published: published,     // ← valeur TRUE/FALSE pour afficher le badge Facebook
+        published: published,     //  valeur TRUE/FALSE pour afficher le badge Facebook
         date: new Date().toISOString()
     };
 
-    // --------------------------------
-    // 📌 SAUVEGARDE DANS LOCALSTORAGE
-    // --------------------------------
+
+    // SAUVEGARDE DANS LOCALSTORAGE
+    
     let articles = JSON.parse(localStorage.getItem("articles")) || [];
     articles.push(nouvelArticle);
     localStorage.setItem("articles", JSON.stringify(articles));

From 84d8f1c481c0f9aab60dfdeb5d30647c66fa26ad Mon Sep 17 00:00:00 2001
From: ben <ben.voydie64@gmail.com>
Date: Thu, 11 Dec 2025 12:02:29 +0100
Subject: [PATCH 10/17] =?UTF-8?q?ajout=20du=20badge=20publi=C3=A9=20sur=20?=
 =?UTF-8?q?facebook=20(bootstrap)=20dans=20la=20page=20accueil=20blog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog/html/modifier_article.html |  2 +-
 blog/js/ajouter_article.js      |  4 +--
 blog/js/liste_articles.js       | 61 ++++++++++++++++++++++++++++++---
 3 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/blog/html/modifier_article.html b/blog/html/modifier_article.html
index 091bbff..56c423b 100644
--- a/blog/html/modifier_article.html
+++ b/blog/html/modifier_article.html
@@ -152,7 +152,7 @@
     <!--Publié-->
     <div class="form-check mb-3">
       <input class="form-check-input" type="checkbox" id="articlePublished" checked>
-      <label class="form-check-label">Publié</label>
+      <label class="form-check-label">Publié (sera publié sur facebook)</label>
     </div>
 
     <!--Boutons-->
diff --git a/blog/js/ajouter_article.js b/blog/js/ajouter_article.js
index 3224329..298d7d1 100644
--- a/blog/js/ajouter_article.js
+++ b/blog/js/ajouter_article.js
@@ -19,7 +19,7 @@ form.addEventListener('submit', function(e) {
     const fichierImage = imgField.files[0];
     const contenu = tinymce.get("articleContent").getContent();
     const categorie = categoryField.value;
-    const published = publishedField.checked;   // ← récupère la case cochée
+    const published = publishedField.checked;   //  récupère la case cochée
 
     // Reset messages
     errorEmpty.classList.add('d-none');
@@ -92,7 +92,7 @@ form.addEventListener('submit', function(e) {
 
     // Redirection
     setTimeout(() => {
-        window.location.href = "../html/liste_categorie_article.html";
+        window.location.href = "../html/accueil_blog.html";
     }, 1000);
 });
 
diff --git a/blog/js/liste_articles.js b/blog/js/liste_articles.js
index f562797..d3a17de 100644
--- a/blog/js/liste_articles.js
+++ b/blog/js/liste_articles.js
@@ -1,14 +1,67 @@
+// Sélecteur du tableau
+const articlesTableBody = document.getElementById("articlesTableBody");
 
+// Charger les articles depuis le localStorage
+let articles = JSON.parse(localStorage.getItem("articles")) || [];
+
+// Fonction d'affichage des articles
+function afficherArticles() {
+    articlesTableBody.innerHTML = ""; // Nettoie le tableau
+
+    if (articles.length === 0) {
+        articlesTableBody.innerHTML = `
+            <tr>
+                <td colspan="2" class="text-center text-muted py-3">
+                    Aucun article pour le moment.
+                </td>
+            </tr>
+        `;
+        return;
+    }
+
+    articles.forEach(article => {
+        const tr = document.createElement("tr");
+
+        tr.innerHTML = `
+            <td>
+                ${article.titre}
+                ${article.published ? '<span class="badge bg-primary ms-2">Publié Facebook</span>' : ''}
+            </td>
+            <td class="text-end">
+                <a href="modifier_article.html?id=${article.id}" 
+                   class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+
+                <button class="btn btn-sm btn-outline-danger delete-btn" data-id="${article.id}">
+                    Supprimer
+                </button>
+            </td>
+        `;
+
+        articlesTableBody.appendChild(tr);
+    });
+}
+
+// Gestion de suppression 
 document.addEventListener("click", function (e) {
     const btn = e.target.closest(".delete-btn");
-    if (!btn) return; // on a cliqué ailleurs
+    if (!btn) return;
 
-    // On récupère la ligne de l'article
     const row = btn.closest("tr");
     const titre = row.querySelector("td").textContent.trim();
+    const id = Number(btn.dataset.id);
 
     if (confirm(`Voulez-vous vraiment supprimer l'article : "${titre}" ?`)) {
-        row.remove(); // supprime la ligne
+
+        // Supprimer dans le tableau local
+        articles = articles.filter(article => article.id !== id);
+        localStorage.setItem("articles", JSON.stringify(articles));
+
+        // Supprimer visuel
+        row.remove();
+
         alert("Article supprimé !");
     }
-});
\ No newline at end of file
+});
+
+// Lancer l'affichage dès que la page charge
+afficherArticles();

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 11/17] 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">

From efad1b078e30bcf721bb054402a5a94bde174c0c Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 12:54:14 +0100
Subject: [PATCH 12/17] feat: quelques ajustements liste_slider

---
 package-lock.json                  |   3 +-
 prestations/html/liste_slider.html | 126 ++++++++++++++++++++++-------
 2 files changed, 100 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 890a3bd..1bfd43d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,7 +76,8 @@
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "peer": true
     },
     "node_modules/tinymce": {
       "version": "8.2.2",
diff --git a/prestations/html/liste_slider.html b/prestations/html/liste_slider.html
index 2919d50..9003512 100644
--- a/prestations/html/liste_slider.html
+++ b/prestations/html/liste_slider.html
@@ -1,25 +1,31 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Liste des slides</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+     <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
+    <link rel="stylesheet" href="../../css/style.css">
 
     <style>
         body {
             background: #f4f6f9;
             padding: 40px;
         }
+
         .container {
             max-width: 900px;
         }
+
         .miniature {
             width: 90px;
             height: 60px;
             object-fit: cover;
             border-radius: 5px;
         }
+
         .action-buttons button,
         .action-buttons a {
             margin-right: 8px;
@@ -27,39 +33,103 @@
     </style>
 </head>
 
+ <header>
+        <nav class="navbar navbar-expand-xxl bg-body-tertiary">
+            <div class="container-fluid align-items-center">
+                <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
+
+                
+
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Boutique</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Prestations</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">FAQ</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Fiche de renseignements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Partenaires</a>
+                        </li>
+                    </ul>
+
+                   
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
+                                <li><a class="dropdown-item" href="#">Profil</a></li>
+                                <li><hr class="dropdown-divider"></li>
+                                <li><a class="dropdown-item" href="#">Sortir</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+
+                </div>
+            </div>
+        </nav>
+
+    </header>
+
 <body>
 
-<div class="container">
+    <div class="container">
 
-    <h2 class="text-center mb-4">Slider – Liste des images</h2>
+        <h2 class="text-center mb-4">Slider – Liste des images</h2>
 
-    <!-- Message succès (suppression / ordre) -->
-    <div id="successMsg" class="alert alert-success d-none"></div>
+        <!-- Message succès (suppression / ordre) -->
+        <div id="successMsg" class="alert alert-success d-none"></div>
 
-    <!-- Bouton ajouter -->
-    <div class="d-flex justify-content-end mb-4">
-        <a href="../../slider/ajouter_slider/ajouter_slider.html" class="btn btn-primary">Ajouter une image au slider</a>
+        <!-- Bouton ajouter -->
+        <div class="d-flex justify-content-start mb-4">
+            <a href="../html/ajouter_slider.html" class="btn btn-primary">Ajouter une image au slider</a>
+        </div>
+
+        <table class="table table-striped table-hover align-middle">
+            <thead class="table-dark">
+                <tr>
+                    <th>Image</th>
+                    <th>Texte ALT</th>
+                    <th>Titre</th>
+                    <th>Ordre</th>
+                    <th class="text-center">Actions</th>
+                </tr>
+            </thead>
+
+            <tbody id="sliderTableBody">
+                <!-- rempli en JS -->
+            </tbody>
+        </table>
     </div>
 
-    <table class="table table-striped table-hover align-middle">
-        <thead class="table-dark">
-            <tr>
-                <th>Image</th>
-                <th>Texte ALT</th>
-                <th>Titre</th>
-                <th>Ordre</th>
-                <th class="text-center">Actions</th>
-            </tr>
-        </thead>
-
-        <tbody id="sliderTableBody">
-            <!-- rempli en JS -->
-        </tbody>
-    </table>
-</div>
-
-<script src="liste_slider.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../js/liste_slider.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
-</html>
+
+</html>
\ No newline at end of file

From fc19007b05ed3ab870f4eb2b5b8625e45b9785c4 Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 13:23:21 +0100
Subject: [PATCH 13/17] feat:liste_avant_apres modifie

---
 prestations/html/liste_avant_apres.html |  7 +++----
 prestations/js/liste_avant_apres.js     | 26 ++++++-------------------
 2 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index 18343c8..59492d3 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -98,11 +98,10 @@
           <table class="table table-striped table-hover align-middle mb-0">
             <thead class="table-dark">
               <tr>
-                <th>Titre résultat</th>
+                <th>Titre du résultat</th>
                 <th>Type</th>
-                <th>Avant</th>
-                <th>Après</th>
-                <th class="text-center">Actions</th>
+                
+                <th class="text-end">Actions</th>
               </tr>
             </thead>
             <tbody id="prestationTableBody">
diff --git a/prestations/js/liste_avant_apres.js b/prestations/js/liste_avant_apres.js
index 7515ff6..a2d36dd 100644
--- a/prestations/js/liste_avant_apres.js
+++ b/prestations/js/liste_avant_apres.js
@@ -6,15 +6,13 @@ let galleryPairs = [
         id: 1,
         titre: "Petit chien poils longs",
         type: "Chien",
-        avant: "../../img/avant1.jpg",
-        apres: "../../img/apres1.jpg"
+       
     },
     {
         id: 2,
         titre: "Coupe ciseaux",
         type: "Chat",
-        avant: "../../img/avant2.jpg",
-        apres: "../../img/apres2.jpg"
+    
     }
 ];
 
@@ -43,31 +41,19 @@ function displayPairs() {
             <td>${pair.titre}</td>
             <td>${pair.type}</td>
 
-            <td>
-                <img src="${pair.avant}" class="img-thumbnail" style="max-width: 80px;">
-            </td>
-
-            <td>
-                <img src="${pair.apres}" class="img-thumbnail" style="max-width: 80px;">
-            </td>
-
             <td class="text-center text-md-start">
-                <div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-start gap-2">
+                <div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-end gap-2">
 
-                    <!-- Bouton Voir -->
-                    <a href="../html/voir_avant_apres.html?id=${pair.id}" 
-                       class="btn btn-info btn-sm">
-                        Voir
-                    </a>
+                    
 
                     <!-- Bouton Modifier -->
                     <a href="../html/modifier_avant_apres.html?id=${pair.id}" 
-                       class="btn btn-warning btn-sm">
+                       class="btn btn-outline-primary btn-sm">
                         Modifier
                     </a>
 
                     <!-- Bouton Supprimer -->
-                    <button class="btn btn-danger btn-sm" onclick="openDeleteModal(${pair.id})">
+                    <button class="btn btn-outline-danger btn-sm" onclick="openDeleteModal(${pair.id})">
                         Supprimer
                     </button>
                 </div>

From ad9e8b8308de391a3ec024c538faed20a3c6871c Mon Sep 17 00:00:00 2001
From: pestak <wawawaformation@gmail.com>
Date: Thu, 11 Dec 2025 15:07:04 +0100
Subject: [PATCH 14/17] os : accordeon

---
 prestations/html/liste_avant_apres.html  |   4 +-
 prestations/html/prestation_accueil.html | 334 +++++++++++++++++++----
 prestations/js/liste_avant_apres.js      |   8 +-
 3 files changed, 281 insertions(+), 65 deletions(-)

diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index 59492d3..58fe8bc 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -98,9 +98,7 @@
           <table class="table table-striped table-hover align-middle mb-0">
             <thead class="table-dark">
               <tr>
-                <th>Titre du résultat</th>
-                <th>Type</th>
-                
+                <th>Titre du résultat</th>                
                 <th class="text-end">Actions</th>
               </tr>
             </thead>
diff --git a/prestations/html/prestation_accueil.html b/prestations/html/prestation_accueil.html
index aa7a783..ef381b0 100644
--- a/prestations/html/prestation_accueil.html
+++ b/prestations/html/prestation_accueil.html
@@ -1,74 +1,292 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Admin - Prestations</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
-
-    <style>
-        body {
-            background: #f4f6f9;
-            padding: 40px;
-        }
-        .menu-card {
-            transition: 0.2s;
-            cursor: pointer;
-        }
-        .menu-card:hover {
-            transform: scale(1.03);
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
-        }
-        .menu-icon {
-            font-size: 40px;
-        }
-    </style>
+    <title>CE sera le titre de la page</title>
+    <link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
+    <link rel="stylesheet" href="../../css/style.css">
 </head>
 
 <body>
+    <header>
+        <nav class="navbar navbar-expand-xxl bg-body-tertiary">
+            <div class="container-fluid align-items-center">
+                <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
 
-<div class="container text-center">
-    <h2 class="mb-5">Gestion des prestations</h2>
 
-    <div class="row g-4">
 
-        <!-- Prestations -->
-        <div class="col-md-4">
-            <a href="../liste_prestation/liste_prestation.html" class="text-decoration-none">
-                <div class="card p-4 menu-card">
-                    <div class="menu-icon">💼</div>
-                    <h4 class="mt-3 text-dark">Gérer les prestations</h4>
-                    <p class="text-muted">Ajouter, modifier, supprimer les prestations.</p>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active left-label" aria-current="page" href="#">Blog</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Boutique</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Prestations</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">FAQ</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Fiche de renseignements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Partenaires</a>
+                        </li>
+                    </ul>
+
+
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button"
+                                data-bs-toggle="dropdown" aria-expanded="false">
+                                <i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
+                                <li><a class="dropdown-item" href="#">Profil</a></li>
+                                <li>
+                                    <hr class="dropdown-divider">
+                                </li>
+                                <li><a class="dropdown-item" href="#">Sortir</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+
                 </div>
-            </a>
+            </div>
+        </nav>
+
+    </header>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title fs-2">Gérer la page prestations</h1>
+            </header>
+            <main>
+                <section class="prestations">
+
+                    <h2 class="fs-3">Gérer les prestations</h2>
+
+                    <div class="accordion" id="accordionExample">
+                        <div class="accordion-item">
+                            <h2 class="accordion-header">
+                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                                    data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                                    Gèrer les prestations et leur catégorie
+                                </button>
+                            </h2>
+                            <div id="collapseOne" class="accordion-collapse collapse show"
+                                data-bs-parent="#accordionExample">
+                                <div class="accordion-body">
+                                    Contenu de l'accordéon 1
+                                </div>
+                            </div>
+                        </div>
+                        <div class="accordion-item">
+                            <h2 class="accordion-header">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                                    Gérer le slider
+                                </button>
+                            </h2>
+                            <div id="collapseTwo" class="accordion-collapse collapse"
+                                data-bs-parent="#accordionExample">
+                                <div class="accordion-body">
+                                    Contenu de l'accordéon 2
+                                </div>
+                            </div>
+                        </div>
+                      
+                    </div>
+                    <!--
+                    <section class="categories-prestations">
+                        <h3 class="fs-4">Titres des cartes</h3>
+                        <div class="mb-3">
+                            <a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
+                                Ajouter une catégorie
+                            </a>
+                        </div>
+
+
+
+                        <table class="table table-striped table-hover">
+                            <section class="slider">
+                                <details open>
+                                    <summary class="fs-5 fw-semibold">Gérer le slider</summary>
+                                    <h2 class="fs-3 mt-2">Gérer le slider</h2>
+                                    <div class="mb-3">
+                                        <a href="" class="btn btn-primary btn-sm">Ajouter une slide</a>
+                                    </div>
+                                    <table class="table table-striped table-hover">
+                                <tr>
+                                    <td>Toilletage complet</td>
+                                    <td class="text-end">À partir de 60€</td>
+                                    <td class="text-end">
+                                        <a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                        <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Toilletage complet</td>
+                                    <td class="text-end">À partir de 60€</td>
+                                    <td class="text-end">
+                                        <a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                        <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+
+
+
+                    </section>
+                    <section class="categories-prestations">
+                        <h3 class="fs-4">Les prestations</h3>
+                        <div class="mb-3">
+                            <a href="../html/ajouter_avant_apres.html" class="btn btn-sm btn-primary">
+                                Ajouter une prestation
+                                    </table>
+                                </details>
+                        </div>
+                            <section class="galerie-avant-apres">
+                                <details open>
+                                    <summary class="fs-5 fw-semibold">Gérer la galerie avant/après</summary>
+                                    <h2 class="fs-3 mt-2">Gérer la galerie avant/après</h2>
+                                    <div class="mb-3">
+                                        <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
+                                            Ajouter un résultat avant/après
+                                        </a>
+                                    </div>  
+                                    <table class="table table-striped table-hover">
+                                <tr>
+                                    <td>Un nom de prestation</td>
+
+                                    <td class="text-end">
+                                        <a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                        <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>prestation spécifique</td>
+
+                                    <td class="text-end">
+                                        <a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                        <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                    </td>
+                                </tr>
+
+                            </tbody>
+                        </table>
+
+                    </section>
+                </section>
+                <section class="slider">
+                                        </tbody>
+                                    </table>
+                                </details>
+                            </section>
+                    </details>
+                    <h2 class="fs-3 mt-2">Gérer le slider</h2>
+                    <div class="mb-3">
+                        <a href="" class="btn btn-primary btn-sm">Ajouter une slide</a>
+                    </div>
+                    <table class="table table-striped table-hover">
+                        <thead class="table-dark">
+                            <tr>
+                                <th>Titre de la slide</th>
+
+                                <th class="text-end">Actions</th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr>
+                                <td>Slide 1 : coupe griffe</td>
+
+                                <td class="text-end">
+                                    <a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                    <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Slide 2 : coupe ciseaux</td>
+
+                                <td class="text-end">
+                                    <a href="" class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                    <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                </td>
+                            </tr>
+
+                        </tbody>
+                    </table>
+                </section>
+                <section class="galerie-avant-apres">
+                    <details close>
+                        <summary class="fs-5 fw-semibold">
+                            <h2 class="fs-3 mt-2">Gérer la galerie avant/après</h2>
+                            <div class="mb-3">
+                                <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
+                                    Ajouter un résultat avant/après
+                                </a>
+                            </div>
+                            <table class="table table-striped table-hover">
+                                <thead class="table-dark">
+                                    <tr>
+                                        <th>Titre du résultat</th>
+                                        <th class="text-end">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td>Petit chien poils longs</td>
+                                        <td class="text-end">
+                                            <a href="../html/modifier_avant_apres.html"
+                                                class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                            <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>Coupe ciseaux</td>
+                                        <td class="text-end">
+                                            <a href="../html/modifier_avant_apres.html"
+                                                class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                            <button class="btn btn-sm btn-outline-danger delete-btn">Supprimer</button>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+
+                        </summary>
+                    </details>
+
+                </section>
+                -->
+            </main>
         </div>
+    </main>
 
-        <!-- Slider -->
-        <div class="col-md-4">
-            <a href="../slider/liste_slider/liste_slider.html" class="text-decoration-none">
-                <div class="card p-4 menu-card">
-                    <div class="menu-icon">🎞️</div>
-                    <h4 class="mt-3 text-dark">Gérer le slider</h4>
-                    <p class="text-muted">Images du slider de la page Prestations chiens.</p>
-                </div>
-            </a>
-        </div>
-
-        <!-- Avant / Après -->
-        <div class="col-md-4">
-            <a href="../avant_apres/liste_avant_apres/liste_avant_apres.html" class="text-decoration-none">
-                <div class="card p-4 menu-card">
-                    <div class="menu-icon">🖼️</div>
-                    <h4 class="mt-3 text-dark">Galerie Avant / Après</h4>
-                    <p class="text-muted">Ajouter, modifier ou supprimer les photos.</p>
-                </div>
-            </a>
-        </div>
-
-    </div>
-</div>
-
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
-</html>
+
+<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+</html>
\ No newline at end of file
diff --git a/prestations/js/liste_avant_apres.js b/prestations/js/liste_avant_apres.js
index a2d36dd..12d6c71 100644
--- a/prestations/js/liste_avant_apres.js
+++ b/prestations/js/liste_avant_apres.js
@@ -5,13 +5,13 @@ let galleryPairs = [
     {
         id: 1,
         titre: "Petit chien poils longs",
-        type: "Chien",
-       
+  
+    
     },
     {
         id: 2,
         titre: "Coupe ciseaux",
-        type: "Chat",
+
     
     }
 ];
@@ -39,7 +39,7 @@ function displayPairs() {
 
         row.innerHTML = `
             <td>${pair.titre}</td>
-            <td>${pair.type}</td>
+           
 
             <td class="text-center text-md-start">
                 <div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-end gap-2">

From 5b0edbccca491911317dd47f70e668bdc4e4a6b6 Mon Sep 17 00:00:00 2001
From: RoxanaElena09 <popescuroxana09@yahoo.ro>
Date: Thu, 11 Dec 2025 15:18:33 +0100
Subject: [PATCH 15/17] feat: modifier chemin js

---
 prestations/html/prestation_accueil.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/prestations/html/prestation_accueil.html b/prestations/html/prestation_accueil.html
index ef381b0..678c48a 100644
--- a/prestations/html/prestation_accueil.html
+++ b/prestations/html/prestation_accueil.html
@@ -287,6 +287,6 @@
 
 </body>
 
-<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
 </html>
\ No newline at end of file

From 74a04ea355af11a8431c071367ab5b810629f9be Mon Sep 17 00:00:00 2001
From: ben <ben.voydie64@gmail.com>
Date: Thu, 11 Dec 2025 16:11:20 +0100
Subject: [PATCH 16/17] retouche des redirections de page

---
 blog/html/ajouter_article.html    | 14 +++-----------
 blog/html/ajouter_categorie.html  |  2 +-
 blog/html/modifier_article.html   |  2 +-
 blog/html/modifier_categorie.html |  2 +-
 blog/js/ajouter_categorie.js      |  2 +-
 blog/js/modifier_article.js       |  2 +-
 blog/js/modifier_categorie.js     |  2 +-
 css/blog.css                      | 11 +++++++++++
 package-lock.json                 |  3 +--
 9 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 css/blog.css

diff --git a/blog/html/ajouter_article.html b/blog/html/ajouter_article.html
index 0da4488..c468486 100644
--- a/blog/html/ajouter_article.html
+++ b/blog/html/ajouter_article.html
@@ -7,22 +7,14 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
     <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
     <script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/translations/fr.js"></script>
+    <link rel="stylesheet" href="../../css/blog.css">
 
 
 
 
 
     <style>
-        body {
-            background: #f4f6f9;
-        }
-        .container {
-           
-            margin: 40px auto;
-        }
-        .ck-editor__editable {
-    min-height: 350px; 
-}
+    
     </style>
 </head>
 <body>
@@ -144,7 +136,7 @@
 
         <!--Boutons-->
         <div class="d-flex gap-3 mt-4">
-        <a href="../html/liste_categorie_article.html" class="btn btn-secondary w-50">Annuler</a>
+        <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
         <button type="submit" class="btn btn-primary w-50">Ajouter</button>
         </div>
 
diff --git a/blog/html/ajouter_categorie.html b/blog/html/ajouter_categorie.html
index 1f26d8c..e37de56 100644
--- a/blog/html/ajouter_categorie.html
+++ b/blog/html/ajouter_categorie.html
@@ -97,7 +97,7 @@
             </div>
 
             <div class="d-flex gap-3 mt-4">
-                <a href="../html/liste_categorie_article.html" class="btn btn-secondary w-50">Annuler</a>
+                <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
                 <button type="submit" class="btn btn-primary w-50">Ajouter</button>
             </div>
         </form>
diff --git a/blog/html/modifier_article.html b/blog/html/modifier_article.html
index 56c423b..bee27bc 100644
--- a/blog/html/modifier_article.html
+++ b/blog/html/modifier_article.html
@@ -157,7 +157,7 @@
 
     <!--Boutons-->
     <div class="d-flex gap-3 mt-4">
-      <a href="../../blog/html/liste_categorie_article.html" class="btn btn-secondary w-50">Annuler</a>
+      <a href="../../blog/html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
       <button type="submit" class="btn btn-primary w-50">Enregistrer</button>
     </div>
 
diff --git a/blog/html/modifier_categorie.html b/blog/html/modifier_categorie.html
index 30c86e1..39accf0 100644
--- a/blog/html/modifier_categorie.html
+++ b/blog/html/modifier_categorie.html
@@ -95,7 +95,7 @@
         </div>
 
         <div class="d-flex gap-3 mt-4">
-  <a href="../html/liste_categorie_article.html" class="btn btn-secondary w-50">Annuler</a>
+  <a href="../html/accueil_blog.html" class="btn btn-secondary w-50">Annuler</a>
   <button type="submit" class="btn btn-primary w-50">Enregistrer</button>
 </div>
 
diff --git a/blog/js/ajouter_categorie.js b/blog/js/ajouter_categorie.js
index 8c4189c..dd7e34c 100644
--- a/blog/js/ajouter_categorie.js
+++ b/blog/js/ajouter_categorie.js
@@ -40,7 +40,7 @@ existingCategories.push(nom);
 
 //  Redirection après 1 seconde
 setTimeout(() => {
-    window.location.href = "../html/liste_categorie_article.html";
+    window.location.href = "../html/accueil_blog.html";
 }, 1000);
 
 
diff --git a/blog/js/modifier_article.js b/blog/js/modifier_article.js
index a5a930d..fc53268 100644
--- a/blog/js/modifier_article.js
+++ b/blog/js/modifier_article.js
@@ -55,6 +55,6 @@ form.addEventListener("submit", function (e) {
 
   //  Redirection après succès
   setTimeout(() => {
-    window.location.href = "../../blog/html/liste_categorie_article.html"; 
+    window.location.href = "../../blog/html/accueil_blog.html"; 
   }, 1500);
 });
diff --git a/blog/js/modifier_categorie.js b/blog/js/modifier_categorie.js
index 97f8b1a..2131a45 100644
--- a/blog/js/modifier_categorie.js
+++ b/blog/js/modifier_categorie.js
@@ -21,6 +21,6 @@ form.addEventListener("submit", function (e) {
 
     //  Redirection après succès
     setTimeout(() => {
-        window.location.href = "../html/liste_categorie_article.html";
+        window.location.href = "../html/accueil_blog.html";
     }, 1500);
 });
diff --git a/css/blog.css b/css/blog.css
new file mode 100644
index 0000000..882b6b6
--- /dev/null
+++ b/css/blog.css
@@ -0,0 +1,11 @@
+
+    body {
+            background: #f4f6f9;
+        }
+        .container {
+           
+            margin: 40px auto;
+        }
+        .ck-editor__editable {
+    min-height: 350px; 
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1bfd43d..890a3bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,8 +76,7 @@
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "peer": true
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="
     },
     "node_modules/tinymce": {
       "version": "8.2.2",

From 63592a114d6bb93664e5d11f9227e8132b5abaa2 Mon Sep 17 00:00:00 2001
From: ben <ben.voydie64@gmail.com>
Date: Thu, 11 Dec 2025 16:34:46 +0100
Subject: [PATCH 17/17] mise a jour DOM page modifier categorie

---
 blog/html/ajouter_article.html    | 20 +-------------------
 blog/html/ajouter_categorie.html  |  2 +-
 blog/html/modifier_article.html   |  2 +-
 blog/html/modifier_categorie.html | 19 ++++---------------
 blog/js/modifier_categorie.js     | 29 ++++++++++++++++++++---------
 5 files changed, 27 insertions(+), 45 deletions(-)

diff --git a/blog/html/ajouter_article.html b/blog/html/ajouter_article.html
index c468486..eb8cd59 100644
--- a/blog/html/ajouter_article.html
+++ b/blog/html/ajouter_article.html
@@ -144,7 +144,7 @@
 </div>
 
 <script src="../js/ajouter_article.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 <script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
 
   <script>
@@ -158,27 +158,9 @@ tinymce.init({
 </script>
 
 
-
-
-
-
-
     
 </body>
 </html>
 
 
 
-<!--ClassicEditor
-  .create(document.querySelector('#articleContent'), {
-    language: 'fr',
-    toolbar: [
-      'heading',
-      'bold', 'italic', 
-      'bulletedList', 'numberedList',
-      'undo', 'redo'
-    ]
-  })
-  .catch(error => {
-    console.error(error);
-  });
\ No newline at end of file
diff --git a/blog/html/ajouter_categorie.html b/blog/html/ajouter_categorie.html
index e37de56..ae80d6a 100644
--- a/blog/html/ajouter_categorie.html
+++ b/blog/html/ajouter_categorie.html
@@ -104,7 +104,7 @@
     </div>
 
     <script src="../js/ajouter_categorie.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     
 </body>
 </html>
\ No newline at end of file
diff --git a/blog/html/modifier_article.html b/blog/html/modifier_article.html
index bee27bc..caa594d 100644
--- a/blog/html/modifier_article.html
+++ b/blog/html/modifier_article.html
@@ -179,7 +179,7 @@
 </script>
 
 <script src="../js/modifier_article.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
 </body>
 </html>
diff --git a/blog/html/modifier_categorie.html b/blog/html/modifier_categorie.html
index 39accf0..b1ced3a 100644
--- a/blog/html/modifier_categorie.html
+++ b/blog/html/modifier_categorie.html
@@ -5,17 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Modifier une catégorie</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="../../css/blog.css">
 
-    <style>
-        body {
-            background: #f4f6f981;
-           
-        }
-        .container {
-           
-            margin: 50px auto;
-        }
-    </style>
+    
 </head>
 <body>
 
@@ -75,10 +67,7 @@
 <div class="container">
     <h2 class="mb-5 text-center">Modifier une catégorie</h2>
 
-    <div id="errorMsg" class="alert alert-danger d-none">Veuillez ezmplir tous les champs obligatoires</div>
-
-    <div id="successMsg" class="alert alert-success d-none">La catégorie a été modifiée avec succès !</div>
-
+   
     <form id="modifierCategorie">
 
 
@@ -103,7 +92,7 @@
 </div>
 
 <script src="../js/modifier_categorie.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 
 
     
diff --git a/blog/js/modifier_categorie.js b/blog/js/modifier_categorie.js
index 2131a45..ab6456e 100644
--- a/blog/js/modifier_categorie.js
+++ b/blog/js/modifier_categorie.js
@@ -1,25 +1,36 @@
-
 const form = document.getElementById("modifierCategorie");
 const nameField = document.getElementById("categoryName");
 const descField = document.getElementById("categorieDescription");
-const errorMsg = document.getElementById("errorMsg");
-const successMsg = document.getElementById("successMsg");
+
+// Fonction pour afficher un message Bootstrap
+function showMessage(type, message) {
+    // Création de l'alert
+    const alert = document.createElement("div");
+    alert.className = `alert alert-${type} mt-3`;
+    alert.textContent = message;
+
+    // Ajout en haut du formulaire
+    form.prepend(alert);
+
+    // Suppression automatique après 2 secondes
+    setTimeout(() => {
+        alert.remove();
+    }, 2000);
+}
 
 form.addEventListener("submit", function (e) {
     e.preventDefault();
 
     // Vérification des champs obligatoires
     if (nameField.value.trim() === "" || descField.value.trim() === "") {
-        errorMsg.classList.remove("d-none");
-        successMsg.classList.add("d-none");
+        showMessage("danger", "Veuillez remplir tous les champs obligatoires");
         return;
     }
 
-    // Succès
-    errorMsg.classList.add("d-none");
-    successMsg.classList.remove("d-none");
+    // Message succès
+    showMessage("success", "La catégorie a été modifiée avec succès !");
 
-    //  Redirection après succès
+    // Redirection après succès
     setTimeout(() => {
         window.location.href = "../html/accueil_blog.html";
     }, 1500);