/*
 * Sillage Page Header — the one header component every page but the
 * homepage uses (template-parts/global/page-header.php).
 *
 * Deliberately its own class, ".sillage-page-header", never ".hero" — this
 * theme's single most repeated bug has been a bare ".hero{}" rule in
 * main.css leaking properties into every new page's own hero. A brand new
 * class name sidesteps that class of bug entirely instead of having to
 * reset it once per page forever.
 *
 * Height/text width/text colour are all set inline per page (CSS custom
 * properties, driven by Apparence > Personnaliser > Sillage → Page
 * Header > Réglages globaux) — this file only supplies the values that
 * aren't themselves configurable (typography scale, spacing, animation).
 */

.sillage-page-header {
	--sph-gold: #7fa290;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--sph-height-desktop, 460px);
	background-color: #171411;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	color: var(--sph-text-color, #ffffff);
}

/* Position verticale du contenu dans la hauteur fixe */
.sillage-page-header.sph-valign-haut { justify-content: flex-start; padding-top: 108px; }
.sillage-page-header.sph-valign-centre { justify-content: center; }
.sillage-page-header.sph-valign-bas { justify-content: flex-end; padding-bottom: 46px; }

/* Alignement horizontal */
.sillage-page-header.sph-align-centre .sph-copy { text-align: center; margin-inline: auto; }
.sillage-page-header.sph-align-gauche .sph-copy { text-align: left; }

/* Voile */
.sph-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Fond "texture" — motif de bruit discret réutilisé de main.css (body:before) */
.sillage-page-header.sph-bg-texture:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Grain photographique discret sur les fonds image/dégradé — le même
   procédé que .sph-bg-texture, en très faible opacité, pour donner un
   grain filmique aux photos plutôt qu'un aplat numérique plat. */
.sillage-page-header.sph-bg-image:before,
.sillage-page-header.sph-bg-gradient:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .14;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
}

.sph-copy {
	position: relative;
	z-index: 2;
	max-width: var(--sph-text-max-width, 780px);
}
.sillage-page-header .eyebrow {
	font-size: .72rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sph-gold);
}
.sillage-page-header h1,
.sillage-page-header h2 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.03;
	letter-spacing: -.03em;
	margin: 16px 0 0;
	/* Volontairement contenu pour que même le titre le plus long des
	   bandeaux statiques tienne sur une seule ligne dans
	   --sph-text-max-width — c'est ce qui garantit que tous les bandeaux
	   font la même hauteur, quel que soit le texte (pas de white-space:
	   nowrap ici : un titre d'article très long doit pouvoir passer à la
	   ligne plutôt que d'être tronqué). */
	font-size: clamp(1.9rem, 2.6vw, 2.75rem);
	color: inherit;
}
.sillage-page-header p {
	font-family: var(--serif);
	font-size: clamp(1.05rem, 1.4vw, 1.28rem);
	line-height: 1.5;
	margin: 20px 0 0;
	color: #eee3d6;
	max-width: 92%;
}
.sillage-page-header.sph-align-centre p {
	margin-inline: auto;
}
.sillage-page-header .sph-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, .55);
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: .68rem;
	font-weight: 700;
	color: inherit;
	transition: color .2s ease, border-color .2s ease;
}
.sillage-page-header .sph-cta span {
	transition: transform .2s ease;
}
.sillage-page-header .sph-cta:hover {
	color: var(--sph-gold);
	border-bottom-color: var(--sph-gold);
}
.sillage-page-header .sph-cta:hover span {
	transform: translateX(4px);
}
.sillage-page-header .sph-cta:focus-visible {
	outline: 2px solid var(--sph-gold);
	outline-offset: 4px;
}

/* Animation d'apparition — sur .sph-copy, jamais sur le fond */
@keyframes sphFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes sphSlideUp {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}
.sillage-page-header.sph-anim-fondu .sph-copy { animation: sphFadeIn .8s ease both; }
.sillage-page-header.sph-anim-glissement .sph-copy { animation: sphSlideUp .8s ease both; }

@media (prefers-reduced-motion: reduce) {
	.sillage-page-header .sph-copy { animation: none !important; }
}

/* Responsive — même composition, hauteur/marges/typo réduites, jamais de réordonnancement */
@media (max-width: 768px) {
	.sillage-page-header { min-height: var(--sph-height-mobile, 320px); }
	/* Le header mobile (position:absolute, voir main.css) fait 72px de haut
	   sous 900px — le surtitre ne doit jamais commencer dans cette zone.
	   84px (l'ancienne valeur) suffisait à peine à dégager le header lui-
	   même (88px avant ce correctif) sans laisser de vraie respiration :
	   le surtitre semblait collé à la navigation. 112px = 72px de header +
	   ~40px de respiration réelle. Appliqué à "haut" (qui positionne son
	   contenu directement via padding-top) et "centre" (où ce padding
	   agrandit la zone de contenu que justify-content:center répartit,
	   garantissant un plancher de dégagement même une fois le bloc centré) ;
	   "bas" n'en a pas besoin, son contenu est déjà ancré en bas du bandeau. */
	.sillage-page-header.sph-valign-haut { padding-top: 112px; }
	.sillage-page-header.sph-valign-centre { padding-top: 112px; }
	.sillage-page-header.sph-valign-bas { padding-bottom: 32px; }
	.sillage-page-header h1,
	.sillage-page-header h2 { font-size: clamp(1.5rem, 5.5vw, 2rem); }
	.sillage-page-header p { font-size: .95rem; }
	.sillage-page-header .wrap.sph-copy { padding-inline: 20px; }
}