/*
 * E2IT - en-tete et tiroir de navigation.
 * Toutes les valeurs proviennent de tokens.css.
 */

:root {
	--e2it-entete-hauteur: 78px;
	--e2it-entete-hauteur-haute: 152px;
}

/* ------------------------------------------------------------------
   1. Structure
   ------------------------------------------------------------------ */

.e2it-entete {
	position: fixed;
	inset: 0 0 auto;
	z-index: 900;
	background: var(--e2it-blanc);
	border-bottom: 1px solid var(--e2it-bordure);
	transition:
		background-color var(--e2it-duree-moyenne) var(--e2it-courbe),
		border-color var(--e2it-duree-moyenne) var(--e2it-courbe),
		box-shadow var(--e2it-duree-moyenne) var(--e2it-courbe), box-shadow var(--e2it-duree-moyenne) var(--e2it-courbe);
}

.e2it-entete__interieur {
	/* La hauteur fait partie de la transition : les deux etats sont exprimes
	   en pixels, l interpolation est donc possible sans recalcul de mise en page
	   du reste du document, la barre etant en position fixe. */
	transition: height var(--e2it-duree-moyenne) var(--e2it-courbe), padding-top var(--e2it-duree-moyenne) var(--e2it-courbe);
	display: flex;
	align-items: center;
	gap: var(--e2it-espace-6);
	height: var(--e2it-entete-hauteur);
	max-width: var(--e2it-largeur-contenu);
	margin-inline: auto;
	padding-inline: var(--e2it-gouttiere);
	transition: height var(--e2it-duree-moyenne) var(--e2it-courbe);
}

/* Le corps compense la hauteur de l'en-tete, sauf quand il est pose sur le hero. */
body.e2it-entete-opaque {
	padding-top: var(--e2it-entete-hauteur);
}

/* ------------------------------------------------------------------
   2. Etat transparent, pose sur le hero
   ------------------------------------------------------------------ */

/* Exclusion mutuelle explicite : a specificite egale, l ordre du fichier
   decidait, et l etat transparent gagnait sur l etat fige. */
.e2it-entete--transparente:not(.e2it-entete--figee) {
	background: transparent;
	border-bottom-color: var(--e2it-filet-entete);
}

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__interieur {
	flex-direction: column;
	/* Alignement en haut plutot que centre : la repartition verticale devient
	   previsible, 36 px au-dessus du logo et 17 px sous le menu. */
	justify-content: flex-start;
	gap: 14px;
	height: var(--e2it-entete-hauteur-haute);
	padding-top: 36px;
}

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__lien,
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__bascule {
	color: var(--e2it-blanc);
}

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__actions {
	position: absolute;
	right: var(--e2it-gouttiere);
	top: 50%;
	transform: translateY(-50%);
}

/* Bascule en blanc des que la page defile. */
.e2it-entete--figee {
	background: var(--e2it-blanc);
	border-bottom-color: var(--e2it-bordure);
	box-shadow: 0 1px 12px rgba(7, 28, 62, .08);
}

.e2it-entete--figee .e2it-entete__interieur {
	flex-direction: row;
	height: var(--e2it-entete-hauteur);
	gap: var(--e2it-espace-6);
}

.e2it-entete--figee .e2it-nav__lien,
.e2it-entete--figee .e2it-nav__bascule {
	color: var(--e2it-texte-secondaire);
}

.e2it-entete--figee .e2it-entete__actions {
	position: static;
	transform: none;
}

/* ------------------------------------------------------------------
   3. Logos
   ------------------------------------------------------------------ */

.e2it-entete__logo {
	display: flex;
	align-items: center;
	flex: none;
	line-height: 0;
}

.e2it-logo {
	display: block;
	height: 46px;
	width: auto;
	transition: height var(--e2it-duree-moyenne) var(--e2it-courbe);
}

/*
 * Les deux fichiers n'ont pas le meme rapport (1.4055 contre 1.5236).
 * A hauteur egale le logo blanc paraitrait 8 % plus large : on le cale donc
 * sur une hauteur legerement reduite pour que les deux largeurs coincident.
 * A supprimer le jour ou les deux logos sont reexportes au meme cadrage.
 */
.e2it-logo--blanc { height: 42px; }

.e2it-entete--opaque .e2it-logo--blanc,
.e2it-entete--figee .e2it-logo--blanc { display: none; }

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-logo--couleur { display: none; }

.e2it-entete--figee .e2it-logo { height: 40px; }
.e2it-entete--figee .e2it-logo--blanc { height: 37px; }

/* ------------------------------------------------------------------
   4. Navigation
   ------------------------------------------------------------------ */

.e2it-nav { flex: 1; }

.e2it-nav__liste {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.e2it-entete--figee .e2it-nav__liste { justify-content: flex-end; }

.e2it-nav__element { position: relative; }

.e2it-nav__rangee {
	display: flex;
	align-items: center;
	gap: 2px;
}

.e2it-nav__lien {
	display: inline-flex;
	align-items: center;
	min-height: var(--e2it-cible-tactile);
	font-size: 16px;
	font-weight: 600;
	color: var(--e2it-texte-secondaire);
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-nav__lien--inerte { cursor: default; }

.e2it-nav__element--actif > .e2it-nav__rangee > .e2it-nav__lien {
	box-shadow: inset 0 -2px 0 var(--e2it-accent);
}

.e2it-nav__bascule {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 24px;
	height: var(--e2it-cible-tactile);
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	cursor: pointer;
}

.e2it-nav__signe {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--e2it-duree-moyenne) var(--e2it-courbe);
}

.e2it-nav__bascule[aria-expanded="true"] .e2it-nav__signe {
	transform: rotate(-135deg) translate(-2px, -2px);
}

/* Sous-menus : panneau depose sous la rubrique. Uniquement dans l'en-tete :
   dans le tiroir, le sous-menu reste un accordeon statique. */
.e2it-entete .e2it-nav__panneau {
	position: absolute;
	top: 100%;
	left: 0;
	transform: translateY(0);
	min-width: 260px;
	list-style: none;
	/* Le panneau porte la surface blanche : le decalage est une marge, et le
	   vide qu elle cree est ponte par un pseudo-element transparent, sans quoi
	   la souris traverserait une zone morte et le panneau se refermerait. */
	margin: 10px 0 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--e2it-duree-moyenne) var(--e2it-courbe), transform var(--e2it-duree-moyenne) var(--e2it-courbe), visibility var(--e2it-duree-moyenne);
}

.e2it-entete .e2it-nav__element--parent.est-survole > .e2it-nav__panneau,
.e2it-entete .e2it-nav__element--parent:focus-within > .e2it-nav__panneau,
.e2it-entete .e2it-nav__element--parent.est-ouvert > .e2it-nav__panneau {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien {
	display: flex;
	width: 100%;
	padding: var(--e2it-espace-2) var(--e2it-espace-4);
	border-radius: var(--e2it-rayon-champ);
	color: var(--e2it-texte-secondaire);
}

.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien:hover {
	background: var(--e2it-bleu-pale);
	color: var(--e2it-marine);
}

/* ------------------------------------------------------------------
   5. Actions et bouton menu
   ------------------------------------------------------------------ */

.e2it-entete__actions {
	display: flex;
	align-items: center;
	gap: var(--e2it-espace-3);
	flex: none;
}

/* Retire de la barre d'en-tete : l'appel a l'action vit dans le hero et dans
   le pied de tiroir. Conserve ici pour un retour en arriere en une ligne. */
.e2it-bouton--contact {
	display: none;
	background: var(--e2it-accent-fond);
	color: var(--e2it-blanc);
	min-height: 44px;
	padding: 0 22px;
}

.e2it-bouton--contact:hover {
	background: var(--e2it-bleu-profond);
	color: var(--e2it-blanc);
}

/* Le theme parent applique padding: 8px 16px a tout <button>. Sur une cible
   de 44 px en border-box, il ne resterait que 12 px utiles et les barres
   seraient ecrasees. On le neutralise explicitement. */
.e2it-entete__menu {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--e2it-cible-tactile);
	height: var(--e2it-cible-tactile);
	padding: 0;
	background: transparent;
	/* Valeur entiere : 1.5px se resout en 1px sur un ecran non retina et rend
	   le cercle irregulier. */
	border: 1px solid currentColor;
	border-radius: var(--e2it-rayon-pilule);
	color: var(--e2it-marine);
	cursor: pointer;
	flex: none;
	transition:
		background-color var(--e2it-duree-moyenne) var(--e2it-courbe),
		border-color var(--e2it-duree-moyenne) var(--e2it-courbe),
		box-shadow var(--e2it-duree-moyenne) var(--e2it-courbe);
}

.e2it-entete__menu:hover {
	background: var(--e2it-bleu-pale);
}

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__menu:hover {
	background: rgba(255, 255, 255, .14);
	border-color: var(--e2it-blanc);
}

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__menu { color: var(--e2it-blanc); }

.e2it-entete__barres,
.e2it-entete__barres::before,
.e2it-entete__barres::after {
	display: block;
	flex: none;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

.e2it-entete__barres { position: relative; }

.e2it-entete__barres::before,
.e2it-entete__barres::after {
	content: "";
	position: absolute;
	left: 0;
}

.e2it-entete__barres::before { top: -6px; }
.e2it-entete__barres::after { top: 6px; }

/* Trois traits de 2 px espaces de 4 px : 14 px de haut, centres dans les 44 px. */

/* ------------------------------------------------------------------
   6. Tiroir mobile
   ------------------------------------------------------------------ */

.e2it-tiroir {
	position: fixed;
	inset: 0;
	z-index: 1000;
}

.e2it-tiroir[hidden] { display: none; }

.e2it-tiroir__voile {
	position: absolute;
	inset: 0;
	background: rgba(7, 28, 62, .55);
	opacity: 0;
	transition: opacity var(--e2it-duree-moyenne) var(--e2it-courbe);
}

.e2it-tiroir.est-ouvert .e2it-tiroir__voile { opacity: 1; }

.e2it-tiroir__panneau {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(420px, 100%);
	display: flex;
	flex-direction: column;
	background: var(--e2it-blanc);
	transform: translateX(100%);
	transition: transform var(--e2it-duree-lente) var(--e2it-courbe);
}

.e2it-tiroir.est-ouvert .e2it-tiroir__panneau { transform: translateX(0); }

.e2it-tiroir__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e2it-espace-4);
	padding: var(--e2it-espace-4) var(--e2it-gouttiere);
	border-bottom: 1px solid var(--e2it-bleu-pale);
	flex: none;
}

.e2it-tiroir__logo { line-height: 0; }
.e2it-tiroir__logo .e2it-logo { height: 40px; }

.e2it-tiroir__fermer {
	width: var(--e2it-cible-tactile);
	height: var(--e2it-cible-tactile);
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: var(--e2it-marine);
	background: none;
	border: 0;
	cursor: pointer;
	flex: none;
}

/* Zone de liste defilante, pied fixe. */
.e2it-tiroir__nav {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: var(--e2it-espace-2) var(--e2it-gouttiere);
}

.e2it-tiroir__pied {
	flex: none;
	padding: var(--e2it-espace-4) var(--e2it-gouttiere);
	padding-bottom: calc(var(--e2it-espace-4) + env(safe-area-inset-bottom));
	background: var(--e2it-fond-gris);
	border-top: 1px solid var(--e2it-bordure);
}

/* Accordeon */
.e2it-nav__liste--tiroir {
	display: block;
}

.e2it-nav__liste--tiroir > .e2it-nav__element {
	border-bottom: 1px solid var(--e2it-bleu-pale);
}

.e2it-nav__liste--tiroir .e2it-nav__rangee {
	justify-content: space-between;
}

.e2it-nav__liste--tiroir > .e2it-nav__element > .e2it-nav__rangee > .e2it-nav__lien {
	flex: 1;
	min-height: var(--e2it-cible-tactile);
	font-size: 16px;
	font-weight: 600;
	color: var(--e2it-marine);
}

.e2it-nav__liste--tiroir .e2it-nav__bascule {
	width: var(--e2it-cible-tactile);
	color: var(--e2it-bleu-crete);
}

.e2it-nav__liste--tiroir .e2it-nav__sous-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--e2it-espace-3);
}

/* Le sous-menu etant desormais loge dans un panneau, c est lui que
   l accordeon ouvre et ferme. */
.e2it-nav__liste--tiroir .e2it-nav__panneau {
	display: none;
}

.e2it-nav__liste--tiroir .e2it-nav__element.est-ouvert > .e2it-nav__panneau {
	display: block;
}

.e2it-nav__liste--tiroir .e2it-nav__sous-menu .e2it-nav__lien {
	min-height: var(--e2it-cible-tactile);
	padding-left: 0;
	font-size: var(--e2it-corps-taille);
	font-weight: 400;
}

/* ------------------------------------------------------------------
   7. Points de rupture
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.e2it-entete .e2it-nav { display: none; }
	.e2it-entete__menu { display: inline-flex; }

	/* Retour a une seule rangee, logo a gauche et bouton menu a droite.
	   La specificite doit egaler celle de la regle desktop en colonne :
	   a trois classes contre deux, celle-ci l emportait malgre la requete
	   media, et le mobile heritait de la mise en page en colonne. */
	.e2it-entete__interieur,
	.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__interieur,
	.e2it-entete--figee .e2it-entete__interieur {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: var(--e2it-espace-4);
		height: var(--e2it-entete-hauteur);
		padding-top: 0;
	}

	/* Sur le hero, la barre respire un peu plus, avec davantage d'air
	   au-dessus qu'en dessous. Elle se compacte au defilement. */
	.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__interieur {
		height: 92px;
		padding-top: var(--e2it-espace-2);
	}

	/* Le bouton menu revient dans le flux : la regle desktop le positionne en
	   absolu, et sa specificite l emporterait ici aussi. */
	.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__actions,
	.e2it-entete--figee .e2it-entete__actions {
		position: static;
		transform: none;
	}

	.e2it-logo { height: 40px; }
	.e2it-logo--blanc { height: 37px; }
}

/* Le tiroir n'a pas lieu d'etre au-dela du point de rupture tablette. */
@media (min-width: 1025px) {
	.e2it-tiroir { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.e2it-tiroir__panneau,
	.e2it-tiroir__voile,
	.e2it-entete,
	.e2it-entete__interieur { transition: none; }
}

/* ------------------------------------------------------------------
   8. Barre d'administration
   L'en-tete est fixe : sans cela il passe sous la barre de WordPress
   pour les utilisateurs connectes.
   ------------------------------------------------------------------ */

body.admin-bar .e2it-entete { top: 32px; }

body.admin-bar .e2it-tiroir { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .e2it-entete { top: 46px; }
	body.admin-bar .e2it-tiroir { top: 46px; }
}

/* ------------------------------------------------------------------
   9. Etats des elements interactifs de l'en-tete
   Couverture explicite des six etats, y compris :visited que le navigateur
   colore en violet par defaut, et suppression de la surbrillance de tap.
   Specificite volontairement elevee : ces regles doivent gagner sur le reset
   du theme parent comme sur les styles par defaut du navigateur.
   ------------------------------------------------------------------ */

.e2it-entete a,
.e2it-entete a:link,
.e2it-entete a:visited,
.e2it-entete a:hover,
.e2it-entete a:focus,
.e2it-entete a:active,
.e2it-tiroir a,
.e2it-tiroir a:link,
.e2it-tiroir a:visited,
.e2it-tiroir a:hover,
.e2it-tiroir a:focus,
.e2it-tiroir a:active {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* En-tete opaque et pied de tiroir : texte marine. */
.e2it-entete .e2it-nav__lien:link,
.e2it-entete .e2it-nav__lien:visited,
.e2it-entete .e2it-nav__lien:hover,
.e2it-entete .e2it-nav__lien:focus,
.e2it-entete .e2it-nav__lien:active,
.e2it-tiroir .e2it-nav__lien:link,
.e2it-tiroir .e2it-nav__lien:visited,
.e2it-tiroir .e2it-nav__lien:hover,
.e2it-tiroir .e2it-nav__lien:focus,
.e2it-tiroir .e2it-nav__lien:active {
	color: var(--e2it-texte-secondaire);
}

.e2it-tiroir .e2it-nav__liste--tiroir > .e2it-nav__element > .e2it-nav__rangee > .e2it-nav__lien:link,
.e2it-tiroir .e2it-nav__liste--tiroir > .e2it-nav__element > .e2it-nav__rangee > .e2it-nav__lien:visited,
.e2it-tiroir .e2it-nav__liste--tiroir > .e2it-nav__element > .e2it-nav__rangee > .e2it-nav__lien:hover,
.e2it-tiroir .e2it-nav__liste--tiroir > .e2it-nav__element > .e2it-nav__rangee > .e2it-nav__lien:focus,
.e2it-tiroir .e2it-nav__liste--tiroir > .e2it-nav__element > .e2it-nav__rangee > .e2it-nav__lien:active {
	color: var(--e2it-marine);
}

/* En-tete transparent : texte blanc dans tous les etats. */
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__lien:link,
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__lien:visited,
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__lien:hover,
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__lien:focus,
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__lien:active {
	color: var(--e2it-blanc);
}

/* Boutons de bascule, bouton menu, fermeture du tiroir. */
.e2it-entete .e2it-nav__bascule,
.e2it-entete .e2it-nav__bascule:hover,
.e2it-entete .e2it-nav__bascule:focus,
.e2it-entete .e2it-nav__bascule:active,
.e2it-tiroir .e2it-nav__bascule,
.e2it-tiroir .e2it-nav__bascule:hover,
.e2it-tiroir .e2it-nav__bascule:focus,
.e2it-tiroir .e2it-nav__bascule:active {
	color: inherit;
	background: none;
}

.e2it-tiroir .e2it-nav__bascule,
.e2it-tiroir .e2it-nav__bascule:hover,
.e2it-tiroir .e2it-nav__bascule:focus,
.e2it-tiroir .e2it-nav__bascule:active {
	color: var(--e2it-bleu-crete);
}

.e2it-entete .e2it-entete__menu,
.e2it-entete .e2it-entete__menu:hover,
.e2it-entete .e2it-entete__menu:focus,
.e2it-entete .e2it-entete__menu:active,
.e2it-tiroir .e2it-tiroir__fermer,
.e2it-tiroir .e2it-tiroir__fermer:hover,
.e2it-tiroir .e2it-tiroir__fermer:focus,
.e2it-tiroir .e2it-tiroir__fermer:active {
	color: var(--e2it-marine);
	background: transparent;
}

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__menu,
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__menu:hover,
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__menu:focus,
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__menu:active {
	color: var(--e2it-blanc);
}

/* Bouton du pied de tiroir. */
.e2it-tiroir .e2it-bouton--principal:link,
.e2it-tiroir .e2it-bouton--principal:visited,
.e2it-tiroir .e2it-bouton--principal:focus,
.e2it-tiroir .e2it-bouton--principal:active {
	color: var(--e2it-blanc);
	background: var(--e2it-marine);
}

.e2it-tiroir .e2it-bouton--principal:hover {
	color: var(--e2it-blanc);
	background: var(--e2it-marine-fonce);
}

/* Sous-entrees du menu deroulant. */
.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien:link,
.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien:visited,
.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien:active {
	color: var(--e2it-texte-secondaire);
}

.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien:hover,
.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien:focus {
	color: var(--e2it-marine);
	background: var(--e2it-bleu-pale);
}

/* ------------------------------------------------------------------
   10. Panneau deroulant a deux zones
   Gauche : les entrees. Droite : une accroche marine alimentee par la
   rubrique elle-meme (libelle, champ Description, URL), donc editable
   dans Apparence > Menus sans toucher au code.
   ------------------------------------------------------------------ */

.e2it-entete .e2it-nav__panneau {
	display: flex;
	align-items: stretch;
	background: var(--e2it-blanc);
	border: 1px solid var(--e2it-bordure);
	border-radius: var(--e2it-rayon-carte);
	box-shadow: 0 12px 32px rgba(7, 28, 62, .12);
	overflow: hidden;
}

.e2it-entete .e2it-nav__sous-menu {
	flex: 1;
	display: grid;
	list-style: none;
	margin: 0;
	padding: 10px 8px;
	min-width: 0;
}

.e2it-entete .e2it-nav__sous-menu > .e2it-nav__element {
	min-width: 0;
}

.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien {
	align-items: center;
	min-height: 0;
	padding: 9px 14px;
	white-space: nowrap;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--e2it-marine);
	white-space: normal;
	transition: background-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien:hover,
.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien:focus-visible {
	background: var(--e2it-bleu-pale);
}


/* Zone d accroche */
.e2it-entete .e2it-nav__accroche {
	flex: none;
	width: 230px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--e2it-marine);
	padding: 20px 22px;
}

.e2it-nav__accroche-titre {
	margin: 0 0 8px;
	font-family: var(--e2it-police-mono);
	font-size: var(--e2it-mono-taille);
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

.e2it-nav__accroche-texte {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--e2it-bleu-clair);
}

.e2it-nav__accroche-lien {
	margin-top: auto;
	padding-top: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--e2it-blanc);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .5);
	padding-bottom: 2px;
	transition: border-color var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-nav__accroche-lien:hover {
	color: var(--e2it-blanc);
	border-bottom-color: var(--e2it-blanc);
}

/* Largeurs par rubrique : la zone gauche s adapte au nombre d entrees. */
.e2it-entete .e2it-panneau--cartes > .e2it-nav__panneau { width: 520px; }
.e2it-entete .e2it-panneau--colonnes > .e2it-nav__panneau { width: 740px; }
.e2it-entete .e2it-panneau--liste > .e2it-nav__panneau { width: 520px; }

.e2it-entete .e2it-panneau--colonnes > .e2it-nav__panneau .e2it-nav__sous-menu {
	grid-template-columns: 1fr 1fr;
}

.e2it-entete .e2it-panneau--colonnes > .e2it-nav__panneau .e2it-nav__sous-menu > .e2it-nav__element:last-child {
	grid-column: 1 / -1;
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--e2it-bordure);
}

.e2it-entete .e2it-panneau--liste > .e2it-nav__panneau .e2it-nav__sous-menu > .e2it-nav__element:last-child {
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1px solid var(--e2it-bordure);
}

.e2it-entete .e2it-panneau--liste > .e2it-nav__panneau .e2it-nav__sous-menu > .e2it-nav__element:last-child .e2it-nav__lien {
	color: var(--e2it-bleu-profond);
}

/* Les deux dernieres rubriques s alignent a droite. */
.e2it-entete .e2it-nav__liste > .e2it-nav__element:nth-last-child(-n+2) > .e2it-nav__panneau {
	left: auto;
	right: 0;
}


/* Pont de survol entre la rubrique et le panneau. */
.e2it-entete .e2it-nav__panneau::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}

/* ------------------------------------------------------------------
   11. Tiroir mobile
   Meme balisage, traitement different : pas de panneau, pas d accroche.
   ------------------------------------------------------------------ */

.e2it-tiroir .e2it-nav__panneau {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.e2it-tiroir .e2it-nav__accroche {
	display: none;
}

.e2it-tiroir .e2it-nav__sous-menu .e2it-nav__lien {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-height: var(--e2it-cible-tactile);
	padding-block: 8px;
	white-space: normal;
}


/* Repli si le script ne s execute pas : le survol direct ouvre le panneau. */
.no-js .e2it-entete .e2it-nav__element--parent:hover > .e2it-nav__sous-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ------------------------------------------------------------------
   12. Mouvement
   ------------------------------------------------------------------ */

/* Soulignement progressif du lien d accroche : le trait se dessine de
   gauche a droite plutot que de changer d opacite. */
.e2it-nav__accroche-lien {
	position: relative;
	border-bottom: 0;
	padding-bottom: 3px;
}

.e2it-nav__accroche-lien::before,
.e2it-nav__accroche-lien::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
}

.e2it-nav__accroche-lien::before {
	background: rgba(255, 255, 255, .4);
}

.e2it-nav__accroche-lien::after {
	background: var(--e2it-blanc);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--e2it-duree-moyenne) var(--e2it-courbe);
}

.e2it-nav__accroche-lien:hover::after,
.e2it-nav__accroche-lien:focus-visible::after {
	transform: scaleX(1);
}

/* Les entrees de panneau glissent legerement au survol. */
.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien {
	transition:
		background-color var(--e2it-duree-rapide) var(--e2it-courbe),
		transform var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-entete .e2it-nav__sous-menu .e2it-nav__lien:hover {
	transform: translateX(2px);
}


/* ------------------------------------------------------------------
   13. Animations des boutons de l en-tete
   ------------------------------------------------------------------ */

/* Une propriete personnalisee n est animable que si son type est declare.
   Sans cela, l angle du conic-gradient sauterait de 0 a 1 tour d un bloc. */
@property --e2it-trace {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0turn;
}

/* Le cercle se trace au survol. Deux couches : la bordure discrete reste,
   un anneau conique se dessine par-dessus en partant du haut. */
.e2it-entete__menu {
	position: relative;
	isolation: isolate;
}

.e2it-entete__menu::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from 180deg, currentColor var(--e2it-trace, 0turn), transparent 0);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: --e2it-trace var(--e2it-duree-lente) var(--e2it-courbe);
	pointer-events: none;
}

.e2it-entete__menu:hover::before,
.e2it-entete__menu:focus-visible::before {
	--e2it-trace: 1turn;
}

.e2it-entete__menu:active {
	transform: scale(.94);
	transition-duration: 80ms;
}

.e2it-entete__menu {
	transition:
		background-color var(--e2it-duree-rapide) var(--e2it-courbe),
		border-color var(--e2it-duree-rapide) var(--e2it-courbe),
		transform var(--e2it-duree-rapide) var(--e2it-courbe);
}

/* Le chevron recule d un cheveu avant de pivoter : la rotation a un point
   de depart perceptible au lieu de tourner mollement. */
.e2it-nav__signe {
	transition: transform var(--e2it-duree-moyenne) cubic-bezier(.34, 1.3, .5, 1);
}

.e2it-nav__bascule:hover .e2it-nav__signe {
	transform: rotate(45deg) translate(-1px, -1px);
}

/* Le fond monte du bas au survol, plutot que de changer de couleur d un bloc. */
.e2it-tiroir__pied .e2it-bouton--principal {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.e2it-tiroir__pied .e2it-bouton--principal::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--e2it-marine-fonce);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--e2it-duree-moyenne) var(--e2it-courbe);
}

.e2it-tiroir__pied .e2it-bouton--principal:hover::after,
.e2it-tiroir__pied .e2it-bouton--principal:focus-visible::after {
	transform: scaleY(1);
}

.e2it-tiroir__pied .e2it-bouton--principal:active {
	transform: scale(.98);
	transition-duration: 80ms;
}

/* Retour tactile sur les entrees du tiroir, ou il n y en avait aucun. */
.e2it-tiroir .e2it-nav__rangee {
	position: relative;
}

.e2it-tiroir .e2it-nav__rangee::before {
	content: "";
	position: absolute;
	left: calc(var(--e2it-gouttiere) * -1);
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--e2it-accent);
	transform: scaleY(0);
	transform-origin: center;
	transition: transform var(--e2it-duree-rapide) var(--e2it-courbe);
}

.e2it-tiroir .e2it-nav__rangee:has(.e2it-nav__lien:active)::before,
.e2it-tiroir .e2it-nav__rangee:has(.e2it-nav__lien:focus-visible)::before,
.e2it-tiroir .e2it-nav__element.est-ouvert > .e2it-nav__rangee::before {
	transform: scaleY(1);
}


/* ==================================================================
   Trait de survol des rubriques principales

   Meme geste que le filet sous le mot en italique du hero, en plus court :
   260 ms au lieu de 420. Une reaction au survol doit etre immediate, la ou
   le hero joue une revelation unique.

   Trois reglages qui ne se devinent pas :
   - la rubrique active est exclue, elle porte deja son trait permanent en
     box-shadow ; deux traits superposes se verraient ;
   - l origine bascule a droite au retrait, donc le trait passe au lieu de
     rembobiner ;
   - une rubrique dont le panneau est ouvert garde son trait deploye, sinon
     il se retracte au moment ou le visiteur descend vers le panneau.
   ================================================================== */

.e2it-entete .e2it-nav__liste:not(.e2it-nav__liste--tiroir) > .e2it-nav__element > .e2it-nav__rangee > .e2it-nav__lien {
	position: relative;
}

.e2it-entete .e2it-nav__liste:not(.e2it-nav__liste--tiroir) > .e2it-nav__element:not(.e2it-nav__element--actif) > .e2it-nav__rangee > .e2it-nav__lien::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--e2it-accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 260ms var(--e2it-courbe);
}

.e2it-entete .e2it-nav__liste:not(.e2it-nav__liste--tiroir) > .e2it-nav__element:not(.e2it-nav__element--actif) > .e2it-nav__rangee > .e2it-nav__lien:hover::after,
.e2it-entete .e2it-nav__liste:not(.e2it-nav__liste--tiroir) > .e2it-nav__element:not(.e2it-nav__element--actif) > .e2it-nav__rangee > .e2it-nav__lien:focus-visible::after,
.e2it-entete .e2it-nav__liste:not(.e2it-nav__liste--tiroir) > .e2it-nav__element:not(.e2it-nav__element--actif).est-ouvert > .e2it-nav__rangee > .e2it-nav__lien::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Sur le hero, le Bleu arc se perd dans le marine : le trait passe au glacier,
   comme le texte des liens juste au-dessus. */
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-nav__liste:not(.e2it-nav__liste--tiroir) > .e2it-nav__element > .e2it-nav__rangee > .e2it-nav__lien::after {
	background: var(--e2it-glacier);
}

@media (prefers-reduced-motion: reduce) {
	.e2it-entete .e2it-nav__liste:not(.e2it-nav__liste--tiroir) > .e2it-nav__element > .e2it-nav__rangee > .e2it-nav__lien::after {
		transition: none;
	}
}

/* Flou coupe sur mobile : backdrop-filter se recalcule a chaque image
   pendant le defilement, c est l effet le plus couteux sur telephone.
   Un fond opaque donne le meme service sans le cout. */
@media (max-width: 767px) {
	.e2it-entete:not(#e2it),
	.e2it-entete__barre:not(#e2it),
	.e2it-tiroir:not(#e2it) {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* ==================================================================
   En-tete - une seule disposition, deux habillages

   Auparavant, passer le seuil changeait six choses a la fois : hauteur,
   nombre de rangees, place du logo, alignement du menu, fond et couleur
   des liens. C est ce qui donnait l impression que la page se depliait en
   blanc. Desormais la geometrie ne bouge plus : logo a gauche, menu au
   centre, bouton a droite, dans les deux etats. Seuls changent le fond,
   les couleurs, et une legere reduction de hauteur.
   ================================================================== */

.e2it-entete:not(#e2it) {
	transition:
		background-color 240ms var(--e2it-courbe),
		border-color 240ms var(--e2it-courbe),
		box-shadow 240ms var(--e2it-courbe);
}

/* Logos superposes dans la meme cellule : le passage de l un a l autre
   est un fondu, plus un saut d image. */
.e2it-entete__logo:not(#e2it) {
	display: grid;
	justify-self: start;
}

.e2it-entete__logo .e2it-logo:not(#e2it) {
	display: block;
	grid-area: 1 / 1;
	align-self: center;
	transition: opacity 240ms var(--e2it-courbe);
}

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__logo .e2it-logo--couleur:not(#e2it),
:is(.e2it-entete--figee, .e2it-entete--opaque) .e2it-entete__logo .e2it-logo--blanc:not(#e2it) {
	opacity: 0;
	visibility: hidden;
}

:is(.e2it-entete--figee, .e2it-entete--opaque) .e2it-entete__logo .e2it-logo--couleur:not(#e2it),
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-entete__logo .e2it-logo--blanc:not(#e2it) {
	opacity: 1;
	visibility: visible;
}

.e2it-nav__lien,
.e2it-nav__bascule {
	transition: color 240ms var(--e2it-courbe);
}

/* ---- Ordinateur : grille a trois colonnes ----
   1fr auto 1fr : le menu est centre sur la page, et non dans l espace
   restant entre un logo et un bouton qui n ont pas la meme largeur. */
@media (min-width: 1025px) {
	.e2it-entete .e2it-entete__interieur:not(#e2it) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		/* 32 px au minimum entre le menu et ses voisins : a 24 px, et avec le
		   centrage strict, la derniere rubrique touchait le bouton. */
		column-gap: var(--e2it-espace-8);
		height: 88px;
		padding-top: 0;
	}

	:is(.e2it-entete--figee, .e2it-entete--opaque) .e2it-entete__interieur:not(#e2it) {
		height: 72px;
	}

	.e2it-entete .e2it-nav:not(#e2it) {
		justify-self: center;
	}

	.e2it-entete .e2it-nav__liste:not(.e2it-nav__liste--tiroir):not(#e2it) {
		justify-content: center;
		flex-wrap: nowrap;
		gap: 20px;
	}

	.e2it-entete .e2it-entete__actions:not(#e2it) {
		justify-self: end;
		position: static;
		transform: none;
	}

	.e2it-entete .e2it-entete__menu:not(#e2it) {
		display: none;
	}

	.e2it-entete .e2it-entete__logo .e2it-logo:not(#e2it) {
		height: 44px;
		width: auto;
	}

	:is(.e2it-entete--figee, .e2it-entete--opaque) .e2it-entete__logo .e2it-logo:not(#e2it) {
		height: 40px;
	}
}

/* Le menu se centre entre le logo et le bouton, a toutes les largeurs :
   les deux ecarts qui le bordent restent egaux. Un centrage strict sur la
   page, essaye a partir de 1440 px, laissait 143 px a gauche et 33 px a
   droite - le menu paraissait colle au bouton. */

/* Entre 1025 et 1199 px : rubriques resserrees et bouton en version
   courte, pour que six rubriques tiennent sur une ligne. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.e2it-entete .e2it-nav__liste:not(.e2it-nav__liste--tiroir):not(#e2it) {
		gap: 14px;
	}

	.e2it-entete .e2it-nav__liste:not(.e2it-nav__liste--tiroir) :is(.e2it-nav__lien, .e2it-nav__bascule):not(#e2it) {
		font-size: 15px;
	}

	.e2it-entete .e2it-entete__cta-long {
		display: none;
	}

	.e2it-entete .e2it-entete__cta-court {
		display: inline;
	}
}

/* ---- Bouton d action ----
   Un seul accent par ecran : sur le hero, qui porte deja le sien, le
   bouton est en contour ; une fois le hero quitte, il devient l action
   pleine, seule visible. */
.e2it-entete .e2it-bouton--contact:not(#e2it) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 20px;
	font-size: 15px;
	white-space: nowrap;
}

.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-bouton--contact:not(#e2it) {
	--b-fond: transparent;
	--b-texte: var(--e2it-blanc);
	--b-contour: rgba(255, 255, 255, .55);
	--b-remplissage: var(--e2it-blanc);
	--b-texte-survol: var(--e2it-marine);
	--b-contour-survol: var(--e2it-blanc);
}

.e2it-entete__cta-court {
	display: none;
}

.e2it-entete .e2it-bouton--contact:not(#e2it)::after {
	margin-inline-start: 8px;
}

/* ---- Tablette et mobile : logo, bouton court, menu ---- */
@media (max-width: 1024px) {
	.e2it-entete .e2it-bouton--contact:not(#e2it) {
		min-height: 40px;
		padding: 0 16px;
		font-size: 14px;
	}

	.e2it-entete .e2it-entete__cta-long {
		display: none;
	}

	.e2it-entete .e2it-entete__cta-court {
		display: inline;
	}

	.e2it-entete .e2it-entete__actions:not(#e2it) {
		gap: var(--e2it-espace-2);
	}
}

/* ---- Lien d evitement : invisible jusqu au premier Tab ---- */
.e2it-evitement {
	position: fixed;
	left: 16px;
	top: -60px;
	z-index: 100000;
	padding: 12px 18px;
	font-family: var(--e2it-police);
	font-size: 15px;
	font-weight: 600;
	color: var(--e2it-blanc);
	background: var(--e2it-marine);
	border-radius: var(--e2it-rayon-pilule);
	text-decoration: none;
	transition: top 160ms var(--e2it-courbe);
}

.e2it-evitement:focus {
	top: 16px;
	outline: 3px solid var(--e2it-accent);
	outline-offset: 3px;
}

.e2it-contenu-ancre {
	display: block;
	height: 0;
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.e2it-entete:not(#e2it),
	.e2it-entete__logo .e2it-logo:not(#e2it),
	.e2it-nav__lien,
	.e2it-nav__bascule,
	.e2it-evitement {
		transition: none;
	}
}