bog : supprimer réactif

feat: ajouter_prestation validée w3c validator et normalisee
integration de password.js à reinitialisation mdp
2025-12-16 13:18:18 +01:00 · 2025-12-16 09:58:38 +01:00 · 2025-12-16 08:50:31 +01:00 · 2025-12-16 08:31:11 +01:00 · 2025-12-14 21:06:10 +01:00 · 2025-12-14 14:11:39 +01:00
58 changed files with 4255 additions and 2094 deletions
--- a/blog/html/accueil_blog.html
+++ b/blog/html/accueil_blog.html
@@ -4,63 +4,42 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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">
-
-
-
+  <title>Liste des vétos - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
  
 </head>

 <body>
  <header>
-        <nav class="navbar navbar-expand-xxl bg-body-tertiary">
+    <nav class="navbar navbar-expand-xl 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">
+        <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>
+            <li class="nav-item"><a class="nav-link 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 active left-label" href="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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 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">
+              <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">
@@ -72,18 +51,16 @@
              </ul>
            </li>
          </ul>
-
        </div>
      </div>
    </nav>
-
  </header>
    <main class="my-5 fs-6">
        <div class="container">
            <header>
-                <h1 class="title fs-2">Modifier la page blog</h1>
+                <h1 class="title fs-2 text-center">Modifier la page blog</h1>
            </header>
-            <main>
+            <div class="content">


                <section class="mb-5 section-categories">
@@ -106,7 +83,24 @@
                            </tr>
                        </thead>
                        <tbody id="categoriesTableBody">
-                            <!-- rempli en JS -->
+                            <tr>
+                                <td>Soins</td>
+                                <td class="text-end">
+                                    <a href="modifier_categorie.html"
+                                        class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                    <a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                    data-bs-target="#confirmDeleteModal">Supprimer</a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>Alimentation</td>
+                                <td class="text-end">
+                                    <a href="modifier_categorie.html"
+                                        class="btn btn-sm btn-outline-primary me-1">Modifier</a>
+                                    <a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                    data-bs-target="#confirmDeleteModal">Supprimer</a>
+                                </td>
+                            </tr>
                        </tbody>
                    </table>
                </section>
@@ -116,15 +110,11 @@
                <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>
@@ -137,27 +127,61 @@
                            <tr>
                                <td>Mon premier article</td>
                                <td class="text-end">
+                                    <a href="modifier_article.html"
+                                        class="btn btn-sm btn-secondary me-1 disabled">Facebook</a>
+
                                    <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>
+                                    <a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                    data-bs-target="#confirmDeleteModal">Supprimer</a>
                                </td>
                            </tr>
                            <tr>
                                <td>Mon deuxième article</td>
                                <td class="text-end">
+                                    <a href="modifier_article.html"
+                                        class="btn btn-sm btn-outline-success me-1">Facebook</a>
                                    <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>
+                                    <a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                    data-bs-target="#confirmDeleteModal">Supprimer</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </section>
-            </main>
+            </div>
        </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>
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+        <div class="container d-flex gap-3 flex-wrap">
+            <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+            <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+            <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+        </div>
+    </footer>
+
+    <div class="modal fade" id="confirmDeleteModal" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Confirmer la suppression</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          Êtes-vous sûr de vouloir supprimer cette catégorie ou cet article ? Cette action est irréversible.
+          <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="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/js/confirmDelete.js"></script>

 </body>
+</html>
--- a/blog/html/ajouter_article.html
+++ b/blog/html/ajouter_article.html
@@ -1,192 +1,158 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ajouter un article</title>
-    <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>
+  <title>Liste des vétos - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
  
-
-
-
-
-    <style>
-        body {
-            background: #f4f6f9;
-        }
-        .container {
-           
-            margin: 40px auto;
-        }
-        .ck-editor__editable {
-    min-height: 350px; 
-}
-    </style>
 </head>
-<body>

-    <!-- HEADER -->
-<header>
-    <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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">
+        <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>
+            <li class="nav-item"><a class="nav-link 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 active left-label" href="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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 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"><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">
+              <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">
+              <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>
+                  <hr class="dropdown-divider">
+                </li>
                <li><a class="dropdown-item" href="#">Sortir</a></li>
              </ul>
            </li>
          </ul>
-
        </div>
      </div>
    </nav>
-</header>
+  </header>

-<div class="container">
+    <main class="container mt-5">
        <h2 class="mb-5 text-center">Ajouter un article</h2>
+
        <form id="ajouterArticleForm">


-    <!--Erreur titre vide-->
-    <div id="errorEmpty" class="alert alert-danger d-none">Le titre de l'article est obligatoire</div>
+            <div id="messages" class="mb-3"></div>

-   <!--Erreur image invalide-->
-<div id="errorImage" class="alert alert-danger d-none">
-   Format d'image invalide. Formats acceptés : JPG, PNG
-</div>

-    <!--Erreur titre existant-->
-    <div id="errorExists" class="alert alert-danger d-none">Ce titre existe déjà. Choisissez un autre titre.</div>
-
-    <!--Succès ajout article-->
-    <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 (obligatoire)</label>
+                <label class="form-label fw-bold">Catégorie (obligatoire)</label>
                <select id="articleCategory" class="form-select" required>
-        <option value="" disabled selected>Choisissez une catégorie</option>
+                    <option value="none" 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>
+            </div>
+
+            <!-- Titre -->
+            <div class="mb-4">
+                <label class="form-label fw-bold" for="articleTitle">Titre (obligatoire)</label>
+                <input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article"
+                    required>
+            </div>
+
+            <div class="mb-4">
+                <label class="form-label fw-bold" for="description">Description (obligatoire)</label>
+                <input type="text" id="description" class="form-control" placeholder="Entrez la description de l'article"
+                    required>
+            </div>


+            <!-- Contenu -->
+            <div class="row mb-3">
+                <div class="col-md-4 image">
+                    <div class="mb-4">
+                        <label class="form-label fw-bold" for="articleImage">Image (optionnelle)</label>
                        
-<!-- Titre -->
-<div class="mb-4">
-    <label class="form-label fw-bold">Titre de l'article (obligatoire)</label>
-    <input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article">
-</div>
+                        <input type="file" id="imageInput" class="form-control" accept="image/png, image/jpeg, image/jpg, image/webp">

-<!-- Contenu -->
-<div class="mb-3">
-    <label class="form-label fw-bold">Contenu de l'article</label>
-    <textarea id="articleContent" class="form-control" rows="5" placeholder="Entrez le contenu de l'article"></textarea>
-</div>
+                    </div>
+                    <div class="preview-img-container">
+                    </div>
+                </div>

-<!-- Image -->
-<div class="mb-4">
-    <label class="form-label fw-bold">Image de l'article</label>
-    <input type="file" id="articleImage" class="form-control" accept="image/*">
-</div>
+                <div class="col-md-8 conent">
+                    <div class="mb-3">
+                        <label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
+                        <div class="row">
+
+                        </div>
+                        <textarea id="articleContent" required></textarea>
+                    </div>
+                </div>
+            </div>


      


-        <!--Publié-->
+
+            <!-- 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 facebook)</label>
+                <label class="form-check-label" for="articlePublished">Publié</label>
            </div>

-
-        <!--Boutons-->
+            <!-- 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>
-
        </form>
-</div>
+    </main>
+    <footer class="bg-body-tertiary py-4 mt-auto">

-<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="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>
+        <div class="container d-flex gap-3 flex-wrap">
+            <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+            <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+            <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+        </div>
+    </footer>
    
    
    
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

+    <script src="/node_modules/tinymce/tinymce.min.js"></script>
+    <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+    <script src="/js/tinyMce.js"></script>

+    <script src="/js/previewImage.js"></script>



 </body>
+
 </html>
-
-
-
-<!--ClassicEditor
-  .create(document.querySelector('#articleContent'), {
-    language: 'fr',
-    toolbar: [
-      'heading',
-      'bold', 'italic', 
-      'bulletedList', 'numberedList',
-      'undo', 'redo'
-    ]
-  })
-  .catch(error => {
-    console.error(error);
-  });
--- a/blog/html/ajouter_categorie.html
+++ b/blog/html/ajouter_categorie.html
@@ -1,110 +1,109 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ajouter une catégorie</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+  <title>Liste des vétos - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
  
-    <style>
-        body{
-            background: #f4f6f981;
-        
-        }
-        .container{
-            
-            margin-top: 50px;
-        }
-    </style>
 </head>
-<body>

-    <!-- HEADER -->
-<header>
-    <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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">
+        <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>
+            <li class="nav-item"><a class="nav-link 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 active left-label" href="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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 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"><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">
+              <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">
+              <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>
+                  <hr class="dropdown-divider">
+                </li>
                <li><a class="dropdown-item" href="#">Sortir</a></li>
              </ul>
            </li>
          </ul>
-
        </div>
      </div>
    </nav>
-</header>
+  </header>

-    <div class="container">
+<div class="container">
    <h2 class="mb-5 text-center">Ajouter une catégorie</h2>

-        <!--Erreur champ vide -->
-        <div id="errorEmpty" class="alert alert-danger d-none">Le nom de catégorie est obligatoire.</div>
    
-        <!--Erreur nom deja existant -->
-        <div id="errorExists" class="alert alert-danger d-none">Cette catégorie existe déjà. Veuillez en choisir une autre.</div>
-
-        <!--Succès ajout catégorie -->
-        <div id="successMessage" class="alert alert-success d-none">Catégorie ajoutée avec succès !</div>
+    <div id="messages" class="mb-3"></div>

    <form id="addCategoryForm">

-
        <div class="mb-4">
            <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
-                <input type="text" id="categoryName" class="form-control" placeholder="Actualité, chien, chat .." required></div>
+            <input
+                type="text"
+                id="categoryName"
+                class="form-control"
+                placeholder="Actualité, chien, chat…" required>
+        </div>

        <div class="mb-3">
            <label class="form-label fw-bold">Description</label>
-                <textarea id="categoryDescription" class="form-control" rows="4" placeholder="Entrez une description (optionnel)"></textarea>
+            <textarea
+                id="categoryDescription"
+                class="form-control"
+                rows="4"
+                placeholder="Entrez une description (optionnel)">
+            </textarea>
        </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>
-    </div>
+</div>
+<footer class="bg-body-tertiary py-4 mt-auto">

-    <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>
+        <div class="container d-flex gap-3 flex-wrap">
+            <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+            <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+            <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+        </div>
+    </footer>
+
+ 
+<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+<script src="/node_modules/tinymce/tinymce.min.js"></script>
+<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+<script src="/js/tinyMce.js"></script>

 </body>
 </html>
--- a/blog/html/modifier_article.html
+++ b/blog/html/modifier_article.html
@@ -1,188 +1,144 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Modifier un article</title>
-    <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>
+  <title>Liste des vétos - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
  
-
-    <style>
-        body {
-            background: #f4f6f9;
-        }
-        .container {
-           
-            margin-top: 40px;
-        }
-        .preview-img {
-           max-width: 15px;
-           border-radius: 8px
-        }
-        .ck-editor__editable {
-    min-height: 350px; 
-}
-    </style>
 </head>

 <body>
-
-  <!-- HEADER -->
-<header>
-    <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
+  <header>
+    <nav class="navbar navbar-expand-xl 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">
+        <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>
+            <li class="nav-item"><a class="nav-link 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 active left-label" href="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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 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"><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">
+              <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">
+              <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>
+                  <hr class="dropdown-divider">
+                </li>
                <li><a class="dropdown-item" href="#">Sortir</a></li>
              </ul>
            </li>
          </ul>
-
        </div>
      </div>
    </nav>
-</header>
-
+  </header>

 <div class="container">
    <h2 class="mb-4 text-center">Modifier un article</h2>
+    <div id="messages" class="mb-3"></div>

-  <!--Erreur titre vide-->
-  <div id="errorEmpty" class="alert alert-danger d-none">
-    g Le titre de l'article est obligatoire.
-  </div>
-
-  <!--Erreur image invalide-->
-  <div id="errorImage" class="alert alert-danger d-none">
-     Format d'image invalide. Formats acceptés : JPG, PNG, GIF.
-  </div>
-
-  <!--Erreur titre existant-->
-  <div id="errorExists" class="alert alert-danger d-none">
-     Ce titre existe déjà. Veuillez en choisir un autre.
-  </div>
-
-  <!--Succès-->
-  <div id="successMsg" class="alert alert-success d-none">
-     L'article a été modifié avec succès !
-  </div>
-
-  <!-- Formulaire -->
    <form id="editArticleForm">

-   
-
-    <!--Titre-->
+        <!-- Titre -->
        <div class="mb-3">
-      <label class="form-label fw-bold">Titre de l'article (obligatoire)</label>
-      <input type="text" id="articleTitle" class="form-control" value="Titre de l'article actuel" placeholder="Modifier le titre">
+            <label class="form-label fw-bold">Titre (obligatoire)</label>
+            <input type="text" id="articleTitle" class="form-control" value="Les chats, ces réveils matin détraqués">
+        </div>
+        <div class="mb-4">
+                <label class="form-label fw-bold" for="description">Description (obligatoire)</label>
+                <input type="text" id="description" class="form-control" value="la description de précédente"
+                    required>
            </div>

-    <!--Contenu-->
+          <div class="mb-4 categorie">
+            <label class="form-label fw-bold" for="categories">Catégorie (obligatoire)</label>
+          
+            <select id="categories" class="form-select">
+                 <option value="none" disabled>Choisissez une catégorie</option>
+                    <option value="actualités">Actualités</option>
+                    <option value="chien">Chien</option>
+                    <option value="chat" selected>Chat</option>
+                    <option value="boutique">Boutique</option> 
+            </select>
+        </div>
+
+        <!-- Contenu -->
+            <div class="row mb-3">
+                <div class="col-md-4 image">
+                    <div class="mb-4">
+                        <label class="form-label fw-bold" for="articleImage">Image (optionnelle)</label>
+                        
+                        <input type="file" id="imageInput" class="form-control" accept="image/png, image/jpeg, image/jpg, image/webp">
+
+                    </div>
+                    <div class="preview-img-container">
+                    </div>
+                </div>
+
+                <div class="col-md-8 conent">
                    <div class="mb-3">
-      <label class="form-label fw-bold">Contenu de l'article</label>
-      <textarea id="articleContent" class="form-control" rows="5">Contenu de l'article actuel...</textarea>
-    </div>
-
-    <!--Catégorie-->
-    <div class="mb-4">
-      <label class="form-label fw-bold">Catégorie de l'article</label>
-      <input
-      type="text"
-      id="articleCategory"
-      class="form-control"
-      list="categories"
-      placeholder="Entrez une catégorie">
-
-      <datalist id="categories">
-      <option value="actualités">
-      <option value="chien">
-      <option value="chat">
-      <option value="boutique">
-      </datalist>
+                        <label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
+                        <div class="row">

                        </div>
-
-    <!-- Image actuelle -->
-    <label class="fw-bold">Image actuelle</label>
-    <div class="mb-4">
-      <img src="/blog/categories/images/article1.jpg" alt="Image actuelle" class="preview-img mb-2">
-      <input type="file" id="articleImage" class="form-control" accept="image/*">
+                        <textarea id="articleContent" required></textarea>
+                    </div>
+                </div>
            </div>

-    <!--Publié-->
+        <!-- Publié -->
        <div class="form-check mb-3">
-      <input class="form-check-input" type="checkbox" id="articlePublished" checked>
+            <input class="form-check-input" type="checkbox" id="articlePublished">
            <label class="form-check-label">Publié</label>
        </div>

-    <!--Boutons-->
+        <!-- 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>

    </form>
-
 </div>
+<footer class="bg-body-tertiary py-4 mt-auto">

-<script>
-  ClassicEditor
-  .create(document.querySelector('#articleContent'), {
-    language: 'fr',
-    toolbar: [
-      'heading',
-      'bold', 'italic', 'underline',
-      'bulletedList', 'numberedList',
-      'undo', 'redo'
-    ]
-  })
-</script>
+        <div class="container d-flex gap-3 flex-wrap">
+            <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+            <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+            <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+        </div>
+    </footer>

-<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>
+
+<script src="/node_modules/tinymce/tinymce.min.js"></script>
+<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+<script src="/js/tinyMce.js"></script>
+
+<script src="/js/previewImage.js"></script>
 </body>
 </html>
-
-
-    
--- a/blog/html/modifier_categorie.html
+++ b/blog/html/modifier_categorie.html
@@ -1,111 +1,104 @@
 <!DOCTYPE html>
 <html lang="fr">
+
 <head>
  <meta charset="UTF-8">
  <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">
+  <title>Liste des vétos - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
  
-    <style>
-        body {
-            background: #f4f6f981;
-           
-        }
-        .container {
-           
-            margin: 50px auto;
-        }
-    </style>
 </head>
-<body>

-    <!-- HEADER -->
-<header>
-    <nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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">
+        <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>
+            <li class="nav-item"><a class="nav-link 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 active left-label" href="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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 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"><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">
+              <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">
+              <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>
+                  <hr class="dropdown-divider">
+                </li>
                <li><a class="dropdown-item" href="#">Sortir</a></li>
              </ul>
            </li>
          </ul>
-
        </div>
      </div>
    </nav>
-</header>
+  </header>

-<div class="container">
+    <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">


            <div class="mb-4">
                <label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
-  <input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie" required>
+                <input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie"
+                    required>

-</div>
+            </div>


            <div class="mb-3">
                <label class="form-label fw-bold">Description (optionnel)</label>
-            <textarea id="categorieDescription" class="form-control" rows="4" placeholder="Entrez une description" required></textarea>
+                <textarea id="categorieDescription" class="form-control" rows="4"></textarea>
            </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>
+            </div>

        </form>
-</div>
+    </div>
+    <footer class="bg-body-tertiary py-4 mt-auto">

-<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>
+        <div class="container d-flex gap-3 flex-wrap">
+            <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+            <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+            <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+        </div>
+    </footer>

    
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script src="/node_modules/tinymce/tinymce.min.js"></script>
+    <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+    <script src="/js/tinyMce.js"></script>

 </body>
+
 </html>
--- a/blog/js/ajouter_article.js
+++ b/blog/js/ajouter_article.js
@@ -1,84 +1,108 @@
-const form = document.getElementById('ajouterArticleForm');
-const imgField = document.getElementById('articleImage');
-const titleField = document.getElementById('articleTitle');
-const categoryField = document.getElementById('articleCategory');
-const publishedField = document.getElementById('articlePublished');
+const form = document.getElementById("ajouterArticleForm");
+const messages = document.getElementById("messages");

-const errorEmpty = document.getElementById('errorEmpty');
-const errorImage = document.getElementById('errorImage');
-const errorExists = document.getElementById('errorExists');
-const successMsg = document.getElementById('successMsg');
+const imgField = document.getElementById("articleImage");
+const imgPreview = document.getElementById("imagePreview");
+const titleField = document.getElementById("articleTitle");
+const categoryField = document.getElementById("articleCategory");
+const publishedField = document.getElementById("articlePublished");

 // Simulation BDD
-const titreExistants = ['décoration noel', 'coupe de chien'];
+const titresExistants = ["décoration noel", "coupe de chien"];

-form.addEventListener('submit', function(e) {
+
+function showMessage(type, text) {
+    messages.innerHTML = "";
+
+    const div = document.createElement("div");
+    div.className = `alert alert-${type}`;
+    div.textContent = text;
+
+    messages.appendChild(div);
+}
+
+
+function imageValide(file) {
+    if (!file) return true;
+    return ["image/jpeg", "image/png"].includes(file.type);
+}
+
+// Preview image on selection via generic loader (global)
+const imgLoader = window.initImagePreview && window.initImagePreview("articleImage", "articleImagePreview", ["image/jpeg", "image/png"]);
+
+
+form.addEventListener("submit", function (e) {
    e.preventDefault();
+    messages.innerHTML = "";

-    const titre = titleField.value.trim().toLowerCase();
-    const fichierImage = imgField.files[0];
-    const contenu = tinymce.get("articleContent").getContent();  // ← CORRECTION IMPORTANTE
+    const titre = titleField.value.trim();
+    const titreLower = titre.toLowerCase();
+    const contenu = tinymce.get("articleContent").getContent().trim();
    const categorie = categoryField.value;
-
-    // Reset messages
-    errorEmpty.classList.add('d-none');
-    errorImage.classList.add('d-none');
-    errorExists.classList.add('d-none');
-    successMsg.classList.add('d-none');
+    const image = imgField.files[0];
+    const published = publishedField.checked;

    // Catégorie obligatoire
-    if (categorie === "") {
-        errorEmpty.textContent = "Veuillez choisir une catégorie.";
-        errorEmpty.classList.remove('d-none');
+    if (!categorie) {
+        showMessage("danger", "Veuillez choisir une catégorie.");
        return;
    }

    // Titre obligatoire
-    if (titre === "") {
-        errorEmpty.textContent = "Le titre de l'article est obligatoire.";
-        errorEmpty.classList.remove('d-none');
+    if (!titre) {
+        showMessage("danger", "Le titre de l'article est obligatoire.");
        return;
    }

-    // Titre déjà existant
-    if (titreExistants.includes(titre)) {
-        errorExists.classList.remove('d-none');
+    // Titre existant
+    if (titresExistants.includes(titreLower)) {
+        showMessage("danger", "Ce titre existe déjà. Choisissez-en un autre.");
        return;
    }

    // Contenu obligatoire
-    if (contenu.trim() === "") {
-        errorEmpty.textContent = "Le contenu de l'article ne peut pas être vide.";
-        errorEmpty.classList.remove('d-none');
+    if (!contenu) {
+        showMessage("danger", "Le contenu de l'article ne peut pas être vide.");
        return;
    }

-    // Image invalide
-    if (fichierImage) {
-        const validFormats = ['image/jpeg', 'image/png'];
-        if (!validFormats.includes(fichierImage.type)) {
-            errorImage.classList.remove('d-none');
+    // Image valide
+    if (!imageValide(image)) {
+        showMessage("danger", "Format d'image invalide. JPG ou PNG uniquement.");
        return;
    }
+
+    // Enregistrement titre simulé
+    titresExistants.push(titreLower);
+
+    // Création article
+    const nouvelArticle = {
+        id: Date.now(),
+        titre,
+        contenu,
+        categorie,
+        published,
+        date: new Date().toISOString()
+    };
+
+    // LocalStorage
+    const articles = JSON.parse(localStorage.getItem("articles")) || [];
+    articles.push(nouvelArticle);
+    localStorage.setItem("articles", JSON.stringify(articles));
+
+    showMessage("success", "Article ajouté avec succès !");
+
+    // Reset
+    form.reset();
+    tinymce.get("articleContent").setContent("");
+    if (imgLoader && typeof imgLoader.reset === "function") {
+        imgLoader.reset();
    }

-    // Simuler enregistrement
-    titreExistants.push(titre);
-
-    // Succès
-    successMsg.classList.remove('d-none');
-
    // Redirection
    setTimeout(() => {
-        window.location.href = "../html/liste_categorie_article.html";
-    }, 1000);
+        window.location.href = "../html/accueil_blog.html";
+    }, 1500);
 });

-// TinyMCE
-tinymce.init({
-    selector: '#articleContent',
-    height: 400,
-    language: 'fr',
-    plugins: 'lists fullscreen',
-    toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen',
-});
+
--- a/blog/js/ajouter_categorie.js
+++ b/blog/js/ajouter_categorie.js
@@ -1,47 +1,52 @@
-
 const form = document.getElementById("addCategoryForm");
+const messages = document.getElementById("messages");
+
 const nameField = document.getElementById("categoryName");
 const descField = document.getElementById("categoryDescription");

-const errorEmpty = document.getElementById("errorEmpty");
-const errorExists = document.getElementById("errorExists");
-const successMessage = document.getElementById("successMessage");
-
-// Catégories existantes ( à remplacer en BD si besoin)
+// Catégories existantes (simulation BDD)
 const existingCategories = ["Actualités", "Chien", "Chat", "Boutique"];

+
+function showMessage(type, text) {
+    messages.innerHTML = "";
+
+    const div = document.createElement("div");
+    div.className = `alert alert-${type}`;
+    div.textContent = text;
+
+    messages.appendChild(div);
+}
+
+
 form.addEventListener("submit", function (e) {
    e.preventDefault();
+    messages.innerHTML = "";

    const nom = nameField.value.trim();

-    //Remettre tout a zero
-    errorEmpty.classList.add("d-none");
-    errorExists.classList.add("d-none");
-    successMessage.classList.add("d-none");
-
-    //Erreur champs vide
-    if (nom === "") {
-        errorEmpty.classList.remove("d-none");
+    // Champ obligatoire
+    if (!nom) {
+        showMessage("danger", "Le nom de la catégorie est obligatoire.");
        return;
    }

-    //Erreur catégorie existante
+    // Catégorie existante
    if (existingCategories.includes(nom)) {
-        errorExists.classList.remove("d-none");
+        showMessage("danger", "Cette catégorie existe déjà. Veuillez en choisir une autre.");
        return;
    }

-    // Succès
-successMessage.classList.remove("d-none");
+    // Ajout catégorie (simulation)
+    existingCategories.push(nom);

-// Ajout d'une nouvelle catégorie
-existingCategories.push(nom);
-
-//  Redirection après 1 seconde
-setTimeout(() => {
-    window.location.href = "../html/liste_categorie_article.html";
-}, 1000);
+    showMessage("success", "Catégorie ajoutée avec succès !");

+    // Reset formulaire
+    form.reset();

+    // Redirection
+    setTimeout(() => {
+        window.location.href = "../html/accueil_blog.html";
+    }, 1500);
 });
--- a/blog/js/liste_articledqss.js
+++ b/blog/js/liste_articledqss.js
@@ -0,0 +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;
+
+    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}" ?`)) {
+
+        // 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é !");
+    }
+});
+
+// Lancer l'affichage dès que la page charge
+afficherArticles();
--- a/blog/js/liste_articles.js
+++ b/blog/js/liste_articles.js
@@ -1,14 +0,0 @@
-
-document.addEventListener("click", function (e) {
-    const btn = e.target.closest(".delete-btn");
-    if (!btn) return; // on a cliqué ailleurs
-
-    // On récupère la ligne de l'article
-    const row = btn.closest("tr");
-    const titre = row.querySelector("td").textContent.trim();
-
-    if (confirm(`Voulez-vous vraiment supprimer l'article : "${titre}" ?`)) {
-        row.remove(); // supprime la ligne
-        alert("Article supprimé !");
-    }
-});
--- a/blog/js/modifier_article.js
+++ b/blog/js/modifier_article.js
@@ -1,60 +1,90 @@
 const form = document.getElementById("editArticleForm");
+const messages = document.getElementById("messages");
+
 const imgField = document.getElementById("articleImage");
 const titleField = document.getElementById("articleTitle");
+const imgPreview = document.getElementById("imagePreview");
 const contentField = document.getElementById("articleContent");
 const categoryField = document.getElementById("articleCategory");
 const publishedField = document.getElementById("articlePublished");

-const errorEmpty = document.getElementById("errorEmpty");
-const errorImage = document.getElementById("errorImage");
-const errorExists = document.getElementById("errorExists");
-const successMsg = document.getElementById("successMsg");
-
-// Simulation BDD pour vérifier doublons
+// Simulation BDD pour doublons
 const titresExistants = [
  "article de test",
  "nouveautés chiens",
-  "actualité du mois",
+  "actualité du mois"
 ];

+
+function showMessage(type, text) {
+  messages.innerHTML = "";
+
+  const div = document.createElement("div");
+  div.className = `alert alert-${type}`;
+  div.textContent = text;
+
+  messages.appendChild(div);
+}
+
+
+function imageValide(file) {
+  if (!file) return true;
+  return ["image/jpeg", "image/png", "image/gif"].includes(file.type);
+}
+
+// Preview image on selection
+imgField.addEventListener("change", function () {
+  const file = imgField.files && imgField.files[0];
+  if (!file || !imageValide(file)) {
+    if (imgPreview) {
+      imgPreview.src = "";
+      imgPreview.classList.add("d-none");
+    }
+    return;
+  }
+  const url = URL.createObjectURL(file);
+  imgPreview.src = url;
+  imgPreview.classList.remove("d-none");
+});
+
+
 form.addEventListener("submit", function (e) {
  e.preventDefault();
+  messages.innerHTML = "";

  const titre = titleField.value.trim().toLowerCase();
-  const fichierImage = imgField.files[0];
+  const contenu = tinymce.get("articleContent").getContent().trim();
+  const image = imgField.files[0];

-  // Reset messages
-  errorEmpty.classList.add("d-none");
-  errorImage.classList.add("d-none");
-  errorExists.classList.add("d-none");
-  successMsg.classList.add("d-none");
-
-  //Titre obligatoire
-  if (titre === "") {
-    errorEmpty.classList.remove("d-none");
+  // Titre obligatoire
+  if (!titre) {
+    showMessage("danger", "Le titre de l'article est obligatoire.");
    return;
  }

-  // Titre déjà existant ?
+  // Titre existant
  if (titresExistants.includes(titre)) {
-    errorExists.classList.remove("d-none");
+    showMessage("danger", "Ce titre existe déjà. Veuillez en choisir un autre.");
    return;
  }

-  //Vérification image
-  if (fichierImage) {
-    const validFormats = ["image/jpeg", "image/png", "image/gif"];
-    if (!validFormats.includes(fichierImage.type)) {
-      errorImage.classList.remove("d-none");
+  // Contenu obligatoire
+  if (!contenu) {
+    showMessage("danger", "Le contenu de l'article ne peut pas être vide.");
    return;
  }
+
+  // Image valide
+  if (!imageValide(image)) {
+    showMessage("danger", "Format d'image invalide. JPG, PNG ou GIF uniquement.");
+    return;
  }

  // Succès
-  successMsg.classList.remove("d-none");
+  showMessage("success", "L'article a été modifié avec succès !");

-  //  Redirection après succès
+  // Redirection
  setTimeout(() => {
-    window.location.href = "../../blog/html/liste_categorie_article.html"; 
+    window.location.href = "../../blog/html/accueil_blog.html";
  }, 1500);
 });
--- a/blog/js/modifier_categorie.js
+++ b/blog/js/modifier_categorie.js
@@ -1,26 +1,37 @@
-
 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
    setTimeout(() => {
-        window.location.href = "../html/liste_categorie_article.html";
+        window.location.href = "../html/accueil_blog.html";
    }, 1500);
 });
--- a/citations/html/citations_accueil.html
+++ b/citations/html/citations_accueil.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Citations - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/citations.css">
+</head>
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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 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="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link left-label" href="#">À propos</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>
+
+  <main class="my-5 fs-6">
+    <div class="container">
+      <header>
+        <h1 class="title my-4 fs-2 text-center">Liste des citations</h1>
+      </header>
+      <div class="content">
+        <div class="ajouter">
+          <a href="#" class="btn btn-primary">Ajouter une citation</a>
+        </div>
+
+        <section class="chiens my-4">
+          <h2 class="fs-4">Citations chiens</h2>
+          <table class="table table-striped table-hover">
+            <thead class="table-dark">
+              <tr>
+                <th>Citations</th>
+                <th class="text-end">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+              <tr>
+                <td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <section class="chats my-4">
+          <h2 class="fs-4">Citations chats</h2>
+          <table class="table table-striped table-hover">
+            <thead class="table-dark">
+              <tr>
+                <th>Citations</th>
+                <th class="text-end">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="index.php?suppression" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+              <tr>
+                <td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <section class="divers my-4">
+          <h2 class="fs-4">Citations divers</h2>
+          <table class="table table-striped table-hover">
+            <thead class="table-dark">
+              <tr>
+                <th>Citations</th>
+                <th class="text-end">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Le chien est le seul être sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="index.php?suppression" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+              <tr>
+                <td>Un chien est la seule chose sur terre qui vous aime plus qu'il ne s'aime lui-même. (Josh Billings)</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+      </div>
+    </div>
+  </main>
+  <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+  
+  <div class="modal fade" id="confirmDeleteModal" tabindex="-1">
+        <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Confirmer la suppression</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          Êtes-vous sûr de vouloir supprimer cette citation ? Cette action est définitive.
+        </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>
+
+
+  <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="/js/contentReduct.js"></script>
+  <script src="/js/confirmDelete.js"></script>
+</body>
+</html>                                  
+                                
--- a/citations/html/citations_ajouter.html
+++ b/citations/html/citations_ajouter.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ajouter une citation - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+    <link rel="stylesheet" href="/css/style.css">
+    
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-xl 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  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="#">Vétos</a></li>
+                        <li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
+                        <li class="nav-item"><a class="nav-link left-label" href="#">À propos</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>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Ajouter une citation</h1>
+            </header>
+            <div class="content">
+                <form id="ajouterArticleForm">
+                    <div class="mb-4 quote-addition">
+                        <label class="form-label fw-bold" for="citation">La citations (obligatoire)</label>
+                        <input type="text" id="citation" class="form-control"
+                            placeholder="Il faut ne jamais abandonner..." required>
+                    </div>
+                    <div class="mb-3 citation-category">
+                        <label class="form-label fw-bold" for="citationCategory">Catégorie de la citation (obligatoire)</label>
+                        <select id="citationCategory" class="form-select" required>
+                            <option value="" disabled selected>Choisissez une catégorie</option>
+                            <option value="chiens">Chiens</option>
+                            <option value="chats">Chats</option>
+                            <option value="divers">Divers</option>
+                        </select>
+                    </div>
+                    <div class="d-flex gap-3 mt-4 confirmation-buttons">
+                        <a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
+                        <button type="submit" class="btn btn-primary w-50">Ajouter</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+   
+</body>
+
+</html>
--- a/citations/html/citations_modifier.html
+++ b/citations/html/citations_modifier.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modifier une citation - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+    <link rel="stylesheet" href="/css/style.css">
+    
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-xl 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  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="#">Vétos</a></li>
+                        <li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
+                        <li class="nav-item"><a class="nav-link left-label" href="#">À propos</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>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Modifier une citation</h1>
+            </header>
+            <div class="content">
+                <form id="ajouterArticleForm">
+                    <div class="mb-4 quote-addition">
+                        <label class="form-label fw-bold" for="citation">La citations (obligatoire)</label>
+                        <input type="text" id="citation" class="form-control"
+                            placeholder="Il faut ne jamais abandonner..."  value="La citation à modifier" required>
+                    </div>
+                    <div class="mb-3 citation-category">
+                        <label class="form-label fw-bold" for="citationCategory">Catégorie de la citation (obligatoire)</label>
+                        <select id="citationCategory" class="form-select" required>
+                            <option value="" disabled>Choisissez une catégorie</option>
+                            <option value="chiens" selected>Chiens</option>
+                            <option value="chats">Chats</option>
+                            <option value="divers">Divers</option>
+                        </select>
+                    </div>
+                    <div class="d-flex gap-3 mt-4 confirmation-buttons">
+                        <a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
+                        <button type="submit" class="btn btn-primary w-50">Ajouter</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    
+</body>
+
+</html>
--- a/configuration/html/configuration.html
+++ b/configuration/html/configuration.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Configuration - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
+
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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 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="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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 active" 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>
+
+  <main class="my-5 fs-6">
+    <div class="container">
+      <header>
+        <h1 class="title my-4 fs-2 text-center">Configuration</h1>
+      </header>
+      <div class="content">
+        <form id="configForm">
+          <div class="validation my-4">
+            <button type="submit" class="btn btn-primary">Modifier</button>
+          </div>
+
+          <table class="table table-striped table-hover align-middle">
+            <thead class="table-dark">
+              <tr>
+                <th scope="col">Clé</th>
+                <th scope="col">Valeur</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="cfg-tel">
+                <td><label class="form-label fw-bold" for="tel">Téléphone</label></td>
+                <td><input type="tel" id="tel" class="form-control" value="06 12 34 56 78"></td>
+              </tr>
+              <tr class="cfg-mail">
+                <td><label class="form-label fw-bold" for="mail">Mail de contact</label></td>
+                <td><input type="email" id="mail" class="form-control" value="contact@example.com"></td>
+              </tr>
+              <tr class="cfg-adresse">
+                <td><label class="form-label fw-bold" for="adresse">Adresse</label></td>
+                <td><input type="text" id="adresse" class="form-control" value="12 rue des Lilas"></td>
+              </tr>
+              <tr class="cfg-code-postal">
+                <td><label class="form-label fw-bold" for="codePostal">Code postal</label></td>
+                <td><input type="text" id="codePostal" class="form-control" value="75001" pattern="\\d{5}"></td>
+              </tr>
+              <tr class="cfg-gps">
+                <td><label class="form-label fw-bold" for="gpsLat">Coordonnées GPS</label></td>
+                <td>
+                  <div class="row g-2">
+                    <div class="col-6">
+                      <input type="text" id="gpsLat" class="form-control" value="Latitude (ex: 48.8566)" pattern="-?\d{1,2}\.\d+">
+                    </div>
+                    <div class="col-6">
+                      <input type="text" id="gpsLng" class="form-control" value="Longitude (ex: 2.3522)" pattern="-?\d{1,3}\.\d+">
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr class="cfg-ville">
+                <td><label class="form-label fw-bold" for="ville">Ville</label></td>
+                <td><input type="text" id="ville" class="form-control" value="Paris"></td>
+              </tr>
+              <tr class="cfg-horaire-matin-debut">
+                <td><label class="form-label fw-bold" for="horaireMatinDebut">Horaires début matinée</label></td>
+                <td><input type="time" id="horaireMatinDebut" class="form-control" value="09:00"></td>
+              </tr>
+              <tr class="cfg-horaire-matin-fin">
+                <td><label class="form-label fw-bold" for="horaireMatinFin">Horaires fin matinée</label></td>
+                <td><input type="time" id="horaireMatinFin" class="form-control" value="12:00"></td>
+              </tr>
+              <tr class="cfg-horaire-aprem-debut">
+                <td><label class="form-label fw-bold" for="horaireApremDebut">Horaires début après-midi</label></td>
+                <td><input type="time" id="horaireApremDebut" class="form-control" value="14:00"></td>
+              </tr>
+              <tr class="cfg-horaire-aprem-fin">
+                <td><label class="form-label fw-bold" for="horaireApremFin">Horaires fin après-midi</label></td>
+                <td><input type="time" id="horaireApremFin" class="form-control" value="18:00"></td>
+              </tr>
+              <tr class="cfg-jours-ouverts">
+                <td><label class="form-label fw-bold" for="joursOuverts">Jours ouverts</label></td>
+                <td>
+                  <select id="joursOuverts" class="form-select" multiple size="5">
+                    <option value="lundi">Lundi</option>
+                    <option value="mardi">Mardi</option>
+                    <option value="mercredi">Mercredi</option>
+                    <option value="jeudi">Jeudi</option>
+                    <option value="vendredi">Vendredi</option>
+                    <option value="samedi">Samedi</option>
+                    <option value="dimanche">Dimanche</option>
+                  </select>
+                  <small class="text-muted">Maintenez Ctrl (Cmd sur Mac) pour sélectionner plusieurs jours.</small>
+                </td>
+              </tr>
+              <tr class="cfg-facebook">
+                <td><label class="form-label fw-bold" for="pageFacebook">Page Facebook</label></td>
+                <td><input type="url" id="pageFacebook" class="form-control" value="https://www.facebook.com/votrepage"></td>
+              </tr>
+              <tr class="cfg-siret">
+                <td><label class="form-label fw-bold" for="siret">SIRET</label></td>
+                <td><input type="text" id="siret" class="form-control" value="123 456 789 00012" pattern="\d{3}\s?\d{3}\s?\d{3}\s?\d{5}"></td>
+              </tr>
+              
+            </tbody>
+          </table>
+          <div class="validation">
+            <button type="submit" class="btn btn-primary">Modifier</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+  <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+  <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+</body>
+
+</html>
--- a/connexion/html/reinitialisation_mot_de_passe.html
+++ b/connexion/html/reinitialisation_mot_de_passe.html
@@ -1,29 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Réinitialisation du mot de passe</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-    />
+  <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="shortcut icon" href="/favicon.png" type="image/png">

  <style>
    body {
-            background: #f4f6f981;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
+
    .reset-password-card {
      width: 100%;
      max-width: 380px;
    }
  </style>
-  </head>
-  <body>
+</head>
+
+<body>
+ 
  <div class="card shadow reset-password-card">
    <div class="card-body p-4">
      <h1 class="text-center mb-4 fs-3">Nouveau mot de passe</h1>
@@ -33,38 +34,21 @@

      </p>

-          <div
-            id="errorMsg"
-            class="alert alert-danger text-center fs-1"
-            style="display: none"
-          >
-            Les mots de passe ne correspondent pas.
-          </div>
      
-        <form id="resetForm">
+
+      <form id="password-form">
+         <main>
        <div class="mb-4">
-            <label class="form-label"
-              >Nouveau mot de passe (minimum 8 caractères)</label
-            >
-            <input
-              type="password"
-              class="form-control"
-              id="password"
-              required
-            />
-            <small id="passwordIndicator" class="fw-bold"></small>
+          <label class="form-label">Nouveau mot de passe <br><span class="small"><span id="min8">8 caractères minimum</span>, incluant une <span id="uppercase">majuscule</span>, une <span id="lowercase">minuscule</span> et un <span id="digit">chiffre</span></span></label>
+          <input type="password" class="form-control" id="password" required />
+         
        </div>

+        <div class="mb-2">
+          <label class="form-label">Confirmer le mot de passe</label>
+          <input type="password" class="form-control" id="passwordConfirm" required />
+        </div>
        <div class="mb-3">
-            <label class="form-label"
-              >Confirmer le mot de passe</label
-            >
-            <input
-              type="password"
-              class="form-control"
-              id="confirmPassword"
-              required
-            />
          <label for="showPassword" class="mt-3">
            <input type="checkbox" id="showPassword" />
            Voir le mot de passe
@@ -75,26 +59,19 @@



-          <div
-            id="successMsg"
-            class="alert alert-success text-center"
-            style="display: none"
-          >
-            Votre mot de passe a été modifié avec succès !
-          </div>
+    

        <button class="btn btn-primary w-100" type="submit">
          Changer le mot de passe
        </button>
        <div class="text-center mt-3">
-            <a
-              href="../html/page_de_connexion.html"
-              class="text-decoration-none"
-              >Retour à la connexion</a
+          <a href="../html/page_de_connexion.html" class="text-decoration-none">Retour à la connexion</a>
   </form>
+   </main>
        </div>
    </div>
-    <script src="../js/reinitialisation_du_mot_de_passe.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-  </body>
+  
+    <script src="/js/password.js"></script>
+</body>
+
 </html>
--- a/connexion/js/reinitialisation_du_mot_de_passe.js
+++ b/connexion/js/reinitialisation_du_mot_de_passe.js
@@ -40,7 +40,7 @@ form.addEventListener('submit', function(e) {
    if (pass.length < minLength) {
        errorMsg.style.display = 'block';
        errorMsg.textContent = `Le mot de passe doit contenir au moins ${minLength} caractères.`;
-        return;
+        return;8 caractères minimum
    }

    //Correspondance
@@ -61,7 +61,7 @@ form.addEventListener('submit', function(e) {


 showPasswordCheckbox.addEventListener('change', function() {
-    if (this.checked) {
+    if (this.checked) {8 caractères minimum
        password.type = 'text';
        confirmPassword.type = 'text'; 

--- a/css/prestation.css
+++ b/css/prestation.css
--- a/css/style.css
+++ b/css/style.css
@@ -1,20 +1,28 @@
 /*=============================================================================
 Header Navbar Styles
 =============================================================================*/
+a.nav-link {
+    font-size: 1rem;
+}

 .navbar-brand {
-      font-size: 1.2rem;
+    font-size: 1.1rem;
    line-height: 1;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
+}
+
+.brand-sep {
+    height: .8rem;
+}
+@media (max-width: 1320px)  AND (min-width: 1200px) {
+
+    .navbar .nav-link {
+        font-size: .85rem !important;
    }
+}

-  .brand-sep {
-      height: 1.2rem;
-  }
-
-
-  @media (max-width: 1399.98px) {
+@media (max-width: 1199.98px) {
    .navbar .nav-item {
        background-color: var(--bs-light);
        border: 1px solid var(--bs-border-color);
@@ -35,7 +43,46 @@ Header Navbar Styles
        display: none;
    }

-  }
+}



+/*=============================================================================
+Divers
+=============================================================================*/
+a.tox-promotion-link {
+    display: none !important;
+}
+
+body {
+    background: #f4f6f981;
+}
+
+.container {
+   margin: 50px auto;
+}
+
+/*=============================================================================
+Placeholders (global)
+=============================================================================*/
+[placeholder] {
+    font-size: 0.9rem !important;
+    font-style: italic !important;
+
+}
+
+/*=============================================================================
+Image Previews
+=============================================================================*/
+.preview-img-container{
+    margin-top: -.8rem;
+    width: 100%;
+    height: 20.3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    border-radius: .25rem;
+    margin-bottom: 1rem;
+    background-color: rgb(238, 236, 236);
+}
--- a/faq/faq_accueil.html
+++ b/faq/faq_accueil.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FAQ - L'Il'eau chiens - Admin</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="/css/citations.css">
+  <link rel="shortcut icon" href="/favicon.png" type="image/png">
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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 left-label" 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 active left-label" href="#">FAQ</a></li>
+            <li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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>
+
+  <main class="my-5 fs-6">
+    <div class="container">
+      <header>
+        <h1 class="title my-4 fs-2 text-center">Liste des FAQ</h1>
+      </header>
+      <div class="content">
+
+
+        <section class="themes my-4">
+          <h2 class="fs-4">Gérer les thèmes des questions</h2>
+          <div class="d-flex justify-content-start mb-4">
+            <a href="ajouter.html" class="btn btn-primary">Ajouter un thème</a>
+          </div>
+          <table class="table table-striped table-hover">
+            <thead class="table-dark">
+              <tr>
+                <th>Thème</th>
+                <th class="text-end">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Chiens</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                    data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+              <tr>
+                <td>Chat</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                    data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+              <tr>
+                <td>Autres questions</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                    data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <section class="questions my-5">
+          <h2 class="fs-4">Gérer les questions</h2>
+          <div class="d-flex justify-content-start mb-4">
+            <a href="ajouter.html" class="btn btn-primary">Ajouter une question</a>
+          </div>
+          <table class="table table-striped table-hover">
+            <thead class="table-dark">
+              <tr>
+                <th>Questions</th>
+                <th class="text-end">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Pourquoi les chiens lèvent-ils la patte pour uriner ?</td>
+
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="index.php?suppression" class="btn btn-sm btn-outline-danger" role="button"
+                    data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+              <tr>
+                <td>Comment savoir si mon chat est heureux ?</td>
+                <td class="text-end">
+                  <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                  <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                    data-bs-target="#confirmDeleteModal">Supprimer</a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+      </div>
+    </div>
+  </main>
+  <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+
+  <div class="modal fade" id="confirmDeleteModal" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Confirmer la suppression</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          Êtes-vous sûr de vouloir supprimer ce thème ou cette question ? Cette action est irréversible.
+          <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="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/js/contentReduct.js"></script>
+    <script src="/js/confirmDelete.js"></script>
+</body>
+
+</html>
--- a/faq/faq_ajouter_question.html
+++ b/faq/faq_ajouter_question.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ajouter une question - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+
+
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-xl 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  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="#">Vétos</a></li>
+                        <li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
+                        <li class="nav-item"><a class="nav-link left-label" href="#">À propos</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>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Ajouter une question</h1>
+            </header>
+            <div class="content">
+                <form>
+                    <div class="mb-4 question-addition">
+                        <label class="form-label fw-bold" for="question">Question (obligatoire)</label>
+                        <input type="text" id="question" class="form-control" placeholder="Une question" required>
+                    </div>
+                    <div class="mb-4 theme-addition">
+                        <label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
+                        <select name="theme" id="theme" class="form-select" required>
+                            <option value="" disabled selected>Choisir un thème</option>
+                            <option value="1">Chiens</option>
+                            <option value="2">Thème 2</option>
+                            <option value="3">Thème 3</option>
+                        </select>
+                    </div>
+
+
+                    <div class="mb-4 reponse-addition">
+                        <label class="form-label fw-bold" for="reponse">Réponse (obligatoire)</label>
+                        <textarea id="reponse" class="form-control" placeholder="Votre réponse ici..." required></textarea>
+                    </div>
+                    <div class="d-flex gap-3 mt-4 confirmation-buttons">
+                        <a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
+                        <button type="submit" class="btn btn-primary w-50">Ajouter</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    
+    <script src="/node_modules/tinymce/tinymce.min.js"></script>
+    <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+    <script src="/js/tinyMce.js"></script>
+
+</body>
+
+</html>
--- a/faq/faq_ajouter_theme.html
+++ b/faq/faq_ajouter_theme.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ajouter un thème de questions - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-xl 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  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="#">Vétos</a></li>
+                        <li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
+                        <li class="nav-item"><a class="nav-link left-label" href="#">À propos</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>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Ajouter un thème de question</h1>
+            </header>
+            <div class="content">
+                <form>
+                    <div class="mb-4 theme-addition">
+                        <label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
+                        <input type="text" id="theme" class="form-control" placeholder="Un thème de question" required>
+                    </div>
+
+                    <div class="d-flex gap-3 mt-4 confirmation-buttons">
+                        <a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
+                        <button type="submit" class="btn btn-primary w-50">Ajouter</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/js/contentReduct.js"></script>
+</body>
+
+</html>
--- a/faq/faq_modifier_question.html
+++ b/faq/faq_modifier_question.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modifier une question - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-xl 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  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="#">Vétos</a></li>
+                        <li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
+                        <li class="nav-item"><a class="nav-link left-label" href="#">À propos</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>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Modifier une question</h1>
+            </header>
+            <div class="content">
+                <form>
+                    <div class="mb-4 question-addition">
+                        <label class="form-label fw-bold" for="question">Question (obligatoire)</label>
+                        <input type="text" id="question" class="form-control"
+                            value="Pourquoi les chiens lèvent-ils la patte quand ils font pipi ?" required>
+                    </div>
+                    <div class="mb-4 theme-addition">
+                        <label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
+                        <select name="theme" id="theme" class="form-select" required>
+                            <option value="" disabled>Choisir un thème</option>
+                            <option value="1" selected>Chiens</option>
+                            <option value="2">Thème 2</option>
+                            <option value="3">Thème 3</option>
+                        </select>
+                    </div>
+
+
+                    <div class="mb-4 reponse-addition">
+                        <label class="form-label fw-bold" for="reponse">Réponse (obligatoire)</label>
+                        <textarea id="reponse" class="form-control" required>Car si ils lèvent les deux, ils ne peuvent pas se retenir.</textarea>
+                    </div>
+                    <div class="d-flex gap-3 mt-4 confirmation-buttons">
+                        <a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
+                        <button type="submit" class="btn btn-primary w-50">Modifier</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script src="/node_modules/tinymce/tinymce.min.js"></script>
+    <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+    <script src="/js/tinyMce.js"></script>
+</body>
+
+</html>
--- a/faq/faq_modifier_theme.html
+++ b/faq/faq_modifier_theme.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modifier un thème de questions - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-xl 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  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="#">Vétos</a></li>
+                        <li class="nav-item"><a class="nav-link active left-label" href="#">Citations</a></li>
+                        <li class="nav-item"><a class="nav-link left-label" href="#">À propos</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>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Modifier un thème de question</h1>
+            </header>
+            <div class="content">
+                <form>
+                    <div class="mb-4 theme-addition">
+                        <label class="form-label fw-bold" for="theme">Thème (obligatoire)</label>
+                        <input type="text" id="theme" class="form-control" value="Le nom du thème à modifier" required>
+                    </div>
+
+                    <div class="d-flex gap-3 mt-4 confirmation-buttons">
+                        <a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
+                        <button type="submit" class="btn btn-primary w-50">Modifier</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+      
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+ 
+</body>
+
+</html>
--- a/js/confirmDelete.js
+++ b/js/confirmDelete.js
@@ -0,0 +1,60 @@
+
+/**
+ * confirmDelete.js
+ * 
+ * Modal de confirmation générique pour les actions de suppression.
+ * 
+ * Usage:
+ * 1. Ajouter data-bs-toggle="modal" et data-bs-target="#confirmDeleteModal" au lien de suppression.
+ * 2. Lors de la confirmation, l'attribut href du lien est utilisé pour la navigation (GET).
+ */
+
+
+(function(){
+  
+
+  let pendingHref = null;
+  let pendingModalId = '#confirmDeleteModal';
+
+  function getBootstrapModal(modalEl){
+   //retourne l'instance Bootstrap Modal associée à modalEl, ou en crée une nouvelle si nécessaire
+    if (!modalEl || !window.bootstrap) return null;
+    return bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
+  }
+
+  document.addEventListener('click', function(e){
+    const btn = e.target.closest('a[data-bs-toggle="modal"][data-bs-target]');
+    if (!btn) return;
+    const target = btn.getAttribute('data-bs-target');
+    
+    // Gérer les boutons de type suppression ; restreindre éventuellement en utilisant une classe CSS spécifique
+    // Pour un appariement plus strict, ajouter une classe dédiée et la vérifier ici.
+    e.preventDefault();
+    pendingHref = btn.getAttribute('href');
+    pendingModalId = btn.getAttribute('data-confirm-modal') || target || '#confirmDeleteModal';
+    const modalEl = document.querySelector(pendingModalId);
+    const modal = getBootstrapModal(modalEl);
+    if (modal) modal.show();
+  });
+
+  document.addEventListener('click', function(e){
+    const confirmBtn = e.target.closest('#confirmDeleteBtn');
+    if (!confirmBtn) return;
+    if (pendingHref && pendingHref !== '#' && pendingHref.trim() !== ''){
+      window.location.assign(pendingHref);
+      return; // la navigation va se produire, arrêter le traitement ici
+    }
+    // Si aucun href n'est présent, fermer simplement le modal
+    const modalEl = document.querySelector(pendingModalId);
+    const modal = getBootstrapModal(modalEl);
+    if (modal) modal.hide();
+    pendingHref = null;
+    pendingModalId = '#confirmDeleteModal';
+  });
+
+  // Réinitialiser l'état stocké lorsque n'importe quel modal Bootstrap est caché
+  document.addEventListener('hidden.bs.modal', function(){
+    pendingHref = null;
+    pendingModalId = '#confirmDeleteModal';
+  });
+})();
--- a/js/contentReduct.js
+++ b/js/contentReduct.js
@@ -0,0 +1,44 @@
+/**
+ * Réduit le contenu des cellules td des tableaux 
+ */
+
+
+
+const BREAKPOINT_SM = 1000;
+const NB_CARACTERES = 40;
+(() => {
+	// Récupère les cellules td (premier d'un tr) à traiter
+	const getTargetCells = () => {
+		const tbodyRows = Array.from(document.querySelectorAll("tbody tr"));
+		let cells = tbodyRows.map((row) => row.querySelector("td")).filter(Boolean);
+		if (cells.length === 0) {
+			const allRows = Array.from(document.querySelectorAll("tr"));
+			cells = allRows.map((row) => row.querySelector("td")).filter(Boolean);
+		}
+		return cells;
+	};
+
+	const tdElts = getTargetCells();
+
+	tdElts.forEach((td) => {
+		if (!td.dataset.fullText) {
+			td.dataset.fullText = td.textContent.trim();
+		}
+	});
+
+	const applyTruncation = () => {
+		const narrow = window.innerWidth < BREAKPOINT_SM;
+		tdElts.forEach((td) => {
+			const full = td.dataset.fullText ?? td.textContent;
+			const text = (full || "").trim();
+			if (narrow) {
+				td.textContent = text.length > 40 ? text.slice(0, NB_CARACTERES) + '...': text;
+			} else {
+				td.textContent = full;
+			}
+		});
+	};
+
+	applyTruncation();
+	window.addEventListener("resize", applyTruncation);
+})();
--- a/js/password.js
+++ b/js/password.js
@@ -0,0 +1,99 @@
+/**
+ * Verification et gestion du mot de passe lors de la réinitialisation
+ */
+
+
+const PASSWORD_LENGTH = 8;
+const PASSWORD_CONTENT = ['[A-Z]', '[a-z]', '[0-9]'];
+
+const passwordElt = document.getElementById('password');
+const confirmPasswordElt = document.getElementById('passwordConfirm');
+
+
+const min8Elt = document.getElementById('min8');
+const uppercaseElt = document.getElementById('uppercase');
+const lowercaseElt = document.getElementById('lowercase');
+const digitElt = document.getElementById('digit');
+const specialElt = document.getElementById('special');
+
+
+//Pattern du mot de passe
+passwordElt.addEventListener('input', function() {
+    const password = passwordElt.value;
+
+    // Vérification de la longueur
+    if (password.length >= PASSWORD_LENGTH) {
+        min8Elt.style.color = 'green';
+    } else {
+        min8Elt.style.color = 'red';
+    }
+
+    // Vérification du contenu
+    PASSWORD_CONTENT.forEach((pattern, index) => {
+        const regex = new RegExp(pattern);
+        const element = [uppercaseElt, lowercaseElt, digitElt, specialElt][index];
+
+        if (regex.test(password)) {
+            element.style.color = 'green';
+        } else {
+            element.style.color = 'red';
+        }
+    });
+});
+
+
+// Vérification de la confirmation du mot de passe
+confirmPasswordElt.addEventListener('input', function() {
+    const password = passwordElt.value;
+    const confirmPassword = confirmPasswordElt.value;
+    if (password === confirmPassword) {
+        confirmPasswordElt.style.borderColor = 'green';
+    } else {
+        confirmPasswordElt.style.borderColor = 'red';
+    }
+});
+
+
+// Afficher ou masquer le mot de passe
+const showPasswordElt = document.getElementById('showPassword');
+showPasswordElt.addEventListener('change', function() {
+    if (showPasswordElt.checked) {
+        passwordElt.type = 'text';
+        confirmPasswordElt.type = 'text';
+    } else {
+        passwordElt.type = 'password';
+        confirmPasswordElt.type = 'password';
+    }
+});
+
+
+// Gestion de la soumission du formulaire
+const passwordForm = document.getElementById('password-form');
+passwordForm.addEventListener('submit', function(event) {
+    const password = passwordElt.value;
+    const confirmPassword = confirmPasswordElt.value;
+
+    // Empêcher la soumission si les critères ne sont pas remplis
+    if (password.length < PASSWORD_LENGTH ||
+        !/[A-Z]/.test(password) ||
+        !/[a-z]/.test(password) ||
+        !/[0-9]/.test(password) ||
+        password !== confirmPassword) {
+        
+        event.preventDefault();
+        const main = document.querySelector('main');
+        const existingAlert = main.querySelector('#password-alert');
+        if (existingAlert) {
+            existingAlert.remove();
+        }
+
+        const alertElt = document.createElement('div');
+        alertElt.id = 'password-alert';
+        alertElt.className = 'alert alert-danger text-center';
+        alertElt.textContent = "Le mot de passe ne respecte pas les critères requis ou la confirmation ne correspond pas.";
+        main.prepend(alertElt); 
+      
+        window.scrollTo(0, 0);
+
+        }
+});
--- a/js/previewImage.js
+++ b/js/previewImage.js
@@ -0,0 +1,19 @@
+/**
+ * 
+ * Preview image when selected in input field
+ */
+
+document.getElementById("imageInput").addEventListener("change", function (e) {
+    const file = e.target.files[0];
+    const preview = document.querySelector(".preview-img-container");
+    if (file && ["image/jpeg", "image/png"].includes(file.type)) {
+        const reader = new FileReader();
+        reader.onload = function (event) {
+            preview.innerHTML = `<img src="${event.target.result}" alt="Aperçu de l'image" class="img-fluid">`;
+        };
+        reader.readAsDataURL(file);
+        preview.style.backgroundColor = "transparent";
+    } else {
+        preview.innerHTML = `<p class="text-muted">Aucun aperçu disponible <br> Le format n'est pas autorisé</p>`;
+    }
+})
--- a/js/tinyMce.js
+++ b/js/tinyMce.js
@@ -0,0 +1,50 @@
+/**
+ * Initialisation de TinyMCE avec des boutons personnalisés.
+ */
+
+
+tinymce.init({
+  selector: "textarea",
+  height: 400,
+  language: "fr-FR",
+  branding: false,
+  menubar: false,
+  menu: {},
+  plugins: "link, lists fullscreen",
+ 
+  toolbar: "h3 h4 h5 h6 | undo redo | link | bold | bullist numlist | outdent indent | fullscreen",
+  license_key: 'gpl',
+  setup: function (editor) {
+    ['h3', 'h4', 'h5', 'h6'].forEach(function (tag) {
+      editor.ui.registry.addToggleButton(tag, {
+        text: tag.toUpperCase(),
+        tooltip: 'Titre ' + tag.substring(1),
+        onAction: function () {
+          try {
+            if (editor.formatter && typeof editor.formatter.toggle === 'function') {
+              editor.formatter.toggle(tag);
+            } else {
+              editor.execCommand('FormatBlock', false, tag);
+            }
+          } catch (e) {
+            // fallback
+            editor.execCommand('FormatBlock', false, tag);
+          }
+        },
+        onSetup: function (api) {
+          var nodeChangeHandler = function () {
+            try {
+              api.setActive(editor.formatter ? !!editor.formatter.match(tag) : false);
+            } catch (e) {
+              api.setActive(false);
+            }
+          };
+          editor.on('NodeChange', nodeChangeHandler);
+          return function () {
+            editor.off('NodeChange', nodeChangeHandler);
+          };
+        }
+      });
+    });
+  }
+});
--- a/messageActu/html/messageActu_accueil.html
+++ b/messageActu/html/messageActu_accueil.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Message d'actualités - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
+
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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 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="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</a></li>
+          </ul>
+          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+            <li class="nav-item"><a class="nav-link active" 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>
+
+  <main class="my-5 fs-6">
+    <div class="container">
+      <header>
+        <h1 class="title my-4 fs-2 text-center">Message d'actualités</h1>
+      </header>
+      <div class="Intro">
+        <p>Gérez ici le message d'actualités qui s'affiche en haut du site public. Vous pouvez activer ou désactiver
+          l'affichage du message ainsi que modifier son contenu.</p>
+      </div>
+
+      <div class="content mt-4">
+        <form id="messageActuForm">
+
+
+          <div class="mb-3">
+            <label for="contenuMessageActu" class="form-label fw-bold">Contenu du message d'actualités</label>
+            <textarea class="form-control" id="contenuMessageActu" rows="3"
+              required>Bienvenue sur le site de L'Il'eau chiens ! Profitez de nos offres spéciales du mois.</textarea>
+          </div>
+          <div class="mb-3 form-check">
+            <input type="checkbox" class="form-check-input" id="activerMessageActu" checked>
+            <label class="form-check-label" for="activerMessageActu">Activer le message d'actualités</label>
+          </div>
+
+          <div class="validation">
+            <button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </main>
+  <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+  <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+
+  <script src="/node_modules/tinymce/tinymce.min.js"></script>
+  <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+  <script src="/js/tinyMce.js"></script>
+</body>
+
+</html>
--- a/pages.html
+++ b/pages.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Liste des pages</title>
+	<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
+	<link rel="shortcut icon" href="/favicon.png" type="image/png" />
+	<link rel="stylesheet" href="/css/style.css" />
+	<style>
+		.pages-grid { columns: 3 320px; column-gap: 1.5rem; }
+		.pages-grid a { display: inline-block; margin: .25rem 0; }
+	</style>
+ </head>
+<body>
+	<main class="container my-4">
+		<h1 class="fs-2 text-center mb-4">Menu des pages HTML</h1>
+		<ol class="pages-grid">
+			<li><a href="/pagesText/mentionsLegales.html">pagesText/mentionsLegales.html</a></li>
+			<li><a href="/pagesText/cgv.html">pagesText/cgv.html</a></li>
+			<li><a href="/configuration/html/configuration.html">configuration/html/configuration.html</a></li>
+			<li><a href="/messageActu/html/messageActu_accueil.html">messageActu/html/messageActu_accueil.html</a></li>
+			<li><a href="/connexion/html/page_de_connexion.html">connexion/html/page_de_connexion.html</a></li>
+			<li><a href="/connexion/html/mot_de_passe_oublie.html">connexion/html/mot_de_passe_oublie.html</a></li>
+			<li><a href="/connexion/html/reinitialisation_mot_de_passe.html">connexion/html/reinitialisation_mot_de_passe.html</a></li>
+			<li><a href="/blog/html/accueil_blog.html">blog/html/accueil_blog.html</a></li>
+			<li><a href="/blog/html/ajouter_article.html">blog/html/ajouter_article.html</a></li>
+			<li><a href="/blog/html/modifier_article.html">blog/html/modifier_article.html</a></li>
+			<li><a href="/blog/html/ajouter_categorie.html">blog/html/ajouter_categorie.html</a></li>
+			<li><a href="/blog/html/modifier_categorie.html">blog/html/modifier_categorie.html</a></li>
+			<li><a href="/faq/faq_accueil.html">faq/faq_accueil.html</a></li>
+			<li><a href="/faq/faq_ajouter_question.html">faq/faq_ajouter_question.html</a></li>
+			<li><a href="/faq/faq_modifier_question.html">faq/faq_modifier_question.html</a></li>
+			<li><a href="/faq/faq_ajouter_theme.html">faq/faq_ajouter_theme.html</a></li>
+			<li><a href="/faq/faq_modifier_theme.html">faq/faq_modifier_theme.html</a></li>
+			<li><a href="/citations/html/citations_accueil.html">citations/html/citations_accueil.html</a></li>
+			<li><a href="/citations/html/citations_ajouter.html">citations/html/citations_ajouter.html</a></li>
+			<li><a href="/citations/html/citations_modifier.html">citations/html/citations_modifier.html</a></li>
+			<li><a href="/Veto/html/veto_accueil.html">Veto/html/veto_accueil.html</a></li>
+			<li><a href="/Veto/html/ajouter_veterinaire.html">Veto/html/ajouter_veterinaire.html</a></li>
+			<li><a href="/Veto/html/modifier_veterinaire.html">Veto/html/modifier_veterinaire.html</a></li>
+			<li><a href="/prestations/html/prestation_accueil.html">prestations/html/prestation_accueil.html</a></li>
+			<li><a href="/prestations/html/ajouter_prestation.html">prestations/html/ajouter_prestation.html</a></li>
+			<li><a href="/prestations/html/modifier_prestation.html">prestations/html/modifier_prestation.html</a></li>
+			<li><a href="/prestations/html/ajouter_slider.html">prestations/html/ajouter_slider.html</a></li>
+			<li><a href="/prestations/html/modifier_slider.html">prestations/html/modifier_slider.html</a></li>
+			<li><a href="/prestations/html/ajouter_avant_apres.html">prestations/html/ajouter_avant_apres.html</a></li>
+			<li><a href="/prestations/html/modifier_avant_apres.html">prestations/html/modifier_avant_apres.html</a></li>
+			
+		</ol>
+	</main>
+	<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+ </body>
+</html>
--- a/pagesText/cgv.html
+++ b/pagesText/cgv.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conditions générales de vente - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+    <link rel="stylesheet" href="/css/style.css">
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-xl 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 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="#">Vétos</a></li>
+                        <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+                        <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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 active" 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>
+
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Conditions générales de vente</h1>
+            </header>
+            <div class="content">
+                <form action="" class="mb-5">
+                    <div class="mb-4">
+                        <label for="conditionsGeneralesDeVente" class="form-label">Contenu des conditions générales de vente</label>
+                        <textarea class="form-control" id="conditionsGeneralesDeVente" rows="15"></textarea>
+                    </div>
+                    <div class="d-flex justify-content-start mb-4">
+                        <button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
+                    </div>
+
+                </form>
+            </div>
+        </div>
+
+    </main>
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+        <div class="container d-flex gap-3 flex-wrap">
+            <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+            <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+            <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+        </div>
+    </footer>
+        <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+        <script src="/node_modules/tinymce/tinymce.min.js"></script>
+        <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+        <script src="/js/tinyMce.js"></script>
+
+</body>
+
+</html>
--- a/pagesText/mentionsLegales.html
+++ b/pagesText/mentionsLegales.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mentions légales - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+    <link rel="stylesheet" href="/css/style.css">
+    
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-xl 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 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="#">Vétos</a></li>
+                        <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+                        <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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 active" 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>
+
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Mentions légales</h1>
+            </header>
+            <div class="content">
+                <form action="" class="mb-5">
+                    <div class="mb-4">
+                        <label for="mentionsLegales" class="form-label">Contenu des mentions légales</label>
+                        <textarea class="form-control" id="mentionsLegales" rows="15"></textarea>
+                    </div>
+                    <div class="d-flex justify-content-start mb-4">
+                        <button type="submit" class="btn btn-primary">Enregistrer les modifications</button>
+                    </div>
+
+                </form>
+            </div>
+        </div>
+
+    </main>
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+        <div class="container d-flex gap-3 flex-wrap">
+            <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+            <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+            <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+        </div>
+    </footer>
+        <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+        <script src="/node_modules/tinymce/tinymce.min.js"></script>
+        <script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
+        <script src="/js/tinyMce.js"></script>
+
+</body>
+
+</html>
--- a/prestations/html/ajouter_avant_apres.html
+++ b/prestations/html/ajouter_avant_apres.html
@@ -15,77 +15,13 @@

 <body>

+    <div id="header-placeholder"></div>
+
+
+    <main class="my-5 fs-6">
+        <div class="container">
            <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">Ajouter un résultat en images (Avant / Après)</h1>
-
+                <h1 class="title fs-2 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 !
@@ -100,10 +36,12 @@
                <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 / label -->
+                    <!-- 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>
@@ -121,7 +59,8 @@

                    <!-- Image AVANT -->
                    <div class="mb-4">
-                <label class="form-label fw-bold" for="beforeImage">Image AVANT (obligatoire, formats acceptés : jpg,
+                        <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>

@@ -130,7 +69,8 @@

                    <!-- Image APRÈS -->
                    <div class="mb-4">
-                <label class="form-label fw-bold" for="afterImage">Image APRÈS (obligatoire, formats acceptés : jpg,
+                        <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>

@@ -152,10 +92,15 @@
                    </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>
+    <script src="../../header-composant.js"></script>

 </body>

--- a/prestations/html/ajouter_prestation.html
+++ b/prestations/html/ajouter_prestation.html
@@ -1,88 +1,158 @@
 <!DOCTYPE html>
 <html lang="fr">
-
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Ajouter une catégorie</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">

-    <style>
-        body {
-            background: #f4f6f981;
-
-        }
-
-        .container {
-            max-width: 600px;
-            margin-top: 50px;
-        }
-
-        
-    </style>
+    <title>Ajouter une préstation</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="shortcut icon" href="favicon.png" type="image/png">
+    <link rel="stylesheet" href="../../css/style.css">
 </head>

 <body>

-    <div class="container">
-        <h1 class="mb-5 text-center">Ajouter une prestation</h2>
+    <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>

-            <!--Erreur champ vide -->
+                <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 renseignements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Partenaires</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Citations</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>
+
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2">Ajouter une prestation</h1>
+
+                <!-- Erreur champ vide -->
                <div id="errorEmpty" class="alert alert-danger d-none">Le titre est obligatoire.</div>

-            <!--Erreur nom deja existant -->
-            <div id="errorExists" class="alert alert-danger d-none">Cette prestation existe déjà. Veuillez en choisir
-                une autre.</div>
+                <!-- Erreur nom déjà existant -->
+                <div id="errorExists" class="alert alert-danger d-none">
+                    Cette prestation existe déjà. Veuillez en choisir une autre.
+                </div>

-            <!--Succès ajout catégorie -->
-            <div id="successMessage" class="alert alert-success d-none">Prestation ajoutée avec succès !</div>
+                <!-- Succès ajout -->
+                <div id="successMessage" class="alert alert-success d-none">
+                    Prestation ajoutée avec succès !
+                </div>
+            </header>

+            <div class="section">
                <form id="addCategoryForm">
-
-
                    <div class="mb-4">
-                    <label class="form-label fw-bold">Titre de la prestation (obligatoire)</label>
+                        <label class="form-label fw-bold" for="categoryName">
+                            Titre de la prestation (obligatoire)
+                        </label>
                        <input type="text" id="categoryName" class="form-control" required>
                    </div>

                    <div class="mb-3">
-                    <label class="form-label fw-bold">Type de prestation</label>
-                    <select id="prestationType" class="form-select">
-                        <option value="chien" selected>Chien</option>
+                        <label class="form-label fw-bold" for="prestationType">
+                            Type de prestation (obligatoire)
+                        </label>
+                        <select id="prestationType" class="form-select" required>
+                            <option value="" selected disabled>-- Choisissez un type --</option>
+                            <option value="chien">Chien</option>
                            <option value="chat">Chat</option>
                        </select>
                    </div>

-               <!--Description (liste à puces)-->
+                    <!-- Étapes -->
                    <div class="mb-3">
-                <label class="form-label fw-bold">Description de la prestation</label>
-                <textarea id="prestationDescription" class="form-control" rows="5">
-                • 
-                • 
-                • 
-                • </textarea>
+                        <label class="form-label fw-bold">Choisissez les étapes (obligatoire)</label>
+
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="stepCiseaux" name="steps" value="coupe_ciseaux">
+                            <label class="form-check-label" for="stepCiseaux">Coupe ciseaux</label>
                        </div>

+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="stepGriffes" name="steps" value="coupe_griffes">
+                            <label class="form-check-label" for="stepGriffes">Coupe griffes</label>
+                        </div>

-                <!--Tariffs-->
+                        <div class="form-check">
+                            <input class="form-check-input" type="checkbox" id="stepSechage" name="steps" value="sechage_doux">
+                            <label class="form-check-label" for="stepSechage">Séchage doux</label>
+                        </div>
+                    </div>
+
+                    <!-- Tarifs -->
                    <div class="mb-3">
-            <label class="form-label fw-bold">Tarif (fourchette)</label>
+                        <label class="form-label fw-bold">Tarif (fourchette) (obligatoire)</label>
                        <div class="d-flex gap-3">
-                <input type="number" id="priceMin" class="form-control" placeholder="Prix min (€)" value="35">
-                <input type="number" id="priceMax" class="form-control" placeholder="Prix max (€)" value="60">
+                            <input type="number" id="priceMin" class="form-control" placeholder="Prix min (€)" value="35" required>
+                            <input type="number" id="priceMax" class="form-control" placeholder="Prix max (€)" value="60" required>
                        </div>
                    </div>

                    <div class="d-flex gap-3 mt-4">
-                    <a href="../../prestations/liste_prestation/liste_prestation.html" class="btn btn-secondary w-50">Annuler</a>
+                        <a href="../html/prestation_accueil.html" class="btn btn-secondary w-50">Annuler</a>
                        <button type="submit" class="btn btn-primary w-50">Ajouter</button>
                    </div>
                </form>
            </div>
+        </div>
+    </main>

-    <script src="ajouter_prestation.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-
-</body>
-
-</html>
+    <script src="../js/ajouter_prestation.js"></script>
+    <script src="../..
--- a/prestations/html/ajouter_slider.html
+++ b/prestations/html/ajouter_slider.html
@@ -1,74 +1,147 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ajouter un slide</title>
+    <link
+      rel="stylesheet"
+      href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
+    />
+    <link rel="stylesheet" href="/css/prestation.css" />
+  </head>

-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+  <body>
+    <header>
+      <nav class="navbar navbar-expand-xl bg-body-tertiary shadow-sm">
+        <div class="container-fluid align-items-center">
+          <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>

-    <style>
-        body {
-            background: #f4f6f9;
-            padding: 40px;
-        }
-        .container {
-            max-width: 600px;
-        }
-    </style>
-</head>
+          <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>

-<body>
+          <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>

-<div class="container">
+            <!-- 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 id="header-placeholder"></div>
+
+    <div class="container">
      <h2 class="text-center mb-4">Ajouter une image au slider</h2>

-    <!-- Erreur : image manquante -->
-    <div id="errorEmpty" class="alert alert-danger d-none">
-        Merci de sélectionner une image.
-    </div>
-
-    <!-- Erreur : format invalide -->
-    <div id="errorFormat" class="alert alert-danger d-none">
-        Format d'image invalide. Formats acceptés : JPG, PNG, WEBP.
-    </div>
-
-    <!-- Succès -->
-    <div id="successMsg" class="alert alert-success d-none">
-        Slide ajouté avec succès !
-    </div>
+      <!-- Messages DOM -->
+      <div id="messages" class="mb-3"></div>

      <form id="addSlideForm">
-
        <!-- Image -->
        <div class="mb-3">
-            <label class="form-label fw-bold">Image du slide (obligatoire)</label>
-            <input type="file" id="slideImage" class="form-control" accept="image/*">
+          <label class="form-label fw-bold">Image du slide *</label>
+          <input
+            type="file"
+            id="slideImage"
+            class="form-control"
+            accept="image/*"
+          />
        </div>

        <!-- ALT -->
        <div class="mb-3">
-            <label class="form-label fw-bold">Texte ALT (obligatoire)</label>
-            <input type="text" id="slideAlt" class="form-control" placeholder="Description de l’image">
+          <label class="form-label fw-bold">Texte ALT *</label>
+          <input
+            type="text"
+            id="slideAlt"
+            class="form-control"
+            placeholder="Description de l’image"
+          />
        </div>

        <!-- Titre -->
        <div class="mb-3">
          <label class="form-label fw-bold">Titre (optionnel)</label>
-            <input type="text" id="slideTitle" class="form-control">
+          <input type="text" id="slideTitle" class="form-control" />
        </div>

        <!-- Boutons -->
        <div class="d-flex gap-3 mt-4">
-            <a href="../../../slider/liste_slider/liste_slider.html" class="btn btn-secondary w-50">Annuler</a>
+          <a
+            href="/prestations/html/prestation_accueil.html"
+            class="btn btn-secondary w-50"
+            >Annuler</a
+          >
          <button type="submit" class="btn btn-primary w-50">Ajouter</button>
        </div>
-
      </form>
-</div>
+    </div>

-<script src="ajouter_slider.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-
-</body>
+    <script src="/prestations/js/ajouter_slider.js"></script>
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  </body>
 </html>
+
+<!--<script src="../../header-composant.js"></script>-->
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -1,147 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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">
-  <link rel="stylesheet" href="../../css/avant_apres.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>
-
-        <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>
-
-  <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">
-          Résultat supprimé avec succès !
-        </div>
-      </header>
-
-      <div>
-
-        <div class="d-flex justify-content-start mb-4">
-          <a href="../html/ajouter_avant_apres.html" class="btn btn-primary">
-            Ajouter un résultat
-          </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 résultat</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>
-
-    <!--- modale de suppression-->
-    <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 ce résultat 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>
-
-  <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-  <script src="../js/liste_avant_apres.js"></script>
-
-</body>
-
-</html>
--- a/prestations/html/liste_prestation.html
+++ b/prestations/html/liste_prestation.html
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Liste des prestations</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-
-
-    <style>
-        body {
-            background: #f4f6f9;
-            padding: 30px;
-        }
-        .container {
-            margin-top: 100px;
-        }
-        .action-btns button,
-        .action-btns a {
-            margin-right: 100px;
-        }
-        </style>
-</head>
-<body>
-    
-    <div class="container">
-        <h2 class="mb-5 text-center">Liste des prestations</h2>
-        
-        <!--Message succès-->
-        <div id="succesDeleteMsg" class="alert alert-success d-none">Prestation supprimée avec succès !</div>
-
-        <div class="d-flex justify-content-end mb-4">
-          <a href="../ajouter_prestation/ajouter_prestation.html" class="btn btn-primary">Ajouter une prestation</a>
-        </div>
-    
-
-        <table class="table table-striped table-hover align-middle">
-            <thead class="table-dark">
-                 <tr>
-                    <th>Titre</th>
-                    <th>Type</th>
-                    <th>Description</th>
-                    <th>Tarif</th>
-                    <th class="text-center">Actions</th>
-                </tr>
-            </thead>
-        
-             <tbody id="prestationTableBody">
-                <!--Rempli en JS-->
-            </tbody>
-        </table>
-    </div>
-
-<script src="../../prestations/liste_prestation/liste_prestation.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-
-
-</body>
-</html>
--- a/prestations/html/liste_slider.html
+++ b/prestations/html/liste_slider.html
@@ -1,65 +0,0 @@
-<!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">
-
-    <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;
-        }
-    </style>
-</head>
-
-<body>
-
-<div class="container">
-
-    <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>
-
-    <!-- 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>
-    </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>
-
-</body>
-</html>
--- a/prestations/html/modifier_avant_apres.html
+++ b/prestations/html/modifier_avant_apres.html
@@ -5,81 +5,21 @@
    <meta charset="UTF-8">
    <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="../../css/style.css">
-    <link rel="stylesheet" href="../../css/avant_apres.css">
+    <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>

-    <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 id="header-placeholder"></div>

-                <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>

    <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>
+                <h1 class="title fs-2 text-center">Modifier un résultat en images (Avant / Après)</h1>

                <!-- Messages -->
                <div id="successMsg" class="alert alert-success d-none">
@@ -96,7 +36,7 @@
            </header>

           
-            <div>
+            <div class="section">

                <!-- Formulaire de modification -->
                <form id="editPairForm" class="mt-3">
@@ -164,6 +104,7 @@

    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../js/modifier_avant_apres.js"></script>
+    <script src="../../header-composant.js"></script>

 </body>

--- a/prestations/html/modifier_prestation.html
+++ b/prestations/html/modifier_prestation.html
@@ -1,44 +1,44 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modifier une prestation</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <link
+      rel="stylesheet"
+      href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
+    />

-    <style>
-        body {
-            background: #f4f6f9;
-        }
-        .container {
-            max-width: 700px;
-            margin-top: 40px;
-        }
-
-    </style>
-</head>
-<body>
+    <link rel="stylesheet" href="/css/prestation.css" />
+  </head>
+  <body>
+    <header>
+      <nav class="navbar navbar-expand-xl bg-body-tertiary shadow-sm">
+        <div class="container-fluid align-items-center">
+          <a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
+        </div>
+      </nav>
+    </header>

    <div class="container">
      <h2 class="mb-4 text-center">Modifier une prestation</h2>

      
-        <!--Erreur-->
-        <div id="errorEmpty" class="alert alert-danger d-none">Le titre est obligatoire.</div>
-        <div id="errorTechnical" class="alert alert-danger d-none">Une erreur est survenue. Veuillez réessayer plus tard.</div>
-
-        <!--Succès-->
-        <div id="successMsg" class="alert alert-success d-none">Prestation modifiée avec succès !</div>
+      <div id="messages" class="mb-3"></div>

      <form id="editPrestationForm">
-
-            <!--Titre-->
+        <!-- Titre -->
        <div class="mb-3">
-                <label class="form-label fw-bold">Titre de la prestation (obligatoire)</label>
-                <input type="text" id="prestationTitle" class="form-control" value="Toilettage complet pour chien">
+          <label class="form-label fw-bold">Titre de la prestation *</label>
+          <input
+            type="text"
+            id="prestationTitle"
+            class="form-control"
+            value="Toilettage complet pour chien"
+          />
        </div>

-            <!--Type-->
+        <!-- Type -->
        <div class="mb-3">
          <label class="form-label fw-bold">Type de prestation</label>
          <select id="prestationType" class="form-select">
@@ -47,38 +47,52 @@
          </select>
        </div>

-            
-            <!--Description (liste à puces)-->
+        <!-- Description -->
        <div class="mb-3">
          <label class="form-label fw-bold">Description de la prestation</label>
          <textarea id="prestationDescription" class="form-control" rows="5">
-                • Bain complet
-                • Séchage
-                • Coupe aux ciseaux
-                • Nettoyage des oreilles</textarea>
+• Bain complet
+• Séchage
+• Coupe aux ciseaux
+• Nettoyage des oreilles
+            </textarea
+          >
        </div>

-            <!--Tariffs-->
+        <!-- Tarifs -->
        <div class="mb-3">
          <label class="form-label fw-bold">Tarif (fourchette)</label>
          <div class="d-flex gap-3">
-                <input type="number" id="priceMin" class="form-control" placeholder="Prix min (€)" value="35">
-                <input type="number" id="priceMax" class="form-control" placeholder="Prix max (€)" value="60">
+            <input
+              type="number"
+              id="priceMin"
+              class="form-control"
+              value="35"
+            />
+            <input
+              type="number"
+              id="priceMax"
+              class="form-control"
+              value="60"
+            />
          </div>
        </div>

        <!-- Boutons -->
        <div class="d-flex gap-3 mt-4">
-            <a href="../../prestations/liste_prestation/liste_prestation.html" class="btn btn-secondary w-50">Annuler</a>
-            <button type="submit" class="btn btn-primary w-50">Enregistrer les modifications</button>
+          <a
+            href="/prestations/html/prestation_accueil.html"
+            class="btn btn-secondary w-50"
+            >Annuler</a
+          >
+          <button type="submit" class="btn btn-primary w-50">
+            Enregistrer les modifications
+          </button>
        </div>
-
      </form>
-
    </div>

-<script src="modifier_prestation.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-
-</body>
+    <script src="/prestations/js/modifier_prestation.js"></script>
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  </body>
 </html>
--- a/prestations/html/modifier_slider.html
+++ b/prestations/html/modifier_slider.html
@@ -8,6 +8,9 @@
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
+
+
+
        body {
            background: #f4f6f9;
        }
@@ -27,6 +30,9 @@

 <body>

+        <div id="header-placeholder"></div>
+
+
 <div class="container">
    <h2 class="text-center mb-5">Modifier une image du slider</h2>

@@ -71,6 +77,7 @@

 <script src="modifier_slider.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="../../header-composant.js"></script>

 </body>
 </html>
--- a/prestations/html/prestation_accueil.html
+++ b/prestations/html/prestation_accueil.html
@@ -1,74 +1,336 @@
 <!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>Gérer les prestations</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="shortcut icon" href="favicon.png" type="image/png">
+    <link rel="stylesheet" href="../../css/style.css">
 </head>

 <body>

-<div class="container text-center">
-    <h2 class="mb-5">Gestion des prestations</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>

-    <div class="row g-4">
+                <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 renseignements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Partenaires</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Citations</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>

-        <!-- 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>
                </div>
+            </div>
+        </nav>
+
+    </header>
+
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title fs-2 my-4 text-center">Gérer la page prestations</h1>
+            </header>
+
+            <div class="section">
+
+
+                <div class="accordion" id="accordionExample">
+
+                    <!-- ACCORDÉON 1 -->
+                    <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 leurs catégories
+                            </button>
+                        </h2>
+                        <div id="collapseOne" class="accordion-collapse collapse show"
+                            data-bs-parent="#accordionExample">
+                            <div class="accordion-body">
+                                <section class="presta my-3">
+                                    <h3 class="fs-4">Prestations</h3>
+                                    <div class="mb-4 mt-2">
+                                        <a href="../html/ajouter_prestation.html" class="btn btn-primary btn-sm">
+                                            Ajouter une prestation
                                        </a>
                                    </div>

-        <!-- 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>
+                                    <table class="table table-striped table-hover align-middle">
+                                        <thead class="table-dark">
+                                            <tr>
+                                                <th>Titre</th>
+
+                                                <th class="text-end">Actions</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <!-- Prestation 1 -->
+                                            <tr>
+                                                <td>Toilettage complet</td>
+
+                                                <td class="text-end">
+                                                    <a href="../html/modifier_prestation.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>
+                                            <!-- Prestation 2 -->
+                                            <tr>
+                                                <td>Toilettage express</td>
+
+                                                <td class="text-end">
+                                                    <a href="../html/modifier_prestation.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>
+
+                                <section class="carte my-3">
+                                    <h3 class="fs-4 mt-4">Étapes</h3>
+                                    <div class="mb-4 mt-2">
+                                        <a href="#" class="btn btn-primary btn-sm">
+                                            Ajouter une étape
                                        </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>
+                                    <table class="table table-striped table-hover align-middle">
+                                        <thead class="table-dark">
+                                            <tr>
+                                                <th>Titre</th>
+
+                                                <th class="text-end">Actions</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <tr>
+                                                <td>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>
+
+                                            </tr>
+                                            <tr>
+                                                <td>Coupe griffes</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>Séchage doux</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>
+
+                                            </tr>
+
+                                        </tbody>
+                                    </table>
+                                </section>
+
                            </div>
+                        </div>
+                    </div>
+
+                    <!-- ACCORDÉON 2 -->
+                    <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">
+
+                                <div class="mb-4 mt-2">
+                                    <a href="../html/ajouter_slider.html" class="btn btn-primary btn-sm">
+                                        Ajouter un slider
                                    </a>
                                </div>

+                                <table class="table table-striped table-hover align-middle">
+                                    <thead class="table-dark">
+                                        <tr>
+                                            <th>Titre</th>
+                                            <th class="text-end">Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>Chien toiletté</td>
+
+                                            <td class="text-end">
+                                                <a href="../html/modifier_slider.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>Avant / Après</td>
+
+
+                                            <td class="text-end">
+                                                <a href="../html/modifier_slider.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>Nouveauté</td>
+
+                                            <td class="text-end">
+                                                <a href="../html/modifier_slider.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>
+
+                            </div>
+                        </div>
                    </div>
-</div>

-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+                    <!-- ACCORDÉON 3 -->
+                    <div class="accordion-item">
+                        <h2 class="accordion-header">
+                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                                Gérer la galerie avant/après
+                            </button>
+                        </h2>
+                        <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
+                            <div class="accordion-body">

+                                <div class="mb-4 mt-2">
+                                    <a href="../html/ajouter_avant_apres.html" class="btn btn-primary btn-sm">
+                                        Ajouter un résultat
+                                    </a>
+                                </div>
+
+                                <table class="table table-striped table-hover align-middle">
+                                    <thead class="table-dark">
+                                        <tr>
+                                            <th>Titre</th>
+                                            <th class="text-end">Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td>Toilettage complet</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>Toilettage complet</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>
+
+                            </div>
+                        </div>
+                    </div>
+
+                </div> <!-- /#accordionExample -->
+
+            </div>
+        </div>
+
+        <div id="modal-placeholder"></div>
+
+    </main>
+
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
 </body>
+
 </html>
--- a/prestations/html/verif.html
+++ b/prestations/html/verif.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <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="/css/style.css">
+    <link rel="stylesheet" href="/css/avant_apres.css">
+</head>
+
+<body>
+
+    <div id="header-placeholder"></div>
+
+
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title fs-2 text-center">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.
+                </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 class="section">
+
+                <!-- 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>
+    </main>
+
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../js/modifier_avant_apres.js"></script>
+
+
+</body>
+
+</html>
--- a/prestations/html/voir_avant_apres.html
+++ b/prestations/html/voir_avant_apres.html
@@ -1,63 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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="../../css/avant_apres.css">
-
-</head>
-
-<body>
-
-    <div class="container">
-
-        <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 ce résultat.
-        </div>
-
-        <div id="detailsSection" class="mt-3">
-
-            <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">
-
-                <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>
-
-            <!-- 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>
-
-
-</body>
-
-</html>
--- a/prestations/js/ajouter_prestation.js
+++ b/prestations/js/ajouter_prestation.js
@@ -1,16 +1,14 @@
-// Récupération des éléments
+// Éléments
 const form = document.getElementById("addCategoryForm");
+const messages = document.getElementById("messages");
+
 const titleField = document.getElementById("categoryName");
 const typeField = document.getElementById("prestationType");
 const descField = document.getElementById("prestationDescription");
 const priceMinField = document.getElementById("priceMin");
 const priceMaxField = document.getElementById("priceMax");

-const errorEmpty = document.getElementById("errorEmpty");
-const errorExists = document.getElementById("errorExists");
-const successMessage = document.getElementById("successMessage");
-
-// Prestations existantes (simulation)
+// Prestations existantes (simulation BDD)
 const existingPrestations = [
    "Toilettage complet",
    "Coupe ciseaux",
@@ -18,38 +16,43 @@ const existingPrestations = [
    "Démêlage poil long"
 ];

+
+function showMessage(type, text) {
+    messages.innerHTML = "";
+
+    const div = document.createElement("div");
+    div.className = `alert alert-${type}`;
+    div.textContent = text;
+
+    messages.appendChild(div);
+}
+
+
 form.addEventListener("submit", function (e) {
    e.preventDefault();
+    messages.innerHTML = "";

-    // Récupérer le titre
    const titre = titleField.value.trim();

-    // Réinitialiser les alertes
-    errorEmpty.classList.add("d-none");
-    errorExists.classList.add("d-none");
-    successMessage.classList.add("d-none");
-
-    // 1. Vérif : titre obligatoire
-    if (titre === "") {
-        errorEmpty.classList.remove("d-none");
+    // Titre obligatoire
+    if (!titre) {
+        showMessage("danger", "Le titre de la prestation est obligatoire.");
        return;
    }

-    // 2. Vérif : prestation déjà existante (exemple simple)
+    // Doublon
    if (existingPrestations.includes(titre)) {
-        errorExists.classList.remove("d-none");
+        showMessage("danger", "Cette prestation existe déjà. Veuillez en choisir une autre.");
        return;
    }

-    // 3. Tout est ok → succès
-    successMessage.classList.remove("d-none");
-
-    // Simuler ajout en base
+    // Succès
    existingPrestations.push(titre);
+    showMessage("success", "Prestation ajoutée avec succès !");

-   
+    // Redirection
    setTimeout(() => {
-    window.location.href = "../liste_prestation/liste_prestation.html";
+
+    window.location.href = "../html/prestation_accueil.html";
 }, 1500);
 });
-
--- a/prestations/js/ajouter_slider.js
+++ b/prestations/js/ajouter_slider.js
@@ -1,44 +1,52 @@
-const form = document.getElementById('addSlideForm');
-const imgField = document.getElementById('slideImage');
-const altField = document.getElementById('slideAlt');
-const titleField = document.getElementById('slideTitle');
+const form = document.getElementById("addSlideForm");
+const messages = document.getElementById("messages");

-const errorEmpty = document.getElementById('errorEmpty');
-const errorFormat = document.getElementById('errorFormat');
-const successMsg = document.getElementById('successMsg');
+const imgField = document.getElementById("slideImage");
+const altField = document.getElementById("slideAlt");
+const titleField = document.getElementById("slideTitle");

-// Création du tableau simulant la BDD
+// Simulation BDD
 let slides = [];

-form.addEventListener('submit', function (e) {
-    e.preventDefault();

-    // Reset messages
-    errorEmpty.classList.add('d-none');
-    errorFormat.classList.add('d-none');
-    successMsg.classList.add('d-none');
+function showMessage(type, text) {
+    messages.innerHTML = "";
+
+    const div = document.createElement("div");
+    div.className = `alert alert-${type}`;
+    div.textContent = text;
+
+    messages.appendChild(div);
+}
+
+
+form.addEventListener("submit", function (e) {
+    e.preventDefault();
+    messages.innerHTML = "";

    const image = imgField.files[0];
    const alt = altField.value.trim();
+    const title = titleField.value.trim();

    // Image obligatoire
    if (!image) {
-        errorEmpty.textContent = "Merci de sélectionner une image.";
-        errorEmpty.classList.remove('d-none');
+        showMessage("danger", "Merci de sélectionner une image.");
        return;
    }

    // ALT obligatoire
-    if (alt === "") {
-        errorEmpty.textContent = "Le texte ALT est obligatoire.";
-        errorEmpty.classList.remove('d-none');
+    if (!alt) {
+        showMessage("danger", "Le texte ALT est obligatoire.");
        return;
    }

    // Vérification format
    const validFormats = ["image/jpeg", "image/png", "image/webp"];
    if (!validFormats.includes(image.type)) {
-        errorFormat.classList.remove('d-none');
+        showMessage(
+            "danger",
+            "Format d'image invalide. Formats acceptés : JPG, PNG, WEBP."
+        );
        return;
    }

@@ -46,18 +54,18 @@ form.addEventListener('submit', function (e) {
    slides.push({
        id: Date.now(),
        image: image.name,
-        alt: alt,
-        title: titleField.value.trim(),
+        alt,
+        title,
        order: slides.length + 1
    });

    console.log("Nouveau slide ajouté :", slides);

    // Succès
-    successMsg.classList.remove('d-none');
+    showMessage("success", "Slide ajouté avec succès !");

    // Redirection
    setTimeout(() => {
-        window.location.href = "../../../slider/liste_slider/liste_slider.html";
+        window.location.href = "/prestations/html/prestation_accueil.html";
    }, 1500);
 });
--- a/prestations/js/liste_avant_apres.js
+++ b/prestations/js/liste_avant_apres.js
@@ -1,117 +0,0 @@
-// ===============================
-// Données simulées (à remplacer plus tard par une BDD)
-// ===============================
-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"
-    }
-];
-
-// Sélecteurs
-const tableBody = document.getElementById("prestationTableBody");
-const succesDeleteMsg = document.getElementById("succesDeleteMsg");
-
-// Modal & bouton de confirmation
-const deleteModalEl = document.getElementById("deleteModal");
-const confirmDeleteBtn = document.getElementById("confirmDeleteBtn");
-const deleteModal = new bootstrap.Modal(deleteModalEl);
-
-// ID de la paire en attente de suppression
-let pairIdToDelete = null;
-
-// ===============================
-// Fonction d'affichage
-// ===============================
-function displayPairs() {
-    tableBody.innerHTML = ""; // reset tableau
-
-    galleryPairs.forEach(pair => {
-        const row = document.createElement("tr");
-
-        row.innerHTML = `
-            <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">
-
-                    <!-- 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">
-                        Modifier
-                    </a>
-
-                    <!-- Bouton Supprimer -->
-                    <button class="btn btn-danger btn-sm" onclick="openDeleteModal(${pair.id})">
-                        Supprimer
-                    </button>
-                </div>
-            </td>
-        `;
-
-        tableBody.appendChild(row);
-    });
-}
-
-// ===============================
-// Ouvrir le modal de suppression
-// ===============================
-function openDeleteModal(id) {
-    pairIdToDelete = id;            // on mémorise l'id
-    deleteModal.show();             // on ouvre le modal
-}
-
-// ===============================
-// Fonction de suppression réelle
-// ===============================
-function deletePair(id) {
-    galleryPairs = galleryPairs.filter(pair => pair.id !== id);
-    displayPairs();
-
-    succesDeleteMsg.classList.remove("d-none");
-
-    setTimeout(() => {
-        succesDeleteMsg.classList.add("d-none");
-    }, 2000);
-}
-
-// ===============================
-// Clic sur "Supprimer" dans le modal
-// ===============================
-confirmDeleteBtn.addEventListener("click", () => {
-    if (pairIdToDelete !== null) {
-        deletePair(pairIdToDelete);
-        pairIdToDelete = null;
-    }
-    deleteModal.hide();
-});
-
-// ===============================
-// Chargement initial
-// ===============================
-displayPairs();
--- a/prestations/js/liste_prestation.js
+++ b/prestations/js/liste_prestation.js
@@ -1,61 +0,0 @@
-// Exemple BDD
-const prestations = [
-    {
-        id: 1,
-        titre: "Toilettage complet",
-        type: "Chien",
-        description: "• Bain complet \n• Séchage \n• Coupe aux ciseaux\n• Nettoyage des oreilles",
-        prixMin: 35,
-        prixMax: 60
-    },
-    {
-        id: 2,
-        titre: "Toilettage express",
-        type: "Chat",
-        description: "• Bain rapide\n• Séchage\n• Brossage",
-        prixMin: 20,
-        prixMax: 35
-    }
-];
-
-// Sélection des éléments
-const tableBody = document.getElementById('prestationTableBody');
-const successDeleteMsg = document.getElementById('successDeleteMsg');
-
-// Fonction pour extrait description
-function extrait(desc, limite = 60) {
-    return desc.length > limite ? desc.substring(0, limite) + '...' : desc;
-}
-
-// Affichage du tableau
-function afficherPrestations() {
-    tableBody.innerHTML = '';
-
-    prestations.forEach((p, index) => {
-        const row = `
-        <tr>
-            <td>${p.titre}</td>
-            <td>${p.type}</td>
-            <td>${extrait(p.description.replace(/\n/g, " "))}</td>
-            <td>${p.prixMin}€ - ${p.prixMax}€</td>
-
-            <td class="text-center action-btns">
-                <a href="consulter_prestation.html?id=${p.id}" class="btn btn-info btn-sm">Voir</a>
-                <a href="../../prestations/modifier_prestation/modifier_prestation.html?id=${p.id}" class="btn btn-warning btn-sm">Modifier</a>
-                <button class="btn btn-danger btn-sm" onclick="supprimerPrestation(${index})">Supprimer</button>
-            </td>
-        </tr>
-        `;
-        tableBody.innerHTML += row;
-    });
-}
-
-afficherPrestations();
-
-// Suppression
-function supprimerPrestation(index) {
-    prestations.splice(index, 1);
-    afficherPrestations();
-
-    successDeleteMsg.classList.remove("d-none");
-}
--- a/prestations/js/liste_slider.js
+++ b/prestations/js/liste_slider.js
@@ -1,87 +0,0 @@
-// Simulation BDD slider
-let slides = [
-    { id: 1, image: "slide1.webp", alt: "Chien toiletté", title: "Promo du mois", order: 1 },
-    { id: 2, image: "slide2.webp", alt: "Avant / Après", title: "", order: 2 },
-    { id: 3, image: "slide3.webp", alt: "Coupe ciseaux", title: "Nouveauté", order: 3 }
-];
-
-const tableBody = document.getElementById("sliderTableBody");
-const successMsg = document.getElementById("successMsg");
-
-function afficherSlides() {
-
-    // trier par ordre
-    slides.sort((a, b) => a.order - b.order);
-
-    tableBody.innerHTML = "";
-
-    slides.forEach((slide, index) => {
-        const row = `
-        <tr>
-            <td><img src="#" alt="${slide.alt}" class="miniature"></td>
-
-            <td>${slide.alt}</td>
-            <td>${slide.title || "-"}</td>
-            <td>${slide.order}</td>
-
-            <td class="text-center action-buttons">
-                <button class="btn btn-secondary btn-sm" onclick="monter(${index})">↑</button>
-                <button class="btn btn-secondary btn-sm" onclick="descendre(${index})">↓</button>
-
-                <a href="../../slider/modifier_slider/modifier_slider.html?id=${slide.id}" 
-   class="btn btn-warning btn-sm">Modifier</a>
-
-
-                <button class="btn btn-danger btn-sm" onclick="supprimerSlide(${index})">Supprimer</button>
-            </td>
-        </tr>
-        `;
-        tableBody.innerHTML += row;
-    });
-}
-
-afficherSlides();
- 
-// Suppression
-function supprimerSlide(index) {
-    if (confirm("Voulez-vous vraiment supprimer cette image du slider ?")) {
-        slides.splice(index, 1);
-
-        // Réordonner après suppression
-        slides.forEach((s, i) => s.order = i + 1);
-
-        afficherSlides();
-
-        successMsg.textContent = "Image du slider supprimée avec succès.";
-        successMsg.classList.remove("d-none");
-    }
-}
-
-// Monter 
-function monter(index) {
-    if (index === 0) return; // déjà en haut
-
-    [slides[index - 1], slides[index]] = [slides[index], slides[index - 1]];
-
-    // recalcul ordre
-    slides.forEach((s, i) => s.order = i + 1);
-
-    afficherSlides();
-
-    successMsg.textContent = "Ordre mis à jour.";
-    successMsg.classList.remove("d-none");
-}
-
-// Descendre 
-function descendre(index) {
-    if (index === slides.length - 1) return; // déjà en bas
-
-    [slides[index], slides[index + 1]] = [slides[index + 1], slides[index]];
-
-    slides.forEach((s, i) => s.order = i + 1);
-
-    afficherSlides();
-
-    successMsg.textContent = "Ordre mis à jour.";
-    successMsg.classList.remove("d-none");
-}
--- a/prestations/js/modifier_prestation.js
+++ b/prestations/js/modifier_prestation.js
@@ -1,41 +1,45 @@
+const form = document.getElementById("editPrestationForm");
+const messages = document.getElementById("messages");

-const form = document.getElementById('editPrestationForm');
-const titleField = document.getElementById('prestationTitle');
-const descriptionField = document.getElementById('prestationDescription');
-const typeField = document.getElementById('prestationType');
-const priceMinField = document.getElementById('priceMin');
-const priceMaxField = document.getElementById('priceMax');
-
-const errorEmpty = document.getElementById('errorEmpty');
-const errorTechnical = document.getElementById('errorTechnical');
-const successMsg = document.getElementById('successMsg');
+const titleField = document.getElementById("prestationTitle");
+const descriptionField = document.getElementById("prestationDescription");
+const typeField = document.getElementById("prestationType");
+const priceMinField = document.getElementById("priceMin");
+const priceMaxField = document.getElementById("priceMax");


-form.addEventListener('submit', function (e) { 
+function showMessage(type, text) {
+    messages.innerHTML = "";
+
+    const div = document.createElement("div");
+    div.className = `alert alert-${type}`;
+    div.textContent = text;
+
+    messages.appendChild(div);
+}
+
+
+form.addEventListener("submit", function (e) {
    e.preventDefault();
-    
-    errorEmpty.classList.add('d-none');
-    errorTechnical.classList.add('d-none');
-    successMsg.classList.add('d-none');
+    messages.innerHTML = "";

    const title = titleField.value.trim();

-
-    // champ obligatoire manquant
-    if (title === '') {
-        errorEmpty.classList.remove('d-none');
+    // Champ obligatoire
+    if (!title) {
+        showMessage("danger", "Le titre de la prestation est obligatoire.");
        return;
    }

-     // 2️ Simulation d’erreur technique 
+    // Simulation erreur technique
    const erreurTechnique = false; // mettre true pour tester
    if (erreurTechnique) {
-        errorTechnical.classList.remove('d-none');
+        showMessage("danger", "Une erreur est survenue. Veuillez réessayer plus tard.");
        return;
    }

-     //Succès 
-    successMsg.classList.remove('d-none');
+    // Succès
+    showMessage("success", "Prestation modifiée avec succès !");

    console.log("Nouvelles données :", {
        titre: title,
@@ -45,8 +49,8 @@ form.addEventListener('submit', function (e) {
        prixMax: priceMaxField.value
    });

-        // Redirection après un court délai
+    // Redirection
    setTimeout(() => {
-    window.location.href = "../liste_prestation/liste_prestation.html";
-}, 1500);
+        window.location.href = "/prestations/html/prestation_accueil.html";
+    }, 1500);
 });
--- a/prestations/js/voir_avant_apres.js
+++ b/prestations/js/voir_avant_apres.js
@@ -1,58 +0,0 @@
-// ===============================
-// Données simulées (à remplacer plus tard par BDD / API)
-// ===============================
-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"
-    }
-];
-
-// Sélecteurs
-const titleEl = document.getElementById("pairTitle");
-const beforePreview = document.getElementById("beforePreview");
-const afterPreview = document.getElementById("afterPreview");
-const errorMsg = document.getElementById("errorMsg");
-const detailsSection = document.getElementById("detailsSection");
-
-// ===============================
-// Récup ID dans l'URL
-// ===============================
-function getIdFromUrl() {
-    const params = new URLSearchParams(window.location.search);
-    return parseInt(params.get("id"));
-}
-
-// ===============================
-// Charger les infos de la paire
-// ===============================
-function loadPairDetails() {
-    const id = getIdFromUrl();
-    const pair = galleryPairs.find(p => p.id === id);
-
-    if (!pair) {
-        errorMsg.classList.remove("d-none");
-        detailsSection.classList.add("d-none");
-        return;
-    }
-
-    // Affichage du titre
-    titleEl.textContent = pair.titre;
-
-    // Affichage des images
-    beforePreview.src = pair.avant;
-    afterPreview.src = pair.apres;
-}
-
-// Initialisation
-loadPairDetails();
--- a/profil/html/profil.html
+++ b/profil/html/profil.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Profil - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/citations.css">
+</head>
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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 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="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link left-label" href="#">À propos</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 active" 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>
+
+  <main class="my-5 fs-6">
+    <div class="container">
+      <header>
+        <h1 class="title my-4 fs-2 text-center">Mon profil</h1>
+      </header>
+      <div class="content">
+        <section class="my-4">
+          <h2 class="fs-4 mb-3">Informations personnelles</h2>
+          <form class="row g-3" id="profile-info-form">
+            <div class="col-md-12">
+              <label for="lastName" class="form-label">Nom (obligatoire)</label>
+              <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Votre nom" value="Nom de famille" required>
+            </div>
+            <div class="col-md-12">
+              <label for="firstName" class="form-label">Prénom (obligatoire)</label>
+              <input type="text" class="form-control" id="firstName" name="firstName" placeholder="Votre prénom" value="Sandrine" required>
+            </div>
+            <div class="col-12">
+              <label for="email" class="form-label">Email (obligatoire)</label>
+              <input type="email" class="form-control" id="email" name="email" placeholder="votre@email.com" value="sandrine@gmail.com">
+            </div>
+            <div class="col-12 d-flex justify-content-star">
+              <button type="submit" class="btn btn-primary">Modifier</button>
+            </div>
+          </form>
+        </section>
+
+        <section class="my-5">
+          <h2 class="fs-4">Mot de passe</h2>
+          
+          <form class="row" id="password-form">
+            <div class="col-12 my-2">
+              <small class="text-muted">Laissez ces champs vides pour ne pas modifier votre mot de passe.</small>
+            </div>
+            <div class="col-12 mb-3">
+              <label for="password" class="form-label">Nouveau mot de passe (<span id="min8">8 caractères minimum</span>, incluant une <span id="uppercase">majuscule</span>, une <span id="lowercase">minuscule</span> et un <span id="digit">chiffre</span>)</label>
+              <input type="password" class="form-control" id="password" name="password" placeholder="Nouveau mot de passe">
+            </div>
+            <div class="col-12">
+              <label for="passwordConfirm" class="form-label">Confirmation</label>
+              <input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" placeholder="Confirmer le mot de passe">
+            </div>
+
+            <div class="col-12">
+                <label for="showPassword" class="mt-2 mb-3">
+                    <input type="checkbox" id="showPassword" />
+                    Voir le mot de passe
+                </label>
+            </div>
+            
+            <div class="col-12 d-flex justify-content-star">
+              <button type="submit" class="btn btn-primary">Modifier</button>
+            </div>
+          </form>
+        </section>
+      </div>
+    </div>
+  </main>
+  <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+  
+  
+
+
+  <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+  <script src="/js/password.js"></script>
+</body>
+</html>         
--- a/template-header.html
+++ b/template-header.html
@@ -1,52 +1,8 @@
-<!DOCTYPE html>
-<html lang="fr">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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">
-
-    
-    <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;
-            }
-           
-        }
-    </style>
-
-</head>
-
-<body>
-    <header>
+<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">
@@ -67,14 +23,16 @@
                            <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>
+                            <a class="nav-link left-label" href="#">Fiche renseignements</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link left-label" href="#">Partenaires</a>
                        </li>
+                         <li class="nav-item">
+                            <a class="nav-link left-label" href="#">Citations</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>
@@ -102,20 +60,3 @@
        </nav>

    </header>
-    <main class="my-5 fs-6">
-        <div class="container">
-            <header>
-                <h1 class="title fs-2">Titre de la page</h1>
-            </header>
-            <main>
-                Contenu de la page
-            </main>
-        </div>
-    </main>
-
-
-</body>
-
-<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-
-</html>
--- a/template.html
+++ b/template.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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="shortcut icon" href="/favicon.png" type="image/png">
+    <link rel="stylesheet" href="/css/style.css">
+
+
+
+</head>
+
+<body>
+    <header>
+      <nav class="navbar navbar-expand-xl 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 left-label" 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="#">Vétos</a></li>
+              <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+              <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Titre de la page</h1>
+            </header>
+            <div class="content">
+                Contenu de la page
+            </div>
+        </div>
+    </main>
+
+    <footer class="border-top py-3 mt-4">
+        <div class="container d-flex gap-3 flex-wrap">
+            <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+            <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+        </div>
+    </footer>
+
+</body>
+
+<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+
+</html>
--- a/veto/html/ajouter_veterinaire.html
+++ b/veto/html/ajouter_veterinaire.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Liste des vétos - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
+    
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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 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 active left-label" href="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Ajouter un vétérinaire</h1>
+            </header>
+            <div class="content">
+                <form id="ajouterArticleForm">
+                    <div class="mb-4 veto-addition">
+                        <label class="form-label fw-bold" for="veto">Nom du vétérinaire (obligatoire)</label>
+                        <input type="text" id="veto" class="form-control"
+                            placeholder="Veto bidule" required>
+                    </div>
+                    <div class="mb-4 veto-adresse1">
+                        <label class="form-label fw-bold" for="address">Adresse du vétérinaire (obligatoire)</label>
+                        <input type="text" id="address" class="form-control"
+                            placeholder="123 Rue Exemple" required>
+                    </div>
+                    <div class="mb-4 veto-adresse2">
+                        <label class="form-label fw-bold" for="address2">Complément d'adresse (optionnel)</label>
+                        <input type="text" id="address2" class="form-control"
+                            placeholder="Appartement, étage, bâtiment, etc.">
+                    </div>
+                    <div class="mb-4 veto-adresse2">
+                        <label class="form-label fw-bold" for="code_postal">Code postal (obligatoire)</label>
+                        <input type="text" id="code_postal" class="form-control"
+                            placeholder="75000" required>
+                    </div>
+                     <div class="mb-4 veto-commune">
+                        <label class="form-label fw-bold" for="commune">Commune (obligatoire)</label>
+                        <input type="text" id="commune" class="form-control"
+                            placeholder="Paris" required>
+                    </div>
+                     <div class="mb-4 veto-telephone">
+                        <label class="form-label fw-bold" for="telephone">Téléphone (obligatoire)</label>
+                        <input type="text" id="telephone" class="form-control"
+                            placeholder="0123456789" required>
+                    </div>
+                   
+                    <div class="d-flex gap-3 mt-4 confirmation-buttons">
+                        <a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
+                        <button type="submit" class="btn btn-primary w-50">Ajouter</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+   
+</body>
+
+</html>
--- a/veto/html/modifier_veterinaire.html
+++ b/veto/html/modifier_veterinaire.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modifier un vétérinaire - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+    <link rel="stylesheet" href="/css/style.css">
+    
+</head>
+
+<body>
+    <header>
+        <nav class="navbar navbar-expand-xl 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  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 active left-label" href="#">Vétos</a></li>
+                        <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+                        <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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>
+    <main class="my-5 fs-6">
+        <div class="container">
+            <header>
+                <h1 class="title my-4 fs-2 text-center">Modifier un vétérinaire</h1>
+            </header>
+            <div class="content">
+                <form id="ajouterArticleForm">
+                    <div class="mb-4 veto-addition">
+                        <label class="form-label fw-bold" for="veto">Nom du vétérinaire (obligatoire)</label>
+                        <input type="text" id="veto" class="form-control" value="Clinique vétérinaire de Victor hugo" required>
+                    </div>
+                    <div class="mb-4 veto-adresse1">
+                        <label class="form-label fw-bold" for="address">Adresse du vétérinaire (obligatoire)</label>
+                        <input type="text" id="address" class="form-control" value="1 Boulevard René Chabasse" required>
+                    </div>
+                    <div class="mb-4 veto-adresse2">
+                        <label class="form-label fw-bold" for="address2">Complément d'adresse (optionnel)</label>
+                        <input type="text" id="address2" class="form-control" value="Appartement, étage, bâtiment, etc.">
+                    </div>
+                    <div class="mb-4 veto-adresse2">
+                        <label class="form-label fw-bold" for="code_postal">Code postal (obligatoire)</label>
+                        <input type="text" id="code_postal" class="form-control" value="16000" required>
+                    </div>
+                     <div class="mb-4 veto-commune">
+                        <label class="form-label fw-bold" for="commune">Commune (obligatoire)</label>
+                        <input type="text" id="commune" class="form-control" value="Angoulême" required>
+                    </div>
+                     <div class="mb-4 veto-telephone">
+                        <label class="form-label fw-bold" for="telephone">Téléphone (obligatoire)</label>
+                        <input type="text" id="telephone" class="form-control" value="0545367890" required>
+                    </div>
+                   
+                    <div class="d-flex gap-3 mt-4 confirmation-buttons">
+                        <a href="./accueil.html" class="btn btn-secondary w-50">Annuler</a>
+                        <button type="submit" class="btn btn-primary w-50">Modifier</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+  
+    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+   
+</body>
+
+</html>
--- a/veto/html/veto_accueil.html
+++ b/veto/html/veto_accueil.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Liste des vétos - L'Il'eau chiens - Admin</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="shortcut icon" href="/favicon.png" type="image/png">
+  <link rel="stylesheet" href="/css/style.css">
+  
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-xl 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 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 active left-label" href="#">Vétos</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">Citations</a></li>
+            <li class="nav-item"><a class="nav-link  left-label" href="#">À propos</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>
+
+  <main class="my-5 fs-6">
+    <div class="container">
+      <header>
+        <h1 class="title my-4 fs-2 text-center">Liste des vétérinaires</h1>
+      </header>
+      <div class="content">
+        <div class="ajouter mb-4">
+          <a href="#" class="btn btn-primary">Ajouter un vétérinaire</a>
+        </div>
+
+
+        <table class="table table-striped table-hover">
+          <thead class="table-dark">
+            <tr>
+              <th>Vétérinaire</th>
+              <th class="text-end">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Clinique vétérinaire de Victor Hugo</td>
+              <td class="text-end">
+                <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                <a href="index.php" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                  data-bs-target="#confirmDeleteModal">Supprimer</a>
+              </td>
+            </tr>
+            <tr>
+              <td>Clinique du Champs de Mars</td>
+              <td class="text-end">
+                <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                  data-bs-target="#confirmDeleteModal">Supprimer</a>
+              </td>
+            </tr>
+            <tr>
+              <td>Véto 16</td>
+              <td class="text-end">
+                <a href="#" class="btn btn-sm btn-outline-primary me-2">Modifier</a>
+                <a href="#" class="btn btn-sm btn-outline-danger" role="button" data-bs-toggle="modal"
+                  data-bs-target="#confirmDeleteModal">Supprimer</a>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+  </main>
+
+
+  <div class="modal fade" id="confirmDeleteModal" tabindex="-1">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Confirmer la suppression</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          Êtes-vous sûr de vouloir supprimer cette citation ? Cette action est définitive.
+        </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>
+  <footer class="bg-body-tertiary py-4 mt-auto">
+
+    <div class="container d-flex gap-3 flex-wrap">
+      <span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
+      <a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
+      <a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
+    </div>
+  </footer>
+
+  <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="/js/contentReduct.js"></script>
+  <script src="/js/confirmDelete.js"></script>
+</body>
+
+</html>
Author	SHA1	Message	Date
pestak	bbf921bbfe	bog : supprimer réactif	2025-12-16 13:18:18 +01:00
RoxanaElena09	aef7d63451	feat: ajouter_prestation validée w3c validator et normalisee	2025-12-16 09:58:38 +01:00
pestak	55a31a507c	integration de password.js à reinitialisation mdp	2025-12-16 08:50:31 +01:00
pestak	706d3ece23	FEAT : page profil	2025-12-16 08:31:11 +01:00
pestak	ee068c9d6f	commit de fin de journée	2025-12-14 21:06:10 +01:00
pestak	4022e385eb	petites modifs	2025-12-14 14:11:39 +01:00
pestak	cf5a366650	edition pages statique texte	2025-12-14 14:00:52 +01:00
pestak	11e4cc9767	Page configuration	2025-12-14 13:41:23 +01:00
pestak	d3af22566a	Message d'actu	2025-12-14 13:16:24 +01:00
pestak	4340bcab6d	Normalisation Menus	2025-12-14 12:42:14 +01:00
pestak	b0673ad90d	FEAT bouton publier sur facebook	2025-12-14 11:57:29 +01:00
pestak	b4e037f11d	normalisation blog + gestion images	2025-12-14 11:42:13 +01:00
pestak	1950fd3902	FEAT : pages veto	2025-12-14 09:32:34 +01:00
pestak	75abb10913	validation HTML	2025-12-13 07:45:59 +01:00
delphine-16	6de5eb546e	FAQ + TinyMCE globale	2025-12-12 22:39:03 +01:00
delphine-16	a220868c03	Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffi vendredi 12 au soir	2025-12-12 20:59:09 +01:00
ben	da0dfdc8c7	nettoyage de doucmentation	2025-12-12 17:09:55 +01:00
ben	e37b8c4c7d	modifier presta: DOM message + header + chemins. W3C éffectué sur les 3pages commité	2025-12-12 17:03:35 +01:00
ben	946bda115a	ajouter slider : DOM message + header + chemins	2025-12-12 16:49:50 +01:00
ben	248bc80da5	Ajouter prestation : DOM message + mise ne place du header+fichier style css prestation	2025-12-12 16:34:45 +01:00
ben	f72b6e9337	mise a jour du dom ajouter catégorie	2025-12-12 15:32:17 +01:00
pestak	e40317e726	Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice	2025-12-12 15:06:08 +01:00
pestak	dbd1ccee68	script delete	2025-12-12 15:02:57 +01:00
ben	b140b6a4ec	Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice	2025-12-12 14:43:16 +01:00
ben	4fe4facd32	mise a jour du Dom de ajouter article et modifier article	2025-12-12 14:38:43 +01:00
RoxanaElena09	f02c69449a	feat:creation dossier components	2025-12-12 11:28:09 +01:00
pestak	b77f82f216	ups modif prestations accueil	2025-12-12 10:00:08 +01:00
RoxanaElena09	a0ef8c98c9	feat: ajouter une carte	2025-12-12 09:46:52 +01:00
RoxanaElena09	47a1243464	feat: ajouter une categorie mb-4 mt-3	2025-12-12 09:46:01 +01:00
RoxanaElena09	374334de44	feat:modification page prestation	2025-12-12 09:43:17 +01:00
ben	5d86176a97	nettoyage du 12 décembre	2025-12-12 09:35:34 +01:00
pestak	f4b7254223	Merge branch 'main' into david	2025-12-12 09:27:16 +01:00
pestak	7cebda02ee	Merge branch 'main' into david integration du citations	2025-12-12 09:24:59 +01:00
RoxanaElena09	ce04d847f6	feat:corrections	2025-12-12 09:17:09 +01:00
pestak	21dab81e7a	citations-modifs	2025-12-12 08:49:08 +01:00
RoxanaElena09	41d739df95	feat:creation delete-composant.html et delete-composant.js	2025-12-12 08:43:43 +01:00
RoxanaElena09	c7aaa923af	feat: creation header composant html et js	2025-12-12 08:43:43 +01:00
pestak	77f43fff95	citations	2025-12-12 08:33:41 +01:00
pestak	c4a6dcf798	Merge branch 'main' into david	2025-12-12 07:40:34 +01:00
delphine-16	c976d4666b	Merge avec conservation de ma version locale	2025-12-11 22:29:54 +01:00
ben	63592a114d	mise a jour DOM page modifier categorie	2025-12-11 16:34:46 +01:00
ben	74a04ea355	retouche des redirections de page	2025-12-11 16:12:16 +01:00
RoxanaElena09	5b0edbccca	feat: modifier chemin js	2025-12-11 15:18:33 +01:00
pestak	ad9e8b8308	os : accordeon	2025-12-11 15:07:04 +01:00
RoxanaElena09	fc19007b05	feat:liste_avant_apres modifie	2025-12-11 13:23:21 +01:00
RoxanaElena09	efad1b078e	feat: quelques ajustements liste_slider	2025-12-11 12:54:14 +01:00
RoxanaElena09	16ab4707e2	feat:modifier_avant_apres rechangement structure	2025-12-11 12:34:48 +01:00
ben	84d8f1c481	ajout du badge publié sur facebook (bootstrap) dans la page accueil blog	2025-12-11 12:02:29 +01:00
ben	9e80b99abe	correction erreur	2025-12-11 11:11:57 +01:00
ben	2125bfb126	Merge branch 'main' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice	2025-12-11 11:06:44 +01:00
ben	a0e14bfa92	Mise en place tinymce dans accueil blog avec clé et domaine	2025-12-11 11:04:42 +01:00
delphine-16	55c3b2d050	Merge branch 'david' of ssh://git.lalanguebleue.fr:2222/ileauchiens/maquette_backoffice	2025-12-10 18:13:29 +01:00
pestak	5ee026f439	ajout du favicon	2025-12-10 12:28:39 +01:00