Change the "up to top" button

Herisson/gallery.html.j2

@@ -34,6 +34,10 @@
             </div>
         </main>
 
-        <a class="to-the-top" href="#">Haut de page</a>
+        <div id="la-haut" class="entrecoupant">
+            <button>Retourner là-haut</button>
+        </div>
+
+        <script type="text/javascript" src="scripts/retour-en-haut.js"></script>
     </body>
 </html>

Herisson/index.html.j2

@@ -36,5 +36,11 @@
                 </div>
             </div>
         </main>
+
+        <div id="la-haut" class="entrecoupant">
+            <button>Retourner là-haut</button>
+        </div>
+
+        <script type="text/javascript" src="scripts/retour-en-haut.js"></script>
     </body>
 </html>

Herisson/scripts/retour-en-haut.js

@@ -0,0 +1,14 @@
+(function () {
+    var backToTopContainer = document.querySelector('#la-haut');
+    var intersectionObserver = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+            entry.target.classList.toggle('entrecoupant', entry.isIntersecting);
+        });
+    });
+    intersectionObserver.observe(backToTopContainer);
+
+    var backToTopButton = backToTopContainer.querySelector('button');
+    backToTopButton.onclick = function() {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+}());

Herisson/style/main.css

@@ -22,6 +22,14 @@
     box-sizing: border-box;
 }
 
+:root {
+    --main-color: #2a2230;
+    --main-color-muted: #665e6c;
+    --secondary-color: #c02b43;
+    --link-color: #a6253a;
+    --contrast-color: #f8f6ff;
+}
+
 html,
 body {
     margin: 0;
@@ -214,24 +222,46 @@ img {
     height: 12rem;
 }
 
-.to-the-top {
+/* Section liée au bouton "haut de page" */
+#la-haut {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    height: 100vh;
+    width: 1px;
+}
+
+#la-haut button {
     position: fixed;
-    bottom: 2rem;
-    right: 2rem;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
 
-    padding: .25rem .5rem;
+    padding: .5rem 1rem;
 
-    color: #fff;
-    text-decoration: none;
-    font-size: .9rem;
+    opacity: 1;
+    visibility: visible;
+
+    transition: all 0.2s ease;
 
-    background-color: #404c9e;
-    border-radius: .25rem;
+    color: var(--main-color);
 
-    transition: background .2s ease-in-out;
+    background-color: var(--contrast-color);
+    border: 2px solid var(--main-color);
+    border-radius: 2rem;
 }
-.to-the-top:hover {
-    color: #fff;
+#la-haut button::after {
+    padding-left: .25rem;
 
-    background-color: #7586f0;
+    content: "🎈";
+}
+#la-haut button:hover {
+    color: var(--contrast-color);
+
+    background-color: var(--main-color);
+}
+#la-haut.entrecoupant button {
+    opacity: 0;
+    visibility: hidden;
 }