.sounds-hero { position: relative; background: #101213; color: #fff; }
.sounds-hero__swiper { position: relative; }

.sounds-hero__slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 560px;
}

.sounds-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem clamp(1.5rem, 4vw, 4rem);
}
.sounds-hero__overline {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  color: #b3b3b3;
  margin: 0 0 1.25rem;
}
.sounds-hero__title {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: .95;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  margin: 0 0 1.25rem;
  color: white !important;
}
.sounds-hero__text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem;
  max-width: 64ch;
  margin: 0 0 2rem;
  color: #e6e6e6;
}

.sounds-hero__text {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.15rem;
  max-width: 64ch;
  margin: 0 0 2rem;
  color: #e6e6e6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sounds-hero__media {
  position: relative;
  min-height: 100%;
}
/* par défaut (desktop) : on montre l'image de droite, on cache celle du mobile */
.sounds-hero__media--mobile { display: none; }
.sounds-hero__media--desktop { position: relative; min-height: 100%; }
.sounds-hero__media--desktop .sounds-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sounds-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sounds-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.sounds-hero__cta {
  display: inline-block;
  padding: .9rem 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  line-height: 1;
}
.sounds-hero__cta--primary { background: #fff!important; color: #111!important; }
.sounds-hero__cta--secondary { background: transparent!important; color: #fff!important; box-shadow: inset 0 0 0 2px #fff!important; }
.sounds-hero__cta--primary:hover { background: #e6e6e6!important; }
.sounds-hero__cta--secondary:hover { background: #fff!important; color: #111!important; }

/*.sounds-hero__media { position: relative; }*/
/* .sounds-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }*/

.sounds-hero__prev, .sounds-hero__next { background: transparent; color: #fff; }
.sounds-hero__prev { left: 1rem; }
.sounds-hero__next { right: 1rem; }
.sounds-hero__prev::after, .sounds-hero__next::after { font-size: 1.4rem; }

.sounds-hero__dots { bottom: 1rem; }
.sounds-hero__swiper .swiper-pagination-bullet { background: #fff; opacity: .45; }
.sounds-hero__swiper .swiper-pagination-bullet-active { opacity: 1; }

@media (max-width: 768px) {
  /* slide en colonne simple */
  .sounds-hero__slide {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* le contenu redevient un conteneur flex normal ; ordre naturel du DOM :
     overline → titre → image mobile → texte → CTA */
  .sounds-hero__content {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
  }

  /* on cache l'image desktop, on montre l'image mobile */
  .sounds-hero__media--desktop { display: none; }
  .sounds-hero__media--mobile  { display: block; margin: 1.25rem 0; }

  .sounds-hero__img--mobile {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  .sounds-hero__overline { margin-bottom: .5rem; }

  .sounds-hero__text {
    margin-bottom: 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .sounds-hero__ctas { flex-direction: column; align-items: stretch; }
  .sounds-hero__cta  { text-align: center; }