/**
 * Passiv'Home : compléments du header (thème enfant Bricks).
 *
 * Seule exception tolérée au « 100 % natif » (voir CLAUDE.md) : pastille animée
 * du menu principal, header fixe qui se réduit au défilement, interrupteurs segmentés.
 * Le comportement est piloté par assets/ph.js ; les styles de base restent dans
 * les classes globales Bricks (.ph-header, .ph-nav…). Couleurs : variables Bricks
 * (Bricks > Réglages > Variables) ; mesures du header : variables --ph-* plus bas.
 */

/* Contour de focus : décalage de 3px demandé au README §10 (le style de thème
   Bricks règle déjà la couleur et l'épaisseur, pas le décalage). */
:focus-visible {
	outline-offset: 3px;
}

/* Pastille du menu principal (desktop uniquement : en mobile, Bricks place la
   liste en position fixe pour le panneau plein écran, il ne faut pas l'écraser). */
@media (min-width: 992px) {
	.ph-nav .brx-nav-nested-items {
		position: relative;
	}

	.ph-nav .brx-nav-nested-items > li > a {
		position: relative;
		z-index: 1;
	}
}

.ph-nav-pill {
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 38px;
	border-radius: 3px;
	background: var(--green-100);
	transform: translateY(-50%);
	opacity: 0;
	pointer-events: none;
	z-index: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.ph-nav-pill {
		transition: left .35s var(--ease-switch), width .35s var(--ease-switch), opacity .25s ease;
	}
}

/* Premier placement sans animation. */
.ph-nav-pill.is-instant {
	transition: none;
}

@media (min-width: 992px) {
	/* Quand le script est actif, la couleur suit la pastille et non l'état natif :
	   l'entrée active redevient anthracite pendant qu'on en survole une autre. */
	.ph-nav.ph-pill-ready .brx-nav-nested-items > li > a {
		color: var(--anthracite-800);
	}

	.ph-nav.ph-pill-ready .brx-nav-nested-items > li > a.is-pill {
		color: var(--green-600);
	}
}

@media (max-width: 991px) {
	.ph-nav-pill {
		display: none;
	}
}

/* ==========================================================================
   Header fixe qui se réduit au défilement (retours de l'architecte, 05/11)
   --------------------------------------------------------------------------
   - Fond blanc pleine largeur sur toutes les pages, sans dégradé ni transparence.
   - Seule la ligne principale (logo, menu, téléphone, « J'ai un projet ») reste
     fixe. La ligne secondaire (L'équipe, Gamme Écho, Actualités, F.A.Q) part avec
     le défilement : le header remonte de sa hauteur, au rythme de la page.
   - Au-delà de 80px de défilement (sentinelle placée par ph.js) : classe
     .ph-compact, header de 64px, logo de 40px, ombre très légère.
   - 991px et moins : header compact d'emblée, sans animation de taille.
   Le header reste le header collant natif de Bricks (position fixe, barre d'admin
   gérée par Bricks). Les sélecteurs commencent par #brx-header.brx-sticky pour
   passer devant les anciennes règles des classes globales (.ph-header,
   .ph-header-inner, .ph-header-util, .ph-header-bar), chargées après ce fichier.
   ========================================================================== */

:root {
	--ph-util-zone: 36px;         /* ligne secondaire */
	--ph-bar-h: 88px;             /* ligne principale en haut de page */
	--ph-bar-h-compact: 64px;     /* ligne principale réduite */
	--ph-logo-h: 64px;
	--ph-logo-h-compact: 40px;
	--ph-header-shadow: 0 2px 14px rgba(6, 18, 6, .08);
	--ph-header-speed: .22s;
}

/* Fond blanc opaque, ombre seulement une fois réduit. */
#brx-header.brx-sticky > .ph-header.brxe-section {
	background-color: var(--white);
	pointer-events: auto;
	transition: box-shadow var(--ph-header-speed) ease;
}

#brx-header.brx-sticky.ph-compact > .ph-header.brxe-section {
	box-shadow: var(--ph-header-shadow);
}

/* Plus de bandeau en dégradé sombre au-dessus des photos. */
:root #brx-header.brx-sticky::before {
	content: none;
}

#brx-header.brx-sticky .ph-header-inner.brxe-container {
	height: auto;
	row-gap: 0;
	justify-content: flex-start;
	transition: none;
}

/* Ligne secondaire : anthracite sur blanc, partout. */
#brx-header.brx-sticky .ph-header-util.brxe-div {
	height: var(--ph-util-zone);
	opacity: 1;
	color: var(--anthracite-700);
	text-shadow: none;
	transition: none;
}

/* Ligne principale : pleine largeur du conteneur (1248px), sans pilule. */
#brx-header.brx-sticky .ph-header-inner > .ph-header-bar.brxe-div {
	height: var(--ph-bar-h);
	padding: 0;
	margin: 0;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	transition: height var(--ph-header-speed) ease;
}

#brx-header.brx-sticky.ph-compact .ph-header-inner > .ph-header-bar.brxe-div {
	height: var(--ph-bar-h-compact);
}

#brx-header.brx-sticky .ph-logo.brxe-logo img {
	width: auto;
	height: var(--ph-logo-h);
	aspect-ratio: auto 136 / 162;
	transition: height var(--ph-header-speed) ease;
}

#brx-header.brx-sticky.ph-compact .ph-logo.brxe-logo img {
	height: var(--ph-logo-h-compact);
}

/* Téléphone, une fois placé dans la ligne principale (réglage à faire dans Bricks) :
   pictogramme au trait devant le numéro, petit trait vertical discret qui le sépare
   du menu, centré dans l'écart entre les deux. */
#brx-header.brx-sticky .ph-header-bar .ph-util-phone.brxe-text-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	column-gap: 8px;
	padding: 12px clamp(10px, 1vw, 16px);
	font-size: var(--fs-menu);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .06em;
	white-space: nowrap;
	color: var(--anthracite-800);
	transition: color .3s ease;
}

#brx-header.brx-sticky .ph-header-bar .ph-util-phone.brxe-text-link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(-.5 * clamp(12px, 1.5vw, 24px));
	width: 1px;
	height: 20px;
	background-color: var(--anthracite-300);
	translate: 0 -50%;
}

#brx-header.brx-sticky .ph-header-bar .ph-util-phone.brxe-text-link::after {
	content: "";
	order: -1;
	flex: none;
	width: 15px;
	height: 15px;
	background-color: var(--green-600);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#brx-header.brx-sticky .ph-header-bar .ph-util-phone.brxe-text-link:hover {
	color: var(--green-600);
}

/* La ligne secondaire part avec le défilement. Navigateurs récents : animation liée
   au défilement, sans script. Les autres : même déplacement par ph.js. */
@keyframes ph-header-util-away {
	to {
		translate: 0 calc(-1 * var(--ph-util-zone));
	}
}

@media (min-width: 992px) {
	@supports (animation-timeline: scroll()) {
		#brx-header.brx-sticky {
			animation: ph-header-util-away linear both;
			animation-timeline: scroll(root block);
			animation-range: 0px var(--ph-util-zone);
		}
	}
}

/* Mobile et tablette : compact d'emblée, aucune animation de taille. Téléphone et
   contact en icônes à côté du burger (choix de Matthieu, 05/11). */
@media (max-width: 991px) {
	:root {
		--ph-bar-h: 64px;
		--ph-logo-h: 40px;
	}

	#brx-header.brx-sticky .ph-header-inner > .ph-header-bar.brxe-div,
	#brx-header.brx-sticky .ph-logo.brxe-logo img {
		transition: none;
	}

	/* Téléphone et « J'ai un projet » en icône seule, à gauche du burger. Le texte reste
	   dans la page (lu par les lecteurs d'écran, suivi GA4 inchangé) mais à taille nulle.
	   Zones de clic de 44 × 44px, côte à côte ; 22px entre les pictogrammes. */
	#brx-header.brx-sticky .ph-header-inner > .ph-header-bar.brxe-div {
		column-gap: 0;
	}

	#brx-header.brx-sticky .ph-header-bar .ph-util-phone.brxe-text-link,
	#brx-header.brx-sticky .ph-header-bar .ph-header-btn.brxe-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		flex: none;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		font-size: 0;
		line-height: 0;
		letter-spacing: 0;
		color: var(--anthracite-800);
	}

	#brx-header.brx-sticky .ph-header-bar .ph-util-phone.brxe-text-link {
		order: 1;
		column-gap: 0;
	}

	#brx-header.brx-sticky .ph-header-bar .ph-header-btn.brxe-button {
		order: 2;
	}

	#brx-header.brx-sticky .ph-header-bar > .ph-nav {
		order: 3;
		margin-left: 11px;
	}

	#brx-header.brx-sticky .ph-header-bar .ph-util-phone.brxe-text-link::before,
	#brx-header.brx-sticky .ph-header-bar .ph-header-btn.brxe-button::after {
		display: none;
	}

	#brx-header.brx-sticky .ph-header-bar .ph-util-phone.brxe-text-link::after,
	#brx-header.brx-sticky .ph-header-bar .ph-header-btn.brxe-button::before {
		content: "";
		flex: none;
		width: 22px;
		height: 22px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	#brx-header.brx-sticky .ph-header-bar .ph-header-btn.brxe-button::before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
	}
}

/* Burger allégé (demande de Matthieu, 05/11) : traits de 2px sur 28px au lieu de 4px
   sur 40px. La zone cliquable reste de 44 × 44px (marges intérieures compensées par
   des marges négatives : l'icône ne bouge pas). Les écarts des traits sont recalés
   seulement hors état actif, pour que la croix animée de Bricks reste juste. */
@media (max-width: 991px) {
	#brx-header.brx-sticky .ph-nav .brxe-toggle {
		--brxe-toggle-bar-width: 28px;
		--brxe-toggle-bar-height: 2px;
		--brxe-toggle-bar-radius: 1px;
		box-sizing: border-box;
		flex: none;
		width: 44px;
		max-width: none; /* Bricks limite tout élément à la largeur de son parent (28px ici) */
		height: 44px;
		padding: 13px 8px;
		margin: -13px -8px;
	}

	#brx-header.brx-sticky .ph-nav .brxe-toggle .brxa-wrap {
		flex: none;
		width: 28px;
		height: 18px;
	}

	#brx-header.brx-sticky .ph-nav .brxe-toggle .brxa-inner {
		margin-top: -1px;
	}

	#brx-header.brx-sticky .ph-nav .brxe-toggle:not(.is-active) .brxa-inner::before {
		top: -8px;
	}

	#brx-header.brx-sticky .ph-nav .brxe-toggle:not(.is-active) .brxa-inner::after {
		bottom: -8px;
	}

	/* Bouton de fermeture du panneau, à la place exacte du burger dans le header de 64px.
	   Marge de droite = marge du conteneur du header : 32px, 24px sous 768px, 20px sous 479px. */
	#brx-header.brx-sticky .ph-nav.brx-open .brx-nav-nested-items > li:has(> .brxe-toggle) {
		top: calc((var(--ph-bar-h-compact) - 18px) / 2);
		right: 32px;
	}
}

@media (max-width: 767px) {
	#brx-header.brx-sticky .ph-nav.brx-open .brx-nav-nested-items > li:has(> .brxe-toggle) {
		right: 24px;
	}
}

@media (max-width: 478px) {
	#brx-header.brx-sticky .ph-nav.brx-open .brx-nav-nested-items > li:has(> .brxe-toggle) {
		right: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#brx-header.brx-sticky > .ph-header.brxe-section,
	#brx-header.brx-sticky .ph-header-inner > .ph-header-bar.brxe-div,
	#brx-header.brx-sticky .ph-logo.brxe-logo img {
		transition: none;
	}
}

/* Sentinelle du header compact (créée par ph.js) : 80px sous le haut du document. */
.ph-header-sentinel {
	position: absolute;
	top: 80px;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* Ancres : le titre visé s'arrête 24px sous le header réduit. La barre d'admin est
   déjà ajoutée par WordPress (scroll-padding-top sur html quand on est connecté). */
:where([id]) {
	scroll-margin-top: calc(var(--ph-bar-h-compact) + 24px);
}

/* ==========================================================================
   Header en deux colonnes (demande de Matthieu, 05/11), 992px et plus
   --------------------------------------------------------------------------
   Logo à gauche sur toute la hauteur (96px, 80px de 992 à 1180px), les deux
   lignes de menu empilées à droite, rapprochées et centrées sur le logo : ligne
   secondaire à 28px du haut (12px), menu principal à 72px, header de 116px. La barre principale passe en
   display: contents : ses éléments (logo, menu, téléphone, bouton) se placent
   directement dans la grille du conteneur, sans toucher à la structure Bricks.
   Pendant les 28 premiers pixels de défilement, le header remonte de 28px, la ligne
   secondaire s'efface en fondu, le logo descend à 64px et se recentre sur la barre ;
   en compact, il passe à 40px.
   ========================================================================== */

@media (min-width: 992px) {
	:root {
		--ph-util-zone: 28px;  /* hauteur dont le header remonte en bureau */
		--ph-logo-h: 96px;     /* header de 116px : 28 + 88 */
		--ph-logo-h-mid: 64px;
		--ph-logo-scale-compact: .625; /* 40px / 64px */
	}

	#brx-header.brx-sticky .ph-header-inner.brxe-container {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-rows: var(--ph-util-zone) var(--ph-bar-h);
		column-gap: clamp(12px, 1.5vw, 24px);
		align-items: center;
		transition: grid-template-rows var(--ph-header-speed) ease;
	}

	#brx-header.brx-sticky.ph-compact .ph-header-inner.brxe-container {
		grid-template-rows: var(--ph-util-zone) var(--ph-bar-h-compact);
	}

	#brx-header.brx-sticky .ph-header-inner > .ph-header-bar.brxe-div {
		display: contents;
	}

	/* Ligne secondaire : 1px de plus que la variable, posée au bas de sa rangée et
	   descendue de 6px (centre à 28px du haut, 44px au-dessus du menu principal). */
	#brx-header.brx-sticky .ph-header-util.brxe-div {
		grid-column: 2 / -1;
		grid-row: 1;
		justify-self: end;
		align-self: end;
		height: auto;
		margin-bottom: -6px;
		font-size: calc(var(--fs-utility) + 1px);
	}

	@supports (animation-timeline: scroll()) {
		#brx-header.brx-sticky .ph-header-util.brxe-div {
			animation: ph-util-fade linear both;
			animation-timeline: scroll(root block);
			animation-range: 0px var(--ph-util-zone);
		}
	}

	#brx-header.brx-sticky .ph-logo.brxe-logo {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
		margin-right: 0;
	}

	#brx-header.brx-sticky .ph-nav.brxe-nav-nested {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
	}

	#brx-header.brx-sticky .ph-header-bar .ph-util-phone.brxe-text-link {
		grid-column: 3;
		grid-row: 2;
	}

	#brx-header.brx-sticky .ph-header-bar .ph-header-btn.brxe-button {
		grid-column: 4;
		grid-row: 2;
	}

	/* La hauteur suit le défilement (animation ci-dessous, ou ph.js sous Firefox) ;
	   le passage en compact se fait par une réduction depuis le bord gauche. */
	#brx-header.brx-sticky .ph-logo.brxe-logo img,
	#brx-header.brx-sticky.ph-compact .ph-logo.brxe-logo img {
		height: var(--ph-logo-h);
		transform-origin: left center;
		transition: scale var(--ph-header-speed) ease;
	}

	#brx-header.brx-sticky.ph-compact .ph-logo.brxe-logo img {
		scale: var(--ph-logo-scale-compact);
	}

	@supports (animation-timeline: scroll()) {
		#brx-header.brx-sticky .ph-logo.brxe-logo img {
			animation: ph-logo-settle linear both;
			animation-timeline: scroll(root block);
			animation-range: 0px var(--ph-util-zone);
		}
	}
}

@keyframes ph-util-fade {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes ph-logo-settle {
	to {
		height: var(--ph-logo-h-mid);
		translate: 0 calc(var(--ph-util-zone) / 2);
	}
}

/* 992 à 1180px : logo un peu plus petit et menu resserré, pour garder le menu sur une ligne. */
@media (min-width: 992px) and (max-width: 1180px) {
	:root {
		--ph-logo-h: 80px;
	}

	#brx-header.brx-sticky .ph-nav.brxe-nav-nested .brx-nav-nested-items > li > a {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#brx-header.brx-sticky .ph-header-inner.brxe-container,
	#brx-header.brx-sticky .ph-logo.brxe-logo img {
		transition: none;
	}
}