// Focus des items des menus téléportés (VMenu) : leur contenu est rendu hors du composant,
// les styles ne peuvent donc pas être scopés → override global, ciblé par content-class.
// Standard DS : ring 2px inset (-3px) au :focus-visible, sans changement de fond.

// SyBtnMenu : menu utilisateur.
.sy-user-menu {
	.v-list-item:focus-visible {
		outline: 2px solid rgb(var(--v-theme-primary));
		outline-offset: -3px;
	}

	// Pas de changement de fond au focus : overlay Vuetify masqué (le hover garde le sien).
	.v-list-item:focus-visible .v-list-item__overlay {
		opacity: 0 !important;
	}
}

// HeaderToolbar : menus déroulants téléportés (left-dropdown / mobile-burger).
.left-dropdown-menu,
.mobile-burger-menu {
	// Focus virtuel (aria-activedescendant) ET focus DOM (roving tabindex) : ring DS.
	.menu-item-focused,
	.v-list-item:focus-visible {
		outline: 2px solid rgb(var(--v-theme-primary));
		outline-offset: -3px;
	}

	// Pas de changement de fond au focus : on masque l'overlay Vuetify de l'item
	// focusé/actif (le hover garde le sien).
	.menu-item-focused .v-list-item__overlay,
	.v-list-item:focus-visible .v-list-item__overlay {
		opacity: 0 !important;
	}
}