drupal-erable/web/themes/erabletheme/scss/partials/_carousel.scss

// 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%;
    overflow-x: hidden;
  }
  .slick-container {
      width: 100%;
      margin-bottom: 5rem;
      @media screen and (min-width: $breakpoint_tablet) {
        width: 200vw;
        transform: translateX(-50vw);
      }
      div.views-row {
          padding: 0 2vw;
          @media screen and (min-width: $breakpoint_tablet) {
              padding: 0 6vw;
          }
        > article {
          width: 100%;
          > div:first-of-type { // container du lien image
              overflow-y: hidden;
              padding: 0 !important;
              display: flex;
              align-items: center;
              > div {
                  width: 100%;
                  > a {
                      max-width: 100%;
                      img {
                          width: 100%;
                          height: auto;
                      }
                  }
              }
          }
          @media (min-width: $breakpoint_tablet) {
              .preview_meta {
                  margin-left: 0;
                  margin-right: 0;
              }
              h2, .preview_sous_titre {
                  padding-left: 0;
                  padding-right: 0;
              }
          }
        }
      }
      // --- 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: $arrow_size;
          height: $arrow_size;
          border-radius: 50%;
          background-color: $fluo_green !important;
          transition: background-color 0.3s ease;
          top: unset !important;
          // 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 {
            &::before { color: black; }
          }
          &::before {
            position: static;
            opacity: 1 !important;
            color: $text_grey;
            font-weight: bold;
            font-family: $marianne;
            font-size: $fs_md !important;
            line-height: 1;
            width: auto;
            height: auto;
          }
      }
      .slick-prev {
        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: 5vw;
        @media (min-width: $breakpoint_tablet) {
          right: calc(50vw + 10vw);
        }
        @media (min-width: $breakpoint_desktop) {
          right: calc(50vw + 35vw);
        }
      }
      > div > div > div:first-of-type {
        z-index: 2;
        position: relative;
        margin-bottom: 4rem;
        @media (min-width: $breakpoint_tablet) {
          margin-bottom: 6rem;
        }
      }
  } // /.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;
  }
}