fix: accessibilité des composants (#70)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

---------

Co-authored-by: admin malio <malio@yuno.malio.fr>
Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr>
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Reviewed-on: #70
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/assets/css/malio.css

@@ -2,6 +2,41 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  /* Anneau de focus clavier standard (navigation au Tab), invisible à la souris.
+     Deux déclencheurs, même rendu :
+     - .m-focus-ring        → s'appuie sur :focus-visible natif. Pour les éléments
+                              où :focus-visible se limite déjà au clavier (boutons,
+                              onglets, tuiles, checkbox/radio…).
+     - .m-focus-ring-kbd    → classe ajoutée en JS (via useKbdFocusRing) uniquement
+                              quand le focus vient du clavier. Pour les champs texte,
+                              où :focus-visible natif se déclenche aussi à la souris.
+     Le `:focus` sur .m-focus-ring-kbd élève la spécificité pour passer devant le
+     `outline-none` des inputs. */
+  .m-focus-ring:focus-visible,
+  .m-focus-ring-kbd:focus {
+    outline: 2px solid rgb(var(--m-primary) / 1);
+    outline-offset: 2px;
+  }
+
+  /* Anneau de focus clavier pour un combobox ouvert (input + liste) : l'anneau
+     entoure le bloc entier d'un seul tenant. L'input porte le contour haut+côtés,
+     la liste le contour côtés+bas ; la jonction (bas de l'input / haut de la liste)
+     reste sans contour pour un raccord sans couture. */
+  .m-combo-ring-top {
+    box-shadow:
+      -2px 0 0 0 rgb(var(--m-primary) / 1),
+      2px 0 0 0 rgb(var(--m-primary) / 1),
+      0 -2px 0 0 rgb(var(--m-primary) / 1);
+  }
+  .m-combo-ring-bottom {
+    box-shadow:
+      -2px 0 0 0 rgb(var(--m-primary) / 1),
+      2px 0 0 0 rgb(var(--m-primary) / 1),
+      0 2px 0 0 rgb(var(--m-primary) / 1);
+  }
+}
+
 @layer base {
   :root {
     /* ── Globales ── */