diff --git a/contact.js b/contact.js
index 9dd650d..5b5da85 100644
--- a/contact.js
+++ b/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());
diff --git a/pages/contact.css b/pages/contact.css
index 0e96496..a9d25ac 100644
--- a/pages/contact.css
+++ b/pages/contact.css
@@ -130,7 +130,7 @@ td {
 .form {
     display: flex;
     width: 570px;
-    height: 320px;
+    height: 380px;
     border: 3px solid green;
     align-items: center;
     flex-direction: column;
@@ -164,3 +164,6 @@ textarea {
     bottom: 0;
     width: 100%;
 }
+#statut_horaires {
+    font-size: 15px;
+}
diff --git a/pages/contact.html b/pages/contact.html
index df0f93b..840adfa 100644
--- a/pages/contact.html
+++ b/pages/contact.html
@@ -8,16 +8,6 @@
         <html lang="fr">
     </head>
     <body>
-        <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>
-
-
     <p id= titre_tableau>
         <b>Les développeurs de ce  site</b>
     </p>
@@ -43,6 +33,7 @@
 
         <div class="form">
             <p><b>Nous contacter</b></p>
+            <p id="statut_horaires"></p>
             <form method="get" action="">
                 <p>
                     <label for="prenom">Votre prénom :</label>
@@ -50,15 +41,16 @@
                 </p>
                 <p>
                     <label for="e_mail">Votre e-mail:</label>
-                    <input type="e_mail" name="email" id="email" placeholder="Ex. : stage2@echoes.solutions" size="50" maxlength="40">
+                    <input type="email" name="email" id="email" placeholder="Ex. : stage2@echoes.solutions" size="50" maxlength="40">
                 </p>
                 <div>
                     <label for="contacter">Des questions a nous poser?</label><br>
                     <textarea name="contacter" id="contacter" rows="6" cols="40" maxlength="500"></textarea>
-                    <p class=small>Il vous reste <span id="restant">500</span> caractères.</p>
+                    <p class=small>Il vous reste <span id="restant">500</span> <span id="mot">caractères</span>.</p>
                 </div>
                 <p>
                     <button>Envoyer</button>
+                    <button type="button" id="effacer">Effacer</button>
                 </p>
 
             </form>
