/* Styles de mise en page globaux qui ciblent des éléments rendus par un COMPOSANT enfant (ex. <NavLink>)
   plutôt qu'un élément HTML écrit directement dans un .razor donné — la CSS isolée par composant
   (*.razor.css) ne les atteint pas : Blazor n'ajoute son attribut de portée qu'aux éléments HTML présents
   littéralement dans le fichier propriétaire du .razor.css, jamais à l'intérieur du rendu propre d'un
   composant enfant défini ailleurs (ici Microsoft.AspNetCore.Components.Routing.NavLink). Tout style
   visant directement le tag <NavLink>/<a> lui-même doit donc vivre ici, jamais dans Layout/Sidebar.razor.css. */

/* Stylisé comme un bouton plutôt qu'un lien nu (demandé explicitement) : reprend l'enveloppe commune aux
   quatre traitements de Button.md ("all sharing radius-md, shadow-sm and the same padding — every button
   lifts off the page by the same amount") — radius-md, shadow-sm, et le padding exact documenté (space-2
   moins 2px vertical, space-4 horizontal). Fond surface-sunken au repos pour se détacher du fond
   surface-raised de la sidebar elle-même (les deux seraient sinon identiques et le lien resterait plat) —
   pas un des 4 traitements documentés tel quel (aucun composant Sidebar/Nav n'existe dans le design
   system), mais la même enveloppe visuelle. */
.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: calc(var(--space-2) - 2px) var(--space-4);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background: var(--surface-sunken);
    color: var(--ink);
    text-decoration: none;
}

/* Assombrissement au survol (~8% vers le noir, règle "States" du README pour un contrôle rempli) —
   color-mix plutôt qu'un nouveau token, même logique que le survol accent-strong des boutons. */
.sidebar__link:hover {
    background: color-mix(in srgb, var(--surface-sunken) 92%, black);
}

.sidebar__link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* accent-subtle : "selected list rows" (tokens.md) — lien actif traité comme une ligne sélectionnée.
   Règle :hover explicite en plus (pas seulement l'ordre des règles) pour que l'état actif ne s'assombrisse
   pas comme un lien inactif survolé — la sélection courante doit rester lisible telle quelle. */
.sidebar__link.active {
    background: var(--accent-subtle);
    color: var(--accent-strong);
}

.sidebar__link.active:hover {
    background: var(--accent-subtle);
}

/* Icône provisoire sous le régime "gap" documenté par le README racine (aucun jeu d'icônes fourni) :
   border au repos, ink au survol, accent-strong à l'état actif — .sidebar__icon lui-même (taille, trait)
   reste défini dans Layout/Sidebar.razor.css, seuls ses changements de couleur pilotés par l'état du lien
   vivent ici (dépendent de :hover/.active sur .sidebar__link, non atteignable en CSS isolée). */
.sidebar__link:hover .sidebar__icon {
    color: var(--ink);
}

.sidebar__link.active .sidebar__icon {
    color: var(--accent-strong);
}