arrow report

assets/css/components/_swiper.scss

@@ -9,9 +9,10 @@
         --swiper-navigation-size: 32px;
         color: var(--color-txt);
         background-color: var(--color-bg);
-        background-color: red;
         height: 100%;
         width: var(--slide-padding);
+        top: 0px!important;
+        height: calc(100% - var(--spacing)*1);
         // background-color: red;
 
         svg {
@@ -28,13 +29,13 @@
     }
 
     .swiper-button-prev {
-        left: 0px;
+        left: 0px!important;
         top: 0px;
         justify-content: flex-start;
     }
 
     .swiper-button-next {
-        right: 0px;
+        right: 0px!important;
         top: 0px;
         justify-content: flex-end;
   
@@ -47,7 +48,8 @@
 
     .swiper-pagination {
         position: relative;
-        margin-top: calc(var(--spacing)*1);
+        margin-top: 0px!important;
+        margin-top: calc(var(--spacing)*0.5)!important;
 
         .swiper-pagination-bullet {
             width: 15px;

assets/css/partials/_site-header.scss

@@ -37,7 +37,7 @@
 
   #site-title {
     flex-grow: 2;
-    opacity: 0;
+    // opacity: 0;
     svg{
       width: 100px;
       @media #{$small}{

assets/css/style.css

@@ -178,7 +178,6 @@ body.is-hidden .btn--back-to-top {
 }
 #site-header #site-title {
   flex-grow: 2;
-  opacity: 0;
 }
 #site-header #site-title svg {
   width: 100px;
@@ -2131,9 +2130,10 @@ button.sort[data-sort-type=up] .arrow {
   --swiper-navigation-size: 32px;
   color: var(--color-txt);
   background-color: var(--color-bg);
-  background-color: red;
   height: 100%;
   width: var(--slide-padding);
+  top: 0px !important;
+  height: calc(100% - var(--spacing) * 1);
 }
 .swiper .swiper-button-prev svg,
 .swiper .swiper-button-next svg {
@@ -2148,12 +2148,12 @@ button.sort[data-sort-type=up] .arrow {
   opacity: 0.05;
 }
 .swiper .swiper-button-prev {
-  left: 0px;
+  left: 0px !important;
   top: 0px;
   justify-content: flex-start;
 }
 .swiper .swiper-button-next {
-  right: 0px;
+  right: 0px !important;
   top: 0px;
   justify-content: flex-end;
 }
@@ -2163,7 +2163,8 @@ button.sort[data-sort-type=up] .arrow {
 }
 .swiper .swiper-pagination {
   position: relative;
-  margin-top: calc(var(--spacing) * 1);
+  margin-top: 0px !important;
+  margin-top: calc(var(--spacing) * 0.5) !important;
 }
 .swiper .swiper-pagination .swiper-pagination-bullet {
   width: 15px;
@@ -2283,7 +2284,6 @@ button.sort[data-sort-type=up] .arrow {
 }
 #site-header #site-title {
   flex-grow: 2;
-  opacity: 0;
 }
 #site-header #site-title svg {
   width: 100px;
@@ -2677,7 +2677,6 @@ main .page__header .description-medium {
 #home__investigations .card--article .time-alone {
   display: block;
 }
-#home__investigations .card--article .description,
 #home__investigations .card--article .dl,
 #home__investigations .card--article .pin {
   display: none;
@@ -2782,6 +2781,7 @@ main .page__header .description-medium {
 }
 [data-template=investigation-summary] main #section__synthese {
   max-width: var(--max-w-content);
+  margin-inline: auto;
 }
 [data-template=investigation-summary] main #section__synthese p + p {
   margin-top: 0.5em;
@@ -2893,6 +2893,25 @@ 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;
@@ -2903,7 +2922,7 @@ main .page__header .description-medium {
   [data-template=report] .report__content {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    grid-gap: var(--padding-body);
+    grid-gap: calc(var(--padding-body) * 2.5);
     z-index: calc(var(--z-header) - 100);
   }
   [data-template=report] .report__content .report__txt {
@@ -2920,6 +2939,20 @@ main .page__header .description-medium {
     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;
+  }
   [data-template=report] #toggle-panel {
     position: fixed;
     top: var(--header-h);
@@ -3049,6 +3082,8 @@ main .page__header .description-medium {
   margin-bottom: var(--spacing);
   font-weight: normal;
   text-transform: uppercase;
+  text-wrap: balance;
+  max-width: 42ch;
 }
 .report__content p {
   margin: calc(var(--spacing) * 0.5) 0;
@@ -3071,6 +3106,10 @@ main .page__header .description-medium {
   font-size: var(--fs-small);
   line-height: 1.1;
 }
+.media .swiper {
+  width: calc(100% - 60px);
+  max-width: 600px;
+}
 
 #toggle-panel {
   width: calc(var(--h-block) * 1);

assets/css/template/_home.scss

@@ -144,14 +144,11 @@
     }
 
     .card--article {
-        // align-items: flex-start;
-        // justify-content: flex-start;
 
         .time-alone {
             display: block;
         }
 
-        .description,
         .dl,
         .pin {
             display: none;

assets/css/template/_investigation-summary.scss

@@ -80,6 +80,7 @@
   #section__synthese {
 
     max-width: var(--max-w-content);
+    margin-inline: auto;
 
     p+p {
       margin-top: 0.5em;

assets/css/template/_report.scss

@@ -49,6 +49,29 @@
 }
 
 
+.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}{
 [data-template="report"] {
@@ -64,7 +87,7 @@
     .report__content {
         display: grid;
         grid-template-columns: 1fr 1fr;
-        grid-gap: var(--padding-body);
+        grid-gap: calc(var(--padding-body)*2.5);
         z-index: calc(var(--z-header) - 100);
 
         .report__txt {
@@ -83,6 +106,24 @@
             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;
+            }
         }
 
     }
@@ -255,6 +296,8 @@
         margin-bottom: var(--spacing);
         font-weight: normal;
         text-transform: uppercase;
+        text-wrap: balance;
+        max-width: 42ch;
     }
 
     p {
@@ -286,6 +329,10 @@
         line-height: 1.1;
     }
 
+    .swiper{
+        width: calc(100% - 60px);
+        max-width: 600px;
+    }
 }
 
 

assets/js/report.js

@@ -4,14 +4,18 @@ import { initSwipers } from './swipers.js';
 export function report(responsiveSmall) {
   if (document.body.dataset.template === 'report') {
 
-    // Initialiser tous les sliders et swipers de la page
+    // Initialiser tous les sliders de type before-after
     initSliderBeforeAfter();
-    initSwipers();
 
     // 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
+      initSwipers();
       return;
     }
+
+    // Sur desktop : initMediaDisplay va gérer les media dynamiquement
+    // Les swipers seront initialisés au moment de l'insertion dans #report__medias
     initMediaDisplay();
   }
 }
@@ -62,12 +66,7 @@ function initMediaDisplay() {
       const anchor = document.createElement('div');
       anchor.className = 'media-anchor';
       anchor.dataset.mediaId = media.id;
-
+      anchor.innerHTML = '<span class="arrow-report">▶</span>'
-      // Style visuel pour debug (carré rouge de 10px)
-      anchor.style.width = '10px';
-      anchor.style.height = '10px';
-      anchor.style.backgroundColor = 'red';
-      anchor.style.position = 'relative';
 
       // Vérifier si le media est précédé d'un titre
       let previousElement = media.previousElementSibling;
@@ -96,8 +95,12 @@ function initMediaDisplay() {
 
   // 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;
@@ -128,16 +131,29 @@ function initMediaDisplay() {
       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
-        reportMedias.appendChild(mediaData.media.cloneNode(true));
+          const newMediaElement = mediaData.media.cloneNode(true);
+          reportMedias.appendChild(newMediaElement);
           currentMediaId = mediaId;
 
-        // Réinitialiser les sliders et swipers dans le media nouvellement inséré
+          // 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

assets/js/script.js

@@ -30,5 +30,5 @@ window.onload = async function () {
   initHeroSlider();
   playVideo();
   initDropdowns(responsiveSmall);
-  // initSwipers();
+  initSwipers();
 }

site/templates/home.php

@@ -61,11 +61,12 @@
 
               <h4 class="title"><a href="<?= $investigation->url() ?>"><?= $investigation->title()->esc() ?></a></h4>
 
+              <time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
+
               <?php if ($investigation->chapo()->isNotEmpty()): ?>
               <p class="description"><?= $investigation->chapo()->excerpt(200) ?></p>
               <?php endif ?>
 
-              <time class="time-alone" datetime="<?= $investigation->incidentDate()->toDate('yyyy-MM-dd') ?>"><?= $investigation->incidentDate()->toDate('d MMMM yyyy', 'fr_FR') ?></time>
 
               </div>
 
@@ -134,54 +135,81 @@
 
 <div class="col-right">
 
-<div class="card--impact" data-impact-type="media">
+          <!-- Contenu statique temporaire -->
+    <div class="card--impact" data-impact-type="media">
+        <div class="card--impact__inner">
         <p class="tag">Médiatique</p>
-        <div class="content">
-        <?php snippet('card-open-graph') ?>
 
-        </div>
+        <?php snippet('card-open-graph') ?>
             <ul class="investigations">
                 <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
                 <li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>  
-
-                
         </ul>
+      
+
+        <div class="keywords-wrapper">
+        <ul class="keywords">
+                        <li><a href="#keyword" target="_blank">Occupation</a></li>
+                        <li><a href="#keyword" target="_blank">Colonialité</a></li>
+                        <li><a href="#keyword" target="_blank">Forces armées</a></li>
+                    </ul>
+        </div>
+    </div>
     </div>
 
 
     <div class="card--impact has-link" data-impact-type="judiciaire">
+    <div class="card--impact__inner">
         <p class="tag">Judiciaire</p>
         <p class="date">12 Dec 2025</p>
         <div class="content">
             <p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
             </p>
-           
         </div>
+
         <ul class="investigations">
                 <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
             </ul>
+
+        <div class="keywords-wrapper">
+        <ul class="keywords">
+                        <li><a href="#keyword" target="_blank">Occupation</a></li>
+                        <li><a href="#keyword" target="_blank">Colonialité</a></li>
+                    </ul>
+        </div>
+  
             <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
             <a class="link-block" href="#" target="_blank"></a>
-
+    </div>
     </div>
 
     <div class="card--impact has-link" data-impact-type="judiciaire">
+    <div class="card--impact__inner">
         <p class="tag">Judiciaire</p>
         <p class="date">12 Dec 2025</p>
         <div class="content">
             <p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
             </p>
-            
         </div>
         <ul class="investigations">
                 <li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
         </ul>
-            <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+        <div class="keywords-wrapper">
-            <a class="link-block" href="#" target="_blank"></a>
+        <ul class="keywords">
-
+                        <li><a href="#keyword" target="_blank">Occupation</a></li>
+                        <li><a href="#keyword" target="_blank">Colonialité</a></li>
+                        <li><a href="#keyword" target="_blank">Forces armées</a></li>
+                    </ul>
         </div>
 
-</div><!-- col-right -->
+        <button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
+        <a class="link-block" href="#" target="_blank"></a>
+    </div>
+    </div>
+
+
+
+  </div><!-- col-right -->
 
 
 </div> 

site/templates/report.php

@@ -127,9 +127,9 @@
 
 
     <div class="report__content">
+        <div id="arrow__medias" class="arrow-report"><span>▶</span></div>
 
         <div class="report__medias" id="report__medias">
-            <!-- <span class="arrow">▶</span> -->
    
         </div>