.ades-intro {
  width: 100vw;
  margin-inline: calc(50% - 50vw);

  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;

  padding-block: clamp(40px, 5vw, 70px);
  /* Centre le contenu sur une largeur de lecture de 1320px (comme Hero),
     tout en laissant le fond s'étendre sur 100vw. */
  padding-inline: max(24px, calc((100vw - 1320px) / 2));

  background: var(--color-primaire-tres-clair, #e4efe8);
}

.ades-intro__content {
  min-width: 0;
}

.ades-intro__title {
  margin: 0 0 16px;

  color: var(--color-primaire);

  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
}

.ades-intro__title strong {
  color: var(--color-primaire-clair);
  font-weight: 800;
}

.ades-intro__text {
  margin: 0 0 28px;

  max-width: 440px;

  color: var(--color-noir);

  font-size: 1rem;
  line-height: 1.5;
}

/* =========================================================
   IMAGE + DÉCORS
   Losange doré (haut) + cercle vert clair (bas), inspirés de la
   référence fournie mais recolorés selon notre charte.
========================================================= */

.ades-intro__media {
  position: relative;
  min-width: 0;
}

.ades-intro__media-frame {
  position: relative;
  z-index: 2;

  overflow: hidden;
  border-radius: 20px;

  aspect-ratio: 16 / 10;

  box-shadow: 0 20px 40px rgba(var(--color-primaire-rgb, 0, 72, 24), 0.16);
}

.ades-intro__media-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.ades-intro__media::before {
  content: "";
  position: absolute;
  z-index: 1;

  inset-inline-end: -14px;
  inset-block-start: -22px;

  width: 64px;
  height: 64px;

  background: var(--color-secondaire);
  transform: rotate(18deg);
  border-radius: 10px;
}

.ades-intro__media::after {
  content: "";
  position: absolute;
  z-index: 1;

  inset-inline-start: -26px;
  inset-block-end: -26px;

  width: 130px;
  height: 130px;

  background: var(--color-vert-lumineux);
  border-radius: 50%;
  opacity: 0.9;
}

@media (max-width: 900px) {
  .ades-intro {
    grid-template-columns: 1fr;
  }

  .ades-intro__text {
    max-width: 100%;
  }

  .ades-intro__media {
    order: -1;
  }
}