/* ============================================================
   VELO-SLIDER.CSS — Vélothèque Uccle
   Styles partagés du slider d'images vélo.
   Utilisé par : catalogue (cards) et page détail.
   Variables depuis variables.css uniquement.
   ============================================================ */

/* ══════════════════════════════════════════
   SLIDER — BASE
══════════════════════════════════════════ */
.velo-slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

.velo-slider__track {
  width: 100%;
  height: 100%;
  position: relative;
}

.velo-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.velo-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.velo-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-user-drag: none;
}

/* ══════════════════════════════════════════
   BOUTONS FLÈCHES
══════════════════════════════════════════ */
.velo-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-primary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s, background 0.15s;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Sur mobile : toujours visible (pas de hover) */
@media (hover: none) {
  .velo-slider__btn {
    opacity: 1;
  }
}

.velo-card:hover .velo-slider__btn {
  opacity: 1;
}

.velo-slider__btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.velo-slider__btn--prev { left: 6px; }
.velo-slider__btn--next { right: 6px; }
.velo-slider__btn:hover { background: var(--color-white); }

/* ══════════════════════════════════════════
   DOTS
══════════════════════════════════════════ */
.velo-slider__dots {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
}

.velo-slider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.velo-slider__dot.is-active {
  background: var(--color-white);
  transform: scale(1.35);
}

/* ══════════════════════════════════════════
   SURCHARGES PAGE DÉTAIL
   Boutons plus grands, toujours visibles,
   dots repositionnés.
══════════════════════════════════════════ */
.velo-detail-img-wrap .velo-slider__btn {
  opacity: 1;
  width: 40px;
  height: 40px;
  font-size: 20px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.velo-detail-img-wrap .velo-slider__btn:hover {
  background: var(--color-white);
  transform: translateY(-50%) scale(1.08);
}

.velo-detail-img-wrap .velo-slider__dot {
  background: rgba(0, 59, 104, 0.25);
}

.velo-detail-img-wrap .velo-slider__dot.is-active {
  background: var(--brand-primary);
  transform: scale(1.3);
}