feat: implement functional slider with Swiper.js

- Add Swiper.js via CDN for carousel functionality
- Restructure excerpts section: 6 individual slides instead of 2 grouped slides
- Implement responsive behavior: 3 slides per view on desktop, 1 on mobile
- Add infinite loop navigation with prev/next buttons and pagination bullets
- Create custom styles in _section_4-excerpts.scss (no Swiper CSS)
- Add script.js with Swiper configuration and responsive breakpoints

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/css/src/_section_4-excerpts.scss

@@ -10,6 +10,7 @@ section#excerpts {
     text-align: center;
     width: min(80%, 41.875rem);
     margin-bottom: 3rem;
+
     .label {
       font-weight: 400;
       font-size: var(--font-size-s);
@@ -22,44 +23,135 @@ section#excerpts {
     }
   }
 
-  .slider {
+  // Swiper container (styles de base requis par Swiper.js)
+  .swiper {
     width: 100%;
-    display: flex;
+    position: relative;
-    overflow: hidden;
+    padding-bottom: 5rem; // Espace pour pagination
+    overflow: hidden; // REQUIS : cache les slides hors viewport
+  }
 
-    .slide {
+  .swiper-wrapper {
-      width: 100%;
     display: flex;
-      justify-content: space-between;
+    position: relative; // REQUIS pour les transforms
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    transition-property: transform; // REQUIS pour les animations
+    box-sizing: content-box;
+  }
+
+  .swiper-slide {
+    flex-shrink: 0; // REQUIS : empêche la compression des slides
+    width: 100%;
+    height: 100%;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
 
     .item {
       width: 13.125rem;
+
       .label {
         @include label-spaced;
       }
+
       .text {
         font-size: var(--font-size-m);
         line-height: 140%;
-          margin-bottom: 8rem;
-        }
       }
     }
   }
 
-  .controls {
+  // Navigation buttons (prev/next arrows)
+  .swiper-button-prev,
+  .swiper-button-next {
+    z-index: 1;
+    bottom: 0;
+    width: 2rem;
+    height: 2rem;
+    position: absolute;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+
+    &::after {
+      display: none; // Cache les flèches par défaut de Swiper
+    }
+  }
+
+  .swiper-button-prev {
+    background-image: url('/assets/svg/arrow-left.svg');
+    left: 0;
+  }
+
+  .swiper-button-next {
+    background-image: url('/assets/svg/arrow-right.svg');
+    right: 0;
+  }
+
+  // Pagination (bullets)
+  .swiper-pagination {
+    bottom: 0.5rem;
+    display: flex;
+    justify-content: center;
+    gap: 0.4rem;
+    position: absolute;
     width: 100%;
-    display: flex;
+  }
-    justify-content: space-between;
 
-    .bullets {
+  .swiper-pagination-bullet {
-      display: flex;
-      .bullet {
     width: 0.45rem;
     height: 0.45rem;
     border-radius: 100%;
+    background-color: rgba(255, 255, 255, 0.4);
+    opacity: 1;
+    transition: background-color 250ms ease, transform 250ms ease;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+  }
+
+  .swiper-pagination-bullet-active {
     background-color: #fff;
-        margin: 0.2rem;
+  }
+
+  // Mobile responsive
+  @media (max-width: 768px) {
+    padding: 4rem 2rem;
+
+    header {
+      margin-bottom: 2rem;
+
+      .title {
+        font-size: 2.5rem;
+      }
+    }
+
+    .swiper-slide {
+      .item {
+        width: 100%;
+        max-width: 20rem;
+        text-align: center;
+
+        .text {
+          margin-bottom: 2rem;
         }
       }
     }
+
+    .swiper-button-prev,
+    .swiper-button-next {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
 }

assets/css/style.css

@@ -328,45 +328,118 @@ section#excerpts header .title {
   font-weight: 700;
   letter-spacing: 5%;
 }
-section#excerpts .slider {
+section#excerpts .swiper {
   width: 100%;
-  display: flex;
+  position: relative;
+  padding-bottom: 5rem;
   overflow: hidden;
 }
-section#excerpts .slider .slide {
+section#excerpts .swiper-wrapper {
-  width: 100%;
   display: flex;
-  justify-content: space-between;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  transition-property: transform;
+  box-sizing: content-box;
 }
-section#excerpts .slider .slide .item {
+section#excerpts .swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+section#excerpts .swiper-slide .item {
   width: 13.125rem;
 }
-section#excerpts .slider .slide .item .label {
+section#excerpts .swiper-slide .item .label {
   font-size: 0.625rem;
   text-transform: uppercase;
   font-weight: 400;
   opacity: 0.8;
   margin-bottom: 0.7rem;
 }
-section#excerpts .slider .slide .item .text {
+section#excerpts .swiper-slide .item .text {
   font-size: var(--font-size-m);
   line-height: 140%;
-  margin-bottom: 8rem;
 }
-section#excerpts .controls {
+section#excerpts .swiper-button-prev,
+section#excerpts .swiper-button-next {
+  z-index: 1;
+  bottom: 0;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+}
+section#excerpts .swiper-button-prev::after,
+section#excerpts .swiper-button-next::after {
+  display: none;
+}
+section#excerpts .swiper-button-prev {
+  background-image: url("/assets/svg/arrow-left.svg");
+  left: 0;
+}
+section#excerpts .swiper-button-next {
+  background-image: url("/assets/svg/arrow-right.svg");
+  right: 0;
+}
+section#excerpts .swiper-pagination {
+  bottom: 0.5rem;
+  display: flex;
+  justify-content: center;
+  gap: 0.4rem;
+  position: absolute;
   width: 100%;
-  display: flex;
-  justify-content: space-between;
 }
-section#excerpts .controls .bullets {
+section#excerpts .swiper-pagination-bullet {
-  display: flex;
-}
-section#excerpts .controls .bullets .bullet {
   width: 0.45rem;
   height: 0.45rem;
   border-radius: 100%;
+  background-color: rgba(255, 255, 255, 0.4);
+  opacity: 1;
+  transition: background-color 250ms ease, transform 250ms ease;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+}
+section#excerpts .swiper-pagination-bullet:hover {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+section#excerpts .swiper-pagination-bullet-active {
   background-color: #fff;
-  margin: 0.2rem;
+}
+@media (max-width: 768px) {
+  section#excerpts {
+    padding: 4rem 2rem;
+  }
+  section#excerpts header {
+    margin-bottom: 2rem;
+  }
+  section#excerpts header .title {
+    font-size: 2.5rem;
+  }
+  section#excerpts .swiper-slide .item {
+    width: 100%;
+    max-width: 20rem;
+    text-align: center;
+  }
+  section#excerpts .swiper-slide .item .text {
+    margin-bottom: 2rem;
+  }
+  section#excerpts .swiper-button-prev,
+  section#excerpts .swiper-button-next {
+    width: 2rem;
+    height: 2rem;
+  }
 }
 
 section#handles {

assets/js/script.js

@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const excerptSwiper = new Swiper('.excerpts-swiper', {
+    // Slides visibles et groupement
+    slidesPerView: 3,
+    slidesPerGroup: 3,
+    spaceBetween: 30,
+
+    // Infinite loop
+    loop: true,
+
+    // Navigation arrows
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+
+    // Pagination bullets
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+      dynamicBullets: false,
+    },
+
+    // Transitions
+    speed: 400,
+    effect: 'slide',
+
+    // Responsive breakpoints
+    breakpoints: {
+      // Mobile : <= 768px
+      0: {
+        slidesPerView: 1,
+        slidesPerGroup: 1,
+        spaceBetween: 20,
+      },
+      // Desktop : > 768px
+      769: {
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+        spaceBetween: 30,
+      }
+    }
+  });
+});

index.html

@@ -138,8 +138,9 @@
             Le réel traversé appelle un mot pour ne pas mourir
           </h3>
         </header>
-        <div class="slider">
+        <div class="swiper excerpts-swiper">
-          <div class="slide">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
               <div class="item">
                 <p class="label">Prologue</p>
                 <p class="text">
@@ -147,12 +148,16 @@
                   On entre, ou pas.
                 </p>
               </div>
+            </div>
+            <div class="swiper-slide">
               <div class="item">
                 <p class="label">La peur</p>
                 <p class="text">
                   Le réel est là, à portée de main. La peur est son odeur.
                 </p>
               </div>
+            </div>
+            <div class="swiper-slide">
               <div class="item">
                 <p class="label">L'apprentissage</p>
                 <p class="text">
@@ -163,18 +168,46 @@
                 </p>
               </div>
             </div>
+            <div class="swiper-slide">
+              <div class="item">
+                <p class="label">Le temps</p>
+                <p class="text">
+                  Les dernières secondes<br />
+                  ne sont pas du rebut.<br />
+                  <br />
+                  Elles ramassent tout.
+                </p>
               </div>
-        <div class="controls">
+            </div>
-          <button class="prev">
+            <div class="swiper-slide">
-            <img src="/assets/svg/arrow-left.svg" alt="flèche précédente" />
+              <div class="item">
-          </button>
+                <p class="label">La dépression</p>
-          <ul class="bullets">
+                <p class="text">
-            <li><button class="bullet"></button></li>
+                  La dépression est un effondrement de la traversabilité.<br />
-            <li><button class="bullet"></button></li>
+                  <br />
-          </ul>
+                  C'est une plante qui ne meurt pas sur n'importe quel sol.
-          <button class="next">
+                </p>
-            <img src="/assets/svg/arrow-right.svg" alt="flèche suivante" />
+              </div>
-          </button>
+            </div>
+            <div class="swiper-slide">
+              <div class="item">
+                <p class="label">Le tissu du monde</p>
+                <p class="text">
+                  Un seul amour,<br />
+                  pleinement porté,<br />
+                  suffit à ce que la<br />
+                  totalité ne chute pas.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- Navigation arrows -->
+          <div class="swiper-button-prev"></div>
+          <div class="swiper-button-next"></div>
+
+          <!-- Pagination bullets -->
+          <div class="swiper-pagination"></div>
         </div>
       </section>
 
@@ -438,5 +471,7 @@
         </p>
       </div>
     </footer>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
+    <script src="/assets/js/script.js"></script>
   </body>
 </html>