/**
 * Chrome — en-tete et pied de page.
 */

.site-header {
	position: sticky;
	/* décalé sous la barre d'admin quand elle est présente */
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10;
	background-color: var(--color-base);
	border-block-end: var(--line-width) solid var(--color-accent);
	/* Sur iPhone, viewport-fit=cover étend la page sous l'heure, la batterie
	   et l'île. Ce padding y loge le logo et le menu ; le fond du header,
	   transparent au-dessus du hero, laisse l'image passer derrière. Sans
	   inset, env() vaut 0 et rien ne bouge. */
	padding-block-start: env(safe-area-inset-top, 0px);
	transition:
		background-color var(--duration-base) var(--ease),
		border-color var(--duration-base) var(--ease);
}

/* Pages ouvertes par un hero plein cadre : le header se pose sur l'image,
   hors flux, comme un calque. Le hero part alors du sommet du document,
   y compris sous l'heure et l'île iOS — un header sticky dans le flux
   réservait une bande au-dessus de l'image, et le rappel en marge négative
   dépendait du JS. */
.has-hero-header .site-header {
	position: fixed;
	inset-inline: 0;
	inline-size: auto;
	max-inline-size: none;
	margin-inline: 0;
	background-color: transparent;
	border-block-end-color: transparent;
	/* Logo et menu sous l'heure : env() vaut 0 sans encoche. */
	padding-block-start: env(safe-area-inset-top, 0px);
}

/* Fond opaque dès que la page défile, ou dès qu'un méga-menu est ouvert :
   le panneau a son propre fond brun, un header transparent au-dessus
   créerait une rupture. */
.has-hero-header .site-header[data-scrolled="true"],
.has-hero-header .site-header[data-menu-open="true"] {
	background-color: var(--color-base);
	border-block-end-color: var(--color-accent);
}

/* L'image remonte sous la barre d'état. env() vaut 0 hors encoche. */
.has-hero-header .wp-block-cover.hero {
	margin-block-start: calc(-1 * env(safe-area-inset-top, 0px));
}

.has-hero-header .hero .wp-block-cover__inner-container {
	padding-block-start: calc(
		var(--space-4xl) +
		var(--header-height, 0px) +
		env(safe-area-inset-top, 0px)
	);
	padding-block-end: calc(
		var(--space-4xl) +
		env(safe-area-inset-bottom, 0px)
	);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding-block: var(--space-md);
}

@media (min-width: 1024px) {
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.site-branding {
		justify-self: start;
	}

	.site-nav {
		justify-self: center;
	}

	.site-header__actions {
		justify-self: end;
	}
}

.site-branding {
	display: inline-flex;
	align-items: center;
	color: var(--color-text);
	text-decoration: none;
}

.logo {
	display: block;
	block-size: var(--logo-height, 1.5rem);
	inline-size: auto;
	max-inline-size: 100%;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav li {
	max-width: none;
}

.site-nav a {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

/* Bascule du panneau. Le libellé change avec l'état : aria-expanded suffit
   à un lecteur d'écran, mais rien n'indiquait à l'œil que le bouton
   refermait. Les deux libellés vivent dans le markup pour rester
   traduisibles ; celui qui ne sert pas passe en display: none, ce qui le
   retire aussi de l'arbre d'accessibilité — le bouton n'annonce donc
   jamais deux mots à la fois. */
.nav-toggle {
	--glyph-width: 1rem;
	--glyph-height: 0.625rem;
	display: none;
	align-items: center;
	gap: var(--space-xs);
	background: none;
	border: var(--line-width) solid var(--color-line);
	color: var(--color-text);
	min-block-size: var(--tap-target);
	padding-inline: var(--space-md);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition: border-color var(--duration-base) var(--ease);
}

.nav-toggle[aria-expanded="true"] {
	border-color: var(--color-accent);
}

.nav-toggle__label[data-when="open"],
.nav-toggle[aria-expanded="true"] .nav-toggle__label[data-when="closed"] {
	display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__label[data-when="open"] {
	display: block;
}

/* Deux barres et non trois : elles se croisent en une croix sans élément
   supplémentaire, et deux traits suffisent à se lire comme un menu. Tracé
   en CSS et non en SVG : c'est une icône d'interface, elle n'a rien à
   faire dans la médiathèque. */
.nav-toggle__glyph {
	position: relative;
	display: block;
	inline-size: var(--glyph-width);
	block-size: var(--glyph-height);
}

.nav-toggle__glyph::before,
.nav-toggle__glyph::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: var(--line-width);
	background-color: currentColor;
	transition: transform var(--duration-base) var(--ease);
}

.nav-toggle__glyph::before {
	inset-block-start: 0;
}

.nav-toggle__glyph::after {
	inset-block-end: 0;
}

/* Les deux barres se rejoignent au centre du glyphe, soit la moitié de sa
   hauteur, avant de pivoter. */
.nav-toggle[aria-expanded="true"] .nav-toggle__glyph::before {
	transform: translateY(calc(var(--glyph-height) / 2)) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__glyph::after {
	transform: translateY(calc(var(--glyph-height) / -2)) rotate(-45deg);
}

/* Le devis n'apparaît dans le panneau qu'en dessous de --bp-tablet, là où
   le bouton de l'en-tête est masqué. Les deux emplacements appellent la
   même fonction : un seul libellé et une seule URL à maintenir, et jamais
   deux liens annoncés, celui qui est masqué sortant de l'arbre
   d'accessibilité. */
.site-nav__cta {
	display: none;
}

/* Sous --bp-tablet, la barre horizontale ne tient plus : cinq entrées, le
   logo et le bouton de devis réclament près de 700px, et les entrées
   passaient sur deux lignes dès 800px. Le panneau prend donc le relais
   jusqu'à la tablette incluse. Cela règle du même coup les colonnes de
   méga-menu, tombées à 230px de large en tablette, où chaque lien se
   coupait en deux lignes. */
@media (max-width: 1023px) {
	.nav-toggle {
		display: inline-flex;
	}

	/* Panneau ancré sous l'en-tête, comme les méga-menus : le header est le
	   seul ancêtre positionné, un absolute suffit et suit son comportement
	   collant. Hors du flux, il ne change pas la hauteur du header, dont
	   dépend le calage du hero.

	   Sa hauteur s'arrête au bas de la zone réellement visible : dvh et non
	   vh, car vh ignore la barre d'adresse mobile et la fin du menu
	   passerait dessous, hors d'atteinte. */
	.site-nav {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		z-index: 20;
		max-block-size: calc(
			100dvh - var(--header-height, 0px) -
			var(--wp-admin--admin-bar--height, 0px)
		);
		overflow-y: auto;
		/* Arrivé en bout de panneau, le geste ne se propage pas à la page. */
		overscroll-behavior: contain;
		background-color: var(--color-base);
		border-block-end: var(--line-width) solid var(--color-accent);
		padding-inline: var(--space-page);
		padding-block-end: var(--space-xl);
		/* visibility plutôt que display : elle se transitionne et retire
		   l'élément de l'ordre de tabulation, ce que opacity seule ne fait
		   pas — le menu fermé resterait atteignable au clavier. */
		visibility: hidden;
		opacity: 0;
		translate: 0 calc(-1 * var(--space-xs));
		transition:
			opacity var(--duration-base) var(--ease),
			translate var(--duration-base) var(--ease),
			visibility var(--duration-base);
	}

	.site-nav[data-open="true"] {
		visibility: visible;
		opacity: 1;
		translate: 0 0;
	}

	/* Panneau ouvert, la page derrière ne défile plus : sinon le doigt
	   emmène le contenu sous un panneau immobile. L'état vit déjà sur le
	   panneau, :has évite de le dupliquer en attribut posé en JS. */
	html:has(.site-nav[data-open="true"]) {
		overflow: hidden;
	}

	.site-nav > ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Un filet entre deux entrées, aucun au-dessus de la première : le
	   filet du header en tient lieu. */
	.site-nav > ul > li + li {
		border-block-start: var(--line-width) solid var(--color-line);
	}

	/* Cible tactile : chaque entrée devient un bloc de --tap-target de
	   haut, cliquable sur toute la largeur, vide à droite du libellé
	   compris. En ligne, un lien mesurait la hauteur de son texte, 20px,
	   sous le minimum de 24px du critère 2.5.8 de WCAG 2.2. */
	.site-nav > ul > li > a,
	.site-nav > ul > li > .mega-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-md);
		inline-size: 100%;
		min-block-size: var(--tap-target);
		padding-block: var(--space-sm);
		font-size: var(--font-size-md);
	}

	/* Le devis quitte l'en-tête pour le bas du panneau : à 360px, logo,
	   bascule et bouton ne tiennent pas sur une ligne. */
	.site-header__actions {
		display: none;
	}

	.site-nav__cta {
		display: block;
		margin-block-start: var(--space-lg);
	}

	.site-nav__cta .button {
		inline-size: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* Les deux filets du footer sont posés sur le conteneur, pas sur l'élément
   pleine largeur : ils partagent ainsi l'origine du contenu et du logo. */
.site-footer__inner {
	border-block-start: var(--line-width) solid var(--color-line);
	padding-block: var(--space-3xl) var(--space-xl);
}

/* Mentions légales : bloc de pied de la première colonne, sous la
   description, et non plus barre pleine largeur. Empilées et sans filet :
   dans une colonne, un trait court romprait l'alignement des voisines. */
.site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin-block-start: var(--space-lg);
	font-size: var(--font-size-xs);
	opacity: 0.7;
}

.site-footer__legal p,
.site-footer ul {
	margin: 0;
	max-width: none;
}

.site-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

/* Sur mobile, les listes de liens passent avant le texte et les mentions :
   c'est la navigation qu'on cherche en bas de page, pas le crédit.
   La grille passe à 4 puis 1 piste : sans forcer 1 / -1, un col-2
   n'occuperait que la moitié de la rangée. */
@media (max-width: 767px) {
	.site-footer .grid > [class*="col-"] {
		grid-column: 1 / -1;
	}

	.site-footer .col-4 {
		order: 1;
	}
}

.site-footer ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--font-size-sm);
}

.site-footer li {
	max-width: none;
}

.site-footer a {
	text-decoration: none;
}

/* Signature de bas de page : le logotype s'aligne sur la largeur du contenu,
   comme les colonnes du footer. Il reste hors du conteneur, car un padding
   combine a aspect-ratio et box-sizing: border-box decalerait le point de
   coupe : la boite garderait la pleine largeur alors que le trace serait
   reduit. La gouttiere est donc reproduite en marge, ce qui retrecit la
   boite elle-meme et conserve le rapport exact. Purement graphique, il est
   retire de l'ordre de lecture (aria-hidden) : le nom du site est deja
   annonce dans l'en-tete.

   Le trace garde sa taille : sa largeur remplit la boite, sa hauteur en
   decoule. La boite, elle, est plus courte que lui, et rien ne suit dans
   le footer : le bas du logotype passe donc sous la fin de page, ou il
   est masque.

   --wordmark-visible fixe la hauteur de la boite, en part de la hauteur
   du trace ; --wordmark-shift fait descendre le trace a l'interieur, dans
   la meme unite. Le logotype apparait donc de son sommet jusqu'a
   (visible - shift) de sa hauteur, precede d'un vide egal au decalage. A
   0.82 et 30 %, il en reste un peu plus de la moitie, avec un tiers de sa
   hauteur d'air au-dessus. La hauteur de la boite vient d'aspect-ratio
   et non du SVG : c'est ce qui permet de couper sans deformer ni toucher
   au viewBox, et de garder la meme proportion coupee a toutes les
   largeurs d'ecran. Un translateY en pixels trancherait de plus en plus
   haut a mesure que le logotype rapetisse.

   clip plutot que hidden : hidden etablit un conteneur de defilement,
   dont une barre pourrait surgir au premier debordement. */
.site-footer__wordmark {
	--wordmark-visible: 0.82;
	--wordmark-rise: -1.6%;
	--wordmark-shift: 20%;
	display: block;
	overflow: clip;
	aspect-ratio: calc(var(--logo-aspect) / var(--wordmark-visible));
	/* Remontee exprimee en pourcentage : une marge verticale en % se mesure
	   sur la largeur du parent, donc sur la grandeur dont depend aussi la
	   hauteur du cadre, fixee par aspect-ratio. Le chevauchement garde ainsi
	   la meme proportion a toutes les largeurs. Les -30px qui tenaient ce
	   role valaient 9 % de la hauteur du trace en grand ecran, mais 47 % a
	   360px, ou ils tranchaient dans le logotype. */
	margin-block-start: var(--wordmark-rise);
	margin-inline: var(--space-page);
	/* Annule l'espace de la ligne de base sous le SVG. */
	line-height: 0;
}

.site-footer__wordmark .logo {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: none;
	/* Decalage exprime en part de la hauteur du trace lui-meme, donc
	   proportionnel a toutes les largeurs d'ecran. Ce qui sort par le bas
	   est masque par le clip du cadre : la hauteur occupee dans la page ne
	   change pas, seule la portion visible du logotype se deplace. */
	transform: translateY(var(--wordmark-shift, 0));
}

/* Sous --bp-mobile, le meme ratio de coupe traverse les boucles : a ~90 px
   de haut, le tracé n'a plus assez de matière pour que la tranche se lise
   comme un debordement. On montre le logotype entier. */
@media (max-width: 767px) {
	.site-footer__wordmark {
		--wordmark-visible: 1;
		--wordmark-shift: 0%;
		--wordmark-rise: 0%;
		overflow: visible;
	}
}

/* Intitulés de colonnes : même registre que les index de mosaïque,
   --color-text à opacité réduite. --color-cool est un fond, pas un texte. */
.footer-heading {
	font-family: var(--font-body);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text);
	opacity: 0.55;
	margin: 0;
}
.site-footer__distributors {
	margin-block-start: var(--space-2xl);
	padding-block-start: var(--space-xl);
	border-block-start: var(--line-width) solid var(--color-line);
}

.distributors {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-inline-size: var(--measure);
}

.distributors__title {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
}

.distributors p {
	margin: 0;
}