/* ===== BRAND SLIDER ===== */
.brand-slider {
  position: relative;
  height: 88vh;
  min-height: 520px;
  max-height: 920px;
  overflow: hidden;
  background: var(--g100);
  user-select: none;
}

/* ── Slides track ── */
.bs-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.bs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.75s var(--ease-out);
  pointer-events: none;
  will-change: opacity;
}
.bs-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* ── Image — pleine largeur ── */
.bs-image-col {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--black);
}

.bs-image-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  transform: scale(1);
  transition: opacity 0.75s;
  opacity: 0.88;
}
.bs-slide.active .bs-image-col img {
  opacity: 1;
}

/* ── Bloc bas : bouton + dots ── */
.bs-bottom {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 20;
  padding-top: 40px;
}

.bs-brand-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--white);
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}

.bs-discover {
  display: inline-block;
  margin-bottom: 20px;
  padding: 13px 36px;
  background: var(--white);
  color: var(--black);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.bs-discover:hover {
  background: var(--black);
  color: var(--white);
}

/* ── Arrows ── */
.bs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  transition: background 0.2s, color 0.2s, transform 0.2s;
  box-shadow: 0 2px 16px rgba(0,0,0,0.14);
}
.bs-arrow:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-50%) scale(1.06);
}
.bs-arrow--prev { left: 24px; }
.bs-arrow--next { right: calc(6% / 2 - 24px); }

/* ── Dots ── */
.bs-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bs-dot {
  height: 3px;
  width: 28px;
  background: rgba(255,255,255,0.35);
  border: none;
  cursor: pointer;
  transition: background 0.3s, width 0.35s var(--ease-out);
  padding: 0;
}
.bs-dot.active {
  background: var(--white);
  width: 52px;
}
.bs-dot:hover:not(.active) { background: rgba(255,255,255,0.6); }

/* ── Slide counter ── */
.bs-counter {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 20;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
  font-family: 'Space Grotesk', sans-serif;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .brand-slider { height: 70vw; min-height: 380px; max-height: 600px; }
  .bs-arrow { display: none; }
  .bs-counter { top: 16px; left: 16px; }
  .bs-image-col img { object-position: center center; }
}

@media (max-width: 540px) {
  .brand-slider { height: 85vw; }
  .bs-bottom { bottom: 20px; gap: 14px; }
  .bs-discover { padding: 11px 28px; font-size: 0.7rem; }
}