/* En-tête et pied de page : les options sont des classes sur le groupe principal de chaque partie,
 * réglées dans l'éditeur de site (panneau « Options de l'en-tête » / « Options du pied de page »).
 *
 * En-tête (.ap-entete)
 *   ap-collant     reste en haut de l'écran                       (sans JavaScript)
 *   ap-escamotable se cache quand on descend, revient quand on remonte
 *   ap-ombre       ombre douce dès qu'on a défilé
 *   ap-compact     plus fin dès qu'on a défilé (la barre d'infos disparaît)
 *   ap-flou        fond légèrement transparent et flou            (sans JavaScript)
 *   ap-superpose   posé sur la première section quand la page commence par une section pleine largeur
 *   ap-clair       texte clair tant qu'il est posé sur la section (photo sombre)
 *   ap-large       contenu sur toute la largeur de l'écran        (sans JavaScript)
 * Pied (.ap-pied)
 *   ap-pied-bas    reste en bas de l'écran sur les pages courtes  (sans JavaScript)
 *   ap-pied-rideau le contenu glisse et découvre le pied de page   (sans JavaScript)
 *   ap-retour-haut bouton « retour en haut »
 *
 * Les effets « dès qu'on a défilé » s'appuient sur deux classes posées sur <html> par assets/js/entete.js
 * (1 Ko, chargé seulement si une de ces options est active) : ap-defile et ap-descend.
 * Hauteur de l'en-tête mesurée par le même script : --ap-hauteur-entete. */

:root {
	--ap-hauteur-entete: 5rem;
	--ap-barre-admin: 0px;
}
@media (min-width: 601px) {
	body.admin-bar {
		--ap-barre-admin: var(--wp-admin--admin-bar--height, 32px);
	}
}

.ap-entete {
	position: relative;
	isolation: isolate;
	transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

/* ---------- Collant ----------
 * Le groupe est dans <header class="wp-block-template-part"> : c'est cette enveloppe qui colle.
 * Le réglage natif Position › Collant du groupe fonctionne aussi. */
.wp-site-blocks > .wp-block-template-part:has(> .ap-collant, > .is-position-sticky) {
	position: sticky;
	top: var(--ap-barre-admin);
	z-index: 50;
	transition: top 0.3s ease;
}
/* Un en-tête collant a besoin d'un fond, sinon le contenu passe à travers. */
.ap-entete.ap-collant:not(.has-background) {
	background-color: var(--wp--preset--color--fond);
}
/* Les ancres (#contact…) ne se cachent pas sous l'en-tête. */
html:has(.ap-collant) {
	scroll-padding-top: calc(var(--ap-hauteur-entete) + 1rem);
}

/* Se cache en descendant (sauf si le menu mobile est ouvert ou si le clavier est dans l'en-tête). */
html.ap-descend:not(.has-modal-open) .wp-site-blocks > .wp-block-template-part:has(> .ap-escamotable.ap-collant:not(:focus-within)) {
	top: calc(var(--ap-barre-admin) - var(--ap-hauteur-entete) - 4px);
}

/* Ombre au défilement. */
html.ap-defile .ap-entete.ap-collant.ap-ombre {
	box-shadow: var(--wp--preset--shadow--douce);
}

/* Plus fin au défilement. */
html.ap-defile .ap-entete.ap-collant.ap-compact {
	padding-top: var(--wp--preset--spacing--10) !important;
	padding-bottom: var(--wp--preset--spacing--10) !important;
}
html.ap-defile .ap-entete.ap-collant.ap-compact .wp-block-site-logo img {
	max-height: 34px;
	width: auto !important;
}
html.ap-defile .ap-entete.ap-collant.ap-compact .ap-barre-infos {
	display: none;
}

/* Fond flou. Le flou est sur un calque à part : posé sur l'en-tête, il enfermerait le menu mobile. */
.ap-entete.ap-flou.has-background {
	background-color: transparent !important;
}
.ap-entete.ap-flou::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: color-mix(in srgb, var(--ap-fond-flou, var(--wp--preset--color--fond)) 78%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	transition: background-color 0.25s ease;
}
.ap-entete.ap-flou.has-fond-background-color { --ap-fond-flou: var(--wp--preset--color--fond); }
.ap-entete.ap-flou.has-surface-background-color { --ap-fond-flou: var(--wp--preset--color--surface); }
.ap-entete.ap-flou.has-bordure-background-color { --ap-fond-flou: var(--wp--preset--color--bordure); }
.ap-entete.ap-flou.has-texte-background-color { --ap-fond-flou: var(--wp--preset--color--texte); }
.ap-entete.ap-flou.has-discret-background-color { --ap-fond-flou: var(--wp--preset--color--discret); }
.ap-entete.ap-flou.has-principale-background-color { --ap-fond-flou: var(--wp--preset--color--principale); }
.ap-entete.ap-flou.has-sur-principale-background-color { --ap-fond-flou: var(--wp--preset--color--sur-principale); }
.ap-entete.ap-flou.has-sombre-background-color { --ap-fond-flou: var(--wp--preset--color--sombre); }

/* ---------- Posé sur la première section ----------
 * Seulement quand la page commence par une section pleine largeur (haut de page sur photo, etc.).
 * Ailleurs (articles, pages de texte), l'en-tête reste normal. */
.wp-site-blocks:has(> .ap-principal > .ap-contenu > .alignfull:first-child) > .wp-block-template-part:has(> .ap-superpose) {
	position: absolute;
	top: var(--ap-barre-admin);
	left: 0;
	right: 0;
	z-index: 50;
}
.wp-site-blocks:has(> .ap-principal > .ap-contenu > .alignfull:first-child) > .wp-block-template-part:has(> .ap-superpose.ap-collant) {
	position: fixed;
}
/* Sur mobile, la barre d'administration (connecté) défile avec la page : l'en-tête se place sous elle, sans rester fixe. */
@media (max-width: 600px) {
	body.admin-bar .wp-site-blocks:has(> .ap-principal > .ap-contenu > .alignfull:first-child) > .wp-block-template-part:has(> .ap-superpose) {
		position: absolute;
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}
/* La première section passe sous l'en-tête : on lui ajoute la hauteur de l'en-tête en haut. */
.wp-site-blocks:has(> .wp-block-template-part > .ap-superpose) > .ap-principal > .ap-contenu > .alignfull:first-child {
	padding-top: calc(var(--ap-hauteur-entete) + var(--wp--preset--spacing--50)) !important;
}
/* Transparent tant qu'on n'a pas défilé (ou toujours, s'il n'est pas collant). */
html:not(.ap-defile) .wp-site-blocks:has(> .ap-principal > .ap-contenu > .alignfull:first-child) > .wp-block-template-part > .ap-superpose,
.wp-site-blocks:has(> .ap-principal > .ap-contenu > .alignfull:first-child) > .wp-block-template-part > .ap-superpose:not(.ap-collant) {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	--ap-fond-flou: transparent;
}
html:not(.ap-defile) .wp-site-blocks:has(> .ap-principal > .ap-contenu > .alignfull:first-child) > .wp-block-template-part > .ap-superpose::before,
.wp-site-blocks:has(> .ap-principal > .ap-contenu > .alignfull:first-child) > .wp-block-template-part > .ap-superpose:not(.ap-collant)::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
/* Texte clair sur photo sombre (le menu mobile ouvert garde ses propres couleurs). */
html:not(.ap-defile) .wp-site-blocks:has(> .ap-principal > .ap-contenu > .alignfull:first-child) > .wp-block-template-part > .ap-superpose.ap-clair,
.wp-site-blocks:has(> .ap-principal > .ap-contenu > .alignfull:first-child) > .wp-block-template-part > .ap-superpose.ap-clair:not(.ap-collant) {
	--ap-texte-entete: var(--wp--preset--color--fond);
	color: var(--ap-texte-entete) !important;
}
.ap-superpose.ap-clair .wp-block-site-title a,
.ap-superpose.ap-clair .ap-barre-infos,
.ap-superpose.ap-clair .ap-barre-infos a,
.ap-superpose.ap-clair .wp-block-navigation__responsive-container:not(.is-menu-open) a,
.ap-superpose.ap-clair .wp-block-navigation__responsive-container-open {
	color: var(--ap-texte-entete, inherit) !important;
}
html:not(.ap-defile) .ap-superpose.ap-clair .ap-barre-infos {
	background-color: transparent !important;
}

/* ---------- Toute la largeur ---------- */
.ap-entete.ap-large .alignwide {
	max-width: none;
}

/* ---------- Barre d'infos (téléphone, horaires…) au-dessus de l'en-tête ---------- */
.ap-barre-infos p {
	margin: 0;
}
@media (max-width: 600px) {
	.ap-barre-infos .ap-masque-mobile {
		display: none;
	}
}

/* ---------- Pied de page toujours en bas de l'écran ---------- */
.wp-site-blocks:has(> .wp-block-template-part > .ap-pied-bas) {
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks:has(> .wp-block-template-part > .ap-pied-bas) > .ap-principal {
	flex: 1 0 auto;
}

/* ---------- Effet rideau : le contenu glisse vers le haut et découvre le pied de page ----------
 * Seulement sur grand écran, et si le pied tient dans l'écran. */
@media (min-width: 782px) and (min-height: 700px) {
	.wp-site-blocks:has(> .wp-block-template-part > .ap-pied-rideau) > .ap-principal {
		position: relative;
		z-index: 1;
		background-color: var(--wp--preset--color--fond);
		box-shadow: 0 12px 24px -12px rgb(0 0 0 / 0.25);
	}
	.wp-site-blocks > .wp-block-template-part:has(> .ap-pied-rideau) {
		position: sticky;
		bottom: 0;
		z-index: 0;
		max-height: 100dvh;
	}
}

/* ---------- Bouton « retour en haut » ---------- */
.ap-bouton-haut {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 40;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--principale);
	color: var(--wp--preset--color--sur-principale);
	box-shadow: var(--wp--preset--shadow--douce);
	text-decoration: none;
	font-size: 1.25rem;
	line-height: 1;
	opacity: 0;
	transform: translateY(0.5rem);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
html.ap-defile .ap-bouton-haut,
.ap-bouton-haut:focus-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.ap-bouton-haut:hover {
	background-color: var(--wp--preset--color--texte);
	color: var(--wp--preset--color--fond);
}

@media (prefers-reduced-motion: reduce) {
	.ap-entete,
	.ap-entete::before,
	.wp-site-blocks > .wp-block-template-part,
	.ap-bouton-haut {
		transition: none;
	}
}