/*
 * En-tête et mega menu de Let's Couleur et Sol.
 *
 * Navigation NATIVE de WordPress : le client garde la main dessus dans
 * l'éditeur, et l'overlay mobile du cœur fournit déjà le bouton d'ouverture
 * et la croix de fermeture. Tout ce qui suit est de la mise en forme.
 *
 * Le rail de l'en-tête est calé sur celui du hero : le logo tombe exactement
 * sur la verticale du sur-titre et du H1.
 */

.lcs-entete {
	position: relative;
	background: var(--wp--preset--color--base);
	/* Meme gouttiere racine que la couverture du hero, sinon l axe casse de 16 px. */
	padding-inline: var(--wp--style--root-padding-left, var(--wp--preset--spacing--s));
}

/*
 * L en-tete partage le rail des sections, et le partage SYMETRIQUEMENT : le
 * bord droit revient a 1200 px comme le bord gauche. Le retrait calcule qui
 * ne calait que la gauche laissait 352 px a gauche contre 16 px a droite a
 * 1920, soit 336 px d ecart, signale par le client.
 *
 * Cela n est possible que le nom du site retire de la barre : mesure, la
 * marque de 297 px, les sept entrees de 776 px et le bouton de 202 px
 * demandent 1322 px, quand le losange seul ramene le besoin a 1072 px, soit
 * 128 px de reserve dans le rail.
 */
.lcs-entete__rail {
	box-sizing: border-box;
	max-inline-size: var(--wp--style--global--wide-size);
	margin-inline: auto;
	gap: var(--wp--preset--spacing--m);
	padding-inline: 0;
}

/* ------------------------------------------------------------------- Marque */

.lcs-marque {
	gap: 0.7rem;
	align-items: center;
	flex: none;
}

.lcs-marque .wp-block-site-logo,
.lcs-marque .wp-block-site-logo img {
	display: block;
	margin: 0;
}

.lcs-marque .wp-block-site-title {
	margin: 0;
}

.lcs-marque .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--titres);
	font-size: var(--wp--preset--font-size--grand);
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Le nom du site cede la place au losange A TOUS LES PALIERS, et non plus
 * seulement sous 1480 px. C est la condition d un rail symetrique : dans un
 * rail de 1200 px, la marque avec son nom, les sept entrees et le bouton
 * demandent 1322 px quand le losange seul ramene le besoin a 1072 px.
 *
 * Le nom n est pas perdu : il est le texte alternatif du lien du logo, il
 * ouvre le pied de page et il porte le titre de chaque onglet.
 */
.lcs-marque .wp-block-site-title {
	display: none;
}

/*
 * Sous 720 px, la barre ne peut plus rien resserrer : les gouttieres et le
 * bouton se reduisent a leur tour.
 */
@media (max-width: 719.98px) {
	.lcs-entete__rail,
	.lcs-entete__actions {
		gap: var(--wp--preset--spacing--s);
	}

	.lcs-cta-entete .wp-block-button__link {
		font-size: var(--wp--preset--font-size--petit);
		padding-inline: var(--wp--preset--spacing--s);
	}
}

/* ------------------------------------------------------------------ Actions */

.lcs-entete__actions {
	gap: var(--wp--preset--spacing--m);
	align-items: center;
	min-inline-size: 0;
}

.lcs-cta-entete .wp-block-button__link {
	white-space: nowrap;
}

/* ------------------------------------------------- Barre sur une seule ligne */

.lcs-entete .wp-block-navigation__container {
	flex-wrap: nowrap;
	gap: clamp(0.6rem, 1.35vw, 1.5rem);
}

.lcs-entete .wp-block-navigation-item__content {
	white-space: nowrap;
	font-weight: 600;
	color: var(--wp--preset--color--contraste);
	text-decoration: none;
}

.lcs-entete .wp-block-navigation__submenu-icon {
	padding-inline-start: 0.2rem;
}

/*
 * Cible tactile des entrées de premier niveau : le lien du cœur mesure 27 px,
 * on l'étend sans déformer la barre.
 */
.lcs-entete .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.lcs-entete .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

/* --------------------------------------------- Sous-menu deroulant classique */

/*
 * Retour au deroulant classique le 12 aout, a la demande du client : le panneau
 * pleine largeur a colonnes cede la place a une plaque ardoise de 300 px ancree
 * sous son entree. Les sept entrees, les vingt filles et les vingt
 * pictogrammes sont conserves.
 *
 * Ce qui disparait avec le mega menu : le passage en position static de cinq
 * conteneurs du coeur, la grille en colonnes, et le retrait recalcule sur la
 * gouttiere racine. L element de liste redevient le bloc conteneur du panneau,
 * ce qui est le comportement natif.
 *
 * Ce qui RESTE : le pont de survol. Il y a 22 px mesures entre le bas de
 * l entree et le haut du panneau ; sans ce pseudo-element transparent, la
 * souris quitte la zone survolee en chemin et le panneau se referme avant
 * qu on atteigne les liens.
 */
@media (min-width: 1200px) {
	.lcs-entete.lcs-entete .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		box-sizing: border-box;
		/*
		 * Le coeur ancre le panneau par la DROITE des que la navigation porte
		 * items-justified-right : mesure du 12 aout, le panneau de Peinture
		 * s etendait de 119 a 419 px, soit tres a gauche de son entree. On le
		 * recale sous elle. La classe est DOUBLEE, la regle du coeur ayant la
		 * meme specificite et l important etant interdit (piege 14).
		 *
		 * Sans risque de debordement : la derniere entree a sous-menu, Parquet,
		 * ouvre a 783 px pour un panneau de 300, soit 1083, quand le rail
		 * s arrete a 1313.
		 */
		left: 0;
		right: auto;
		inline-size: max-content;
		min-inline-size: 300px;
		max-inline-size: 380px;
		background: var(--wp--preset--color--contraste);
		border: 1px solid var(--wp--preset--color--contraste);
		border-block-start: 3px solid var(--wp--preset--color--accent);
		border-radius: 0;
		box-shadow: none;
		padding: 0;
	}

	.lcs-entete.lcs-entete .wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 100%;
		block-size: 26px;
	}

	/* Ouverture explicite : on ne depend pas de la forme de la regle du coeur. */
	.lcs-entete.lcs-entete .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.lcs-entete.lcs-entete .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container {
		block-size: auto;
		visibility: visible;
		opacity: 1;
		overflow: visible;
	}

	/*
	 * Le panneau est SOMBRE, le tiroir mobile est BLANC, et les deux emploient
	 * les memes classes lcs-mm : toutes les couleurs de la plaque vivent donc
	 * dans cette requete de media, qui ne s applique jamais au tiroir, ferme
	 * au-dela de 1200 px.
	 *
	 * Contraste mesure sur ardoise : texte blanc 14,94:1, pictogramme en
	 * melange de bleu pale et de primaire 7,23:1, magenta au survol 3,64:1,
	 * au-dela du seuil de 3 des elements graphiques. Le bleu primaire pur,
	 * lui, y tomberait a 2,43:1 (piege 23) : il est proscrit sur cette plaque.
	 */
	.lcs-entete .lcs-mm > .wp-block-navigation-item__content {
		padding-inline: calc(var(--wp--preset--spacing--m) - 3px) var(--wp--preset--spacing--m);
		color: var(--wp--preset--color--base);
		border-inline-start: 3px solid transparent;
		border-block-end-color: color-mix(in srgb, var(--wp--preset--color--primaire-clair) 22%, transparent);
		transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
	}

	.lcs-entete .has-child > .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content {
		border-block-end-color: transparent;
	}

	.lcs-entete .lcs-mm > .wp-block-navigation-item__content::before {
		background-color: color-mix(in srgb, var(--wp--preset--color--primaire-clair) 60%, var(--wp--preset--color--primaire));
	}

	/*
	 * Au survol, le fond ne bouge pas : passe en contraste-doux, il ferait
	 * tomber le pictogramme magenta a 2,85:1. Le signal est porte par l arete
	 * magenta a gauche, signature du site, et par la couleur du pictogramme.
	 */
	.lcs-entete .lcs-mm > .wp-block-navigation-item__content:hover,
	.lcs-entete .lcs-mm > .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--base);
		border-inline-start-color: var(--wp--preset--color--accent);
		border-block-end-color: var(--wp--preset--color--accent);
	}

	.lcs-entete .lcs-mm > .wp-block-navigation-item__content:hover::before,
	.lcs-entete .lcs-mm > .wp-block-navigation-item__content:focus-visible::before {
		background-color: var(--wp--preset--color--accent);
	}
}

.lcs-mm > .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-block-size: 44px;
	padding-block: 0.4rem;
	padding-inline: 0;
	font-weight: 400;
	color: var(--wp--preset--color--contraste);
	border-block-end: 1px solid var(--wp--preset--color--bordure);
	transition: color 160ms ease, border-color 160ms ease;
}

.lcs-mm > .wp-block-navigation-item__content::before {
	content: "";
	flex: none;
	inline-size: 22px;
	block-size: 22px;
	background-color: var(--wp--preset--color--primaire);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	transition: background-color 160ms ease;
}

.lcs-mm > .wp-block-navigation-item__content:hover,
.lcs-mm > .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primaire-sombre);
	border-block-end-color: var(--wp--preset--color--accent);
}

.lcs-mm > .wp-block-navigation-item__content:hover::before,
.lcs-mm > .wp-block-navigation-item__content:focus-visible::before {
	background-color: var(--wp--preset--color--accent-sombre);
}

@media (prefers-reduced-motion: reduce) {
	.lcs-mm > .wp-block-navigation-item__content,
	.lcs-mm > .wp-block-navigation-item__content::before {
		transition: none;
	}
}

/* ----------------------------------------------- Tiroir mobile et tablette */

/*
 * Le cœur bascule en overlay à 600 px. Sept entrées plus la marque et le
 * bouton ne tiennent pas sur une ligne avant 1200 px : on repousse le seuil.
 * Fractions obligatoires face au min-width: 1200px, sinon 1199,5 px ne
 * satisfait aucune des deux requêtes.
 */
@media (max-width: 1199.98px) {
	.lcs-entete .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.lcs-entete .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.lcs-entete .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}

	.lcs-entete .wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

/* Sans border-box, les paddings du tiroir ouvert ajoutent 100 px de largeur. */
.wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	background: var(--wp--preset--color--base);
	padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-block-start: var(--wp--preset--spacing--l);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	border-block-end: 1px solid var(--wp--preset--color--bordure);
	padding-block: 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding-inline-start: 0;
	padding-block-end: var(--wp--preset--spacing--s);
}

.wp-block-navigation__responsive-container.is-menu-open .lcs-mm > .wp-block-navigation-item__content {
	border-block-end: 0;
	min-block-size: 44px;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--contraste);
}

/* ------------------------------- Tiroir mobile : sept entrees et deux actions */

/*
 * Parti A retenu par le client le 12 aout, rancon comprise : le tiroir ne
 * montre plus que les sept entrees. Les vingt filles restent dans le code de
 * chaque page, simplement masquees ; on les atteint par la page mere, qui les
 * liste toutes en vitrines. Mesure avant : 2 249 px de defilement pour un ecran
 * de 812, soit 2,8 ecrans.
 *
 * Les filles ne DISPARAISSENT pas : elles se replient. Le bouton natif du coeur
 * bascule aria-expanded au clic, le CSS n a plus qu a suivre cet etat. Zero
 * ligne de JavaScript maison, et le libelle de l entree reste un lien vers la
 * page mere : on deplie par le signe, on y va par le mot.
 */
@media (max-width: 1199.98px) {
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		display: none;
	}

	/*
	 * Place reservee sous la derniere entree : la barre d actions est fixe, elle
	 * recouvrirait sinon le dernier lien du tiroir.
	 */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		/* Hauteur reelle de la barre d actions, mesuree : 201 px. */
		padding-block-end: 208px;
	}

	/*
	 * Le telephone et le devis entrent dans le tiroir. Ils vivent dans l en-tete,
	 * masques par defaut, et ne paraissent que pendant que le tiroir est ouvert :
	 * l etat se lit dans le DOM, la regle est donc DECLARATIVE et se defait
	 * d elle-meme a la fermeture, quel que soit le chemin de fermeture, Echap
	 * compris. Aucun nettoyage evenementiel a poser.
	 *
	 * Sans prise en charge de :has(), rien ne parait et le tiroir reste ce qu il
	 * etait : zero etat casse en repli.
	 */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .lcs-entete__tiroir-actions.lcs-entete__tiroir-actions {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--s);
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		padding: var(--wp--preset--spacing--m);
		background: var(--wp--preset--color--base-alt);
		border-block-start: 1px solid var(--wp--preset--color--bordure);
		z-index: 100001;
	}

	body:has(.wp-block-navigation__responsive-container.is-menu-open) .lcs-entete__tiroir-actions .lcs-coordonnees__telephone {
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-block-size: 56px;
		border: 1px solid var(--wp--preset--color--primaire);
		border-radius: 5px;
		color: var(--wp--preset--color--primaire-sombre);
		font-weight: 600;
		text-decoration: none;
	}

	body:has(.wp-block-navigation__responsive-container.is-menu-open) .lcs-entete__tiroir-actions .wp-block-button,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .lcs-entete__tiroir-actions .wp-block-button__link {
		inline-size: 100%;
		text-align: center;
	}

	body:has(.wp-block-navigation__responsive-container.is-menu-open) .lcs-entete__tiroir-actions .wp-block-button__link {
		min-block-size: 56px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/*
	 * La marque remonte dans le tiroir : la croix seule en haut a droite laissait
	 * un panneau decapite.
	 */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .lcs-marque {
		position: fixed;
		inset-block-start: 13px;
		inset-inline-start: var(--wp--preset--spacing--s);
		z-index: 100001;
	}
}

/* Hors tiroir ouvert, ces actions n existent pas a l ecran. */
.lcs-entete__tiroir-actions.lcs-entete__tiroir-actions {
	display: none;
}

/* --------------------------------- Tiroir mobile, corrections du 12 aout soir */

/*
 * Rendu sur telephone reel, signale par le client : la liste du tiroir
 * s alignait A DROITE, chaque entree epousant son texte, separees par une
 * gouttiere de 24 px, et la croix de fermeture disparaissait sous la marque.
 *
 * Cause : le bloc de navigation propage sa justification a droite jusque dans
 * le tiroir, par la variable --navigation-layout-justification-setting que le
 * coeur lit en align-items. Sa regle a la MEME specificite que la notre : les
 * classes sont doublees, l important restant interdit.
 *
 * Lecon de sonde : mes mesures precedentes comptaient des hauteurs et des
 * nombres, jamais des ABSCISSES. Un tiroir peut tenir dans un ecran et etre
 * illisible. Toute mesure de tiroir releve desormais les bords gauche et
 * droit de la liste et de ses entrees.
 */
@media (max-width: 1199.98px) {
	/*
	 * La justification agit sur TOUTE la chaine : dialogue, conteneur de contenu,
	 * bloc de navigation et liste. Corrige au niveau du seul ul, la liste restait
	 * large de 111 px et collee a droite. Les quatre sont remis a plat.
	 */
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-content,
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation {
		align-items: stretch;
		inline-size: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container {
		align-items: stretch;
		gap: 0;
		inline-size: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		inline-size: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation-item__content {
		inline-size: 100%;
		justify-content: flex-start;
	}

	/* La croix passe a droite : la marque occupe desormais le coin gauche. */
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		inset-block-start: var(--wp--preset--spacing--m);
		inset-inline-end: var(--wp--preset--spacing--s);
		inset-inline-start: auto;
		z-index: 100002;
	}

	/*
	 * Le telephone est rendu par un bloc : l element etire dans la colonne est
	 * son CONTENEUR, pas le lien, qui restait a 98 px, colle a gauche.
	 */
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .lcs-entete__tiroir-actions .lcs-coordonnees,
	body:has(.wp-block-navigation__responsive-container.is-menu-open) .lcs-entete__tiroir-actions .lcs-coordonnees__telephone {
		inline-size: 100%;
	}

	body:has(.wp-block-navigation__responsive-container.is-menu-open) .lcs-entete__tiroir-actions .lcs-coordonnees {
		display: flex;
		margin-block: 0;
	}
}

/* ------------------------------------ Tiroir mobile : accordeon des sous-menus */

/*
 * Le signe est celui de la foire aux questions, un plus qui pivote d un quart
 * de tour : le meme geste, le meme vocabulaire, d un bout a l autre du site.
 *
 * L etat vient du bouton natif du coeur, pas d une classe maison. Si son script
 * ne s execute pas, aria-expanded reste a false, les filles restent repliees et
 * le libelle mene toujours a la page mere, qui les liste toutes. Zero etat
 * casse en repli.
 */
@media (max-width: 1199.98px) {
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__submenu-icon {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		inline-size: 44px;
		min-block-size: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--primaire);
		cursor: pointer;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__submenu-icon svg {
		display: none;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__submenu-icon::after {
		content: "+";
		font-family: var(--wp--preset--font-family--corps);
		font-size: var(--wp--preset--font-size--grand);
		line-height: 1;
		transition: transform 260ms ease;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"]::after {
		transform: rotate(45deg);
	}

	/*
	 * L entree et son signe tiennent sur UNE ligne. Le coeur fait de chaque
	 * element de liste une COLONNE flex dans le tiroir, et lui applique la meme
	 * justification qu au reste : le bouton passait sous son libelle, l entree
	 * faisait 97 px au lieu de 53, et le libelle se calait a droite sur 60 px.
	 * Trois proprietes a reprendre, pas une.
	 *
	 * La rangee AUTORISE le retour a la ligne : le libelle et le signe occupent
	 * la premiere, le sous-menu deplie prend la seconde grace a son inline-size
	 * de 100 pour cent. En nowrap, il se serrait a cote du libelle, de 124 a
	 * 396 px.
	 */
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		flex: 1;
		inline-size: auto;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		padding-block: 0 var(--wp--preset--spacing--s);
	}

	/*
	 * Les filles rentrent d un cran, mais le retrait est porte par le PADDING DE
	 * LA LISTE, 32 px poses par le coeur : l element fille tombe ainsi a 48 px du
	 * bord, soit 16 de gouttiere plus 32 de retrait.
	 *
	 * En revanche il faut leur rendre leur largeur naturelle : la regle generale
	 * qui etire les entrees a 100 pour cent s appliquait aussi a elles, et leur
	 * lien debordait de son element vers la gauche, de 0 a 364 au lieu de 48 a
	 * 364.
	 */
	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		align-items: stretch;
		inline-size: 100%;
	}

	.wp-block-navigation__responsive-container.is-menu-open.is-menu-open .lcs-mm > .wp-block-navigation-item__content {
		inline-size: auto;
		flex: 1;
	}
}