ajout d'un bouton "retour en haut de page"

assets/css/public.css

@@ -467,6 +467,38 @@ body {
     color: var(--accent-primary);
 }
 
+/* Bouton retour en haut */
+.scroll-top {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    border: 1px solid var(--border-color);
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    cursor: pointer;
+    z-index: 100;
+}
+
+.scroll-top.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.scroll-top:hover {
+    background-color: var(--accent-primary);
+    color: var(--text-tertiary);
+}
+
 /* Responsive */
 @media (max-width: 1200px) {
     :root {

chapitre.php

@@ -114,5 +114,30 @@ $config = Config::load();
     <div class="back-to-home">
         <a href="index.php">&larr; Retour à l'accueil</a> | <a href="roman.php?id=<?= urlencode($storyId) ?>">&larr; Retour au roman</a>
     </div>
+
+    <button class="scroll-top" aria-label="Retour en haut de page">↑</button>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const scrollTopBtn = document.querySelector('.scroll-top');
+        
+        // Afficher/masquer le bouton
+        window.addEventListener('scroll', function() {
+            if (window.pageYOffset > 300) {
+                scrollTopBtn.classList.add('visible');
+            } else {
+                scrollTopBtn.classList.remove('visible');
+            }
+        });
+        
+        // Action de retour en haut
+        scrollTopBtn.addEventListener('click', function() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+    });
+    </script>
 </body>
 </html>

index.php

@@ -87,5 +87,30 @@ function formatDate($date) {
             <?php endforeach; ?>
         </div>
     </main>
+
+    <button class="scroll-top" aria-label="Retour en haut de page">↑</button>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const scrollTopBtn = document.querySelector('.scroll-top');
+        
+        // Afficher/masquer le bouton
+        window.addEventListener('scroll', function() {
+            if (window.pageYOffset > 300) {
+                scrollTopBtn.classList.add('visible');
+            } else {
+                scrollTopBtn.classList.remove('visible');
+            }
+        });
+        
+        // Action de retour en haut
+        scrollTopBtn.addEventListener('click', function() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+    });
+    </script>
 </body>
 </html>

roman.php

@@ -83,5 +83,30 @@ $config = Config::load();
             <a href="index.php">&larr; Retour à l'accueil</a>
         </div>
     <?php endif; ?>
+
+    <button class="scroll-top" aria-label="Retour en haut de page">↑</button>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const scrollTopBtn = document.querySelector('.scroll-top');
+        
+        // Afficher/masquer le bouton
+        window.addEventListener('scroll', function() {
+            if (window.pageYOffset > 300) {
+                scrollTopBtn.classList.add('visible');
+            } else {
+                scrollTopBtn.classList.remove('visible');
+            }
+        });
+        
+        // Action de retour en haut
+        scrollTopBtn.addEventListener('click', function() {
+            window.scrollTo({
+                top: 0,
+                behavior: 'smooth'
+            });
+        });
+    });
+    </script>
 </body>
 </html>