.ades-hero {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  color: var(--color-blanc);
  background: linear-gradient(
    121.83deg,
    var(--color-primaire) 28.46%,
    var(--color-primaire-clair) 100%
  );
}

.ades-hero__slide {
  position: relative;
  height: 752px;
  overflow: hidden;
  padding-top: 140px;
}

.ades-hero__left {
  position: relative;
  z-index: 2;

  width: 1320px;
  max-width: calc(100% - 3rem);
  height: 100%;

  margin-inline: auto;

  display: flex;
  align-items: center;
}

/* .ades-hero__content {
  flex: 0 0 620px;
  max-width: 620px;
} */

.ades-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.ades-hero__title-top {
  font-size: clamp(4rem, 5vw, 8.5rem);
  line-height: 1.45;
}

.ades-hero__title-main,
.ades-hero__title-accent {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.2;
}

.ades-hero__title-accent {
  color: var(--color-secondaire);
}

.ades-hero__subtitle {
  margin: 1.6rem 0 0;
  max-width: 430px;
  font-size: 1.05rem;
  line-height: 1.45;
}

.ades-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.ades-hero__actions .ades-btn {
  gap: 20px;
  padding-block: 10px;
  padding-inline-start: 40px;
  padding-inline-end: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  white-space: nowrap;
}

.ades-hero__actions .ades-btn__icon {
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
}

.ades-hero__right {
  position: absolute;
  top: 140px;
  inset-inline-end: 0;
  bottom: 0;
  width: min(50vw, 760px);
  overflow: hidden;
  z-index: 1;
}

.ades-hero__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-start-start-radius: 165px;
}

.ades-hero::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 130px;
  height: 130px;
  background: radial-gradient(
    circle 130px at top left,
    transparent 129px,
    var(--color-secondaire) 131px
  );
  z-index: 4;
  pointer-events: none;
}

/* radial-gradient() n'a pas d'équivalent logique natif : on inverse
   manuellement le coin du décor quand la page est en RTL (arabe). */
html[dir="rtl"] .ades-hero::after {
  background: radial-gradient(
    circle 130px at top right,
    transparent 129px,
    var(--color-secondaire) 131px
  );
}

/* Carrousel */
.ades-hero--carousel .splide__arrows {
  position: absolute;
  inset-inline-end: 88px;
  bottom: 70px;
  z-index: 20;

  display: flex;
  align-items: center;
  gap: 145px;
}

.ades-hero--carousel .splide__arrow {
  position: static !important;

  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--color-blanc);
  opacity: 1;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transform: none !important;
}

.ades-hero--carousel .splide__arrow svg {
  width: 16px;
  height: 16px;
  fill: var(--color-primaire);
}

/* Splide dessine le même chevron pour les deux flèches et compte sur
   cette règle (normalement fournie par son CSS "skin" par défaut, qu'on
   ne charge pas ici) pour retourner celle de "précédent". */
.ades-hero--carousel .splide__arrow--prev svg {
  transform: scaleX(-1);
}

.ades-hero--carousel .splide__arrow--prev {
  left: auto !important;
  right: auto !important;
}

.ades-hero--carousel .splide__arrow--next {
  left: auto !important;
  right: auto !important;
}

/* Dots */
.ades-hero--carousel .splide__pagination {
  position: absolute;
  inset-inline-end: 160px;
  bottom: 88px;
  z-index: 21;

  display: flex;
  align-items: center;
  gap: 8px;

  width: auto;
  padding: 0;
}

.ades-hero--carousel .splide__pagination li {
  margin: 0;
  line-height: 0;
}

.ades-hero--carousel .splide__pagination__page {
  width: 18px;
  height: 3px;

  border: 0;
  border-radius: 50px;

  background: rgba(255, 255, 255, 0.75);
  opacity: 1;

  transform: none !important;
}

.ades-hero--carousel .splide__pagination__page.is-active {
  width: 28px;
  /* Ancien résidu hors charte : #e30613 (rouge) remplacé par la couleur
     secondaire officielle (jaune blé). */
  background: var(--color-secondaire);
  transform: none !important;
}

/* =========================================================
   STYLE "IMAGE EN PLEINE LARGEUR"
   Même hauteur que le style "split" (752px, voir .ades-hero__slide
   plus haut) — seule la disposition change.
========================================================= */

.ades-hero--plein .ades-hero__slide {
  padding-top: 0;
}

.ades-hero--plein .ades-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ades-hero--plein .ades-hero__background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Le décor en coin (cercle jaune découpé) n'a de sens que pour le
   style "split" (il marque la fin du bloc image à droite) — masqué
   ici pour ne pas casser visuellement une photo plein cadre. */
.ades-hero--plein::after {
  display: none;
}

.ades-hero--plein .ades-hero__left {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 100%;

  justify-content: center;
  text-align: center;
}

.ades-hero--plein .ades-hero__content {
  max-width: 800px;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 32px 40px;
  border-radius: 24px;

  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
}

.ades-hero--plein .ades-hero__title {
  align-items: center;
  text-align: center;
}

.ades-hero--plein .ades-hero__subtitle {
  max-width: 100%;
  text-align: center;
}

.ades-hero--plein .ades-hero__actions {
  justify-content: center;
}
/* Dégradé sombre uniquement en haut du visuel (zone du header
   transparent superposé) — s'assure que le menu reste lisible peu
   importe la photo choisie, sans assombrir le reste de l'image. */
.ades-hero--plein .ades-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ades-hero--plein .ades-hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.2) 140px,
    transparent 260px
  );
  pointer-events: none;
}
/* Mobile */
@media (max-width: 991px) {
  .ades-hero__slide {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .ades-hero__left {
    width: 100%;
    padding: 2rem 1.5rem;
    display: block;
  }

  .ades-hero__right {
    position: relative;
    top: auto;
    inset-inline-end: auto;
    bottom: auto;
    width: 100%;
    height: 320px;
  }

  .ades-hero__right img {
    border-start-start-radius: 90px;
  }

  .ades-hero--carousel .splide__arrows {
    bottom: 16px;
  }

  .ades-hero--carousel .splide__pagination {
    bottom: 34px;
  }

  .ades-hero__title-top {
    font-size: clamp(2.8rem, 9vw, 3.8rem);
  }

  .ades-hero__title-main,
  .ades-hero__title-accent {
    font-size: clamp(1.5rem, 10vw, 2.2rem);
  }
}