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

@@ -46,6 +46,7 @@
 
 <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';
 
@@ -62,8 +63,10 @@ import ReaderPage from './ReaderPage.vue';
 
     const emit = defineEmits(['pageVisible']);
 
+    const headerStore = useHeaderStore();
     const containerRef = ref(null);
     const observer = ref(null);
+    const windowWidth = ref(window.innerWidth);
 
     // État pour le bouton scroll to top
     const showScrollToTop = ref(false);
@@ -102,7 +105,7 @@ import ReaderPage from './ReaderPage.vue';
         });
     };
 
-        // Gestion du scroll pour le bouton "revenir en haut"
+        // Gestion du scroll pour le bouton "revenir en haut" et le header
     const handleScroll = () => {
         let scrollTop = 0;
 
@@ -133,6 +136,11 @@ import ReaderPage from './ReaderPage.vue';
             scrollDirection = 'up';
         }
 
+        // Gestion du header auto-hide (seulement si largeur < 1200px)
+        if (windowWidth.value < 1200) {
+            headerStore.updateScrollDirection(scrollTop);
+        }
+
         // Mise à jour de la visibilité du bouton
         // Afficher si on scroll vers le bas et qu'on est à plus de 300px
         // Masquer si on scroll vers le haut ou qu'on est en haut de page
@@ -195,9 +203,27 @@ import ReaderPage from './ReaderPage.vue';
         { immediate: true }
     );
 
+    // Gestion du redimensionnement de la fenêtre
+    const handleResize = () => {
+        const newWidth = window.innerWidth;
+        windowWidth.value = newWidth;
+
+        // Activer/désactiver l'auto-hide selon la largeur
+        if (newWidth < 1200) {
+            headerStore.enableAutoHide();
+        } else {
+            headerStore.disableAutoHide();
+        }
+    };
+
     onMounted(() => {
         setupIntersectionObserver();
 
+        // Activer l'auto-hide du header si la largeur < 1200px
+        if (windowWidth.value < 1200) {
+            headerStore.enableAutoHide();
+        }
+
         // Ajouter l'écouteur de scroll sur le conteneur
         if (containerRef.value) {
             containerRef.value.addEventListener('scroll', handleScroll, { passive: true });
@@ -205,6 +231,9 @@ import ReaderPage from './ReaderPage.vue';
 
         // Ajouter l'écouteur de scroll sur la fenêtre
         window.addEventListener('scroll', handleScroll, { passive: true });
+
+        // Ajouter l'écouteur de redimensionnement
+        window.addEventListener('resize', handleResize, { passive: true });
     });
 
     onUnmounted(() => {
@@ -212,6 +241,9 @@ import ReaderPage from './ReaderPage.vue';
             observer.value.disconnect();
         }
 
+        // Désactiver l'auto-hide du header en quittant
+        headerStore.disableAutoHide();
+
         // Nettoyer l'écouteur de scroll du conteneur
         if (containerRef.value) {
             containerRef.value.removeEventListener('scroll', handleScroll);
@@ -219,23 +251,46 @@ import ReaderPage from './ReaderPage.vue';
 
         // Nettoyer l'écouteur de scroll de la fenêtre
         window.removeEventListener('scroll', handleScroll);
+
+        // Nettoyer l'écouteur de redimensionnement
+        window.removeEventListener('resize', handleResize);
     });
 </script>
 
 <style lang="postcss" scoped>
     .infinite-reader {
-        @apply flex-1 flex flex-col items-center overflow-y-auto py-8 relative;
+        @apply flex-1 flex flex-col items-center overflow-y-auto relative;
+        /* 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] mb-4;
+        @apply w-full flex justify-center min-h-[200px];
+        /* Réduction des marges sur mobile */
+        @apply mb-2 sm:mb-4 px-1 sm:px-4;
     }
 
     .loading,
     .error {
-        @apply flex items-center justify-center w-[70vw] min-h-[400px];
+        @apply flex items-center justify-center min-h-[400px];
+        /* Largeur adaptative selon la taille d'écran */
+        width: 95vw; /* Mobile : 95% de la largeur */
+    }
+
+    @screen sm {
+        .loading,
+        .error {
+            width: 80vw; /* Tablette : 80% de la largeur */
+        }
+    }
+
+    @screen lg {
+        .loading,
+        .error {
+            width: 70vw; /* Desktop : 70% de la largeur */
+        }
     }
 
     .error {