.hero {
  --_hero-title-color: var(--fg_title, var(--white-light));
  --_hero-img-mobile: var(--bg_img_mob, /*url("../../assets/audiophile/image-hero_mobile.jpg")*/);
  --_hero-img-desktop: var(--bg_img_desk, /*url("../../assets/audiophile/image-hero_desktop.jpeg")*/);
  --_hero-button-bg: var(--bg_bt, var(--orange));
  --_hero-text-muted: var(--fg_subtitle, var(--gray));

  padding: 6rem 6rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 1.2rem;
  text-align: center;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: var(--_hero-img-mobile);
}

@media (min-width: 60rem) {
  .hero {
    padding: 10rem 8rem 6rem;
    align-items: flex-start;
    text-align: left;
    background-image: var(--_hero-img-desktop);
  }
}

.hero__subtitle {
  color: var(--_hero-text-muted);
  opacity: 0.4;
  font-size: 0.7rem;
  letter-spacing: 0.8rem;
}

.hero__title {
  color: var(--_hero-title-color);
  font-size: 2.5rem;
}

@media (min-width: 60rem) {
  .hero__title {
    max-width: 24rem;
    font-size: 4rem;
  }
}

.hero__desc {
  color: var(--_hero-text-muted);
}

@media (min-width: 60rem) {
  .hero__desc {
    max-width: 30rem;
    font-size: 1.2rem;
  }
}

.hero__btn {
  padding: 0.6rem 1.4rem;
  background: var(--_hero-button-bg);
  color: var(--_hero-title-color);
  border: 0;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Styles spécifiques pour BonBonBon */

.hero.bonbon-hero {
  --_hero-title-color: var(--bon-text);
  --_hero-button-bg: var(--bon-pink);
  --_hero-text-muted: var(--bon-text);
  background-color: var(--bon-cream);
}

.hero.bonbon-hero .hero__subtitle {
  opacity: 0.6;
}

.hero.bonbon-hero .hero__title {
  font-weight: bold;
}

.hero.bonbon-hero .hero__desc {
  opacity: 0.7;
}

.hero.bonbon-hero .hero__btn {
  color: var(--white);
  font-weight: bold;
}

.hero.bonbon-hero .hero__btn:hover {
  background: var(--bon-pink-dark);
}