/*
 * Menu de navigation latéral — généré par affiche_menus() (includes/functions.php).
 * Les classes ci-dessous doivent rester synchronisées avec le HTML émis par cette fonction.
 */

.nav-menu {
	display: flex;
	flex-direction: column;
	gap: var(--ag-space-1);
}

.nav-menu__item {
	border-radius: var(--ag-radius-sm);
}

.nav-menu__link {
	display: flex;
	align-items: center;
	gap: var(--ag-space-3);
	padding: var(--ag-space-2) var(--ag-space-3) var(--ag-space-2) calc(var(--ag-space-3) - 3px);
	border-left: 3px solid transparent;
	border-radius: var(--ag-radius-sm);
	color: var(--ag-color-text);
	font-size: var(--ag-font-size-sm);
	font-weight: var(--ag-font-weight-medium);
	transition: background var(--ag-transition-fast), color var(--ag-transition-fast), border-color var(--ag-transition-fast);
}

.nav-menu__link:hover {
	background: var(--ag-color-bg);
}

/*
 * Icônes du menu (SVG masqué, currentColor — même technique que assets/css/
 * components/icons.css) : la couleur suit automatiquement celle du lien
 * (.nav-menu__link), donc pas de règle séparée nécessaire pour l'état actif.
 * Chaque clé de menu ($k dans affiche_menus(), includes/functions.php)
 * reçoit une classe .icon-$k pointant vers l'icône correspondante — voir
 * icons.css pour la correspondance avec les glyphes de l'application
 * d'origine (common/theme/css/glyphicons.css).
 */
.nav-menu__icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: inline-block;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	opacity: 0.75;
}

.nav-menu__item.is-active > .nav-menu__link .nav-menu__icon {
	opacity: 1;
}

/*
 * Sélecteurs volontairement composés (.nav-menu__icon.icon-$k), et non
 * .icon-$k seul : affiche_menus() pose la même classe icon-$k à la fois sur
 * le <li> (nav-menu__item icon-$k) et sur le <span class="nav-menu__icon
 * icon-$k"> qu'il contient. Un sélecteur .icon-$k seul cible donc aussi le
 * <li>, qui n'a pas le mask-repeat/mask-size définis ci-dessus (nav-menu__icon
 * uniquement) : le mask s'applique alors en mode répété/taille auto sur toute
 * la ligne de menu, produisant une grille d'icônes fantômes recouvrant le
 * texte. D'où la double classe requise dans chaque sélecteur.
 */
.nav-menu__icon.icon-accueil { -webkit-mask-image: var(--ag-icon-home, none); mask-image: var(--ag-icon-home, none); }
.nav-menu__icon.icon-mon_profil { -webkit-mask-image: var(--ag-icon-user, none); mask-image: var(--ag-icon-user, none); }
.nav-menu__icon.icon-enfants { -webkit-mask-image: var(--ag-icon-family, none); mask-image: var(--ag-icon-family, none); }
.nav-menu__icon.icon-activites { -webkit-mask-image: var(--ag-icon-wallet, none); mask-image: var(--ag-icon-wallet, none); }
.nav-menu__icon.icon-treso { -webkit-mask-image: var(--ag-icon-euro, none); mask-image: var(--ag-icon-euro, none); }
.nav-menu__icon.icon-ecole { -webkit-mask-image: var(--ag-icon-briefcase, none); mask-image: var(--ag-icon-briefcase, none); }
.nav-menu__icon.icon-biblio { -webkit-mask-image: var(--ag-icon-book-open, none); mask-image: var(--ag-icon-book-open, none); }
.nav-menu__icon.icon-admin { -webkit-mask-image: var(--ag-icon-gear, none); mask-image: var(--ag-icon-gear, none); }
.nav-menu__icon.icon-kiosque { -webkit-mask-image: var(--ag-icon-folder-open, none); mask-image: var(--ag-icon-folder-open, none); }

.nav-menu__item.is-active > .nav-menu__link {
	background: var(--ag-color-primary-soft);
	border-left-color: var(--ag-color-primary);
	color: var(--ag-color-primary);
}

.nav-menu__item.has-submenu > .nav-menu__link::after {
	content: "";
	margin-left: auto;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--ag-transition-fast);
	opacity: 0.5;
}

.nav-menu__item.has-submenu.is-open > .nav-menu__link::after {
	transform: rotate(-135deg);
}

.nav-submenu {
	list-style: none;
	padding-left: var(--ag-space-6);
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--ag-transition-base);
}

.nav-submenu.is-open {
	max-height: 800px;
}

.nav-submenu__item {
	border-radius: var(--ag-radius-sm);
}

.nav-submenu__link {
	display: block;
	padding: var(--ag-space-2) var(--ag-space-3);
	border-radius: var(--ag-radius-sm);
	color: var(--ag-color-text-muted);
	font-size: var(--ag-font-size-sm);
}

.nav-submenu__link:hover {
	color: var(--ag-color-text);
	background: var(--ag-color-bg);
}

.nav-submenu__item.is-active .nav-submenu__link {
	color: var(--ag-color-primary);
	font-weight: var(--ag-font-weight-medium);
}

.nav-menu__heading {
	padding: var(--ag-space-2) var(--ag-space-3);
	color: var(--ag-color-text-muted);
	font-size: var(--ag-font-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}