feat: ajout de la gestion de l'auto-hide du header et amélioration de la réactivité des composants en fonction de la taille de la fenêtre, ainsi que des optimisations CSS pour une meilleure expérience utilisateur sur mobile.

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

@@ -44,6 +44,7 @@
 
 <script setup>
     import { onMounted, onUnmounted, watch } from 'vue';
+import { useHeaderStore } from '../../../../shared/stores/headerStore';
 import { useReaderStore } from '../../application/store/readerStore';
 import InfiniteReader from './InfiniteReader.vue';
 import ReaderControls from './ReaderControls.vue';
@@ -62,9 +63,16 @@ import SingleModeReader from './SingleModeReader.vue';
     });
 
     const store = useReaderStore();
+    const headerStore = useHeaderStore();
 
     const toggleReadingMode = () => {
-        store.setReadingMode(store.readingMode === 'single' ? 'infinite' : 'single');
+        const newMode = store.readingMode === 'single' ? 'infinite' : 'single';
+        store.setReadingMode(newMode);
+
+        // Désactiver l'auto-hide si on passe en mode single
+        if (newMode === 'single') {
+            headerStore.disableAutoHide();
+        }
     };
 
     const toggleReadingDirection = () => {
@@ -111,12 +119,15 @@ import SingleModeReader from './SingleModeReader.vue';
 
     onUnmounted(() => {
         window.removeEventListener('keydown', handleKeyPress);
+        // S'assurer que l'auto-hide est désactivé en quittant le lecteur
+        headerStore.disableAutoHide();
     });
 </script>
 
 <style lang="postcss" scoped>
     .chapter-reader {
         @apply w-full h-full flex flex-col items-center justify-center bg-gray-900 text-white;
+        @apply p-0 sm:p-2;
     }
 
     .loading {
@@ -129,6 +140,7 @@ import SingleModeReader from './SingleModeReader.vue';
 
     .reader-content {
         @apply w-full h-full flex flex-col;
+        @apply p-0 sm:p-2;
     }
 
     .rtl {