.hero-carousel {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.hero-track {
  display: flex;
  gap: 2px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.hero-track::-webkit-scrollbar {
  display: none;
}

.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}

.carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }

.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: width 0.3s ease;
}

/* Quand le dot est actif → s’étire en barre */
.carousel-dots button.active {
  width: 50px; /* 5x plus large */
  background: rgba(255, 255, 255, 0.5);
}

.carousel-dots button::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.8);;
  transform-origin: left center;
  transform: scaleX(0);
  transition: none;
}

/* Animation fluide via transform */
.carousel-dots button.active::after {
  animation: dotProgress var(--interval, 4s) linear forwards;
}

@keyframes dotProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hero-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.hero-carousel-buy-btn {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    padding: 10px;
    background: white;
    color: #5B38ED;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.3s 
ease;
    text-decoration: none;
}

.hero-carousel-buy-btn:hover {
  background: linear-gradient(135deg, #9e8bf1 0%, var(--e-global-color-blocksy_palette_1) 55%);
  color: white;
}