[data-service-hero] {
  padding-top: calc(var(--header-height) + 2rem);
}
[data-service-hero] .hero-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--black);
  mix-blend-mode: normal;
  opacity: 0.8;
}
[data-service-hero] .bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Heros « scroll » de page service (hero-12 à 16) : la scène couvre l'écran
   et place elle-même ses textes sous le header ; le décalage commun ne
   s'applique pas. La mécanique (hauteur, sticky, film) est celle des heros
   d'accueil : components/heros/main.css, derrière `data-hero-scroll`. */
[data-service-hero][data-hero-scroll] {
  padding-top: 0;
}