add slider

assets/css/components/_swipper.scss

@@ -0,0 +1,55 @@
+#home__investigations{
+    // .col-right{
+    //     position: relative;
+    //     overflow: visible;
+    //     background-color: red;
+    // }
+
+    // .home-investigations-slider{
+    //     position: relative;
+    //     overflow: hidden;
+    //     margin: 0 60px;
+    // }
+
+    // .swiper-button-prev,
+    // .swiper-button-next{
+    //     --swiper-navigation-size: 32px;
+    //     color: var(--color-txt);
+    //     position: absolute;
+    //     top: 50%;
+    //     transform: translateY(-50%);
+    //     z-index: 10;
+
+    //     &:after{
+    //         font-size: var(--swiper-navigation-size);
+    //     }
+    // }
+
+    // .swiper-button-prev{
+    //     left: 0;
+    // }
+
+    // .swiper-button-next{
+    //     right: 0;
+    // }
+
+    .swiper-slide{
+        padding-left: 60px;
+        padding-right: 60px;
+    }
+    .swiper-pagination{
+        position: relative;
+        margin-top: calc(var(--spacing)*1);
+
+        .swiper-pagination-bullet{
+            width: 15px;
+            height: 4px;
+            border-radius: 2px;
+            background: var(--color-txt-light);
+        }
+
+        .swiper-pagination-bullet-active{
+            background: var(--color-txt);
+        }
+    }
+}

assets/css/style.css

@@ -1633,6 +1633,24 @@ button.sort[data-sort-type=up] .arrow {
     aspect-ratio: inherit;
   }
 }
+#home__investigations .swiper-slide {
+  padding-left: 60px;
+  padding-right: 60px;
+}
+#home__investigations .swiper-pagination {
+  position: relative;
+  margin-top: calc(var(--spacing) * 1);
+}
+#home__investigations .swiper-pagination .swiper-pagination-bullet {
+  width: 15px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--color-txt-light);
+}
+#home__investigations .swiper-pagination .swiper-pagination-bullet-active {
+  background: var(--color-txt);
+}
+
 #site-header {
   z-index: var(--z-header);
   --gap: 3ch;
@@ -1956,7 +1974,9 @@ main .page__header .description-medium {
 }
 .section--home .section--inner {
   display: grid;
-  grid-template-columns: 50% 50%;
+  --gap: calc(var(--padding-body)*2);
+  grid-template-columns: repeat(2, calc((100% - var(--gap)) * 0.5));
+  grid-gap: var(--gap);
 }
 .section--home .col-left {
   height: 100%;
@@ -1968,7 +1988,6 @@ main .page__header .description-medium {
 .section--home .col-right {
   width: 100%;
   height: 100%;
-  background-color: yellow;
 }
 .section--home .title-section {
   font-size: var(--fs-medium);
@@ -1983,14 +2002,8 @@ main .page__header .description-medium {
   margin-bottom: calc(var(--spacing) * 1.5);
 }
 
-#home__investigations .container-cards {
-  max-width: var(--max-w-container);
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-  grid-auto-rows: minmax(100px, auto);
-  grid-gap: calc(var(--padding-body) * 1.5);
-  margin-bottom: 10vh;
+#home__investigations .card--article .description, #home__investigations .card--article .dl {
+  font-size: var(--fs-small);
 }
 
 #home__description .section--inner {

assets/css/style.scss

@@ -30,7 +30,7 @@
 @import "components/card-impact";
 @import "components/card-folder";
 @import "components/card-open-graph";
-
+@import "components/swipper";
 
 @import "partials/site-header";
 @import "partials/site-menu";

assets/css/template/_home.scss

@@ -9,7 +9,9 @@
 
     .section--inner{
         display: grid;
-        grid-template-columns: 50% 50%;
+        --gap: calc(var(--padding-body)*2);
+        grid-template-columns: repeat(2, calc((100% - var(--gap))*0.5));
+        grid-gap: var(--gap);
     }
 
 
@@ -24,7 +26,6 @@
     .col-right{
         width: 100%;
         height: 100%;
-        background-color: yellow;
     }
 
     
@@ -45,16 +46,17 @@
 }
 
 
+
+
 #home__investigations{
-    .container-cards{
-        max-width: var(--max-w-container);
-        margin: 0 auto;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-        grid-auto-rows: minmax(100px, auto);
-        grid-gap: calc(var(--padding-body)*1.5);
-        margin-bottom: 10vh;
+
+    .card--article{
+        .description, .dl{
+            font-size: var(--fs-small);
+        }
     }
+
+
 }
 #home__description{
 

assets/js/home-investigations-slider.js

@@ -0,0 +1,47 @@
+import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
+
+export function initHomeInvestigationsSlider() {
+  const slider = document.querySelector('.home-investigations-slider');
+
+  if (!slider) {
+    return;
+  }
+
+  const swiper = new Swiper('.home-investigations-slider', {
+    // Optional parameters
+    slidesPerView: 1,
+    spaceBetween: 20,
+    speed: 600,
+
+    // Touch/Swipe settings
+    touchRatio: 1,
+    touchAngle: 45,
+    grabCursor: true,
+    simulateTouch: true,
+    allowTouchMove: true,
+
+    // Navigation arrows
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+
+    // Pagination
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+    },
+
+    // Keyboard control
+    keyboard: {
+      enabled: true,
+    },
+
+    // Accessibility
+    a11y: {
+      prevSlideMessage: 'Investigation précédente',
+      nextSlideMessage: 'Investigation suivante',
+      paginationBulletMessage: 'Aller à l\'investigation {{index}}',
+    },
+  });
+}

assets/js/script.js

@@ -7,6 +7,7 @@ import { themeToggle } from './themeToggle.js';
 import { initHeroSlider } from './hero-slider.js';
 import { playVideo } from './hero-video.js';
 import { initDropdowns } from './dropdown.js';
+import { initHomeInvestigationsSlider } from './home-investigations-slider.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -24,4 +25,5 @@ window.onload = async function () {
   initHeroSlider();
   playVideo();
   initDropdowns(responsiveSmall);
+  initHomeInvestigationsSlider();
 }