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>
refactor: consolidate CSS with reusable mixins
2026-02-23 17:02:33 +01:00 · 2026-02-23 16:38:44 +01:00
13 changed files with 610 additions and 170 deletions
--- a/assets/css/src/_footer.scss
+++ b/assets/css/src/_footer.scss
@ -11,19 +11,12 @@ body > footer {
  header {
    text-align: center;
    .section-title {
-      font-size: var(--font-size-s);
-      width: 100%;
-      text-align: center;
-      text-transform: uppercase;
-      margin-bottom: 0.75rem;
-      font-weight: 400;
+      @include section-title-centered;
    }
    .title {
      width: 100%;
      text-align: center;
-      font-family: var(--font-narrow);
-      font-size: var(--font-size-l);
-      text-transform: uppercase;
+      @include big-title-base;
    }
  }

--- a/assets/css/src/_generic-classes.scss
+++ b/assets/css/src/_generic-classes.scss
@ -1,3 +1,6 @@
+// ========================================
+// CONTAINERS
+// ========================================
 .blue-container {
  background-color: var(--color-blue);
  color: #fff !important;
@ -8,6 +11,25 @@
  background-color: #fff !important;
 }

+.centered-container {
+  text-align: center;
+
+  &.--narrow {
+    width: min(100%, 40rem);
+  }
+
+  &.--medium {
+    width: min(90vw, 40rem);
+  }
+
+  &.--wide {
+    width: min(80%, 41.875rem);
+  }
+}
+
+// ========================================
+// BUTTONS
+// ========================================
 .blue-button {
  display: block;
  background-color: var(--color-blue);
@ -29,3 +51,148 @@
  color: var(--color-blue) !important;
  outline: 1px solid var(--color-blue);
 }
+
+// ========================================
+// MIXINS - TYPOGRAPHY TITLES
+// ========================================
+@mixin section-title {
+  font-size: var(--font-size-s);
+  text-transform: uppercase;
+  margin-bottom: 0.75rem;
+  font-weight: 400;
+}
+
+@mixin section-title-centered {
+  @include section-title;
+  width: 100%;
+  text-align: center;
+}
+
+@mixin big-title-base {
+  font-family: var(--font-narrow);
+  font-size: var(--font-size-l);
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+@mixin big-title-blue {
+  @include big-title-base;
+  color: var(--color-blue);
+}
+
+@mixin big-title-xnarrow {
+  font-family: 'owners-xnarrow', sans-serif;
+  font-size: var(--font-size-l);
+  text-transform: uppercase;
+  font-weight: 500;
+  color: var(--color-blue);
+}
+
+@mixin big-title-medium {
+  @include big-title-base;
+  font-size: 4.0625rem;
+}
+
+@mixin big-title-medium-blue {
+  @include big-title-medium;
+  color: var(--color-blue);
+}
+
+// ========================================
+// MIXINS - LABELS
+// ========================================
+@mixin label-base {
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  font-weight: 400;
+  opacity: 0.8;
+}
+
+@mixin label-spaced {
+  @include label-base;
+  margin-bottom: 0.7rem;
+}
+
+// ========================================
+// MIXINS - TEXT BLOCKS
+// ========================================
+@mixin text-paragraphs-spaced {
+  p:not(:last-child) {
+    margin-bottom: 1.75rem;
+  }
+}
+
+@mixin text-paragraphs-loose {
+  p:not(:last-child) {
+    margin-bottom: 2rem;
+  }
+}
+
+// ========================================
+// TYPOGRAPHY - TITLES (Classes)
+// ========================================
+.section-title {
+  @include section-title;
+
+  &.--centered {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.big-title {
+  @include big-title-base;
+
+  &.--blue {
+    color: var(--color-blue);
+  }
+
+  &.--xnarrow {
+    font-family: 'owners-xnarrow', sans-serif;
+    font-weight: 500;
+  }
+
+  &.--giant {
+    font-size: 8rem;
+  }
+
+  &.--medium {
+    font-size: 4.0625rem;
+  }
+}
+
+// ========================================
+// TYPOGRAPHY - LABELS & SMALL TEXT (Classes)
+// ========================================
+.label {
+  @include label-base;
+
+  &.--dimmed {
+    opacity: 0.6;
+  }
+
+  &.--spaced {
+    margin-bottom: 0.7rem;
+  }
+}
+
+// ========================================
+// TYPOGRAPHY - TEXT BLOCKS (Classes)
+// ========================================
+.text-block {
+  font-size: var(--font-size-m);
+
+  &.--medium-weight {
+    font-weight: 500;
+  }
+
+  p:not(:last-child) {
+    margin-bottom: 1.75rem;
+  }
+
+  &.--loose {
+    p:not(:last-child) {
+      margin-bottom: 2rem;
+    }
+  }
+}
--- a/assets/css/src/_section_10-buy.scss
+++ b/assets/css/src/_section_10-buy.scss
@ -8,16 +8,11 @@ section#buy {
    width: 30rem;
    margin-left: 8rem;
    .section-title {
-      font-size: var(--font-size-s);
-      text-transform: uppercase;
-      margin-bottom: 0.75rem;
+      @include section-title;
    }

    .title {
-      font-family: 'owners-xnarrow', sans-serif;
-      font-size: var(--font-size-l);
-      text-transform: uppercase;
-      color: var(--color-blue);
+      @include big-title-xnarrow;
      margin-bottom: 1.75rem;
    }

@ -40,11 +35,8 @@ section#buy {
    }

    .info {
-      font-size: 0.625rem;
-      opacity: 0.8;
-      text-transform: uppercase;
+      @include label-base;
      letter-spacing: 2.4px;
-      font-weight: 400;
    }
  }

--- a/assets/css/src/_section_3-the_book.scss
+++ b/assets/css/src/_section_3-the_book.scss
@ -11,19 +11,14 @@ section#the-book {
      text-transform: uppercase;

      .title {
-        font-family: var(--font-narrow);
-        font-size: 4.0625rem;
-        font-weight: 700;
-        color: blue;
+        @include big-title-medium-blue;
      }
    }

    .text {
      font-weight: normal;
      font-size: var(--font-size-m);
-      p {
-        margin-bottom: 1.75rem;
-      }
+      @include text-paragraphs-spaced;
    }
  }

@ -37,9 +32,7 @@ section#the-book {
    margin-bottom: 5rem;

    .label {
-      font-size: 0.625rem;
-      font-weight: 400;
-      opacity: 0.8;
+      @include label-base;
      margin-bottom: 0.5rem;
    }
  }
--- a/assets/css/src/_section_4-excerpts.scss
+++ b/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);
@ -17,55 +18,140 @@ section#excerpts {
    }

    .title {
-      font-family: var(--font-narrow);
-      font-size: var(--font-size-l);
-      font-weight: 700;
-      text-transform: uppercase;
+      @include big-title-base;
      letter-spacing: 5%;
    }
  }

-  .slider {
+  // Swiper container (styles de base requis par Swiper.js)
+  .swiper {
    width: 100%;
+    position: relative;
+    padding-bottom: 5rem; // Espace pour pagination
+    overflow: hidden; // REQUIS : cache les slides hors viewport
+  }
+
+  .swiper-wrapper {
    display: flex;
-    overflow: hidden;
+    position: relative; // REQUIS pour les transforms
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    transition-property: transform; // REQUIS pour les animations
+    box-sizing: content-box;
+  }

-    .slide {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
+  .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 {
-          opacity: 0.8;
-          text-transform: uppercase;
-          font-size: 0.625rem;
-          margin-bottom: 0.7rem;
-        }
-        .text {
-          font-size: var(--font-size-m);
-          line-height: 140%;
-          margin-bottom: 8rem;
-        }
+    .item {
+      width: 13.125rem;
+
+      .label {
+        @include label-spaced;
+      }
+
+      .text {
+        font-size: var(--font-size-m);
+        line-height: 140%;
      }
    }
  }

-  .controls {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
+  // 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;

-    .bullets {
-      display: flex;
-      .bullet {
-        width: 0.45rem;
-        height: 0.45rem;
-        border-radius: 100%;
-        background-color: #fff;
-        margin: 0.2rem;
+    &::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%;
+  }
+
+  .swiper-pagination-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;
+  }
+
+  // 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;
+    }
  }
 }
--- a/assets/css/src/_section_5-handles.scss
+++ b/assets/css/src/_section_5-handles.scss
@ -12,16 +12,11 @@ section#handles {

    .title-wrapper {
      .index {
-        font-size: var(--font-size-s);
-        text-transform: uppercase;
+        @include section-title;
        font-weight: 500;
-        margin-bottom: 0.75rem;
      }
      .title {
-        font-family: var(--font-narrow);
-        color: var(--color-blue);
-        font-size: 4.0625rem;
-        text-transform: uppercase;
+        @include big-title-medium-blue;
      }
    }
    .subtitle {
--- a/assets/css/src/_section_7-system.scss
+++ b/assets/css/src/_section_7-system.scss
@ -12,18 +12,11 @@ section#system {

    .top {
      .section-title {
-        font-weight: 400;
-        font-size: var(--font-size-s);
-        text-transform: uppercase;
-        margin-bottom: 0.75rem;
+        @include section-title;
      }

      .title {
-        font-family: 'owners-xnarrow', sans-serif;
-        font-weight: 500;
-        font-size: var(--font-size-l);
-        text-transform: uppercase;
-        color: var(--color-blue);
+        @include big-title-xnarrow;
        margin-bottom: 2rem;
      }

--- a/assets/css/src/_section_8-excerpt.scss
+++ b/assets/css/src/_section_8-excerpt.scss
@ -6,25 +6,18 @@ section#excerpt {
    width: min(90vw, 40rem);

    .section-title {
-      font-size: var(--font-size-s);
-      width: 100%;
-      text-align: center;
-      margin-bottom: 0.75rem;
+      @include section-title-centered;
    }
    .chapter-title {
      width: 100%;
      text-align: center;
-      font-family: var(--font-narrow);
-      font-size: var(--font-size-l);
-      text-transform: uppercase;
+      @include big-title-base;
    }

    .content {
      margin: 3rem 0;
      font-size: var(--font-size-m);
-      p:not(:last-child) {
-        margin-bottom: 1.75rem;
-      }
+      @include text-paragraphs-spaced;

      p.reference {
        font-size: 0.75rem;
--- a/assets/css/src/_section_9-author.scss
+++ b/assets/css/src/_section_9-author.scss
@ -15,17 +15,11 @@ section#author {
    width: 35rem;

    .section-title {
-      font-size: var(--font-size-s);
-      text-transform: uppercase;
-      margin-bottom: 0.75rem;
-      font-weight: 400;
+      @include section-title;
    }

    .author-name {
-      font-family: 'owners-xnarrow', sans-serif;
-      font-size: var(--font-size-l);
-      color: var(--color-blue);
-      text-transform: uppercase;
+      @include big-title-xnarrow;
      margin-bottom: 5.75rem;
    }

@ -35,8 +29,6 @@ section#author {
      line-height: 140%;
    }

-    p:not(:last-child) {
-      margin-bottom: 2rem;
-    }
+    @include text-paragraphs-loose;
  }
 }
--- a/assets/css/style.css
+++ b/assets/css/style.css
@ -72,6 +72,19 @@ body {
  background-color: #fff !important;
 }

+.centered-container {
+  text-align: center;
+}
+.centered-container.--narrow {
+  width: min(100%, 40rem);
+}
+.centered-container.--medium {
+  width: min(90vw, 40rem);
+}
+.centered-container.--wide {
+  width: min(80%, 41.875rem);
+}
+
 .blue-button {
  display: block;
  background-color: var(--color-blue);
@ -93,6 +106,63 @@ body {
  outline: 1px solid var(--color-blue);
 }

+.section-title {
+  font-size: var(--font-size-s);
+  text-transform: uppercase;
+  margin-bottom: 0.75rem;
+  font-weight: 400;
+}
+.section-title.--centered {
+  width: 100%;
+  text-align: center;
+}
+
+.big-title {
+  font-family: var(--font-narrow);
+  font-size: var(--font-size-l);
+  text-transform: uppercase;
+  font-weight: 700;
+}
+.big-title.--blue {
+  color: var(--color-blue);
+}
+.big-title.--xnarrow {
+  font-family: "owners-xnarrow", sans-serif;
+  font-weight: 500;
+}
+.big-title.--giant {
+  font-size: 8rem;
+}
+.big-title.--medium {
+  font-size: 4.0625rem;
+}
+
+.label {
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  font-weight: 400;
+  opacity: 0.8;
+}
+.label.--dimmed {
+  opacity: 0.6;
+}
+.label.--spaced {
+  margin-bottom: 0.7rem;
+}
+
+.text-block {
+  font-size: var(--font-size-m);
+}
+.text-block.--medium-weight {
+  font-weight: 500;
+}
+.text-block p:not(:last-child) {
+  margin-bottom: 1.75rem;
+}
+.text-block.--loose p:not(:last-child) {
+  margin-bottom: 2rem;
+}
+
 body > header {
  position: sticky;
  z-index: 999;
@ -186,15 +256,17 @@ section#the-book .summary-wrapper .title-wrapper {
 }
 section#the-book .summary-wrapper .title-wrapper .title {
  font-family: var(--font-narrow);
-  font-size: 4.0625rem;
+  font-size: var(--font-size-l);
+  text-transform: uppercase;
  font-weight: 700;
-  color: blue;
+  font-size: 4.0625rem;
+  color: var(--color-blue);
 }
 section#the-book .summary-wrapper .text {
  font-weight: normal;
  font-size: var(--font-size-m);
 }
-section#the-book .summary-wrapper .text p {
+section#the-book .summary-wrapper .text p:not(:last-child) {
  margin-bottom: 1.75rem;
 }
 section#the-book .data-wrapper {
@ -208,6 +280,7 @@ section#the-book .data-wrapper {
 }
 section#the-book .data-wrapper .label {
  font-size: 0.625rem;
+  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.8;
  margin-bottom: 0.5rem;
@ -251,48 +324,122 @@ section#excerpts header .label {
 section#excerpts header .title {
  font-family: var(--font-narrow);
  font-size: var(--font-size-l);
-  font-weight: 700;
  text-transform: uppercase;
+  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 {
-  width: 100%;
+section#excerpts .swiper-wrapper {
  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 {
-  opacity: 0.8;
-  text-transform: uppercase;
+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 {
-  display: flex;
-}
-section#excerpts .controls .bullets .bullet {
+section#excerpts .swiper-pagination-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 {
@ -310,14 +457,17 @@ section#handles header {
 section#handles header .title-wrapper .index {
  font-size: var(--font-size-s);
  text-transform: uppercase;
-  font-weight: 500;
  margin-bottom: 0.75rem;
+  font-weight: 400;
+  font-weight: 500;
 }
 section#handles header .title-wrapper .title {
  font-family: var(--font-narrow);
-  color: var(--color-blue);
-  font-size: 4.0625rem;
+  font-size: var(--font-size-l);
  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 4.0625rem;
+  color: var(--color-blue);
 }
 section#handles header .subtitle {
  font-weight: 500;
@ -365,16 +515,16 @@ section#system .text {
  max-width: 27rem;
 }
 section#system .text .top .section-title {
-  font-weight: 400;
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
+  font-weight: 400;
 }
 section#system .text .top .title {
  font-family: "owners-xnarrow", sans-serif;
-  font-weight: 500;
  font-size: var(--font-size-l);
  text-transform: uppercase;
+  font-weight: 500;
  color: var(--color-blue);
  margin-bottom: 2rem;
 }
@ -410,9 +560,11 @@ section#excerpt .wrapper {
 }
 section#excerpt .wrapper .section-title {
  font-size: var(--font-size-s);
+  text-transform: uppercase;
+  margin-bottom: 0.75rem;
+  font-weight: 400;
  width: 100%;
  text-align: center;
-  margin-bottom: 0.75rem;
 }
 section#excerpt .wrapper .chapter-title {
  width: 100%;
@ -420,6 +572,7 @@ section#excerpt .wrapper .chapter-title {
  font-family: var(--font-narrow);
  font-size: var(--font-size-l);
  text-transform: uppercase;
+  font-weight: 700;
 }
 section#excerpt .wrapper .content {
  margin: 3rem 0;
@ -465,8 +618,9 @@ section#author .text .section-title {
 section#author .text .author-name {
  font-family: "owners-xnarrow", sans-serif;
  font-size: var(--font-size-l);
-  color: var(--color-blue);
  text-transform: uppercase;
+  font-weight: 500;
+  color: var(--color-blue);
  margin-bottom: 5.75rem;
 }
 section#author .text p {
@ -492,11 +646,13 @@ section#buy .text .section-title {
  font-size: var(--font-size-s);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
+  font-weight: 400;
 }
 section#buy .text .title {
  font-family: "owners-xnarrow", sans-serif;
  font-size: var(--font-size-l);
  text-transform: uppercase;
+  font-weight: 500;
  color: var(--color-blue);
  margin-bottom: 1.75rem;
 }
@ -518,10 +674,10 @@ section#buy .text .buy-links li a {
 }
 section#buy .text .info {
  font-size: 0.625rem;
-  opacity: 0.8;
  text-transform: uppercase;
-  letter-spacing: 2.4px;
  font-weight: 400;
+  opacity: 0.8;
+  letter-spacing: 2.4px;
 }
 section#buy img {
  width: 45%;
@ -546,11 +702,11 @@ body > footer header {
 }
 body > footer header .section-title {
  font-size: var(--font-size-s);
-  width: 100%;
-  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  font-weight: 400;
+  width: 100%;
+  text-align: center;
 }
 body > footer header .title {
  width: 100%;
@ -558,6 +714,7 @@ body > footer header .title {
  font-family: var(--font-narrow);
  font-size: var(--font-size-l);
  text-transform: uppercase;
+  font-weight: 700;
 }
 body > footer .contact {
  margin-top: 5rem;
--- a/assets/css/style.css.map
+++ b/assets/css/style.css.map
--- a/assets/js/script.js
+++ b/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,
+      }
+    }
+  });
+});
--- a/index.html
+++ b/index.html
@ -138,43 +138,76 @@
            Le réel traversé appelle un mot pour ne pas mourir
          </h3>
        </header>
-        <div class="slider">
-          <div class="slide">
-            <div class="item">
-              <p class="label">Prologue</p>
-              <p class="text">
-                Le réel est un seuil.<br />
-                On entre, ou pas.
-              </p>
+        <div class="swiper excerpts-swiper">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <div class="item">
+                <p class="label">Prologue</p>
+                <p class="text">
+                  Le réel est un seuil.<br />
+                  On entre, ou pas.
+                </p>
+              </div>
            </div>
-            <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 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="item">
-              <p class="label">L'apprentissage</p>
-              <p class="text">
-                On ne devient pas Einstein en le lisant, ni Picasso en le
-                regardant.<br />
-                <br />
-                Ça sauve presque.
-              </p>
+            <div class="swiper-slide">
+              <div class="item">
+                <p class="label">L'apprentissage</p>
+                <p class="text">
+                  On ne devient pas Einstein en le lisant, ni Picasso en le
+                  regardant.<br />
+                  <br />
+                  Ça sauve presque.
+                </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>
+            <div class="swiper-slide">
+              <div class="item">
+                <p class="label">La dépression</p>
+                <p class="text">
+                  La dépression est un effondrement de la traversabilité.<br />
+                  <br />
+                  C'est une plante qui ne meurt pas sur n'importe quel sol.
+                </p>
+              </div>
+            </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>
-        </div>
-        <div class="controls">
-          <button class="prev">
-            <img src="/assets/svg/arrow-left.svg" alt="flèche précédente" />
-          </button>
-          <ul class="bullets">
-            <li><button class="bullet"></button></li>
-            <li><button class="bullet"></button></li>
-          </ul>
-          <button class="next">
-            <img src="/assets/svg/arrow-right.svg" alt="flèche suivante" />
-          </button>
+
+          <!-- 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>