/* =============================================
   BICYCLETTE – Slider / Carrousel CSS v1
   CSS scroll-snap natif (sans librairie externe)
   ============================================= */

/* ── En-tête de section avec contrôles ──────── */
.slider-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.slider-header__left {
  flex: 1;
  min-width: 0;
}

.slider-header__left .tag  { display: inline-block; margin-bottom: .4rem; }
.slider-header__left h2    { margin-bottom: .3rem; }
.slider-header__left .lead { margin-bottom: 0; }

/* ── Groupe flèches + lien ──────────────────── */
.slider-controls {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding-top: .3rem;
  flex-shrink: 0;
}

.slider-more-link {
  font-size: .875rem;
  font-weight: 700;
  color: var(--primary-text);
  text-decoration: none;
  white-space: nowrap;
  padding: .2rem 0;
  transition: color .18s ease;
}
.slider-more-link:hover {
  color: var(--primary-text-hover);
}

/* ── Boutons flèches ────────────────────────── */
.slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-700);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: border-color .18s, color .18s, background .18s, box-shadow .18s, transform .15s;
  flex-shrink: 0;
}

.slider-arrow:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), .18);
  transform: scale(1.08);
}
@media (prefers-reduced-motion: reduce) {
  .slider-arrow:hover:not(:disabled) {
    transform: none;
  }
}

.slider-arrow:disabled {
  opacity: .3;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Piste de défilement ────────────────────── */
.slider-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;     /* Firefox */
  padding-bottom: .75rem;    /* espace sous les cartes */
}

.slider-track::-webkit-scrollbar { display: none; }

/* ── Largeur des cartes par breakpoint ──────── */

/* Desktop ≥1200 px : ~4.2 cartes visibles */
.slider-track > * {
  flex: 0 0 calc((100% - 3 * 1.25rem) / 4.2);
  min-width: 200px;
  scroll-snap-align: start;
}

/* Tablette 640–1199 px : ~2.5 cartes visibles */
@media (max-width: 1199px) {
  .slider-track > * {
    flex: 0 0 calc((100% - 1.25rem) / 2.4);
  }
}

/* Mobile ≤639 px : 1.2 carte (la suivante dépasse) */
@media (max-width: 639px) {
  .slider-header {
    flex-direction: column;
    gap: .65rem;
  }
  .slider-controls {
    align-self: flex-end;
  }
  .slider-track {
    /* Léger débordement à droite pour signaler la continuité */
    padding-right: 1.25rem;
  }
  .slider-track > * {
    flex: 0 0 82%;
    min-width: 240px;
  }
}

/* ── État de chargement ─────────────────────── */
.slider-loading {
  flex: 0 0 100%;
  text-align: center;
  padding: 2.5rem;
  color: var(--gray-500);
}
.u-text-muted { color: var(--gray-500); }

/* ═══════════════════════════════════════════════
   Carrousel auto-play boutiques (transform-based,
   boucle infinie, pause on hover)
   ═══════════════════════════════════════════════ */

/* Masque le débordement du track sans affecter le shadow des cartes */
.autoplay-viewport {
  overflow: hidden;
  /* padding-bottom pour laisser passer les ombres bas des cartes */
  padding-bottom: .75rem;
  margin-bottom: -.75rem;
}

/* Track positionné par JS via transform: translateX() */
.autoplay-track {
  display: flex;
  gap: 1.25rem;
  will-change: transform;
  touch-action: pan-y;        /* scroll vertical libre, capture horizontal */
  user-select: none;
  padding-bottom: .75rem;     /* espace ombre cartes */
  /* La transition est injectée / retirée par JS */
}

.autoplay-track > .shop-card {
  flex-shrink: 0;
  /* La largeur est calculée et appliquée par JS */
}