/**
 * Ad'on :: Menu
 *
 * Géométrie et comportement, communs à tous les menus du site. Les couleurs
 * viennent des jetons de contexte de Dungeon Styler, avec une valeur de repli
 * écrite dans chaque `var()` (et non en tête de fichier : voir volet.css pour
 * la raison). La feuille du module pose ses propres variables sur la balise
 * <nav> quand l'intégrateur règle une couleur.
 *
 * Contrastes : le texte accentué prend `--accent1`, la teinte de la maquette.
 * En mode accessible, `_contraste_eleve.scss` fait basculer `--accent1` sur
 * `--accent1lisible` (4,5:1 sur blanc), et le texte suit sans règle à part.
 * Le texte posé sur l'accent prend `--noir`.
 *
 * @package Adon Components
 * @since   2.1.0
 */

.adon-menu {
	position: relative;
	font-family: var(--adon-menu-police, var(--fonttextes, inherit));
	color: var(--adon-menu-texte, var(--noir, #2b2e34));
}

.adon-menu :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.adon-menu :where(a) {
	color: inherit;
	text-decoration: none;
}

.adon-menu :where(button) {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	cursor: pointer;
	box-shadow: none;
}

/*
 * Le thème colore tous les boutons au survol et au focus (`button:hover`,
 * `button:focus`, spécificité 0,1,1). On les remet à plat ici, à 0,2,1 ; les
 * états du menu qui posent un fond (branche ouverte) sont écrits plus fort.
 */
.adon-menu button:hover,
.adon-menu button:focus,
.adon-menu button:active {
	background-color: transparent;
	background-image: none;
	color: inherit;
	box-shadow: none;
	border-color: transparent;
}

.adon-menu a:focus-visible,
.adon-menu button:focus-visible {
	outline: var(--epaisseur-focus, 3px) solid var(--adon-menu-focus, var(--focus, currentColor));
	outline-offset: 2px;
}

.adon-menu__panneau a:focus-visible,
.adon-menu__panneau button:focus-visible {
	outline-offset: -3px;
}

.adon-menu__chevron {
	flex: 0 0 auto;
	transition: transform .2s ease;
}

.adon-menu-alerte {
	padding: .75em 1em;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
}

/* ============================================================ Barre === */

.adon-menu__liste--n1 {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: var(--adon-menu-alignement, flex-end);
	gap: var(--adon-menu-espacement, 0);
}

.adon-menu__n1 {
	display: flex;
	align-items: stretch;
}

.adon-menu__lien--n1,
.adon-menu__bascule--n1 {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: var(--adon-menu-n1-padding, .9em 1.1em);
	font-size: var(--adon-menu-n1-taille, inherit);
	font-weight: var(--adon-menu-n1-graisse, 600);
	text-transform: var(--adon-menu-n1-casse, none);
	letter-spacing: var(--adon-menu-n1-espacement-lettres, normal);
	white-space: nowrap;
	position: relative;
}

.adon-menu__bascule--icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0 .4em;
}

.adon-menu__n1 > .adon-menu__bascule .adon-menu__chevron {
	transform: rotate(90deg);
}

.adon-menu__n1 > .adon-menu__bascule[aria-expanded="true"] .adon-menu__chevron {
	transform: rotate(-90deg);
}

/* Filet sous l'entrée ouverte, ou sous celle de la page courante. */
.adon-menu__lien--n1::after,
.adon-menu__bascule--n1::after {
	content: "";
	position: absolute;
	left: 1.1em;
	right: 1.1em;
	bottom: .45em;
	height: 3px;
	background: var(--adon-menu-accent-fond, var(--accent1, #f9b000));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.adon-menu__n1.is-ouvert > .adon-menu__bascule--n1::after,
.adon-menu__n1.is-courant > .adon-menu__lien--n1::after,
.adon-menu__n1.is-ancetre > .adon-menu__lien--n1::after,
.adon-menu__n1.is-ancetre > .adon-menu__bascule--n1::after,
.adon-menu__lien--n1:hover::after,
.adon-menu__bascule--n1:hover::after {
	transform: scaleX(1);
}

/* ========================================================== Panneau === */

.adon-menu__panneau {
	z-index: var(--adon-menu-zindex, 9980);
	background: var(--adon-menu-panneau-fond, var(--blanc, #fff));
	color: var(--adon-menu-texte, var(--noir, #2b2e34));
	text-transform: none;
	letter-spacing: normal;
	font-weight: 400;
	text-align: left;
}

.adon-menu__panneau[hidden],
.adon-menu__sous[hidden],
.adon-menu__colonne[hidden] {
	display: none !important;
}

.adon-menu:not(.adon-menu--deroule):not(.adon-menu--simple) .adon-menu__panneau {
	position: absolute;
	top: var(--adon-menu-haut, 100%);
	left: var(--adon-menu-gauche, 0);
	width: var(--adon-menu-largeur, 100%);
	border-top: 3px solid var(--adon-menu-accent-fond, var(--accent1, #f9b000));
	box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .35);
	animation: adon-menu-entree .2s ease-out both;
}

/* Voile sur la page sous le panneau. */
.adon-menu:not(.adon-menu--deroule):not(.adon-menu--simple) .adon-menu__panneau::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 100vh;
	background: var(--adon-menu-voile, rgba(43, 46, 52, .25));
	pointer-events: none;
}

@keyframes adon-menu-entree {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.adon-menu .adon-menu__entete {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-size: .85em;
	font-weight: 600;
	color: var(--adon-menu-accent-texte, var(--accent1, #936800));
	text-decoration: underline;
	text-underline-offset: .2em;
}

.adon-menu__entete:hover {
	text-decoration-thickness: 2px;
}

/* =================================================== Arborescence === */

.adon-menu__arbo {
	display: grid;
	grid-template-columns: repeat(var(--adon-menu-colonnes, 3), minmax(0, 1fr));
	min-height: var(--adon-menu-hauteur-min, 18rem);
	/* Largeur des colonnes : celle du site par défaut (réglage du module). */
	max-width: var(--adon-menu-contenu, none);
	margin-inline: auto;
}

/*
 * Grille limitée à la largeur du site : le panneau prolonge la première
 * colonne vers la gauche et la dernière vers la droite, pour que les fonds
 * aillent d'un bord à l'autre comme sur le prototype.
 */
.adon-menu--arborescence:not(.adon-menu--deroule) .adon-menu__panneau {
	background: linear-gradient(90deg,
		var(--adon-menu-col1, var(--clair, #f5f5f5)) 50%,
		var(--adon-menu-col-fin, #dedede) 50%);
}


.adon-menu__fonds {
	display: contents;
}

.adon-menu__fond,
.adon-menu__colonne {
	grid-row: 1;
}

.adon-menu__fond[data-col="1"],
.adon-menu__colonne[data-col="1"] {
	grid-column: 1;
	background: var(--adon-menu-col1, var(--clair, #f5f5f5));
}

.adon-menu__fond[data-col="2"],
.adon-menu__colonne[data-col="2"] {
	grid-column: 2;
	background: var(--adon-menu-col2, #ebebeb);
}

.adon-menu__fond[data-col="3"],
.adon-menu__colonne[data-col="3"] {
	grid-column: 3;
	background: var(--adon-menu-col3, #dedede);
}

.adon-menu__colonne {
	position: relative;
	z-index: 1;
	padding: 1.25rem 0 1.75rem;
	animation: adon-menu-colonne .18s ease-out both;
}

@keyframes adon-menu-colonne {
	from {
		opacity: 0;
		transform: translateX(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.adon-menu__colonne-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em 1em;
	padding: 0 clamp(1rem, 3vw, 2.5rem) .75rem;
	min-height: 1.5em;
}

.adon-menu__colonne .adon-menu__liste {
	padding: 0 clamp(1rem, 3vw, 2.5rem);
}

.adon-menu__colonne .adon-menu__item {
	border-bottom: 1px solid var(--adon-menu-filet, rgba(43, 46, 52, .55));
}

.adon-menu__colonne .adon-menu__lien,
.adon-menu__branche {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	padding: .8em .25em;
	line-height: 1.3;
	transition: background-color .15s ease, color .15s ease, padding .15s ease;
}

.adon-menu__colonne .adon-menu__lien:hover,
.adon-menu__branche:hover {
	text-decoration: underline;
	text-underline-offset: .2em;
}

/*
 * La feuille du site colore les liens (body a, 0,1,2) : on reprend la main à
 * 0,2,0 pour les liens du menu, qui suivent le texte de leur colonne.
 */
.adon-menu .adon-menu__lien,
.adon-menu .adon-menu__lien:hover,
.adon-menu .adon-menu__lien:focus {
	color: inherit;
}

/* Graisse : les thèmes graissent souvent `li a` (Dungeon Styler : 0,1,3).
   Dans les panneaux, les liens prennent la graisse du texte courant ; les
   règles qui graissent (niveau 2, entrée courante, titres de cartes) suivent. */
.adon-menu .adon-menu__panneau .adon-menu__lien {
	font-weight: inherit;
}

/* Première colonne : le niveau 2, sur l'accent. */
.adon-menu__colonne[data-col="1"] .adon-menu__item {
	border-bottom-color: var(--adon-menu-accent-fond, var(--accent1, #f9b000));
}

.adon-menu .adon-menu__colonne[data-col="1"] .adon-menu__lien,
.adon-menu .adon-menu__colonne[data-col="1"] .adon-menu__branche {
	padding-top: 1.05em;
	padding-bottom: 1.05em;
	font-weight: 600;
	color: var(--adon-menu-accent-texte, var(--accent1, #936800));
}

/* Branche ouverte. */
.adon-menu .adon-menu__item.is-actif > .adon-menu__branche {
	background: var(--adon-menu-actif-fond, var(--accent1, #f9b000));
	color: var(--adon-menu-actif-texte, var(--noir, #2b2e34));
	padding-left: .75em;
	padding-right: .75em;
	text-decoration: none;
}

.adon-menu .adon-menu__colonne:not([data-col="1"]) .adon-menu__item.is-actif > .adon-menu__branche {
	background: var(--adon-menu-actif2-fond, rgba(43, 46, 52, .08));
	color: inherit;
	font-weight: 600;
}

.adon-menu__colonne .is-courant > .adon-menu__lien {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .2em;
}

.adon-menu__retour {
	display: none;
	align-items: center;
	gap: .35em;
	font-weight: 600;
	min-height: 44px;
}

/* ====================================================== Rubriques === */

.adon-menu__rubriques {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	max-width: var(--adon-menu-contenu, none);
	margin: 0 auto;
	padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 2rem;
}

.adon-menu__rubriques.has-libre {
	grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
}

.adon-menu__rubriques-corps > .adon-menu__entete {
	margin-bottom: 1rem;
}

.adon-menu__cartes {
	display: grid;
	grid-template-columns: repeat(var(--adon-menu-colonnes, 3), minmax(0, 1fr));
	gap: 1.5rem 2rem;
}

.adon-menu__carte {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.adon-menu__vignette {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 4px;
}

.adon-menu__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}

.adon-menu__carte:hover .adon-menu__vignette img {
	transform: scale(1.06);
}

.adon-menu__carte-corps {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35em;
	min-width: 0;
}

.adon-menu .adon-menu__panneau .adon-menu__carte-titre {
	font-weight: 600;
	font-size: 1.05em;
	line-height: 1.3;
}

.adon-menu__carte-titre:hover {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.adon-menu__deplier {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	min-height: 24px;
	font-size: .85em;
	color: var(--adon-menu-accent-texte, var(--accent1, #936800));
	text-decoration: underline;
	text-underline-offset: .2em;
}

.adon-menu__deplier .adon-menu__chevron {
	transform: rotate(90deg);
}

/* Titre et bouton du niveau 3 sur une ligne. */
.adon-menu__carte-ligne {
	display: flex;
	align-items: flex-start;
	gap: .35em;
	max-width: 100%;
}

.adon-menu .adon-menu__deplier--icone {
	flex: 0 0 auto;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 28px;
	padding: 0;
	margin-top: -.1em;
	border-radius: 50%;
	text-decoration: none;
}

.adon-menu .adon-menu__deplier--icone:hover,
.adon-menu .adon-menu__deplier--icone[aria-expanded="true"] {
	background: var(--adon-menu-actif2-fond, rgba(43, 46, 52, .08));
}

.adon-menu__deplier[aria-expanded="true"] .adon-menu__chevron {
	transform: rotate(-90deg);
}

.adon-menu__carte .adon-menu__sous {
	padding-top: .25em;
}

.adon-menu__carte .adon-menu__sous .adon-menu__lien {
	display: block;
	padding: .3em 0;
	font-size: .95em;
}

.adon-menu__carte .adon-menu__sous .adon-menu__lien:hover {
	text-decoration: underline;
}

.adon-menu__carte .adon-menu__liste--n4 {
	padding-left: 1em;
}

.adon-menu__libre {
	padding-left: 2rem;
	border-left: 1px solid var(--adon-menu-filet, rgba(43, 46, 52, .25));
	font-size: .95em;
}

/* ========================================================= Simple === */

.adon-menu--simple .adon-menu__n1,
.adon-menu--simple .adon-menu__item {
	position: relative;
}

.adon-menu--simple:not(.adon-menu--deroule) .adon-menu__panneau,
.adon-menu--simple:not(.adon-menu--deroule) .adon-menu__sous {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 15rem;
	padding: .5rem 0;
	background: var(--adon-menu-panneau-fond, var(--blanc, #fff));
	box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35);
	border-top: 3px solid var(--adon-menu-accent-fond, var(--accent1, #f9b000));
	animation: adon-menu-entree .18s ease-out both;
}

.adon-menu--simple:not(.adon-menu--deroule) .adon-menu__sous {
	top: -.5rem;
	left: 100%;
	border-top: 0;
	border-left: 3px solid var(--adon-menu-accent-fond, var(--accent1, #f9b000));
}

.adon-menu--simple .adon-menu__panneau > .adon-menu__entete {
	display: flex;
	padding: .5em 1.1em;
}

.adon-menu--simple .adon-menu__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.adon-menu--simple .adon-menu__item > .adon-menu__lien {
	flex: 1 1 auto;
	padding: .55em 1.1em;
}

.adon-menu--simple .adon-menu__item > .adon-menu__lien:hover {
	text-decoration: underline;
	text-underline-offset: .2em;
}

.adon-menu--simple .adon-menu__item.is-courant > .adon-menu__lien {
	font-weight: 700;
}

/* ===================================================== Déroulé ===== */
/*
 * Sous le point de bascule, ou posé dans un volet : tout s'empile, les panneaux
 * se déplient sur place. L'arborescence ne montre qu'une colonne à la fois, la
 * plus profonde ouverte, avec un bouton Retour.
 */

.adon-menu--deroule .adon-menu__liste--n1 {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.adon-menu--deroule .adon-menu__n1 {
	flex-wrap: wrap;
	border-bottom: 1px solid var(--adon-menu-filet, rgba(43, 46, 52, .25));
}

.adon-menu--deroule .adon-menu__lien--n1,
.adon-menu--deroule .adon-menu__bascule--n1 {
	flex: 1 1 auto;
	justify-content: space-between;
	min-height: 48px;
	white-space: normal;
}

.adon-menu--deroule .adon-menu__lien--n1::after,
.adon-menu--deroule .adon-menu__bascule--n1::after {
	display: none;
}

.adon-menu--deroule .adon-menu__panneau {
	flex: 0 0 100%;
	position: static;
	box-shadow: none;
	border-top: 0;
	animation: none;
}

.adon-menu--deroule .adon-menu__arbo {
	display: block;
	min-height: 0;
}

.adon-menu--deroule .adon-menu__fonds {
	display: none;
}

.adon-menu--deroule .adon-menu__colonne {
	display: none;
	padding: .75rem 0 1rem;
}

.adon-menu--deroule .adon-menu__colonne.is-derniere {
	display: block;
}

.adon-menu--deroule .adon-menu__colonne-tete,
.adon-menu--deroule .adon-menu__colonne .adon-menu__liste {
	padding-left: 1rem;
	padding-right: 1rem;
}

.adon-menu--deroule .adon-menu__retour {
	display: inline-flex;
}

.adon-menu--deroule .adon-menu__colonne-tete {
	flex-direction: column;
	align-items: flex-start;
}

.adon-menu--deroule .adon-menu__rubriques,
.adon-menu--deroule .adon-menu__rubriques.has-libre {
	grid-template-columns: minmax(0, 1fr);
	padding: 1rem;
}

.adon-menu--deroule .adon-menu__cartes {
	grid-template-columns: minmax(0, 1fr);
}

.adon-menu--deroule .adon-menu__libre {
	padding-left: 0;
	border-left: 0;
}

.adon-menu--deroule .adon-menu__sous {
	padding-left: 1rem;
}

/* =================================================== Mouvement ===== */

@media (prefers-reduced-motion: reduce) {
	.adon-menu *,
	.adon-menu *::before,
	.adon-menu *::after {
		animation: none !important;
		transition: none !important;
	}
}