/* En-têtes intégrés : le contenu HTML se pose sur le visuel, comme à l'accueil. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 370px;
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 50%, rgb(255 255 255 / 96%) 62%, rgb(255 255 255 / 58%) 76%, rgb(255 255 255 / 8%) 100%);
  content: "";
}

.page-hero--services { background-image: url("/media/services-performance-terrain.webp"); }
.page-hero--approach { background-image: url("/media/approche-priorites-plan.webp"); }
.page-hero--value { background-image: url("/media/valeur-decider-clarte.webp"); }

.page-hero-inner {
  display: flex;
  align-items: center;
  min-height: 370px;
  padding-block: clamp(54px, 7vw, 88px);
}

.page-hero-copy {
  max-width: 720px;
  color: #171717;
}

.page-hero .eyebrow {
  margin-bottom: 18px;
  color: #e85c00;
}

.page-hero h1 {
  max-width: 13ch;
  margin: 0;
  color: #171717;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.02;
}

.page-hero p:not(.eyebrow) {
  max-width: 59ch;
  margin: 22px 0 0;
  color: #505157;
  font-size: 17px;
  line-height: 1.7;
}

.section-head.service-intro {
  max-width: none;
  margin-inline: 0;
  text-align: left !important;
}

.section-head.service-intro .eyebrow { justify-content: flex-start !important; }

.section-head.service-intro h2,
.section-head.service-intro p {
  max-width: none;
  margin-inline: 0 !important;
  text-align: left !important;
}

@media (max-width: 700px) {
  .page-hero {
    min-height: 0;
    background-position: 68% center;
  }

  .page-hero::before {
    background: linear-gradient(90deg, #fff 0%, rgb(255 255 255 / 96%) 68%, rgb(255 255 255 / 58%) 100%);
  }

  .page-hero-inner {
    min-height: 0;
    padding-block: 58px 54px;
  }

  .page-hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .page-hero p:not(.eyebrow) { font-size: 16px; }
}