diff --git a/contact.js b/contact.js
index 5b5da85..e4ab96d 100644
--- a/contact.js
+++ b/contact.js
@@ -21,6 +21,7 @@ function rafraichirCompteur() {
   compteur.textContent = restant;
   compteur.style.color = restant < 50 ? "red" : "black";
   motCaractere.textContent = restant <= 1 ? "caractère" : "caractères";
+  localStorage.setItem("brouillon", zoneMessage.value);
 }
 
 zoneMessage.addEventListener("input", rafraichirCompteur);
@@ -37,16 +38,29 @@ formulaire.addEventListener("submit", function (evenement) {
   }
 });
 
-function creerNavbar() {
+function creerNavbar(pageActive) {
   return `
         <div id="nav_barre" class="shadow">
             <h1>FleetZen</h1>
             <div id="buttons">
-                <button class="instyled">contact</button>
-                <a href="services.html"><button class="styled">services</button></a>
+                <button class="${pageActive === "contact" ? "instyled" : "styled"}">contact</button>
+                <a href="services.html"><button class="${pageActive === "services" ? "instyled" : "styled"}">services</button></a>
                 <a href="../index.html"><button class="styled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>retour</button></a>
             </div>
         </div>`;
 }
 
-document.body.insertAdjacentHTML("afterbegin", creerNavbar());
+document.body.insertAdjacentHTML("afterbegin", creerNavbar("contact"));
+
+document.getElementById("theme").addEventListener("click", function () {
+  document.body.classList.toggle("sombre");
+});
+
+const titres = document.querySelectorAll(".q-titre");
+
+titres.forEach(function (titre) {
+  titre.addEventListener("click", function () {
+    const reponse = titre.nextElementSibling;
+    reponse.classList.toggle("ouverte");
+  });
+});
diff --git a/css/style.css b/css/style.css
index a221937..8f48927 100644
--- a/css/style.css
+++ b/css/style.css
@@ -42,6 +42,7 @@ h1 {
     position: fixed;
     bottom: 0;
     width: 100%;
+    border-top: 2px solid;
 }
 #nav_barre {
     display: flex;
diff --git a/pages/contact.css b/pages/contact.css
index a9d25ac..79934ac 100644
--- a/pages/contact.css
+++ b/pages/contact.css
@@ -7,7 +7,7 @@ body {
     height: 100%;
     background-color: lightblue;
     margin: 0;
-    padding-bottom: 60px;
+    padding-bottom: 65px;
 }
 
 #nav_barre {
@@ -124,7 +124,7 @@ td {
 #titre_tableau {
     font-size: 25px;
     color: seagreen;
-    padding-left: 200px;
+    padding-left: 10px;
 }
 
 .form {
@@ -163,7 +163,21 @@ textarea {
     position: fixed;
     bottom: 0;
     width: 100%;
+    border-top: 2px solid;
+    padding-bottom: 10px;
 }
 #statut_horaires {
     font-size: 15px;
 }
+
+body.sombre {
+    background-color: #1d2733;
+    color: white;
+}
+
+.q-reponse {
+    display: none;
+}
+.q-reponse.ouverte {
+    display: block;
+}
diff --git a/pages/contact.html b/pages/contact.html
index 840adfa..9b37a5d 100644
--- a/pages/contact.html
+++ b/pages/contact.html
@@ -8,9 +8,13 @@
         <html lang="fr">
     </head>
     <body>
-    <p id= titre_tableau>
-        <b>Les développeurs de ce  site</b>
-    </p>
+        <p id= titre_tableau>
+            <b>Les développeurs de ce  site</b>
+        </p>
+        <p>L'équipe compte <span id="nb_membres"></span> personne(s).</p>
+        <input type="search" id="recherche" placeholder="Rechercher un membre…">
+        <button type="button" id="trier">Trier A → Z</button>
+
         <table border=1 class="table">
             <thead>
                 <tr>
@@ -19,16 +23,8 @@
                     <th>Parties crées</th>
                 </tr>
             </thead>
-            <tr>
-                <td>Mélissa</td>
-                <td>Stagiaire</td>
-                <td>Page contact</td>
-            </tr>
-            <tr>
-                <td>Guillaume</td>
-                <td>Stagiaire</td>
-                <td>Page services</td>
-            </tr>
+            <tbody id="corps_equipe">
+            </tbody>
         </table>
 
         <div class="form">
@@ -55,9 +51,24 @@
 
             </form>
         </div>
+
+        <section class="faq">
+            <h3>Questions fréquentes</h3>
+            <div class="question">
+                <button class="q-titre" type="button">Comment suivre ma flotte en temps réel ?</button>
+                <p class="q-reponse">Grâce à notre service de géolocalisation, accessible 24h/24.</p>
+            </div>
+            <div class="question">
+                <button class="q-titre" type="button">Puis-je résilier à tout moment ?</button>
+                <p class="q-reponse">Oui, sans frais, depuis votre espace client.</p>
+            </div>
+        </section>
+
         <footer class="footer">
             stagiaires rpz echoes
+            <button type="button" id="theme"> Mode sombre</button>
         </footer>
+        <script src="../equipe.js"></script>
         <script src="../contact.js"></script>
     </body>
 </html>

Parties crées
Mélissa	Stagiaire	Page contact
Guillaume	Stagiaire	Page services