/* Menu principal — barre, panneaux, tiroir.

   Le panneau descend sous l'en-tête comme une carte du système : même blanc,
   même rayon de 8px, même filet beige. Rien de neuf n'est inventé ici ; les
   onglets reprennent le geste de l'index des piliers (opacité et glissement),
   pour que le menu se lise comme le reste du site. */

.igc-menu {
	--igc-menu-panneau: 24px;

	display: flex;
	align-items: center;
}

/* ---- La barre ---- */

.igc-menu__barre {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* L'entrée n'est pas un contexte de positionnement : son panneau doit se caler
   sous l'en-tête, pas sous l'intitulé, sans quoi il pendrait de travers. */
.igc-menu__entree {
	position: static;
	display: flex;
	align-items: center;
}

.igc-menu__tete {
	display: flex;
	align-items: center;
	gap: 4px;
}

.igc-menu__entree-lien {
	position: relative;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
	text-decoration: none;
}

/* Pas de soulignement, nulle part : quand un panneau est ouvert, les autres
   entrées s'effacent et celle qu'on lit reste seule à pleine densité. C'est le
   geste de l'index des piliers, appliqué à la barre. */
.igc-menu[data-ouvert] .igc-menu__entree:not([data-ouvert]) .igc-menu__tete {
	opacity: 0.4;
}

.igc-menu__entree-lien:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 4px;
	border-radius: 2px;
}

/* Le chevron est dessiné, pas écrit : une flèche de police changerait de
   dessin d'un système à l'autre. */
.igc-menu__chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.igc-menu__chevron::before {
	width: 6px;
	height: 6px;
	border-right: 1px solid var(--wp--preset--color--neutral-100);
	border-bottom: 1px solid var(--wp--preset--color--neutral-100);
	content: "";
	transform: translateY(-2px) rotate(45deg);
}

.igc-menu__entree[data-ouvert] .igc-menu__chevron::before {
	transform: translateY(1px) rotate(-135deg);
}

.igc-menu__chevron:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- La scène et son panneau ---- */

/* Le panneau tombe sous l'en-tête, toujours centré sur la page, quelle que
   soit l'entrée survolée. Il prend la largeur de son contenu et pas
   davantage : un panneau qui traverse l'écran pour trois liens fait vide.

   Le centrage passe par `margin-inline: auto` entre deux bords tenus à zéro,
   et non par une translation : `transform` est réservé à l'animation
   d'ouverture, qui l'écraserait. */
.igc-menu__panneau {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 40;
	display: grid;
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100vw - 2 * clamp(1rem, 6.1vw, 5.5rem));
	margin-top: 12px;
	margin-inline: auto;
	gap: var(--wp--preset--spacing--30);
	padding: var(--igc-menu-panneau);
	border: 1px solid var(--wp--preset--color--beige-20);
	border-radius: 8px;
	background-color: var(--wp--preset--color--neutral-0);
	box-shadow: 0 1px 2px rgb(17 17 17 / 4%), 0 12px 32px -8px rgb(17 17 17 / 12%);
}

/* Un pont invisible entre l'intitulé et le panneau : les 12px d'écart ne
   doivent pas être une zone morte où le survol se coupe. */
.igc-menu__panneau::before {
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 12px;
	content: "";
}

/* `display: grid` l'emporte sur l'attribut `hidden` du navigateur : sans cette
   règle, les cinq panneaux s'affichent en même temps dès qu'on en ouvre un. */
.igc-menu__panneau[hidden],
.igc-menu__voile[hidden],
.igc-menu__scene[hidden] {
	display: none;
}

.igc-menu__panneau--onglets {
	grid-template-columns: 232px 268px 264px;
}

.igc-menu__panneau--liens {
	grid-template-columns: 268px 264px;
}

/* Même emprise que le panneau à onglets : celui-ci fait 232 + 268 + 264 avec
   deux gouttières, soit 788px de colonnes ; on retrouve la même somme ici avec
   une seule gouttière — 588 + 200. Les deux panneaux les plus fournis ont ainsi
   la même largeur au pixel, et les vignettes d'article cessent d'être des
   timbres. */
.igc-menu__panneau--articles {
	grid-template-columns: 588px 200px;
}

/* Et la colonne qui la porte se réduit d'autant : 588 est la largeur de deux
   cartes et de leur écart, 290 celle d'une seule. */
.igc-menu__panneau--articles:not(:has(.igc-menu__article + .igc-menu__article)) {
	grid-template-columns: 290px 200px;
}

/* ---- Les onglets ---- */

/* Même geste que l'index des piliers : l'onglet actif reprend sa pleine
   opacité et glisse d'un cran vers la droite. */
.igc-menu__onglets {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	border-right: 1px solid var(--wp--preset--color--beige-20);
	list-style: none;
}

/* Le fond de l'onglet ne doit pas venir toucher le filet qui sépare les deux
   colonnes : il lui faut la même respiration qu'ailleurs dans le panneau. */
.igc-menu__onglet {
	display: flex;
	align-items: stretch;
	padding-right: var(--wp--preset--spacing--20);
	opacity: 0.45;
}

.igc-menu__onglet[data-actif] {
	opacity: 1;
}

/* Toute la ligne est la cible : plus de flèche à viser à droite, on clique
   l'onglet lui-même. */
.igc-menu__onglet-commande {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.igc-menu__onglet[data-actif] .igc-menu__onglet-commande {
	background-color: var(--wp--preset--color--neutral-10);
}

.igc-menu__onglet[data-actif] .igc-menu__icone {
	background-color: var(--wp--preset--color--bleu-100);
}

.igc-menu__onglet[data-actif] .igc-menu__icone img {
	filter: invert(1) brightness(2);
}

.igc-menu__onglet-commande:focus-visible {
	outline: 2px solid var(--wp--preset--color--bleu-100);
	outline-offset: -2px;
}

/* ---- Les listes ---- */

.igc-menu__volet:not([data-actif]) {
	display: none;
}

/* La page de la rubrique n'apparaît pas au bureau : l'onglet lui-même y mène,
   la répéter ferait doublon. Elle ne sert qu'au tiroir, où l'onglet ne fait
   que commuter. */
.igc-menu__ligne--racine {
	display: none;
}

.igc-menu__liens {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Une pastille beige de 32px, l'icône à 16 : la même grammaire que les cartes
   des pages, à l'échelle du menu. */
.igc-menu__icone {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background-color: var(--wp--preset--color--beige-20);
}

.igc-menu__icone img {
	display: block;
	width: 16px;
	height: 16px;
}

.igc-menu__lien {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 4px;
	color: var(--wp--preset--color--neutral-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
	text-decoration: none;
}

/* Au survol, c'est la pastille qui s'anime, pas le texte : la ligne reste
   posée, seule l'icône passe au bleu de la marque. */
.igc-menu__lien:hover .igc-menu__icone,
.igc-menu__lien:focus-visible .igc-menu__icone {
	background-color: var(--wp--preset--color--bleu-100);
}

.igc-menu__lien:hover .igc-menu__icone img,
.igc-menu__lien:focus-visible .igc-menu__icone img {
	filter: invert(1) brightness(2);
}

.igc-menu__lien:hover,
.igc-menu__lien:focus-visible {
	background-color: var(--wp--preset--color--neutral-10);
}

/* La page en cours : sa pastille reste allumée, sans dépendre d'une couleur
   qu'on ne verrait pas. */
/* Le même repère pour la page et pour la rubrique qui la contient : la nuance
   entre « page » et « true » est faite pour les lecteurs d'écran, pas pour
   l'œil. */
.igc-menu__lien[aria-current] {
	background-color: var(--wp--preset--color--neutral-10);
}

.igc-menu__lien[aria-current] .igc-menu__icone {
	background-color: var(--wp--preset--color--bleu-100);
}

.igc-menu__lien[aria-current] .igc-menu__icone img {
	filter: invert(1) brightness(2);
}

/* ---- La carte mise en avant ---- */

.igc-menu__carte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--20);
	border-radius: 8px;
	background-color: var(--wp--preset--color--beige-20);
	color: var(--wp--preset--color--neutral-100);
	text-decoration: none;
}

.igc-menu__carte-surtitre {
	color: var(--wp--preset--color--neutral-60);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-14);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.igc-menu__carte-titre {
	font-family: var(--wp--preset--font-family--title);
	font-size: var(--wp--preset--font-size--heading-5);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.igc-menu__carte-texte {
	color: var(--wp--preset--color--neutral-60);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-14);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.igc-menu__carte-fleche {
	position: relative;
	width: 8px;
	height: 8px;
	margin-top: auto;
	border-radius: 999px;
	background-color: var(--wp--preset--color--neutral-100);
	transition: transform var(--igc-duree) var(--igc-courbe);
}

.igc-menu__carte:hover,
.igc-menu__carte:focus-visible {
	background-color: var(--wp--preset--color--beige-40);
}

/* ---- Les articles ---- */

.igc-menu__articles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--10);
}

/* Une seule carte ne garde pas la place de la seconde : le site franchisé
   n'en affiche qu'une, et le bandeau laissait un trou à côté. */
.igc-menu__articles:not(:has(.igc-menu__article + .igc-menu__article)) {
	grid-template-columns: minmax(0, 1fr);
}

.igc-menu__article {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--wp--preset--color--neutral-100);
	text-decoration: none;
}

.igc-menu__article-photo {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 16 / 10;
	margin-bottom: 8px;
}

.igc-menu__article-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--igc-duree) var(--igc-courbe);
}

.igc-menu__article-surtitre {
	color: var(--wp--preset--color--neutral-60);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-14);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.igc-menu__article-titre {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-16);
	line-height: 1.24;
	letter-spacing: -0.02em;
}

/* ---- Le voile ---- */

/* Un voile discret sous le panneau : la page recule d'un cran, le menu prend
   la main, et un clic n'importe où referme. */
.igc-menu__voile {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-color: rgb(17 17 17 / 20%);
}

/* ---- Le hamburger ---- */

.igc-menu__hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Trois traits en un seul élément : le trait du milieu, et ses deux voisins
   posés en pseudo-éléments. */
.igc-menu__hamburger-trait,
.igc-menu__hamburger-trait::before,
.igc-menu__hamburger-trait::after {
	display: block;
	width: 20px;
	height: 1px;
	background-color: var(--wp--preset--color--neutral-100);
}

.igc-menu__hamburger-trait::before,
.igc-menu__hamburger-trait::after {
	position: absolute;
	content: "";
}

.igc-menu__hamburger-trait {
	position: relative;
}

.igc-menu__hamburger-trait::before {
	top: -6px;
}

.igc-menu__hamburger-trait::after {
	top: 6px;
}

.igc-menu[data-tiroir] .igc-menu__hamburger-trait {
	background-color: transparent;
}

.igc-menu[data-tiroir] .igc-menu__hamburger-trait::before {
	top: 0;
	transform: rotate(45deg);
}

.igc-menu[data-tiroir] .igc-menu__hamburger-trait::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ---- Animation ---- */

/* Une détente plus longue que la courbe générale du site : le panneau est
   large, il doit se poser plutôt qu'arriver. La fin est très plate — c'est
   elle qui donne l'impression de douceur. */
.igc-menu {
	--igc-menu-detente: cubic-bezier(0.16, 1, 0.3, 1);
	--igc-menu-ouverture: 340ms;
}

@media (prefers-reduced-motion: no-preference) {

	.igc-menu__tete {
		transition: opacity var(--igc-duree) var(--igc-courbe);
	}

	.igc-menu__chevron::before {
		transition: transform var(--igc-menu-ouverture) var(--igc-menu-detente);
	}

	.igc-menu__onglet {
		transition: opacity var(--igc-duree) var(--igc-courbe);
	}

	.igc-menu__lien,
	.igc-menu__carte,
	.igc-menu__onglet-commande,
	.igc-menu__icone,
	.igc-menu__icone img {
		transition: background-color var(--igc-duree) var(--igc-courbe),
			filter var(--igc-duree) var(--igc-courbe),
			transform var(--igc-duree) var(--igc-courbe);
	}

	/* Le panneau se pose : il monte de 10px et se dilate à peine. L'animation
	   est déclarée plutôt que transitionnée, parce qu'il passe de
	   `display: none` à visible et qu'une transition n'a alors rien à
	   interpoler. */
	.igc-menu__panneau[data-actif] {
		animation: igc-menu-pose var(--igc-menu-ouverture) var(--igc-menu-detente) both;
		transform-origin: top left;
	}

	/* Les lignes suivent le panneau, décalées de 22ms l'une après l'autre. Ce
	   décalage est ce qui distingue un panneau qui apparaît d'un panneau qui
	   s'ouvre ; au-delà de la sixième ligne il devient une attente, alors on
	   l'arrête là. */
	.igc-menu__panneau[data-actif] .igc-menu__ligne,
	.igc-menu__panneau[data-actif] .igc-menu__onglet,
	.igc-menu__panneau[data-actif] .igc-menu__article,
	.igc-menu__panneau[data-actif] .igc-menu__carte {
		animation: igc-menu-ligne 300ms var(--igc-menu-detente) both;
	}

	.igc-menu__panneau[data-actif] .igc-menu__ligne:nth-child(1),
	.igc-menu__panneau[data-actif] .igc-menu__onglet:nth-child(1) {
		animation-delay: 40ms;
	}

	.igc-menu__panneau[data-actif] .igc-menu__ligne:nth-child(2),
	.igc-menu__panneau[data-actif] .igc-menu__onglet:nth-child(2) {
		animation-delay: 62ms;
	}

	.igc-menu__panneau[data-actif] .igc-menu__ligne:nth-child(3),
	.igc-menu__panneau[data-actif] .igc-menu__onglet:nth-child(3) {
		animation-delay: 84ms;
	}

	.igc-menu__panneau[data-actif] .igc-menu__ligne:nth-child(4) {
		animation-delay: 106ms;
	}

	.igc-menu__panneau[data-actif] .igc-menu__ligne:nth-child(n+5) {
		animation-delay: 128ms;
	}

	.igc-menu__panneau[data-actif] .igc-menu__carte {
		animation-delay: 96ms;
	}

	.igc-menu__panneau[data-actif] .igc-menu__article:nth-child(2) {
		animation-delay: 70ms;
	}

	/* La pastille grandit d'un cheveu sous le curseur : assez pour qu'on sente
	   la ligne répondre, trop peu pour qu'on voie l'effet. */
	.igc-menu__lien:hover .igc-menu__icone,
	.igc-menu__onglet-commande:hover .igc-menu__icone {
		transform: scale(1.06);
	}

	.igc-menu__carte:hover .igc-menu__carte-fleche {
		transform: scale(1.4);
	}

	.igc-menu__article:hover .igc-menu__article-image {
		transform: scale(1.04);
	}

	.igc-menu__hamburger-trait,
	.igc-menu__hamburger-trait::before,
	.igc-menu__hamburger-trait::after {
		transition: transform var(--igc-duree) var(--igc-courbe),
			top var(--igc-duree) var(--igc-courbe),
			background-color var(--igc-duree) var(--igc-courbe);
	}
}

@keyframes igc-menu-pose {

	from {
		opacity: 0;
		transform: translateY(-10px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes igc-menu-ligne {

	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---- Petits écrans ---- */

/* Le seuil est mesuré, pas choisi : logo, barre et boutons pèsent 1031px, et
   la gouttière du gabarit vaut 6,1 % de chaque côté — la ligne déborde donc
   sous 1174px. Le thème escamote le bouton « Contact » dès ce seuil, ce qui
   fait tenir la barre jusqu'à 1064px ; on bascule en tiroir à 1120px, où il
   reste encore de la marge. */
@media (max-width: 1119px) {

	.igc-menu__hamburger {
		display: flex;
	}

	/* Le bouton du menu passe à l'extrémité droite de la barre, après l'appel
	   à l'action. La marge automatique sur les boutons pousse les deux vers la
	   droite d'un bloc : sans elle, la répartition de l'en-tête laisserait
	   l'appel à l'action flotter au milieu. */
	.igc-menu {
		order: 3;
		margin-left: var(--wp--preset--spacing--10);
	}

	.igc-header__actions {
		margin-left: auto;
	}

	/* La racine d'une rubrique n'a plus de raison d'être masquée : au doigt,
	   l'onglet ne fait que commuter, et c'est par cette ligne qu'on rejoint
	   sa page. */
	.igc-menu__ligne--racine {
		display: block;
	}

	/* Dans Ressources, les liens de rubrique passent avant les articles mis en
	   avant : empilés, deux grandes cartes repoussaient le blog, les guides et
	   le glossaire hors de l'écran. */
	.igc-menu__panneau--articles .igc-menu__liens {
		order: -1;
	}

	/* Le tiroir pend sous l'en-tête : `top: 100%` et une hauteur qui retranche
	   cette même hauteur, sans avoir à la coder en dur. `dvh` plutôt que `vh`
	   pour que la barre d'adresse mobile, qui se rétracte, ne coupe pas la fin
	   de la liste. */
	.igc-menu__tiroir {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 40;
		display: none;
		height: calc(100dvh - 100%);
		overflow-y: auto;

		/* Le défilement s'arrête au bord du tiroir au lieu d'entraîner la page
		   derrière lui. */
		overscroll-behavior: contain;
		padding: var(--wp--preset--spacing--20) clamp(1rem, 6.1vw, 5.5rem) calc(var(--wp--preset--spacing--50) + env(safe-area-inset-bottom));
		border-top: 1px solid var(--wp--preset--color--beige-20);
		background-color: var(--wp--preset--color--neutral-0);
	}

	/* Au-delà du téléphone, la liste ne s'étale pas sur toute la largeur : une
	   colonne de texte qui traverse un écran de tablette ne se lit plus. */
	.igc-menu__barre {
		max-width: 720px;
		margin-inline: auto;
	}

	.igc-menu[data-tiroir] .igc-menu__tiroir {
		display: block;
	}

	.igc-menu__barre {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* L'entrée devient un accordéon : son intitulé, puis son panneau dessous. */
	.igc-menu__entree {
		flex-direction: column;
		align-items: stretch;
		border-bottom: 1px solid var(--wp--preset--color--beige-20);
	}

	.igc-menu__tete {
		justify-content: space-between;
		padding-block: 12px;
	}

	.igc-menu__chevron {
		width: 40px;
		height: 40px;
	}

	/* Le panneau n'est plus une carte suspendue : il se déplie dans le flux,
	   sous son entrée, sans cadre ni ombre — le tiroir en tient lieu. */
	.igc-menu__panneau {
		position: static;
		width: auto;
		max-width: none;
		grid-template-columns: minmax(0, 1fr);

		/* Le centrage du bureau passe par des marges automatiques ; sur un
		   élément de boîte flexible, elles absorbent la place libre et
		   empêchent l'étirement. Le panneau restait alors au tiers de la
		   largeur du tiroir. */
		margin-top: 0;
		margin-inline: 0;
		padding: 0 0 var(--wp--preset--spacing--20);
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.igc-menu__panneau::before {
		display: none;
	}

	/* Sur un accordéon, l'atténuation des entrées voisines gênerait la lecture
	   de la liste entière. */
	.igc-menu[data-ouvert] .igc-menu__entree:not([data-ouvert]) .igc-menu__tete {
		opacity: 1;
	}

	.igc-menu__onglets {
		flex-direction: row;
		flex-wrap: wrap;
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--beige-20);
	}

	/* Le fond suffit à désigner l'onglet actif : le filet du bureau ferait
	   double emploi et laisserait un trait pendant sous la pastille. */
	.igc-menu__onglets {
		gap: 0;
		padding-bottom: var(--wp--preset--spacing--10);
	}

	.igc-menu__voile {
		display: none;
	}
}

/* ---- Téléphone ---- */

@media (max-width: 600px) {

	/* Trois onglets ne tiennent pas sur une ligne de 330px : ils s'y
	   renvoyaient à la ligne au milieu d'un mot. Empilés, ils se lisent comme
	   le reste de l'accordéon. */
	.igc-menu__onglets {
		flex-direction: column;
	}

	.igc-menu__articles {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Le corps ne défile plus derrière le tiroir : on perdrait sa place dans la
   page en refermant. */
html[data-menu-ouvert],
html[data-menu-ouvert] body {
	overflow: hidden;
}