report

assets/css/base/_var.scss

@@ -6,7 +6,7 @@
   --fs-xsmall: 12px;
   --fs-small: 16px;
   --fs-normal: 20px;
-  --fs-medium: 24px;
+  --fs-medium: 30px;
   --fs-big: 45px;
 
   --fs-button-bold: 22px;

assets/css/partials/_main-layout.scss

@@ -2,7 +2,7 @@ body{
     min-height: 100dvh;
     min-height: 100vh;
     width: 100vw;
-    // overflow-x: hidden;
+    overflow-x: hidden;
 
     display: flex;
     flex-direction: column;

assets/css/style.css

@@ -5,7 +5,7 @@
   --fs-xsmall: 12px;
   --fs-small: 16px;
   --fs-normal: 20px;
-  --fs-medium: 24px;
+  --fs-medium: 30px;
   --fs-big: 45px;
   --fs-button-bold: 22px;
   --max-w-content: 640px;
@@ -2542,6 +2542,7 @@ body {
   min-height: 100dvh;
   min-height: 100vh;
   width: 100vw;
+  overflow-x: hidden;
   display: flex;
   flex-direction: column;
 }
@@ -3047,7 +3048,6 @@ main .page__header .description-medium {
   margin-bottom: calc(var(--spacing) * 2);
   font-size: var(--fs-medium);
   font-weight: 500;
-  text-transform: uppercase;
   text-wrap: balance;
   max-width: var(--max-w-content);
   color: var(--color-accent);
@@ -3115,11 +3115,14 @@ main .page__header .description-medium {
   z-index: 10;
 }
 .report__content p {
-  margin: calc(var(--spacing) * 0.5) 0;
+  margin: calc(var(--spacing) * 0.75) 0;
 }
 .report__content ul {
   padding-left: 3ch;
 }
+.report__content ul li {
+  margin: calc(var(--spacing) * 0.5) 0;
+}
 
 .report__content:target {
   padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;

assets/css/template/_report.scss

@@ -252,7 +252,7 @@
         font-size: var(--fs-medium);
         
         font-weight: 500;
-        text-transform: uppercase;
+        // text-transform: uppercase;
         text-wrap: balance;
         max-width: var(--max-w-content);
         color: var(--color-accent);
@@ -339,11 +339,15 @@
 
 
     p {
-        margin: calc(var(--spacing)*0.5) 0;
+        margin: calc(var(--spacing)*0.75) 0;
     }
 
     ul {
         padding-left: 3ch;
+
+        li{
+            margin: calc(var(--spacing)*0.5) 0;
+        }
     }
 }
 

assets/js/report.js

@@ -39,58 +39,82 @@ function initHorizontalScroll(){
   const sections = document.querySelectorAll('.subsection-w-hscroll');
 
   sections.forEach(function (section) {
-    const wrapper = section.querySelector('.horizontal-scroll-wrapper');
+    const container = section.querySelector('.horizontal-scroll');
+    if (!container) return;
+
+    const wrapper = container.querySelector('.horizontal-scroll-wrapper');
     if (!wrapper) return;
 
-    // Calculer la largeur totale du contenu horizontal
     const slides = wrapper.querySelectorAll('.horizontal-scroll-slide');
+
+    // Calculer la distance totale à scroller horizontalement
+    function calculateScrollDistance() {
       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;
+      return totalSlidesWidth - window.innerWidth + endMargin;
+    }
 
-    // Définir la hauteur de la section pour créer l'espace de scroll virtuel
+    let scrollDistance = calculateScrollDistance();
-    // La hauteur = viewport + largeur scrollable (pour un ratio 1:1 entre scroll Y et X)
+
-    const sectionHeight = window.innerHeight + scrollableWidth;
+    // Créer un spacer invisible qui crée l'espace de scroll
-    section.style.height = `${sectionHeight}px`;
+    // Hauteur = scrollDistance + hauteur du viewport pour maintenir le texte en dessous
+    const spacer = document.createElement('div');
+    spacer.className = 'horizontal-scroll-spacer';
+    spacer.style.height = `${scrollDistance + window.innerHeight}px`;
+    spacer.style.width = '100%';
+    spacer.style.pointerEvents = 'none';
+
+    // Insérer le spacer AVANT .horizontal-scroll
+    section.insertBefore(spacer, container);
+
+    // Calculer la position absolue du spacer une seule fois
+    function getSpacerTopPosition() {
+      let element = spacer;
+      let top = 0;
+      while (element) {
+        top += element.offsetTop;
+        element = element.offsetParent;
+      }
+      return top;
+    }
+
+    let spacerTopPosition = getSpacerTopPosition();
 
     // Fonction de mise à jour du scroll horizontal
     function updateHorizontalScroll() {
-      const rect = section.getBoundingClientRect();
+      const scrollY = window.pageYOffset || document.documentElement.scrollTop;
-      const stickyContainer = section.querySelector('.horizontal-scroll');
 
-      // Quand le haut de la section atteint le haut du viewport
+      // Début et fin du scroll basé sur le spacer
-      if (rect.top <= 0 && rect.bottom >= window.innerHeight) {
+      const scrollStart = spacerTopPosition;
-        // Calculer la progression (0 à 1)
+      const scrollEnd = spacerTopPosition + scrollDistance;
-        const progress = Math.abs(rect.top) / scrollableWidth;
+
-        const clampedProgress = Math.max(0, Math.min(1, progress));
+      console.log('scrollY:', scrollY, 'scrollStart:', scrollStart, 'scrollEnd:', scrollEnd);
+
+      if (scrollY >= scrollStart && scrollY <= scrollEnd) {
+        // Phase de scroll horizontal : fixer le container
+        const progress = (scrollY - scrollStart) / scrollDistance;
+        const translateX = progress * scrollDistance;
+
+        console.log('Horizontal scroll active - progress:', progress);
 
-        // Appliquer le scroll horizontal
-        const translateX = clampedProgress * scrollableWidth;
         wrapper.style.transform = `translateX(-${translateX}px)`;
-
+        container.style.position = 'fixed';
-        // Fixer le conteneur
+        container.style.top = '0';
-        if (stickyContainer) {
+        container.style.left = '0';
-          stickyContainer.style.position = 'fixed';
+      } else if (scrollY < scrollStart) {
-          stickyContainer.style.top = '0';
+        // Avant le spacer : reset
-          stickyContainer.style.left = '0';
+        console.log('Before spacer');
-          stickyContainer.style.width = '100vw';
-        }
-      } else if (rect.top > 0) {
-        // Avant la section : reset
         wrapper.style.transform = 'translateX(0)';
-        if (stickyContainer) {
+        container.style.position = '';
-          stickyContainer.style.position = 'relative';
+        container.style.top = '';
-        }
+        container.style.left = '';
       } else {
-        // Après la section : garder à la fin
+        // Après le spacer : garder le translate final et défixer
-        wrapper.style.transform = `translateX(-${scrollableWidth}px)`;
+        console.log('After spacer');
-        if (stickyContainer) {
+        wrapper.style.transform = `translateX(-${scrollDistance}px)`;
-          stickyContainer.style.position = 'absolute';
+        container.style.position = '';
-          stickyContainer.style.top = 'auto';
+        container.style.top = '';
-          stickyContainer.style.bottom = '0';
+        container.style.left = '';
-          stickyContainer.style.left = '0';
-          stickyContainer.style.width = '100vw';
-        }
       }
     }
 
@@ -99,11 +123,10 @@ function initHorizontalScroll(){
 
     // Recalculer au resize
     window.addEventListener('resize', function() {
-      const newTotalWidth = Array.from(slides).reduce((acc, slide) => acc + slide.offsetWidth, 0);
+      scrollDistance = calculateScrollDistance();
-      const newEndMargin = window.innerWidth * 0.3;
+      spacer.style.height = `${scrollDistance + window.innerHeight}px`;
-      const newScrollableWidth = newTotalWidth - window.innerWidth + newEndMargin;
+      spacerTopPosition = getSpacerTopPosition();
-      const newSectionHeight = window.innerHeight + newScrollableWidth;
+      updateHorizontalScroll();
-      section.style.height = `${newSectionHeight}px`;
     });
 
     // Initial call

site/templates/report.php

@@ -466,7 +466,6 @@
                  <div class="subsection-w-hscroll">
 
 
-                    <div class="media">
 
                         <div class="horizontal-scroll">
                             <div class="horizontal-scroll-wrapper">
@@ -502,7 +501,8 @@
 
                         </div> <!-- horizontal-scroll -->
 
-                    </div>
+
+                    
 
                         <div class="subsection-txt">