/**
 * Swiper Scrollbar Plugin — Styles
 * ==================================
 * Deux thèmes :
 *   - ssp-dark (défaut) : scrollbar noire sur fond clair
 *   - ssp-light         : scrollbar blanche sur fond sombre
 *
 * Les sélecteurs utilisent une spécificité élevée pour écraser
 * les styles par défaut de Swiper et d'Elementor.
 */

/* ══════════════════════════════════════════════════════════════════════
   BASE — Passive Event fix
   ══════════════════════════════════════════════════════════════════════ */
.ssp-carousel,
.swiper-container,
.swiper {
  touch-action: pan-y;
}


/* ══════════════════════════════════════════════════════════════════════
   THEME DARK (défaut) — scrollbar noire, fond clair
   ══════════════════════════════════════════════════════════════════════ */

/* Track */
.ssp-carousel .swiper-scrollbar.swiper-scrollbar,
[data-ssp-link] .swiper-scrollbar.swiper-scrollbar {
  position: relative !important;
  height: 2px !important;                 /* ligne très fine */
  background: #cfcfcf;         /* gris clair comme la maquette */
  margin-top: 40px !important;
  border-radius: 2px;
  overflow: visible;
}

/* Drag handle */
.ssp-carousel .swiper-scrollbar .swiper-scrollbar-drag,
[data-ssp-link] .swiper-scrollbar .swiper-scrollbar-drag {
  background: #000;            /* noir */
  height: 6px;                 /* plus épais que la ligne */
  top: -2px;                   /* centré verticalement */
  border-radius: 3px;
  cursor: grab;
  transition: background 0.2s ease, transform 0.2s ease;
}

/* Hover */
.ssp-carousel .swiper-scrollbar .swiper-scrollbar-drag:hover,
[data-ssp-link] .swiper-scrollbar .swiper-scrollbar-drag:hover {
  transform: scaleY(1.15);
}

/* Active / dragging */
.ssp-carousel .swiper-scrollbar .swiper-scrollbar-drag:active,
[data-ssp-link] .swiper-scrollbar .swiper-scrollbar-drag:active {
  cursor: grabbing !important;
  transform: scaleY(1.25);
}


/* ══════════════════════════════════════════════════════════════════════
   THEME LIGHT — scrollbar blanche, fond sombre
   ══════════════════════════════════════════════════════════════════════ */

/* Espacement wrapper externe */
[data-ssp-link].ssp-light {
  margin-top: 28px;
}

/* Track */
.ssp-light .swiper-scrollbar.swiper-scrollbar,
.ssp-carousel.ssp-light .swiper-scrollbar.swiper-scrollbar,
[data-ssp-link].ssp-light .swiper-scrollbar.swiper-scrollbar {
  position: relative;
  height: 2px !important;                 /* ligne très fine */
  background: rgba(255,255,255,0.6); /* au lieu de 0.35 */
  border-radius: 2px;
  overflow: visible;
}

/* Drag handle */
.ssp-light .swiper-scrollbar .swiper-scrollbar-drag,
.ssp-carousel.ssp-light .swiper-scrollbar .swiper-scrollbar-drag,
[data-ssp-link].ssp-light .swiper-scrollbar .swiper-scrollbar-drag {
  background: #ffffff;          /* blanc pur */
  height: 6px;
  top: -2px;
  border-radius: 3px;
  cursor: grab;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1),
              background 0.2s ease;
}

/* Hover */
.ssp-light .swiper-scrollbar .swiper-scrollbar-drag:hover,
.ssp-carousel.ssp-light .swiper-scrollbar .swiper-scrollbar-drag:hover,
[data-ssp-link].ssp-light .swiper-scrollbar .swiper-scrollbar-drag:hover {
  transform: scaleY(1.15);
  background: #ffffff !important;
}

/* Active / dragging */
.ssp-light .swiper-scrollbar .swiper-scrollbar-drag:active,
.ssp-carousel.ssp-light .swiper-scrollbar .swiper-scrollbar-drag:active,
[data-ssp-link].ssp-light .swiper-scrollbar .swiper-scrollbar-drag:active {
  cursor: grabbing !important;
  transform: scaleY(1.25);
}