/* ==========================================================================
   PageHeader — bannière plein écran, titre + fil d'Ariane
   ========================================================================== */

/* Chevauche le bas de la navbar de moitié de la hauteur de sa barre bleue
   (62.4px / 2 = 31.2px) : la navbar (z-index 200, cf. navbar.css) passe par
   dessus, donc seule la moitié basse de ce chevauchement reste visible —
   comme sur la référence LabtechCO (margin-top négatif + z-index inférieur
   à celui du header), demande utilisateur 2026-09-22. */
.page-header {
	position: relative;
	z-index: 1;
	overflow: hidden;
	min-height: clamp(120px, 12vw, 170px);
	margin-top: -31.2px;
	display: flex;
	align-items: center;
}

.page-header__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

/* Teinte bleue sur la photo (dominante bleue demandée), superposée en
   ::after plutôt que mélangée à l'image dynamique (background-image est
   posé en style inline, cf. page-header.php — un ::after reste indépendant
   de cette valeur inline). */
.page-header__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: var(--color-primary);
	/* Opacité réduite de ~25% (0.84 → 0.63) : la bannière était trop sombre,
	   trop proche du bleu de la navbar juste au-dessus — ce décalage de
	   luminosité les distingue mieux (demande utilisateur 2026-09-21). */
	opacity: 0.63;
}

.page-header__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	width: 100%;
}

.page-header__title {
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 800;
	color: var(--color-background);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin: 0;
}

.page-header__breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
}

.page-header__breadcrumb a {
	color: rgba(255, 255, 255, 0.65);
	transition: color var(--transition-base);
}

.page-header__breadcrumb a:hover,
.page-header__breadcrumb a:focus-visible {
	color: var(--color-background);
}

.page-header__breadcrumb-current {
	color: var(--color-background);
	font-weight: 600;
}

@media (max-width: 600px) {
	.page-header {
		align-items: flex-start;
	}

	/* Sur mobile, le chevauchement décoratif avec la navbar (cf. plus haut)
	   rognait carrément le haut du titre (accents/majuscules coupés) — pas
	   juste "trop proche". On garde l'image qui continue de passer derrière
	   la navbar, mais on pousse le texte sous ce chevauchement avec un vrai
	   espace de respiration (demande utilisateur 2026-09-23). */
	.page-header__inner {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 52px;
		padding-bottom: 20px;
	}
}