divide report in subsection

assets/css/style.css

@@ -2910,66 +2910,12 @@ main .page__header .description-medium {
     left: 0px;
   }
 }
-.arrow-report {
-  font-size: 14px;
-  color: var(--color-txt-light);
-  width: 20px;
-  height: 20px;
-}
-
-.media-anchor {
-  width: 100%;
-  height: 0px;
-  display: flex;
-  justify-content: flex-end;
-}
-.media-anchor .arrow-report {
-  position: relative;
-  left: 50px;
-  top: 8px;
-}
-
 @media screen and (min-width: 768px) {
   [data-template=report] .report__header {
     margin-inline: auto;
-    max-width: var(--max-w-cards);
-    margin-top: calc(var(--spacing) * 3);
-    margin-bottom: calc(var(--spacing) * 4);
-  }
-  [data-template=report] .report__content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-gap: calc(var(--padding-body) * 2.5);
-    z-index: calc(var(--z-header) - 100);
-  }
-  [data-template=report] .report__content .report__txt {
-    grid-row: 1;
-    grid-column: 1;
     max-width: var(--max-w-content);
-  }
+    margin-top: calc(var(--spacing) * 3.25);
-  [data-template=report] .report__content #report__medias {
+    margin-bottom: calc(var(--spacing) * 4);
-    z-index: calc(var(--z-header) - 100);
-    position: sticky;
-    top: calc(var(--header-h) + var(--padding-body));
-    align-self: start;
-    grid-row: 1;
-    grid-column: 2;
-    min-height: 100px;
-  }
-  [data-template=report] .report__content #arrow__medias {
-    z-index: calc(var(--z-header) - 100);
-    position: sticky;
-    top: calc(var(--header-h) + var(--padding-body));
-    align-self: start;
-    grid-row: 1;
-    grid-column: 2;
-    transform: rotate(180deg);
-    transform-origin: center;
-  }
-  [data-template=report] .report__content #arrow__medias span {
-    position: relative;
-    left: 26px;
-    top: calc(var(--spacing) * -5);
   }
   [data-template=report] #toggle-panel {
     position: fixed;
@@ -3000,7 +2946,6 @@ main .page__header .description-medium {
     transition: left ease-in-out 0.5s;
   }
   [data-template=report] #report {
-    padding-left: calc(var(--padding-body) * 2);
     transition: padding-left ease-in-out 0.5s;
   }
   [data-template=report] .panel-open #report__aside {
@@ -3026,16 +2971,16 @@ main .page__header .description-medium {
 .report__header .report__title-group .title {
   text-transform: uppercase;
   font-weight: normal;
-  font-size: var(--fs-big);
+  font-size: var(--fs-medium);
   line-height: var(--leading-tight);
-  font-weight: normal;
+  font-weight: 500;
   margin-top: calc(var(--spacing) * 1);
   text-wrap: balance;
 }
 .report__header .report__title-group .subtitle {
-  font-size: var(--fs-big);
+  font-size: var(--fs-medium);
   line-height: var(--leading-tight);
-  font-weight: normal;
+  font-weight: 500;
   text-wrap: balance;
 }
 .report__header figure {
@@ -3058,6 +3003,7 @@ main .page__header .description-medium {
   grid-row: 2;
   grid-column: 1;
   align-self: end;
+  font-size: var(--fs-small);
   border-bottom: var(--border-light);
   align-items: flex-start;
 }
@@ -3085,7 +3031,9 @@ main .page__header .description-medium {
 }
 
 .report__content .section-content {
-  padding-bottom: calc(var(--spacing) * 3);
+  padding-left: calc(var(--padding-body) * 1.5);
+  padding-right: calc(var(--padding-body) * 1.5);
+  margin-bottom: calc(var(--spacing) * 4);
 }
 .report__content .section-content:target {
   padding-top: calc(var(--header-h) + var(--spacing) * 2);
@@ -3096,12 +3044,39 @@ main .page__header .description-medium {
   }
 }
 .report__content .section-title {
+  max-width: var(--max-w-content);
+  margin-inline: auto;
+  margin-bottom: calc(var(--spacing) * 2);
   font-size: var(--fs-medium);
-  margin-bottom: var(--spacing);
+  font-weight: 500;
-  font-weight: normal;
   text-transform: uppercase;
   text-wrap: balance;
-  max-width: 42ch;
+  max-width: var(--max-w-content);
+  color: var(--color-accent);
+}
+.report__content .section-txt {
+  max-width: var(--max-w-content);
+  margin-inline: auto;
+}
+.report__content .subsection-w-media {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--padding-body);
+  margin-bottom: calc(var(--spacing) * 3);
+  position: relative;
+}
+.report__content .subsection-txt {
+  max-width: var(--max-w-content);
+  padding-left: var(--padding-inner);
+  padding-right: var(--padding-inner);
+}
+.report__content .media {
+  margin-inline: auto;
+  max-width: var(--max-w-content);
+  padding-left: var(--padding-inner);
+  padding-right: var(--padding-inner);
+  position: sticky;
+  top: 0px;
 }
 .report__content p {
   margin: calc(var(--spacing) * 0.5) 0;

assets/css/template/_report.scss

@@ -49,28 +49,6 @@
 }
 
 
-.arrow-report{
-    font-size: 14px;
-    color: var(--color-txt-light);
-
-    width: 20px;
-    height: 20px;
-
-}
-
-.media-anchor{
-    width: 100%;
-    height: 0px;
-    display: flex;
-    justify-content: flex-end;
-
-    .arrow-report{
-        position: relative;
-        left: 50px;
-        top: 8px;
-    }
-}
-
 
 
 @media #{$small-up}{
@@ -79,56 +57,19 @@
 
     .report__header {
         margin-inline: auto;
-        max-width: var(--max-w-cards);
+        max-width: var(--max-w-content);
-        margin-top: calc(var(--spacing) * 3);
+        margin-top: calc(var(--spacing) * 3.25);
         margin-bottom: calc(var(--spacing) * 4);
     }
 
     .report__content {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-gap: calc(var(--padding-body)*2.5);
-        z-index: calc(var(--z-header) - 100);
-
-        .report__txt {
-            grid-row: 1;
-            grid-column: 1;
-            max-width: var(--max-w-content);
-        }
-
-        #report__medias {
-            z-index: calc(var(--z-header) - 100);
-            position: sticky;
-            top: calc(var(--header-h) + var(--padding-body));
-            align-self: start;
-
-            // border-left: var(--border-light);
-            // padding-left: var(--padding-inner);
-            grid-row: 1;
-            grid-column: 2;
-            // border: var(--border-light);
-            min-height: 100px;
-            
-        }
-
-        #arrow__medias{
-            z-index: calc(var(--z-header) - 100);
-            position: sticky;
-            top: calc(var(--header-h) + var(--padding-body));
-            align-self: start;
-
-            grid-row: 1;
-            grid-column: 2;
-            transform: rotate(180deg);
-            transform-origin: center;
 
 
-            span{
+
-                position: relative;
+
-                left: 26px;
+      
-                top: calc(var(--spacing)*-5);
+
-            }
+  
-        }
 
     }
 
@@ -170,7 +111,7 @@
         transition: left ease-in-out .5s;
     }
       #report {
-        padding-left: calc(var(--padding-body)*2);
+        // padding-left: calc(var(--padding-body)*2);
           transition: padding-left ease-in-out .5s;
     }
 
@@ -213,17 +154,17 @@
         .title {
             text-transform: uppercase;
             font-weight: normal;
-            font-size: var(--fs-big);
+            font-size: var(--fs-medium);
             line-height: var(--leading-tight);
-            font-weight: normal;
+            font-weight: 500;
             margin-top: calc(var(--spacing)*1);
             text-wrap: balance;
         }
 
         .subtitle {
-            font-size: var(--fs-big);
+            font-size: var(--fs-medium);
             line-height: var(--leading-tight);
-            font-weight: normal;
+            font-weight: 500;
             text-wrap: balance;
 
         }
@@ -241,7 +182,7 @@
         grid-row: 2;
         grid-column: 1;
         align-self: end;
-        // font-size: var(--fs-small);
+        font-size: var(--fs-small);
         border-bottom: var(--border-light);
         align-items: flex-start;
 
@@ -285,7 +226,10 @@
 
 
     .section-content {
-        padding-bottom: calc(var(--spacing)*3);
+        // min-height: calc(100vh - var(--header-h));
+        padding-left: calc(var(--padding-body)*1.5);
+        padding-right: calc(var(--padding-body)*1.5);
+        margin-bottom: calc(var(--spacing)*4);
         &:target{
             padding-top: calc(var(--header-h) + var(--spacing)*2);
             @media #{$small}{   padding-top: calc(var(--header-h) + var(--spacing)*0.5);  }
@@ -296,14 +240,52 @@
 
 
     .section-title {
+
+        max-width: var(--max-w-content);
+        margin-inline: auto;
+        margin-bottom: calc(var(--spacing)*2);
+
         font-size: var(--fs-medium);
-        margin-bottom: var(--spacing);
+        
-        font-weight: normal;
+        font-weight: 500;
         text-transform: uppercase;
         text-wrap: balance;
-        max-width: 42ch;
+             max-width: var(--max-w-content);
+        color: var(--color-accent);
     }
 
+        .section-txt{
+        max-width: var(--max-w-content);
+         margin-inline: auto;
+        
+    }
+
+    .subsection-w-media{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: var(--padding-body);
+        margin-bottom: calc(var(--spacing)*3);
+        position: relative;
+    }
+
+
+    .subsection-txt {
+        max-width: var(--max-w-content);
+        padding-left: var(--padding-inner);
+         padding-right: var(--padding-inner);
+    }
+
+    .media{
+        margin-inline: auto;
+        max-width: var(--max-w-content);
+        padding-left: var(--padding-inner);
+         padding-right: var(--padding-inner);
+         position: sticky;
+         top: 0px;
+    }
+
+
+
     p {
         margin: calc(var(--spacing)*0.5) 0;
     }

assets/js/report.js

@@ -14,9 +14,7 @@ export function report(responsiveSmall) {
       return;
     }
 
-    // Sur desktop : initMediaDisplay va gérer les media dynamiquement
+
-    // Les swipers seront initialisés au moment de l'insertion dans #report__medias
-    initMediaDisplay();
   }
 }
 
@@ -33,188 +31,3 @@ function initSliderBeforeAfter(container = document){
     }
   });
 }
-
-function initMediaDisplay() {
-  const reportMedias = document.querySelector('#report__medias');
-  if (!reportMedias) return;
-
-  // Calculer la hauteur depuis les variables CSS: calc(var(--header-h) + var(--padding-body))
-  const rootStyles = getComputedStyle(document.documentElement);
-  const headerH = rootStyles.getPropertyValue('--header-h').trim();
-  const paddingBody = rootStyles.getPropertyValue('--padding-body').trim();
-  const spacingH = rootStyles.getPropertyValue('--spacing').trim();
-
-
-  // Convertir en pixels si nécessaire
-  const headerHPx = parseFloat(headerH);
-  const paddingBodyPx = parseFloat(paddingBody);
-  const spacingHPx = parseFloat(paddingBody);
-  const totalOffset = headerHPx + paddingBodyPx + spacingHPx*5;
-
-  const sections = document.querySelectorAll('.section-content');
-  const mediaElements = [];
-  let mediaCounter = 0;
-
-  // 1. Pour chaque section, traiter les .media
-  sections.forEach((section) => {
-    const medias = section.querySelectorAll('.media');
-
-    medias.forEach((media) => {
-      // Générer un ID unique si nécessaire
-      if (!media.id) {
-        media.id = `media-${mediaCounter++}`;
-      }
-
-      // Créer une ancre
-      const anchor = document.createElement('div');
-      anchor.className = 'media-anchor';
-      anchor.dataset.mediaId = media.id;
-      anchor.innerHTML = '<span class="arrow-report">▶</span>'
-
-      // Vérifier si le media est précédé d'un titre
-      let previousElement = media.previousElementSibling;
-      let insertBeforeElement = media;
-
-      // Si l'élément précédent est un titre (h1-h6), insérer l'ancre avant le titre
-      if (previousElement && /^H[1-6]$/.test(previousElement.tagName)) {
-        insertBeforeElement = previousElement;
-      }
-
-      // Insérer l'ancre
-      insertBeforeElement.parentNode.insertBefore(anchor, insertBeforeElement);
-
-      // Stocker la référence pour l'observer
-      mediaElements.push({
-        anchor: anchor,
-        media: media.cloneNode(true), // Cloner le media
-        originalMedia: media,
-        section: section
-      });
-
-      // Masquer le media original
-      media.style.display = 'none';
-    });
-  });
-
-  // 2. Fonction pour trouver et afficher le media le plus proche de la ligne de déclenchement
-  let currentMediaId = null;
-  let isUpdating = false; // Flag pour éviter les mises à jour simultanées
-
-  function updateActiveMedia() {
-    // Éviter les mises à jour simultanées
-    if (isUpdating) return;
-
-    // Trouver l'ancre qui est la plus proche de la ligne de déclenchement (totalOffset du haut)
-    let closestAnchor = null;
-    let closestDistance = Infinity;
-
-    mediaElements.forEach(({ anchor }) => {
-      const rect = anchor.getBoundingClientRect();
-
-      // Si l'ancre est au-dessus ou à la ligne de déclenchement
-      if (rect.top <= totalOffset) {
-        const distance = totalOffset - rect.top;
-
-        // Prendre celle qui vient juste de passer (la plus proche en dessous de la ligne)
-        if (distance < closestDistance) {
-          closestDistance = distance;
-          closestAnchor = anchor;
-        }
-      }
-    });
-
-    // Si on a trouvé une ancre
-    if (closestAnchor) {
-      const mediaId = closestAnchor.dataset.mediaId;
-
-      // Si c'est déjà le media affiché, ne rien faire
-      if (currentMediaId === mediaId) return;
-
-      // Trouver le media correspondant
-      const mediaData = mediaElements.find(m => m.anchor === closestAnchor);
-
-      if (mediaData) {
-        isUpdating = true;
-
-        // Utiliser requestAnimationFrame pour éviter les conflits de reflow
-        requestAnimationFrame(() => {
-          // Vider le conteneur
-          reportMedias.innerHTML = '';
-
-          // Ajouter le nouveau media
-          const newMediaElement = mediaData.media.cloneNode(true);
-          reportMedias.appendChild(newMediaElement);
-          currentMediaId = mediaId;
-
-          // Attendre le prochain frame pour initialiser les sliders/swipers
-          requestAnimationFrame(() => {
-            initSliderBeforeAfter(reportMedias);
-            initSwipers(reportMedias);
-
-            // Débloquer les mises à jour après un court délai
-            setTimeout(() => {
-              isUpdating = false;
-            }, 100);
-          });
-        });
-      }
-    } else {
-      // Aucune ancre n'a encore franchi la ligne, vider le conteneur
-      if (currentMediaId !== null) {
-        reportMedias.innerHTML = '';
-        currentMediaId = null;
-      }
-    }
-  }
-
-  // 3. Écouter le scroll
-  let scrollTimeout;
-  window.addEventListener('scroll', () => {
-    // Throttle pour optimiser les performances
-    if (scrollTimeout) return;
-
-    scrollTimeout = setTimeout(() => {
-      updateActiveMedia();
-      scrollTimeout = null;
-    }, 10);
-  });
-
-  // Appeler une première fois au chargement
-  updateActiveMedia();
-
-  // 4. Gérer les sections sans media immédiat
-  // Observer aussi les sections elles-mêmes
-  const sectionObserver = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        const section = entry.target;
-
-        // Vérifier si cette section a un media juste après son premier titre
-        const firstTitle = section.querySelector('h1, h2, h3, h4, h5, h6');
-        if (firstTitle) {
-          let nextElement = firstTitle.nextElementSibling;
-
-          // Chercher le prochain élément qui n'est pas une ancre
-          while (nextElement && nextElement.classList.contains('media-anchor')) {
-            nextElement = nextElement.nextElementSibling;
-          }
-
-          // Si le prochain élément n'est pas un .media, vider #report__medias
-          if (!nextElement || !nextElement.classList.contains('media')) {
-            reportMedias.innerHTML = '';
-            currentMediaId = null;
-          }
-        }
-      }
-    });
-  }, {
-    root: null,
-    rootMargin: `-${totalOffset}px 0px 0px 0px`,
-    threshold: 0
-  });
-
-  // Observer toutes les sections
-  sections.forEach(section => {
-    sectionObserver.observe(section);
-  });
-}

site/templates/report.php

@@ -127,16 +127,16 @@
 
 
     <div class="report__content">
-        <div id="arrow__medias" class="arrow-report"><span>▶</span></div>
 
-        <div class="report__medias" id="report__medias">
-   
-        </div>
-
-        <div class="report__txt">
 
             <div class="section-content" id="auteurs">
+
+
+
                 <h3 class="section-title">Les auteurs de ce rapport</h3>
+
+
+                <div class="section-txt">
                     <p>
                         INDEX est une ONG d'investigation et d'expertise indépendante,
                         à but non lucratif, déclarée en tant qu'association Loi 1901
@@ -158,10 +158,14 @@
                         <li>Conception graphique : Léonie Montjarret</li>
                         <li>Direction : Francesco Sebregondi</li>
                     </ul>
+
+                </div>
             </div>
 
             <div class="section-content" id="rappel-faits">
                 <h3 class="section-title">Rappel des faits</h3>
+
+                   <div class="section-txt">
                 <p><em>Note : Le nom de famille des individus mentionnés dans ce rapport a
                     été remplacé par leur initiale, afin de préserver leur anonymat dans le
                     cadre de la publication en ligne du rapport.</em>
@@ -187,10 +191,14 @@
                     audition, il a affirmé qu'il n'avait « pas d'autre choix » que d'ouvrir le
                     feu sur le pare-brise du véhicule.
                 </p>
+
+                </div>
             </div>
 
             <div class="section-content" id="modelisation">
                 <h3 class="section-title">Modélisation numérique en 3D des lieux de l'incident</h3>
+
+                  <div class="section-txt">
                 <p>
                     Les faits examinés dans ce rapport se sont déroulés sur le parking du
                     centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
@@ -199,9 +207,12 @@
                     l'entourent.
                 </p>
                 </div>
+            </div>
 
             <div class="section-content" id="sources-employees">
                 <h3 class="section-title">Sources employées</h3>
+
+                  <div class="section-txt">
                     <ul>
                         <li>
                         INDEX a obtenu accès au dossier judiciaire de l’affaire concernant la mort d’Adam B. et Raihane S., y compris aux auditions des policiers mis en cause, aux rapports d’autopsie, aux rapports d’expertise, aux photographies de constatation et aux enregistrements radio du soir de l’incident. L’ensemble de ces pièces ont été exploitées à des fins d’analyse et de reconstitution de l’incident.
@@ -210,10 +221,14 @@
                         Un modèle numérique en 3D du parking où les faits se sont produits a été réalisé en employant plusieurs sources de données publiques en ligne (Géoportail, Open Street Map, Google Earth).
                         </li>
                     </ul>
+
+                </div>
             </div>
 
             <div class="section-content" id="objectifs-rapport">
                 <h3 class="section-title">Objectifs du rapport</h3>
+
+                  <div class="section-txt">
                 <p>
                 En partant de l’examen de l’ensemble des pièces produites à ce jour
                 dans le cadre de la procédure judiciaire sur les circonstances de la
@@ -232,16 +247,18 @@
                         </li>
                     </ul>
 
-
+</div>
-
 
             </div>
 
 
             <div class="section-content">
                 <h3 class="section-title">1. MODÉLISATION NUMÉRIQUE EN 3D DES LIEUX DE L’INCIDENT</h3>
-                <div class="media">
 
+
+                <div class="subsection-w-media">
+
+                    <div class="media">
                         <div class="container slider-before-after">
                         <div class="image-container">
                         <img class="image-before slider-image" src="/assets/images/adam-raihane/fig-1-a.png" alt="color photo"/>
@@ -318,15 +335,10 @@
                             </svg>
                             </div>
                         </div>
-                    
-                    
-                    
                         <p class="caption">Fig. 1 : Plan de situation des lieux de l’incident.</p>
-                
-                
-                
                     </div>
                     
+                    <div class="subsection-txt">
                         <p>
                         Les faits examinés dans ce rapport se sont déroulés sur le parking du
                         centre commercial Carrefour situé au 136 boulevard Irène Joliot-Curie
@@ -335,11 +347,19 @@
                         l’entourent.
                     </p>
 
+                    </div>
+
+                </div>
+
+                <div class="subsection-w-media">
+
                     <div class="media container-figure fig-simple">
                         <figure><img src="/assets/images/adam-raihane/fig-2.png"></figure>
                         <p class="caption">Fig. 2 : Plan de localisation des éléments constatés sur les lieux de l’incident dans la nuit des faits.</p>
                     </div>
 
+
+                    <div class="subsection-txt">
                         <p>
                         Sur ce modèle 3D, nous avons reproduit les positions des différents
                         éléments constatés par les services de police sur les lieux de l’incident,
@@ -390,16 +410,27 @@
                         </li>
                         </ul>
 
+                    </div>
+
+                </div>
+
 
             </div>
 
             <div class="section-content">
                 <h3 class="section-title">2. SCHÉMATISATION DE LA DYNAMIQUE GÉNÉRALE DE L’INCIDENT</h3>
+
+
+
+                <div class="subsection-w-media">
+
                     <div class="media container-figure fig-simple">
                         <figure><img src="/assets/images/adam-raihane/fig-3.png"></figure>
                         <p class="caption">Fig. 3 : Schéma de la dynamique générale de l’incident.</p>
                     </div>
 
+
+                    <div class="subsection-txt">
                         <p>
                         D’après les déclarations du policier Geoffray D., à l’arrivée du fourgon de police à sa hauteur, le conducteur de la Mégane aurait effectué une brève marche arrière, avant d’enclencher la marche avant.
                         </p>
@@ -417,11 +448,20 @@
                         </p>
                     </div>
                 
+                </div>
+
+
+            </div>
+         
 
 
             <div class="section-content">
                 <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="media">
 
                         <div class="swiper">
@@ -460,6 +500,8 @@
 
                     </div>
 
+                        <div class="subsection-txt">
+
                             <p>
                             Pour reconstituer les positions des impacts de tirs sur le véhicule, nous nous sommes appuyés sur les photos de constatations réalisées sur le véhicule après son déplacement des lieux de l’incident vers la fourrière.
                             </p>
@@ -469,13 +511,17 @@
                             <p>
                             Nous présentons ci-après les résultats de l’emploi de cette technique qui nous permet d’obtenir une modélisation détaillée des impacts de tirs sur le véhicule (Fig. 4, 5, 6, 7).
                             </p>
+                         </div>
 
                 </div>
+            </div>
 
 
             <div class="section-content">
                 <h3 class="section-title">4. RECONSTITUTION ET VÉRIFICATION DU RÉCIT POLICIER DES FAITS</h3>
 
+
+                 <div class="section-txt">
                     <p>
                     À partir des éléments décrits précédemment, nous avons procédé à une reconstitution dynamique de l’incident en intégrant l’ensemble des données matérielles disponibles.
                     </p>
@@ -494,9 +540,10 @@
                     <p>
                     Pour produire une reconstitution dynamique de l’action qui s’est déroulée au cours de ces 30 secondes, nous l’avons décomposée en plusieurs intervalles.
                     </p>    
+            </div>        
+       
       
 
-    </div> <!-- div content txt-->
     </div>
 </article>
 </main>