Added even more JavaScript stuff: FAQ, dark mode and a navbar

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");
+  });
+});