/* Carrousel partagé : tokens uniquement. Sans JS, la piste reste dans sa colonne et défile quand même. */
.yam-carousel {
  min-width: 0;
}
.yam-carousel-track {
  display: flex;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0 0 var(--size-4);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.yam-carousel-track::-webkit-scrollbar {
  display: none;
}
.yam-carousel.is-bleeding .yam-carousel-track {
  margin-left: calc(var(--carousel-start) * -1);
  margin-right: calc(var(--carousel-end) * -1);
  padding-left: var(--carousel-start);
  padding-right: var(--layout-margin);
  scroll-padding-left: var(--carousel-start);
}
.yam-carousel-track:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--size-4);
}
/* Carte = --carousel-span colonnes de la grille sur les --carousel-of colonnes du carrousel. */
.yam-carousel-item {
  flex: 0 0 calc((var(--carousel-width, 100%) + var(--grid-gap)) * var(--carousel-span) / var(--carousel-of) - var(--grid-gap));
  margin: 0;
  scroll-snap-align: start;
}
.yam-carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--size-8);
  margin-top: var(--size-16);
}
.yam-carousel-button {
  display: grid;
  place-items: center;
  width: var(--size-48);
  height: var(--size-48);
  padding: 0;
  border: var(--rule-strong);
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: opacity var(--motion-quick);
}
.yam-carousel-button:disabled {
  opacity: 0.3;
  cursor: default;
}
.yam-carousel-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--size-4);
}
.yam-carousel-icon {
  width: var(--size-16);
  height: auto;
  margin: 0;
}
.yam-carousel-button.is-prev .yam-carousel-icon {
  transform: scaleX(-1);
}
:root[data-theme="dark"] .yam-carousel-icon {
  filter: invert(1);
}

@media (prefers-reduced-motion: reduce) {
  .yam-carousel-button {
    transition: none;
  }
}