added JavaScript Stuff

contact.js

@@ -1,10 +1,52 @@
 const zoneMessage = document.getElementById("contacter");
 const compteur = document.getElementById("restant");
+const motCaractere = document.getElementById("mot");
+const boutonEffacer = document.getElementById("effacer");
+const formulaire = document.querySelector("form");
+const badge = document.getElementById("statut_horaires");
+const heure = new Date().getHours();
 
 const MAX = 500;
 
-zoneMessage.addEventListener("input", function () {
-  const dejaTape = zoneMessage.value.length;
-  compteur.textContent = MAX - dejaTape;
-  compteur.style.color = MAX - dejaTape < 50 ? "red" : "black";
+if (heure >= 9 && heure < 18) {
+  badge.textContent = "✅ Nous sommes ouverts (9h–18h)";
+  badge.style.color = "green";
+} else {
+  badge.textContent = "🔴 Fermé — écrivez-nous, on répond dès l'ouverture !";
+  badge.style.color = "red";
+}
+
+function rafraichirCompteur() {
+  const restant = MAX - zoneMessage.value.length;
+  compteur.textContent = restant;
+  compteur.style.color = restant < 50 ? "red" : "black";
+  motCaractere.textContent = restant <= 1 ? "caractère" : "caractères";
+}
+
+zoneMessage.addEventListener("input", rafraichirCompteur);
+
+boutonEffacer.addEventListener("click", function () {
+  zoneMessage.value = "";
+  rafraichirCompteur();
 });
+
+formulaire.addEventListener("submit", function (evenement) {
+  if (zoneMessage.value.trim() === "") {
+    evenement.preventDefault();
+    alert("Merci d'écrire un message avant d'envoyer !");
+  }
+});
+
+function creerNavbar() {
+  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>
+                <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());