/*
 * 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));
}

.lcs-entete__rail {
	box-sizing: border-box;
	max-inline-size: 1520px;
	margin-inline: auto;
	gap: var(--wp--preset--spacing--m);
	padding-inline: 0;
}

@media (min-width: 1080px) {
	.lcs-entete__rail {
		padding-inline: clamp(24px, 3.2vw, 64px);
	}
}

/* ------------------------------------------------------------------- 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;
}

/*
 * Sous 720 px, la barre ne peut rien faire passer a la ligne : le bouton
 * debordait de 100 px. Le nom du site cede la place, le losange porte la
 * marque et son texte alternatif l annonce toujours.
 */
@media (max-width: 719.98px) {
	.lcs-marque .wp-block-site-title {
		display: none;
	}

	.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;
}

/* --------------------------------------------------------------- Mega menu */

@media (min-width: 1200px) {
	/*
	 * Le coeur pose position: relative sur l element de liste : le panneau s y
	 * ancre et ne fait que 92 px. On rend l element statique pour que le
	 * panneau se cale sur .lcs-entete, seul bloc de pleine largeur.
	 */
	.lcs-entete.lcs-entete .wp-block-navigation,
	.lcs-entete.lcs-entete .wp-block-navigation__responsive-container:not(.is-menu-open),
	.lcs-entete.lcs-entete .wp-block-navigation__responsive-dialog,
	.lcs-entete.lcs-entete .wp-block-navigation__container,
	.lcs-entete.lcs-entete .wp-block-navigation-item.has-child {
		position: static;
	}

	.lcs-entete.lcs-entete .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		box-sizing: border-box;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		/* Le coeur contraint la largeur du sous-menu : sans auto, la boite ne
		   fait que ses paddings, soit 92 px mesures. */
		width: auto;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
		gap: 0 var(--wp--preset--spacing--xl);
		min-inline-size: 0;
		max-inline-size: none;
		background: var(--wp--preset--color--base);
		border-block-start: 3px solid var(--wp--preset--color--accent);
		border-block-end: 1px solid var(--wp--preset--color--bordure);
		border-inline: 0;
		padding-block: var(--wp--preset--spacing--l);
		/* Le panneau couvre .lcs-entete, gouttiere racine comprise : on la
		   reintegre pour que les libelles tombent sur l axe du logo. */
		padding-inline: max(calc(var(--wp--style--root-padding-left, var(--wp--preset--spacing--s)) + clamp(24px, 3.2vw, 64px)), calc((100% - 1520px) / 2 + clamp(24px, 3.2vw, 64px)));
	}

	/* 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;
	}
}

.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);
}