Le carrousel

<section class="carousel" aria-labelledby="carousel-title">
  <h2 id="carousel-title">Destinations</h2>
  <!-- Flèches : masquées tant que le script n'a pas tourné -->
  <div class="carousel__arrows" hidden>
    <button
      type="button"
      data-direction="-1"
      aria-controls="carousel-track"
    >
      <span aria-hidden="true">←</span>
      <span class="visually-hidden">Cartes précédentes</span>
    </button>
    <button
      type="button"
      data-direction="1"
      aria-controls="carousel-track"
    >
      <span aria-hidden="true">→</span>
      <span class="visually-hidden">Cartes suivantes</span>
    </button>
  </div>
  <!-- Liste qui défile : une carte = un élément de liste -->
  <ul class="carousel__track" id="carousel-track">
    <li>
      <h3><a href="https://fr.wikipedia.org/wiki/Lisbonne">Lisbonne</a></h3>
      <p>…</p>
    </li>
    <li>…</li>
  </ul>
</section>

<script>
  // Flèches : défilent d'une vue, sans déplacer le focus
  const track = document.querySelector('.carousel__track');
  const arrows = document.querySelector('.carousel__arrows');
  const [prev, next] = arrows.querySelectorAll('button');
  const update = () => {
    const atStart = track.scrollLeft < 1;
    const atEnd = track.scrollLeft + track.clientWidth > track.scrollWidth - 1;
    prev.setAttribute('aria-disabled', atStart);
    next.setAttribute('aria-disabled', atEnd);
  };
  arrows.addEventListener('click', (e) => {
    const button = e.target.closest('button');
    if (button && button.getAttribute('aria-disabled') !== 'true') {
      track.scrollBy({ left: button.dataset.direction * track.clientWidth });
    }
  });
  track.addEventListener('scroll', update);
  window.addEventListener('resize', update);
  arrows.hidden = false;
  update();
</script>

/* Le carrousel mesure sa propre largeur (container query),
   pas celle de l'écran */
.carousel {
  container-type: inline-size;
}

.carousel__track {
  --visible: 1;
  --peek: 32px;
  --gap: 12px;
  display: flex;
  gap: var(--gap);
  /* La carte suivante dépasse dans la marge */
  padding-inline: var(--peek);
  scroll-padding-inline: var(--peek);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel__track li {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  scroll-snap-align: start;
}

@container (min-width: 480px) {
  .carousel__track {
    --visible: 2;
    --peek: 36px;
  }
}

@container (min-width: 720px) {
  .carousel__track {
    --visible: 3;
  }
}

@container (min-width: 960px) {
  .carousel__track {
    --visible: 4;
    --peek: 48px;
  }
}

/* Avec les flèches, la barre de défilement n'est plus utile */
.carousel:has(.carousel__arrows:not([hidden])) .carousel__track {
  scrollbar-width: none;
}

.carousel__arrows button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: default;
}

@media (prefers-reduced-motion: no-preference) {
  .carousel__track {
    scroll-behavior: smooth;
  }
}