style(reader): améliorer la toolbar et l'UI du mode scroll

- Corriger la troncature de la toolbar (max-height 4rem → 5rem)
- Animer la toolbar en translateY pour un effet "bloc uni" avec le header
- Corriger le bug d'auto-hide du header après switch simple → scroll
- Augmenter la taille du titre de chapitre dans la toolbar (text-sm font-medium)
- Harmoniser le bouton scroll-to-top avec le style des ToolbarButtons
- Ajouter support de prop `class` sur les labels de ToolbarSection

assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue

@@ -1,10 +1,5 @@
 <template>
     <div class="infinite-reader" ref="containerRef">
-        <!-- Navigation en haut -->
-        <div class="navigation-wrapper top">
-            <ChapterNavigation position="top" />
-        </div>
-
         <div v-for="(page, index) in pages" :key="index" class="page-wrapper">
             <div v-if="!page?.url" class="loading">
                 <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
@@ -12,11 +7,6 @@
             <ReaderPage v-else :page-data="page" :page-number="index + 1" :zoom="zoom" :double-page-mode="doublePageMode" loading="lazy" />
         </div>
 
-        <!-- Navigation en bas -->
-        <div class="navigation-wrapper bottom">
-            <ChapterNavigation position="bottom" />
-        </div>
-
         <!-- Bouton flottant pour revenir en haut -->
         <Transition
             enter-active-class="transition-all duration-300 ease-out"
@@ -29,13 +19,14 @@
             <button
                 v-show="showFloatingButtons"
                 @click="scrollToTop"
-                class="fixed bottom-6 right-6 z-[9999] bg-blue-600 hover:bg-blue-700 text-white w-12 h-12 rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-200 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                class="fixed bottom-6 right-6 z-[9999] bg-gray-800 hover:bg-gray-700 text-white hover:text-green-500 flex flex-col items-center justify-center w-12 h-12 rounded shadow-lg transition-colors duration-200"
                 title="Revenir en haut"
                 type="button"
             >
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                 </svg>
+                <span class="text-xs hidden sm:inline">Haut</span>
             </button>
         </Transition>
     </div>
@@ -44,7 +35,6 @@
 <script setup>
     import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useHeaderStore } from '../../../../shared/stores/headerStore';
-import ChapterNavigation from './ChapterNavigation.vue';
 import ReaderPage from './ReaderPage.vue';
 
     const props = defineProps({
@@ -169,10 +159,8 @@ import ReaderPage from './ReaderPage.vue';
             scrollDirection = 'up';
         }
 
-        // Gestion du header auto-hide (seulement si largeur < 1200px)
-        if (windowWidth.value < 1200) {
-            headerStore.updateScrollDirection(scrollTop);
-        }
+        // Gestion du header auto-hide (header : seulement si largeur < 1200px, toolbar : toujours)
+        headerStore.updateScrollDirection(scrollTop);
 
         // Gestion de la visibilité des boutons flottants (même condition pour tous)
         // Afficher si on scroll et qu'on est à plus de 300px
@@ -304,16 +292,14 @@ import ReaderPage from './ReaderPage.vue';
 
 <style lang="postcss" scoped>
     .infinite-reader {
-        @apply flex-1 flex flex-col items-center overflow-y-auto relative;
+        @apply flex-1 flex flex-col items-center overflow-y-auto relative min-h-0;
         /* Réduction du padding sur mobile */
         @apply py-2 sm:py-8;
-        height: calc(100vh - 8rem);
         scroll-behavior: smooth;
     }
 
     .page-wrapper {
-        @apply w-full flex justify-center min-h-[200px];
-        /* Réduction des marges sur mobile */
+        @apply w-full flex justify-center;
         @apply mb-2 sm:mb-4 px-1 sm:px-4;
     }
 
@@ -342,15 +328,4 @@ import ReaderPage from './ReaderPage.vue';
         @apply text-red-500 text-xl bg-red-500/10 rounded-lg;
     }
 
-    .navigation-wrapper {
-        @apply w-full max-w-4xl mx-auto px-4 mb-6;
-    }
-
-    .navigation-wrapper.top {
-        @apply mt-4;
-    }
-
-    .navigation-wrapper.bottom {
-        @apply mt-8 mb-4;
-    }
 </style>