horizontal scroll

assets/css/style.css

@@ -3070,14 +3070,7 @@ main .page__header .description-medium {
   margin-bottom: calc(var(--spacing) * 4);
   position: relative;
 }
-.report__content .subsection-txt {
+.report__content .subsection-w-media .media {
-  min-height: calc(100vh - var(--header-h));
-  max-width: var(--max-w-content);
-  padding-left: var(--padding-inner);
-  padding-right: var(--padding-inner);
-  padding-bottom: calc(var(--spacing) * 6);
-}
-.report__content .media {
   margin-inline: auto;
   max-width: var(--max-w-content);
   padding-left: var(--padding-inner);
@@ -3086,6 +3079,47 @@ main .page__header .description-medium {
   top: calc(var(--header-h) + var(--spacing));
   align-self: start;
 }
+.report__content .subsection-txt {
+  min-height: calc(100vh - var(--header-h));
+  max-width: var(--max-w-content);
+  padding-left: var(--padding-inner);
+  padding-right: var(--padding-inner);
+  padding-bottom: calc(var(--spacing) * 6);
+}
+.report__content .subsection-w-hscroll {
+  position: relative;
+  margin-bottom: calc(var(--spacing) * 4);
+}
+.report__content .subsection-w-hscroll .horizontal-scroll {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+.report__content .subsection-w-hscroll .horizontal-scroll-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  will-change: transform;
+}
+.report__content .subsection-w-hscroll .horizontal-scroll-slide {
+  flex-shrink: 0;
+  width: 90vw;
+  max-width: 700px;
+  padding: 0 calc(var(--spacing) * 1);
+}
+.report__content .subsection-w-hscroll .horizontal-scroll-slide figure, .report__content .subsection-w-hscroll .horizontal-scroll-slide img {
+  width: 100%;
+}
+.report__content .subsection-w-hscroll .horizontal-scroll-pagination {
+  position: fixed;
+  bottom: calc(var(--spacing) * 2);
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  z-index: 10;
+}
 .report__content p {
   margin: calc(var(--spacing) * 0.5) 0;
 }

assets/css/template/_report.scss

@@ -271,6 +271,18 @@
         gap: var(--padding-body);
         margin-bottom: calc(var(--spacing)*4);
         position: relative;
+
+
+        .media{
+            margin-inline: auto;
+            max-width: var(--max-w-content);
+            padding-left: var(--padding-inner);
+            padding-right: var(--padding-inner);
+            position: sticky;
+            top: calc(var(--header-h) + var(--spacing));
+            align-self: start;
+        }
+
     }
 
 
@@ -282,14 +294,45 @@
              padding-bottom: calc(var(--spacing)*6);
     }
 
-    .media{
+    .subsection-w-hscroll{
-        margin-inline: auto;
+        position: relative;
-        max-width: var(--max-w-content);
+        margin-bottom: calc(var(--spacing)*4);
-        padding-left: var(--padding-inner);
+
-         padding-right: var(--padding-inner);
+        .horizontal-scroll{
-         position: sticky;
+            height: 100vh;
-         top: calc(var(--header-h) + var(--spacing));
+            width: 100vw;
-         align-self: start;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+        }
+
+        .horizontal-scroll-wrapper{
+            display: flex;
+            flex-wrap: nowrap;
+            will-change: transform;
+        }
+
+        .horizontal-scroll-slide{
+            flex-shrink: 0;
+            width: 90vw;
+            max-width: 700px;
+            padding: 0 calc(var(--spacing) * 1);
+
+            figure, img{
+                width: 100%;
+            }
+        }
+
+        .horizontal-scroll-pagination{
+            position: fixed;
+            bottom: calc(var(--spacing) * 2);
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 8px;
+            z-index: 10;
+        }
+
     }
 
 

assets/js/report.js

@@ -7,6 +7,8 @@ export function report(responsiveSmall) {
     // Initialiser tous les sliders de type before-after
     initSliderBeforeAfter();
 
+    initHorizontalScroll();
+
     // Ne fonctionne que pour les écrans plus grands que responsiveSmall
     if (window.matchMedia(responsiveSmall).matches) {
       // Sur mobile : initialiser les swipers normalement car initMediaDisplay ne sera pas actif
@@ -31,3 +33,80 @@ function initSliderBeforeAfter(container = document){
     }
   });
 }
+
+
+function initHorizontalScroll(){
+  const sections = document.querySelectorAll('.subsection-w-hscroll');
+
+  sections.forEach(function (section) {
+    const wrapper = section.querySelector('.horizontal-scroll-wrapper');
+    if (!wrapper) return;
+
+    // Calculer la largeur totale du contenu horizontal
+    const slides = wrapper.querySelectorAll('.horizontal-scroll-slide');
+    const totalSlidesWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
+    const endMargin = window.innerWidth * 0.3; // 30vw de marge à la fin
+    const scrollableWidth = totalSlidesWidth - window.innerWidth + endMargin;
+
+    // Définir la hauteur de la section pour créer l'espace de scroll virtuel
+    // La hauteur = viewport + largeur scrollable (pour un ratio 1:1 entre scroll Y et X)
+    const sectionHeight = window.innerHeight + scrollableWidth;
+    section.style.height = `${sectionHeight}px`;
+
+    // Fonction de mise à jour du scroll horizontal
+    function updateHorizontalScroll() {
+      const rect = section.getBoundingClientRect();
+      const stickyContainer = section.querySelector('.horizontal-scroll');
+
+      // Quand le haut de la section atteint le haut du viewport
+      if (rect.top <= 0 && rect.bottom >= window.innerHeight) {
+        // Calculer la progression (0 à 1)
+        const progress = Math.abs(rect.top) / scrollableWidth;
+        const clampedProgress = Math.max(0, Math.min(1, progress));
+
+        // Appliquer le scroll horizontal
+        const translateX = clampedProgress * scrollableWidth;
+        wrapper.style.transform = `translateX(-${translateX}px)`;
+
+        // Fixer le conteneur
+        if (stickyContainer) {
+          stickyContainer.style.position = 'fixed';
+          stickyContainer.style.top = '0';
+          stickyContainer.style.left = '0';
+          stickyContainer.style.width = '100vw';
+        }
+      } else if (rect.top > 0) {
+        // Avant la section : reset
+        wrapper.style.transform = 'translateX(0)';
+        if (stickyContainer) {
+          stickyContainer.style.position = 'relative';
+        }
+      } else {
+        // Après la section : garder à la fin
+        wrapper.style.transform = `translateX(-${scrollableWidth}px)`;
+        if (stickyContainer) {
+          stickyContainer.style.position = 'absolute';
+          stickyContainer.style.top = 'auto';
+          stickyContainer.style.bottom = '0';
+          stickyContainer.style.left = '0';
+          stickyContainer.style.width = '100vw';
+        }
+      }
+    }
+
+    // Écouter le scroll
+    window.addEventListener('scroll', updateHorizontalScroll, { passive: true });
+
+    // Recalculer au resize
+    window.addEventListener('resize', function() {
+      const newTotalWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
+      const newEndMargin = window.innerWidth * 0.3;
+      const newScrollableWidth = newTotalWidth - window.innerWidth + newEndMargin;
+      const newSectionHeight = window.innerHeight + newScrollableWidth;
+      section.style.height = `${newSectionHeight}px`;
+    });
+
+    // Initial call
+    updateHorizontalScroll();
+  });
+}

site/templates/report.php

@@ -463,44 +463,44 @@
                 <h3 class="section-title"> 3. MODÉLISATION DÉTAILLÉE DES IMPACTS DE TIRS SUR LE VÉHICULE</h3>
                
 
-                 <div class="subsection-w-media">
+                 <div class="subsection-w-hscroll">
 
 
                     <div class="media">
 
-                        <div class="swiper">
+                        <div class="horizontal-scroll">
-                            <div class="swiper-wrapper">
+                            <div class="horizontal-scroll-wrapper">
-                                <div class="swiper-slide">
+                                <div class="horizontal-scroll-slide">
-                                <div class="swiper-slide__inner">
+                                <div class="horizontal-scroll-slide__inner">
                                     <figure><img src="/assets/images/adam-raihane/fig-4.png"></figure>
                                     <p class="caption">Fig. 4 : Vue frontale du véhicule et localisation des impacts de tirs sur le pare-brise (Reconstitution 3D / Photo originale).</p>
                                 </div>
                                 </div>
-                                <div class="swiper-slide">
+                                <div class="horizontal-scroll-slide">
-                                <div class="swiper-slide__inner">
+                                <div class="horizontal-scroll-slide__inner">
                                     <figure><img src="/assets/images/adam-raihane/fig-5.png"></figure>
                                     <p class="caption">Fig. 5 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc gauche (Reconstitution 3D / Photo originale).</p>
                                 </div>
                                 </div>
-                                <div class="swiper-slide">
+                                <div class="horizontal-scroll-slide">
-                                <div class="swiper-slide__inner">
+                                <div class="horizontal-scroll-slide__inner">
                                     <figure><img src="/assets/images/adam-raihane/fig-6.png"></figure>
                                     <p class="caption">Fig. 6 : Vue latérale du véhicule et localisation des impacts de tirs sur les flanc droit (Reconstitution 3D / Photo originale).</p>
                                 </div>
                                 </div>
-                                <div class="swiper-slide">
+                                <div class="horizontal-scroll-slide">
-                                <div class="swiper-slide__inner">
+                                <div class="horizontal-scroll-slide__inner">
                                     <figure><img src="/assets/images/adam-raihane/fig-7.png"></figure>
                                     <p class="caption">Fig. 7 : Vue d’ensemble du modèle 3D du véhicule avec tous les impacts de tirs localisés.</p>
                                 </div>
                                 </div>
                             </div>
 
-                            <div class="swiper-button-prev"></div>
+                            <div class="horizontal-scroll-button-prev"></div>
-                            <div class="swiper-button-next"></div>
+                            <div class="horizontal-scroll-button-next"></div>
-                            <div class="swiper-pagination"></div>
+                            <div class="horizontal-scroll-pagination"></div>
 
-                        </div> <!-- swiper -->
+                        </div> <!-- horizontal-scroll -->
 
                     </div>