/**
 * Méga-menu — panneau plein cadre, ouvert au survol et au clavier.
 */

.site-nav .menu-item-has-children,
.site-nav .has-mega {
	position: static;
}

.mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 20;
	display: none;
	background-color: var(--color-base);
	border-block: var(--line-width) solid var(--color-accent);
}

.mega[data-open="true"] {
	display: block;
}

/* Le panneau se réfère au header (seul ancêtre positionné) pour occuper
   toute la largeur. L'entrée de menu reste donc statique, et le
   franchissement de l'espace entre les deux est géré en JS par un délai
   de fermeture, pas par un pont CSS. */

/* Filets en bordures et non en fond de grille : le fond débordait dans
   le padding du conteneur et créait deux aplats orange sur les côtés. */
/* Le nombre de colonnes suit le menu : ajouter ou retirer une colonne dans
   l'admin redistribue la largeur, sans toucher au CSS.

   Le site est en pleine largeur, mais les colonnes du panneau sont bornées :
   au-delà d'une vingtaine de rem, une colonne de trois liens devient une
   bande vide. Elles se tassent donc à gauche, sur l'origine du logo. */
/* Sans JS ou avant mesure, le panneau reste centre (repli propre).
   --mega-offset, pose en JS, decale le contenu pour l'aligner sous
   l'entree de menu survolee, sans jamais deborder de l'ecran. */
.mega__inner {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, var(--mega-col-width, 18rem));
	justify-content: center;
	align-items: stretch;
	gap: 0;
	transform: translateX(var(--mega-offset, 0px));
}

/* Les colonnes de bord ne portent pas de retrait interne : la première
   s'aligne alors sur le logo et le contenu de la page, la dernière sur
   le bouton de devis. */
.mega__col + .mega__col {
	border-inline-start: var(--line-width) solid var(--color-line-accent);
}

.mega__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: start;
	gap: var(--space-md);
	padding: var(--space-xl);
	background-color: var(--color-base);
}

.mega__col ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-sm);
	margin: 0;
	padding-inline-start: 0;
	inline-size: 100%;
	list-style: none;
	text-align: start;
}

.mega__col li {
	max-width: none;
}

.mega__col a {
	font-size: var(--font-size-sm);
	text-decoration: none;
}

.mega__col li,
.mega__col p {
	margin: 0;
	max-width: none;
	text-align: start;
}

.mega__label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.mega__note {
	font-size: var(--font-size-sm);
	opacity: 0.7;
	margin-block-start: auto;
}

.mega-toggle {
	--chevron-size: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
}

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

@media (max-width: 1023px) {
	/* Dans le panneau, le méga-menu n'est plus un panneau : il se déplie
	   sous son entrée, replié par défaut. Position statique, donc dans le
	   flux du panneau, qui défile si le contenu l'exige. */
	.mega {
		position: static;
		border-block: 0;
	}

	.mega__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		inline-size: 100%;
		transform: none;
		/* Le panneau porte déjà la gouttière de page : la classe
		   container-wide héritée la compterait une seconde fois. */
		padding-inline: 0;
	}

	/* Un filet vertical orange et un retrait léger marquent la
	   subordination, sans recentrer le bloc : l'origine reste celle des
	   entrées, décalée d'un cran. --space-sm suffit : --space-md, combiné
	   à la gouttière du panneau, les poussait trop loin du bord. */
	.mega__col {
		gap: var(--space-sm);
		padding: var(--space-md) 0 var(--space-md) var(--space-sm);
		border-inline-start: var(--line-width) solid var(--color-line-accent);
	}

	.mega__col + .mega__col {
		border-block-start: 0;
		padding-block-start: 0;
	}

	.mega__col ul {
		gap: 0;
	}

	/* Cible tactile, comme au premier niveau. Le bouton de devis garde la
	   sienne : ce n'est pas un lien de liste. */
	.mega__col a:not(.button) {
		display: flex;
		align-items: center;
		inline-size: 100%;
		min-block-size: var(--tap-target);
	}

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

	.mega__note {
		margin-block-start: 0;
	}

	/* Chevron : dans un panneau, une entrée qui se déplie doit se
	   distinguer d'une entrée qui mène à une page. Il pivote à
	   l'ouverture, ce qui double l'état annoncé par aria-expanded. */
	.mega-toggle::after {
		content: "";
		flex: none;
		inline-size: var(--chevron-size);
		block-size: var(--chevron-size);
		border-inline-end: var(--line-width) solid currentColor;
		border-block-end: var(--line-width) solid currentColor;
		rotate: 45deg;
		transition: rotate var(--duration-base) var(--ease);
	}

	.mega-toggle[aria-expanded="true"]::after {
		rotate: -135deg;
	}
}