/* =========================================================================
   À propos (Figma "a propos", 1139:5278). The page shares the green hero
   with the Good Growth Plan; it is told apart by its timeline.
   ========================================================================= */
/* Hero: a dark layer instead of the green one (1139:5281), and the
   design's title and subtitle sizes. */
.page:has(.timeline) .hero--green .hero__scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.29) 0%, rgba(0, 0, 0, 0.58) 59.298%, rgba(0, 0, 0, 0.67) 78.187%, rgba(0, 0, 0, 0.72) 100%);
}
.page:has(.timeline) .hero--green .hero__title { font-size: clamp(2rem, 4.4vw, 3.4375rem); line-height: 1.164; }
.page:has(.timeline) .hero--green .hero__subtitle { font-size: 1.125rem; line-height: 26px; color: #fff; }

/* "Qui sommes-nous ?" (1139:5287): the text starting level with the title;
   a Poppins lead paragraph over grey justified body copy. */
.page:has(.timeline) .card-grid--split .eyebrow {
  margin-bottom: 13.5px;
  font-size: 0.9375rem;
  line-height: 16.5px;
  letter-spacing: 1.65px;
  color: #eb8200;
}
.page:has(.timeline) .card-grid--split .section__title {
  margin: 0;
  /* Recette: smaller than the design's 48px, so the text sits closer. */
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: #111827;
}
.page:has(.timeline) .card-grid--split .section__intro {
  max-width: none;
  font-size: 1rem;
  line-height: 23.8px;
  text-align: justify;
  color: #6b7280;
}
.page:has(.timeline) .card-grid--split .section__intro .lead {
  margin-bottom: 25px;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  font-weight: 500;
  line-height: 1.5;
  color: #000;
}
.page:has(.timeline) .card-grid--split .section__intro .lead + p { margin-top: 0; }
@media (min-width: 901px) {
  /* Recette: the text closer to the title. The title column follows the
     title's size (its longest line, "potentiel des", is about 6.6em), so
     the visible gap stays near 30px at every width. */
  .page:has(.timeline) .card-grid--split .section__head--split {
    grid-template-columns: minmax(0, calc(6.8 * clamp(1.75rem, 2.8vw, 2.5rem))) minmax(0, 1fr);
    gap: 24px;
  }
  /* Level with the title: the eyebrow's height and margin. */
  .page:has(.timeline) .card-grid--split .section__intro { padding-top: 30px; }
}

/* "Notre présence et nos engagements": the section heading and
   its three cards. */
.page:has(.timeline) .features--cards .eyebrow { line-height: 16.8px; letter-spacing: 2.24px; }
.page:has(.timeline) .features--cards .section__title { font-weight: 600; letter-spacing: -1.792px; }
.page:has(.timeline) .features--cards .section__intro { font-size: 1.125rem; line-height: 28px; color: #52525c; }
.page:has(.timeline) .features--cards .feature__title { font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.39rem); line-height: 1.364; color: #2b3024; }
.page:has(.timeline) .features--cards .feature__text { font-weight: 300; font-size: 0.884rem; line-height: 1.5; color: #8c7a6b; }
.page:has(.timeline) .features--cards .feature__link { font-family: var(--font-inter); font-size: 0.884rem; font-weight: 600; line-height: 1.5; color: #276f7c; }

/* "Découvrez nos expertises en images" (video band). */
.page:has(.timeline) .media-band__title { letter-spacing: 0.37px; }
@media (max-width: 720px) {
  /* Stacked: room between the title and the text below it. */
  .page:has(.timeline) .card-grid--split .section__title { margin-bottom: 24px; }
}