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/ReaderPage.vue

@@ -1,5 +1,8 @@
 <template>
-    <div class="page-container" :style="{ transform: `scale(${zoom})` }">
+    <div
+        class="page-container"
+        :style="containerStyle"
+    >
         <div v-if="!pageData" class="error">Aucune donnée d'image disponible</div>
         <div v-else-if="!pageData.url" class="error">URL de l'image manquante</div>
 
@@ -79,6 +82,16 @@ import { useReaderStore } from '../../application/store/readerStore';
     });
 
     const store = useReaderStore();
+
+    // En mode single : zoom via la propriété CSS `zoom` (affecte le layout → scrollbars naturelles)
+    // En mode infinite : zoom via transform: scale (pas d'impact layout souhaité)
+    const containerStyle = computed(() => {
+        if (store.readingMode === 'single') {
+            return { zoom: props.zoom };
+        }
+        return { transform: `scale(${props.zoom})` };
+    });
+
     const imageRef = ref(null);
     const scrollContainerRef = ref(null);
     const naturalWidth = ref(0);
@@ -187,13 +200,27 @@ import { useReaderStore } from '../../application/store/readerStore';
     });
 
     const imageStyle = computed(() => {
-        if (!maxWidth.value) return {};
+        // Mode simple : laisser CSS contraindre les deux dimensions proportionnellement
+        if (store.readingMode === 'single') {
+            return {
+                maxWidth: '100%',
+                maxHeight: '100%',
+                width: 'auto',
+                height: 'auto',
+            };
+        }
 
-        return {
-            width: `${maxWidth.value}px`,
+        // Mode scroll : fixer la largeur, hauteur libre
+        const style = {
             height: 'auto',
-            maxWidth: '100%'
+            maxWidth: '100%',
         };
+
+        if (maxWidth.value) {
+            style.width = `${maxWidth.value}px`;
+        }
+
+        return style;
     });
 
     // Styles spéciaux pour les doubles pages
@@ -279,17 +306,15 @@ import { useReaderStore } from '../../application/store/readerStore';
 
 <style lang="postcss" scoped>
     .page-container {
-        @apply flex-1 flex items-center justify-center overflow-hidden;
+        @apply flex items-center justify-center;
         transform-origin: center;
-        /* Réduction des marges sur mobile */
         @apply p-0 sm:p-2;
     }
 
     .page-image {
         @apply object-contain;
-        /* La largeur est gérée par le JavaScript, on garde juste les contraintes max */
+        /* La largeur et max-height sont gérées par imageStyle selon le mode */
         max-width: 100%;
-        max-height: 100%;
     }
 
     /* Styles pour les doubles pages sur mobile */