/* 050 — Snap Carousel
   Le défilement est 100 % natif (scroll-snap + scroll-behavior:smooth) ;
   anim.js ne fait que synchroniser dots/flèches (IntersectionObserver) et
   déclencher les scrollTo. Parallax d'entrée des textes en scroll-driven
   animation (progressive enhancement @supports). */

.snap-carousel {
  position: relative;
  /* Largeur fixe + max-width (PAS min(340px, 100%)) : un pourcentage dans
     width se comporte comme auto pour le dimensionnement intrinsèque d'une
     colonne grid/flex — la colonne se calerait sur le min-content du track
     (le texte des slides) et le carousel déborderait de son conteneur. */
  width: 340px;
  max-width: 100%;
}

.snap-carousel__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 16px;
}

.snap-carousel__track::-webkit-scrollbar { display: none; }

/* Anneau de focus discret, à l'intérieur du rayon — pas de cadre flottant
   autour de tout le scroller. */
.snap-carousel__track:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ml-accent, #7c8cff) 55%, transparent);
  outline-offset: -2px;
}

.snap-carousel__slide {
  flex: 0 0 100%;
  min-height: 170px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid color-mix(in oklab, var(--ml-fg, #e8eaf2) 9%, transparent);
  background: var(--ml-surface, #151a24);
}

/* Teintes de démo, dérivées de la surface */
.snap-carousel__slide--1 {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--ml-accent, #7c8cff) 32%, var(--ml-surface, #151a24)),
    var(--ml-surface, #151a24) 78%);
}
.snap-carousel__slide--2 {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--ml-accent-2, #2dd4bf) 28%, var(--ml-surface, #151a24)),
    var(--ml-surface, #151a24) 78%);
}
.snap-carousel__slide--3 {
  background: linear-gradient(135deg,
    color-mix(in oklab, #f472b6 26%, var(--ml-surface, #151a24)),
    var(--ml-surface, #151a24) 78%);
}
.snap-carousel__slide--4 {
  background: linear-gradient(135deg,
    color-mix(in oklab, #f59e0b 24%, var(--ml-surface, #151a24)),
    var(--ml-surface, #151a24) 78%);
}

.snap-carousel__kicker {
  font: 500 11px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ml-muted, #8b91a3);
}

.snap-carousel__title {
  margin: 0;
  font: 600 20px/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
  color: var(--ml-fg, #e8eaf2);
}

/* Parallax d'entrée/sortie des textes, pilotée par la position de la slide
   dans le scroller (aucun JS) — enhancement seulement. */
@supports (animation-timeline: view(inline)) {
  @media not (prefers-reduced-motion: reduce) {
    .snap-carousel__kicker,
    .snap-carousel__title {
      animation: snap-carousel-parallax linear both;
      animation-timeline: view(inline);
    }
    .snap-carousel__title { --snap-carousel-drift: 34px; }
    .snap-carousel__kicker { --snap-carousel-drift: 20px; }
  }
}

@keyframes snap-carousel-parallax {
  0% {
    opacity: 0.1;
    transform: translateX(var(--snap-carousel-drift, 28px));
  }
  42%, 58% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0.1;
    transform: translateX(calc(var(--snap-carousel-drift, 28px) * -1));
  }
}

/* --- Flèches -------------------------------------------------------------- */

.snap-carousel__arrow {
  position: absolute;
  top: 68px; /* (min-height slide 170 − 34) / 2 */
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--ml-fg, #e8eaf2) 14%, transparent);
  background: color-mix(in oklab, var(--ml-bg, #0d1017) 68%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--ml-fg, #e8eaf2);
  cursor: pointer;
  opacity: 0.85;
  transition:
    transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1),
    opacity 0.25s ease,
    border-color 0.25s ease;
}

.snap-carousel__arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

.snap-carousel__arrow--prev { left: 10px; }
.snap-carousel__arrow--next { right: 10px; }

.snap-carousel__arrow:is(:hover, :focus-visible) {
  opacity: 1;
  transform: scale(1.12);
  border-color: color-mix(in oklab, var(--ml-accent, #7c8cff) 60%, transparent);
}

.snap-carousel__arrow:focus-visible {
  outline: 2px solid var(--ml-accent-2, #2dd4bf);
  outline-offset: 2px;
}

.snap-carousel__arrow:active {
  transform: scale(0.92);
  transition-duration: 0.12s;
}

.snap-carousel__arrow[disabled] {
  opacity: 0.25;
  transform: scale(0.9);
  pointer-events: none;
}

/* --- Dots ------------------------------------------------------------------ */

.snap-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}

.snap-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--ml-muted, #8b91a3) 45%, transparent);
  cursor: pointer;
  transition:
    width 0.45s cubic-bezier(0.3, 1.3, 0.4, 1),
    background-color 0.3s ease;
}

.snap-carousel__dot:is(:hover, :focus-visible) {
  background: var(--ml-muted, #8b91a3);
}

.snap-carousel__dot:focus-visible {
  outline: 2px solid var(--ml-accent-2, #2dd4bf);
  outline-offset: 2px;
}

.snap-carousel__dot.is-active {
  width: 22px;
  background: var(--ml-accent, #7c8cff);
}

/* --- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .snap-carousel__track { scroll-behavior: auto; }
  .snap-carousel__dot { transition: background-color 0.2s ease; }
  .snap-carousel__arrow { transition: opacity 0.2s ease; }
  .snap-carousel__arrow:is(:hover, :focus-visible, :active),
  .snap-carousel__arrow[disabled] { transform: none; }
}