.cards-wrapper {
  position: relative;
}

/* Mode normal (container Bootstrap) = grille */
.cards-row {
  transition: all .3s ease;
}

/* MODE SCROLL : le wrapper devient container-fluid */
.cards-wrapper.scroll-active {
  width: 100%;
  max-width: 100%;
}

/* scroll horizontal */
.cards-wrapper.scroll-active .cards-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-right: calc(-0.5 * var(--bs-gutter-x));
  padding-left: calc(-0.5 * var(--bs-gutter-x));
  padding-top: 3rem;
  padding-bottom: 3rem;
  overflow-y: hidden;
}

/* cards dans le scroll = largeur auto */
.cards-wrapper.scroll-active .card-col {
  flex: 0 0 auto;   /* taille naturelle */
}

/* Flèches */
.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 5;
  cursor: pointer;
}

.scroll-arrow[disabled] {
  opacity: .3;
  cursor: default;
}

/* Position */
.scroll-arrow.left { left: 10px; }
.scroll-arrow.right { right: 10px; }

.cards-wrapper.scroll-active .scroll-arrow {
  display: flex;
}

/* Masque scrollbar */
.cards-row::-webkit-scrollbar { display: none; }
.cards-row { scrollbar-width: none; }