.features {
  --_features_bg-main: var(--bg_1, var(--orange));
  --_features_fg-main: var(--fg_1, var(--white));
  --_features_bg-btn: var(--bg_bt_1, var(--black));
  --_features_bg-img-2-mob: var(--bg_img_2_mob, url("../../assets/audiophile/image-speaker_mobile.jpg"));
  --_features_bg-img-2-desk: var(--bg_img_2_desk, url("../../assets/audiophile/image-speaker_desktop.jpeg"));
  --_features_fg-alt: var(--fg_2, var(--black));
  --_features_bg-img-3: var(--bg_img_3, url("../../assets/audiophile/image-earphone.jpeg"));
  --_features_bg-soft: var(--bg_4, var(--white-light));

  margin-top: 10rem;
  padding: 0 3rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  background-color: var(--white);
  color: var(--black);
}

@media (min-width: 60rem) {
  .features {
    padding-left: 12rem;
    padding-right: 12rem;
  }
}

.features__cont-1 {
  position: relative;
  width: 100%;
  padding: 3.5rem 4rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;

  background-color: var(--_features_bg-main);
  color: var(--_features_fg-main);
  text-align: center;
  border-radius: 10px;
}

@media (min-width: 60rem) {
  .features__cont-1 {
    padding: 3.5rem 0 3.5rem 37rem;
    align-items: flex-start;
    overflow: hidden;
  }
}

.features__title-1 {
  font-size: 3rem;
}

.features__img-1 {
  width: 120px;
}

@media (min-width: 60rem) {
  .features__img-1 {
    position: absolute;
    left: 5rem;
    bottom: -6rem;
    width: 20rem;
  }
}

.features__btn-1 {
  padding: 0.8rem 2rem;
  background-color: var(--_features_bg-btn);
  border: none;
}

.features__cont-2 {
  width: 100%;
  height: 17rem;
  padding: 0 2rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;

  background-image: var(--_features_bg-img-2-mob);
  background-size: cover;
  background-position: center;

  border-radius: 10px;
  color: var(--_features_fg-alt);
}

@media (min-width: 60rem) {
  .features__cont-2 {
    background-image: var(--_features_bg-img-2-desk);
  }
}

.features__title-2 {
  font-size: 2rem;
}

.features__btn-2 {
  width: fit-content;
  padding: 0.5rem 1.8rem;
  background-color: transparent;
  border: 2px solid var(--_features_fg-alt);
}

.features__cont-5 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 60rem) {
  .features__cont-5 {
    flex-direction: row;
  }
}

.features__cont-3 {
  height: 12rem;
  flex-grow: 2;

  background-image: var(--_features_bg-img-3);
  background-position: center;
  background-size: cover;

  border-radius: 10px;
}

.features__cont-4 {
  height: 12rem;
  padding: 0 2rem;

  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;

  background-color: var(--_features_bg-soft);
  color: var(--_features_fg-alt);
  border-radius: 10px;
}

.features__title-4 {
  font-size: 2rem;
}

.features__icon {
  color: var(--orange);
}

/* Styles spécifiques pour bonbonbon */

.features.bonbon-features {
  --_features_bg-main: var(--bon-pink);
  --_features_fg-main: var(--white);
  --_features_bg-btn: var(--white);
  --_features_bg-img-1: url("../../assets/bonbonbon/big-sucette.png");
  --_features_bg-img-2-mob: url("../../assets/bonbonbon/macaron.jpg");
  --_features_bg-img-2-desk: url("../../assets/bonbonbon/macaron.jpg");
  --_features_fg-alt: var(--bon-pink);
  --_features_bg-img-3: url("../../assets/bonbonbon/bonbons.jpg");
  --_features_bg-soft: var(--bon-cream);
  
  color: var(--bon-pink);
}

.features.bonbon-features .features__cont-1 {
  background-image: var(--_features_bg-img-1);
  background-size: 180px;
  background-repeat: no-repeat;
  background-position: center top 2rem;
  padding-top: 14rem;
}

.features.bonbon-features .features__cont-2 {
  background-position: 100% 40%;
}

@media (min-width: 60rem) {
  .features.bonbon-features .features__cont-1 {
    background-position: left 5rem bottom;
    background-size: 20rem;
    padding-top: 3.5rem;
  }
}

.features.bonbon-features .features__cont-1 .features__img-1 {
  display: none;
}

.features.bonbon-features .features__btn-1 {
  color: var(--bon-pink);
  background-color: var(--white);
  cursor: pointer;
}

.features.bonbon-features .features__btn-2 {
  color: var(--bon-pink);
  border-color: var(--bon-pink);
  cursor: pointer;
}

.features.bonbon-features .features__icon {
  color: var(--bon-pink);
}

.features.bonbon-features .features__title-2 {
  color: var(--bon-pink);
}

.features.bonbon-features .features__title-4 {
  color: var(--bon-pink);
}