diff --git a/connexion/html/mot_de_passe_oublie.html b/connexion/html/mot_de_passe_oublie.html
index 043d7e2..7ce508f 100644
--- a/connexion/html/mot_de_passe_oublie.html
+++ b/connexion/html/mot_de_passe_oublie.html
@@ -1,63 +1,56 @@
 <!DOCTYPE html>
 <html lang="fr">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Mot de passe oublié</title>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-    />
 
-    <style>
-      body {
-        background: #f4f6f981;
-        height: 100vh;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .forgot-password-card {
-        width: 100%;
-        max-width: 380px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="card shadow forgot-password-card">
-      <div class="card-body p-4">
-        <h3 class="text-center mb-4">Mot de passe oublié</h3>
-        <p class="text text-muted mb-4">
-          Nous avons besoin de votre adresse mail pour pouvoir réinitialiser
-          votre mot de passe.
-        </p>
-        <form>
-          <div class="mb-3">
-            <label class="form-label">Adresse e-mail</label>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Mot de passe oublié</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" />
 
-            <input
-              type="email"
-              class="form-control"
-              placeholder="exemple@mail.com"
-            />
-          </div>
+  <style>
+    body {
+      background: #f4f6f981;
+      height: 100vh;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
 
-         
+    .forgot-password-card {
+      width: 100%;
+      max-width: 380px;
+    }
+  </style>
+</head>
 
-          <button class="btn btn-primary w-100">
-            Réinitialiser le mot de passe
-          </button>
+<body>
+  <div class="card shadow forgot-password-card">
+    <div class="card-body p-4">
+      <h1 class="text-center mb-4 fs-3">Mot de passe oublié</h1>
+      <p class="text text-muted mb-4">
+        Nous avons besoin de votre adresse mail pour pouvoir réinitialiser
+        votre mot de passe.
+      </p>
+      <form>
+        <div class="mb-3">
+          <label class="form-label" for="email">Adresse e-mail</label>
 
-          <div class="text-center mt-3">
-            <a
-              href="../html/page_de_connexion.html"
-              class="text-decoration-none"
-              >Retour à la connexion</a
-            >
-          </div>
-        </form>
-      </div>
+          <input type="email" class="form-control" placeholder="exemple@mail.com" required />
+        </div>
+
+
+
+        <button class="btn btn-primary w-100" type="submit">
+          Réinitialiser 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>
+        </div>
+      </form>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-  </body>
-</html>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/connexion/html/page_de_connexion.html b/connexion/html/page_de_connexion.html
index 5c795c8..13009d2 100644
--- a/connexion/html/page_de_connexion.html
+++ b/connexion/html/page_de_connexion.html
@@ -26,21 +26,23 @@
   <body>
     <div class="card shadow login-card">
       <div class="card-body p-4">
-        <h3 class="text-center mb-4">Connexion Admin</h3>
+        <h1 class="text-center mb-4 fs-3">Connexion Admin</h1>
 
         <form>
           <div class="mb-3">
 
-            <label class="form-label">Adresse e-mail ou numéro de téléphone </label>
+            <label class="form-label">Adresse e-mail  </label>
             <input
-              type="text"
+              type="email"
               class="form-control"
               id="textInput"
+              />
+          </div>
 
-        <form>
+     
           <div class="mb-3">
 
-            <label class="form-label">Mot de passe</label>
+            <label class="form-label" for="password">Mot de passe</label>
             <input
               type="password"
               class="form-control"
@@ -53,7 +55,7 @@
             </label>
           </div>
 
-          <button class="btn btn-primary w-100">Se connecter</button>
+          <button class="btn btn-primary w-100" type="submit">Se connecter</button>
 
           <div class="text-center mt-3">
             <a href="../html/mot_de_passe_oublie.html" class="text-decoration-none">Mot de passe oublié ?</a>
@@ -62,6 +64,7 @@
       </div>
     </div>
     <script src="../js/page_de_connexion.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   </body>
 </html>
+  
\ No newline at end of file
diff --git a/connexion/html/reinitialisation_mot_de_passe.html b/connexion/html/reinitialisation_mot_de_passe.html
index 8624328..815bf40 100644
--- a/connexion/html/reinitialisation_mot_de_passe.html
+++ b/connexion/html/reinitialisation_mot_de_passe.html
@@ -26,7 +26,7 @@
   <body>
     <div class="card shadow reset-password-card">
       <div class="card-body p-4">
-        <h3 class="text-center mb-4">Nouveau mot de passe</h3>
+        <h1 class="text-center mb-4 fs-3">Nouveau mot de passe</h1>
         <p class="text text-muted mb-4">
           Pour réinitialiser votre mot de passe, veuillez saisir un nouveau mot
           de passe ainsi qu'une confirmation.
@@ -35,7 +35,7 @@
         
           <div
             id="errorMsg"
-            class="alert alert-danger text-center"
+            class="alert alert-danger text-center fs-1"
             style="display: none"
           >
             Les mots de passe ne correspondent pas.
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..a2429b1
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,50 @@
+/*=============================================================================
+Header Navbar Styles
+=============================================================================*/
+
+.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;
+      }
+
+  }
+
+
+ /*=============================================================================
+    Image Preview Styles
+    =============================================================================*/ 
+    
+  .img-preview {
+      max-width: 150px;
+      border-radius: 8px;
+      display: none;
+      /* cachée tant qu'il n'y a pas d'image */
+  }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 890a3bd..1bfd43d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -76,7 +76,8 @@
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
-      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "peer": true
     },
     "node_modules/tinymce": {
       "version": "8.2.2",
diff --git a/prestations/html/ajouter_avant_apres.html b/prestations/html/ajouter_avant_apres.html
index 150660a..92a4caf 100644
--- a/prestations/html/ajouter_avant_apres.html
+++ b/prestations/html/ajouter_avant_apres.html
@@ -8,55 +8,8 @@
     <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="node_modules/bs-icon/icons.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
-
-    <style>
-        .navbar-brand {
-            font-size: 1.2rem;
-            line-height: 1;
-            padding-top: 0.25rem;
-            padding-bottom: 0.25rem;
-        }
-
-        .brand-sep {
-            height: 1.2rem;
-        }
-
-
-        @media (max-width: 1399.98px) {
-            .navbar .nav-item {
-                background-color: var(--bs-light);
-                border: 1px solid var(--bs-border-color);
-                border-radius: .25rem;
-                margin-bottom: .375rem;
-                text-align: center;
-            }
-
-            #navbarSupportedContent>ul:first-child {
-                margin-top: .5rem;
-            }
-
-            #navbarSupportedContent>ul:last-child {
-                margin-top: 1rem;
-            }
-
-            .bi {
-                display: none;
-            }
-
-        }
-
-        .img-preview {
-            max-width: 150px;
-            border-radius: 8px;
-            display: none;
-            /* cachée tant qu'il n'y a pas d'image */
-        }
-
-        .container {
-            max-width: 600px;
-            margin-top: 50px;
-        }
-    </style>
+    <link rel="stylesheet" href="../../css/style.css">
+    
 </head>
 
 
@@ -129,13 +82,13 @@
     </header>
 
 
-    <div class="container">
+    <div class="container mt-5">
 
-        <h1 class="mb-5 text-center">Ajouter une paire avant/après</h1>
+        <h1 class="mb-4 text-center">Ajouter un résultat en images (Avant / Après)</h1>
 
         <!-- Message succès -->
         <div id="successMsg" class="alert alert-success d-none">
-            Nouvelle paire ajoutée avec succès !
+            Nouveau résultat ajouté avec succès !
         </div>
 
         <!-- Message erreur -->
@@ -152,7 +105,7 @@
 
             <!-- Titre / label -->
             <div class="mb-3">
-                <label class="form-label fw-bold" for="pairTitle">Titre de la paire (obligatoire)</label>
+                <label class="form-label fw-bold" for="pairTitle">Titre du résultat (obligatoire)</label>
                 <input type="text" id="pairTitle" class="form-control" required>
             </div>
 
diff --git a/prestations/html/liste_avant_apres.html b/prestations/html/liste_avant_apres.html
index fbec2de..a6d829e 100644
--- a/prestations/html/liste_avant_apres.html
+++ b/prestations/html/liste_avant_apres.html
@@ -10,8 +10,8 @@
 
 <body class="bg-light py-4 py-md-5">
 
-  <div class="container" style="max-width: 1000px;">
-    <h1 class="mb-4 mb-md-5 text-center">Liste des paires avant/après</h1>
+  <div class="container">
+    <h1 class="mb-4 mb-md-5 text-center">Liste des résultat avant/après</h1>
 
     <!-- Message succès -->
     <div id="succesDeleteMsg" class="alert alert-success d-none">
