feat(sidebar) : état actif + survol des liens (fond primary/10, texte primary, semi-bold)

- Survol : highlight pleine largeur porté par le <li> (fond m-primary/10 +
  texte m-primary + semi-bold), espacement pt-1 pb-1. Couleur de base text-black
  sur le <li> et le <a> n'impose plus sa couleur (héritage) : sinon, sur les
  bandes pt-1/pb-1 hors du <a>, le fond passait bleu mais le texte restait noir.
- Lien actif : texte m-primary + semi-bold, sans fond (active-class avec
  !important car appliqué hors twMerge).
- Pas de transition sur le hover (texte + fond basculent ensemble, sans délai).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/components/malio/sidebar/Sidebar.test.ts

@@ -89,10 +89,27 @@ describe('MalioSidebar', () => {
     expect(links[2].attributes('href')).toBe('/fournisseurs')
   })
 
-  it('applique un hover primary sur le texte des liens', () => {
+  it('hover : fond + couleur + semi-bold tous portés par le <li> (texte non figé sur le <a>)', () => {
     const wrapper = mountComponent({sections})
-    const link = wrapper.find('a')
-    expect(link.classes()).toContain('hover:text-m-primary')
+    const li = wrapper.find('li')
+    expect(li.classes()).toContain('hover:bg-m-primary/10')
+    expect(li.classes()).toContain('hover:text-m-primary')
+    expect(li.classes()).toContain('hover:font-semibold')
+    expect(li.classes()).toContain('text-black')
+    expect(li.classes()).toContain('pt-1')
+    expect(li.classes()).toContain('pb-1')
+    // Le <a> ne fige PAS sa couleur (sinon le texte resterait noir sur les bandes
+    // pt-1/pb-1 hors du <a> alors que le fond du <li> est bleu).
+    expect(wrapper.find('a').classes()).not.toContain('text-black')
+    expect(wrapper.find('a').classes()).not.toContain('hover:text-m-primary')
+  })
+
+  it('actif : texte primary + semi-bold, sans fond, via active-class', () => {
+    const wrapper = mountComponent({sections})
+    const activeClass = wrapper.find('a').attributes('active-class') ?? ''
+    expect(activeClass).toContain('text-m-primary')
+    expect(activeClass).toContain('font-semibold')
+    expect(activeClass).not.toContain('bg-')
   })
 
   it('renders section icons via IconifyIcon', () => {

app/components/malio/sidebar/Sidebar.vue

@@ -49,12 +49,13 @@
           <li
             v-for="item in section.items"
             :key="item.to"
-            :class="collapsed ? '' : 'pb-2 last:pb-1'"
+            :class="collapsed ? '' : 'text-black hover:bg-m-primary/10 hover:font-semibold hover:text-m-primary pt-1 pb-1'"
           >
             <NuxtLink
               :to="item.to"
+              active-class="!text-m-primary font-semibold"
               :class="twMerge(
-                'block truncate rounded-md text-[15px] text-m-text text-black transition-colors hover:bg-m-surface hover:text-m-primary leading-[150%]',
+                'block truncate text-[15px] leading-[150%]',
                 collapsed ? 'px-3 text-center' : 'pl-[32px]',
               )"
             >