refonte page d'accueil nouveau design, sans images pour l'instant

web/themes/erabletheme/scss/partials/_carousel.scss

@@ -1,3 +1,7 @@
+// Variables pagination du carrousel (flèches + dots slick).
+$arrow_size: 2.3rem;
+$pagination_line_offset: 4rem; // distance bas carrousel -> centre de la ligne flèches/dots
+
 .carousel_container {
   @media screen and (min-width: $breakpoint_tablet) {
     width: 100%;
@@ -45,46 +49,52 @@
           }
         }
       }
+      // --- Ligne de pagination ---
+      // Slick rend les flèches dans .slick-list (donc dans .slick-container)
+      // et les dots dans #carousel_dots (frère, géré plus bas).
       .slick-arrow {
-          width: 1.5rem;
-          height: 1.5rem;
-          border-radius: 1.5rem;
-          background-color: $teal !important;
+          width: $arrow_size;
+          height: $arrow_size;
+          border-radius: 50%;
+          background-color: $fluo_green !important;
           transition: background-color 0.3s ease;
           top: unset !important;
-          bottom: calc(-25px - 4rem);
-          @media (min-width: $breakpoint_tablet) {
-            width: 2rem;
-            height: 2rem;
-            bottom: calc(-25px - 6rem);
-          }
+          // Centre vertical de la flèche aligné sur $pagination_line_offset
+          bottom: calc(-1 * (#{$pagination_line_offset} + #{$arrow_size} / 2));
+          display: flex !important;
+          align-items: center;
+          justify-content: center;
+          padding: 0;
           &:hover {
-            background-color: white !important;
-            &::before {
-              color: $teal;
-            }
+            &::before { color: black; }
           }
           &::before {
+            position: static;
             opacity: 1 !important;
-            color: white;
+            color: $text_grey;
             font-weight: bold;
-            font-family: 'Marianne', sans-serif;
-            display: block;
-            font-size: $sm_font_size !important;
-            @media (min-width: $breakpoint_tablet) {
-              font-size: $l_font_size !important;
-            }
+            font-family: $marianne;
+            font-size: $fs_md !important;
+            line-height: 1;
+            width: auto;
+            height: auto;
           }
       }
       .slick-prev {
-        left: 20vw;
+        left: 5vw;
         @media (min-width: $breakpoint_tablet) {
+          left: calc(50vw + 10vw); // tablette : proche du bord (repère 200vw)
+        }
+        @media (min-width: $breakpoint_desktop) {
           left: calc(50vw + 35vw);
         }
       }
       .slick-next {
-        right: 20vw;
+        right: 5vw;
         @media (min-width: $breakpoint_tablet) {
+          right: calc(50vw + 10vw);
+        }
+        @media (min-width: $breakpoint_desktop) {
           right: calc(50vw + 35vw);
         }
       }
@@ -96,26 +106,56 @@
           margin-bottom: 6rem;
         }
       }
-      #carousel_dots {
-        z-index: 1;
-        position: relative;
-        margin-top: -15px;
-        ul {
-            position: relative;
-            bottom: 0;
-            li.slick-active button::before{
-                color: $teal;
-            }
-            li button::before{
-                color: rgba(0.9, 0.9, 0.9, 1);
-            }
+  } // /.slick-container
+
+  // #carousel_dots utilise le ::before unicode de slick comme pastille
+  // (cf. slick-theme.css ~ligne 178). On stylise donc la couleur du ::before
+  // au lieu de masquer le ::before et de styler le button — c'est plus simple
+  // et c'est ainsi que ça fonctionnait avant la refonte.
+  //
+  // Alignement vertical avec les flèches :
+  // - Les flèches sont ancrées via `bottom: -($pagination_line_offset + $arrow_size/2)`
+  //   donc leur centre vertical est à $pagination_line_offset sous le bas du carrousel.
+  // - Le #carousel_dots arrive juste en dessous (flux normal). Sa rangée de dots
+  //   intrinsèque (ul.slick-dots de slick) fait environ 1.25rem de hauteur visuelle.
+  // - Pour aligner les centres, on remonte de :
+  //     $pagination_line_offset + $arrow_size/2 - 1.25rem
+  $slick_dots_intrinsic_height: 1.25rem;
+  #carousel_dots {
+    position: relative;
+    z-index: 1;
+    // Formule calibrée pour tablette+/desktop (cf. commentaire ci-dessus).
+    margin-top: calc(-1 * (#{$pagination_line_offset} + #{$arrow_size} / 2 - #{$slick_dots_intrinsic_height}));
+    // En mobile, slick passe à slidesToShow: 1 → le parent positionné des
+    // flèches change, ce qui décale leur centre d'~33px vers le haut par
+    // rapport au flux du #carousel_dots. Magic number pour compenser.
+    @media (max-width: #{$breakpoint_tablet - 1px}) {
+      margin-top: calc(-1 * (#{$pagination_line_offset} + #{$arrow_size} / 2 - #{$slick_dots_intrinsic_height}) + 33px);
+    }
+    ul {
+      position: relative;
+      bottom: 0;
+      li {
+        margin: 0 0.75rem;
+        button::before {
+          font-size: $fs_xs;
+          opacity: 1;
+          color: $text_grey;
+          transition: color 0.2s ease;
+        }
+        &:hover button::before {
+          color: black;
+        }
+        &.slick-active button::before {
+          color: $fluo_green;
         }
       }
-      footer {
-          @include fluo_button();
-          text-align: center;
-          margin-top: 4rem;
-          margin-bottom: 4rem;
-      }
+    }
+  }
+  footer {
+      @include fluo_button();
+      text-align: center;
+      margin-top: 4rem;
+      margin-bottom: 4rem;
   }
 }