diff --git a/pages/css/devis.js b/pages/css/devis.js
index df3fb69..6ea2548 100644
--- a/pages/css/devis.js
+++ b/pages/css/devis.js
@@ -11,7 +11,6 @@ const txt_restant = document.getElementById("txt_restant");
 const MAX = 500;
 const formulaire = document.querySelector("form");
 console.log("dans le local : ", localStorage.getItem("nbVehicules"));
-
 const services = [
   {
     nom: "Géolocalisation",
@@ -31,6 +30,7 @@ const services = [
   },
 ];
 const corps = document.getElementById("services");
+const horloge = document.getElementById("horloge");
 let lignes = "";
 let nbVehicules;
 if (localStorage.getItem("nbVehicules") !== null) {
@@ -86,3 +86,11 @@ for (const service of services) {
   </tr>`;
 }
 corps.innerHTML = lignes;
+document.getElementById("color").addEventListener("click", function () {
+  document.body.classList.toggle("sombre");
+});
+function heure() {
+  horloge.textContent = new Date().toLocaleTimeString();
+}
+heure();
+setInterval(heure, 1000);
diff --git a/pages/css/style_services.css b/pages/css/style_services.css
index 63a6cf3..99a8702 100644
--- a/pages/css/style_services.css
+++ b/pages/css/style_services.css
@@ -42,6 +42,8 @@ h1 {
     position: fixed;
     bottom: 0;
     width: 100%;
+    display: flex;
+    justify-content: space-around;
 }
 #nav_barre {
     display: flex;
@@ -211,3 +213,7 @@ p {
     gap: 6px;
     line-height: normal;
 }
+body.sombre {
+    background-color: #1d2733;
+    color: white;
+}
diff --git a/pages/services.html b/pages/services.html
index 847133e..2f56c43 100644
--- a/pages/services.html
+++ b/pages/services.html
@@ -67,7 +67,9 @@
         </div>
         </div>
         <footer class="footer">
+            <button id="color">Mode sombre</button>
             stagiaires rpz echoes
+            <span id="horloge"></span>
         </footer>
         <script src="css/devis.js"></script>
     </body>