/* ==========================================================================
   Hero de page : image plein cadre, court (~72 % de l'écran), titre centré dessus.
   Gabarit : template-parts/hero-page.php. Utilisé par Projets et Domaine d'expertise.
   Variable --ds-hero-y : point d'ancrage vertical de l'image (80 % par défaut = bas de l'image).
   ========================================================================== */
.ds-hero-page { position: relative; height: clamp(440px, 72vh, 760px); overflow: hidden; background: #2b2a27; color: #fff; }
/* cover remplit le cadre sans déformer ; l'ancrage garde dans le cadre la partie utile de l'image. */
.ds-hero-page--haute { height: clamp(440px, 85vh, 900px); } /* images en 16:9 : le cadre colle à leur format, presque rien n'est recadré */
.ds-hero-page > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--ds-hero-y, 80%); }
.ds-hero-page::after { content: ""; position: absolute; inset: 0; background: rgba(12, 11, 10, .42); }
.ds-hero-page__inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 var(--ds-gouttiere); text-align: center; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.ds-hero-page__eyebrow { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.ds-hero-page h1 { margin: 0; font: 400 clamp(56px, 6.6vw, 100px)/1 var(--ds-serif); letter-spacing: -.02em; }
.ds-hero-page h1 em { color: #ee6b66; font-weight: 400; }

/* Header transparent au-dessus du hero (ordinateur) : léger voile en haut pour qu'il reste lisible. */
@media (min-width: 1100px) {
	body.ds-avec-hero .ds-hero-page::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 180px; background: linear-gradient(rgba(0, 0, 0, .45), transparent); pointer-events: none; }
}
@media (max-width: 767px) {
	.ds-hero-page { height: clamp(360px, 58vh, 520px); }
	.ds-hero-page h1 { font-size: clamp(52px, 16vw, 80px); }
}