diff --git a/StylesCommentaire.Css b/StylesCommentaire.Css
index ef2d8f0..e6161d0 100644
--- a/StylesCommentaire.Css
+++ b/StylesCommentaire.Css
@@ -43,6 +43,7 @@ body {
   
   .navigateur ul {
     display: flex;
+    justify-content: left;
     list-style: none;
     padding: 0;
     margin: 0;
@@ -57,13 +58,28 @@ body {
     color: black;
     font-weight: bold;
     margin: 0 15px;
-}
+  }
 
-.navigateur a {
-  text-decoration: none;
-  color: black;
-  font-weight: bold;
-}
+  .navigateur a {
+    text-decoration: none;
+    color: black;
+    font-weight: bold;
+  }
+
+  .navigateur button {
+    position: absolute;
+    left: 10px;
+    top: 3px;
+    width: 100px;
+    height: 30px;
+    background-color: #e169f4;
+    color: white;
+    border: red;
+    border-style:solid;
+    border-width: 2px;
+    border-color: #cf69e4;
+    cursor: pointer;
+  }
 
 /* Contenu principal */
 .contenuecommentaire {
@@ -150,15 +166,6 @@ form textarea {
   background-color: deeppink;
 }
 
-footer {
-  text-align: center;
-  padding: 10px;
-  background-color: hotpink;
-  color: white;
-  margin-top: 20px;
-  font-size: 16px;
-}
-
 
 /*
 @media (max-width: 768px) {
diff --git a/StylesProfil.css b/StylesProfil.css
index 8c1d692..407cad3 100644
--- a/StylesProfil.css
+++ b/StylesProfil.css
@@ -58,6 +58,21 @@ body {
   font-weight: bold;
 }
 
+  .navigateur button {
+    position: absolute;
+    left: 10px;
+    top: 3px;
+    width: 100px;
+    height: 30px;
+    background-color: #e169f4;
+    color: white;
+    border: red;
+    border-style:solid;
+    border-width: 2px;
+    border-color: #cf69e4;
+    cursor: pointer;
+  }
+
 .contenueProfil {
   background-color: white;
   margin: 20px auto;
diff --git a/commentaire.html b/commentaire.html
index 3019a91..4f3f258 100644
--- a/commentaire.html
+++ b/commentaire.html
@@ -10,16 +10,17 @@
 <body>
     <nav class="navigateur">
         <ul>
+          <button onclick="darkFunction()" id="Mode" title="Passer skibidiblog en sombre">Mode sombre</button>
           <li class="btn"><a href="index.html"> Accueil </a></li>
           <li class="btn"><a href="profil.html"> Profil </a></li>
           <li class="btn"><a href="#"> Commentaire </a></li>
         </ul>
     </nav>
+    
 
     <!-- Bouton back to up permet de remonter en haut de la page -->
-    <button onclick="topFunction()" id="Haut" title="Retour en haut">⬆️</button>
+    <button id="Haut">⬆️</button>
     
-  <button onclick="darkFunction()" id="Mode sombre" title="Passer skibidiblog en sombre">Mode</button>
 
       <header class="titreBlog">
         <h1>SKIBIDIBLOG</h1>
diff --git a/index.html b/index.html
index 3ed42f7..738488c 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
   <!-- endroit ou on pourrat naviger entre les différente page du site (remplacer les # par les lier)-->
   <nav class="navigateur">
     <ul>
+      <button onclick="darkFunction()" id="Mode" title="Passer skibidiblog en sombre">Mode sombre</button>
       <li class="btn"><a href="#"> Acceuil </a></li>
       <li class="btn"><a href="profil.html"> Profil </a></li>
       <li class="btn"><a href="commentaire.html"> Commentaire </a></li>
@@ -22,9 +23,8 @@
   <!-- bouton back to up permet de remonter en haut de la page -->
 
 
-  <button onclick="darkFunction()" id="Mode sombre" title="Passer skibidiblog en sombre">Mode sombre</button>
-  <button onclick="cRetour()" id="Haut" title="retour en haut">⬆️</button>
-
+    <button id="Haut">⬆️</button>
+    
  
   <!-- le header permet de créer une sorte d'en tête avec un titre-->
  <header class="titreBlog">
diff --git a/main.js b/main.js
index 831eeea..5e676c8 100644
--- a/main.js
+++ b/main.js
@@ -2,8 +2,22 @@ function darkFunction() {
     var element = document.body;
     element.classList.toggle("dark-mode");
   }
-function cRetour() {
-  window.onscroll = function(ev) {
-    document.getElementById("cRetour").className = (window.pageYOffset > 100) ? "cVisible" : "cInvisible";
-  };
-}
\ No newline at end of file
+// Sélection du bouton
+const HautButton = document.getElementById("Haut");
+
+// Ajouter un écouteur sur le défilement de la fenêtre
+window.addEventListener("scroll", () => {
+    if (window.scrollY > 300) {
+        HautButton.style.display = "block";
+    } else {
+        HautButton.style.display = "none";
+    }
+});
+
+// Ajouter un écouteur sur le clic du bouton
+HautButton.addEventListener("click", () => {
+    window.scrollTo({
+        top: 0,
+        behavior: "smooth", // Défilement fluide
+    });
+});
\ No newline at end of file
diff --git a/profil.html b/profil.html
index b4ab1ed..77c5b89 100644
--- a/profil.html
+++ b/profil.html
@@ -10,13 +10,15 @@
     <!-- Endroit où l'on pourra naviguer entre les différentes pages du site (remplacer les # par les liens) -->
     <nav class="navigateur">
         <ul>
+            <button onclick="darkFunction()" id="Mode" title="Passer skibidiblog en sombre">Mode sombre</button>
             <li class="btn"><a href="index.html"> Accueil </a></li>
             <li class="btn"><a href="#"> Profil </a></li>
             <li class="btn"><a href="commentaire.html"> Commentaire </a></li>
         </ul>
     </nav>
   
-  <button onclick="darkFunction()" id="Mode sombre" title="Passer skibidiblog en sombre">Mode sombre</button>
+    <button id="Haut">⬆️</button>
+    
   
     <!-- le header permet de créer une sorte d'en tête avec un titre-->
  <header class="titreBlog">
diff --git a/stylesIndex.css b/stylesIndex.css
index 0682309..317fc19 100644
--- a/stylesIndex.css
+++ b/stylesIndex.css
@@ -32,6 +32,21 @@ body {
   font-size: 16px;
 }
 
+  .navigateur button {
+    position: absolute;
+    left: 10px;
+    top: 3px;
+    width: 100px;
+    height: 30px;
+    background-color: #e169f4;
+    color: white;
+    border: red;
+    border-style:solid;
+    border-width: 2px;
+    border-color: #cf69e4;
+    cursor: pointer;
+  }
+
 .titreBlog {
   text-align: center;
   margin: 20px 0;
