# Instructions pour Appliquer les Corrections

## ✅ Corrections Appliquées

Le design-system a été rebuildé avec les corrections :
- ✅ `focus:` → `focus-visible:` (focus visible seulement au clavier)
- ✅ Border cyan avec 60% d'opacité
- ✅ Ring supprimé

## 🔄 Étapes pour Appliquer les Corrections

### Option 1 : Redémarrer le Serveur Dev (Recommandé)

1. **Arrêter le serveur dev** :
   ```bash
   # Dans le terminal où le serveur dev tourne
   Ctrl+C
   ```

2. **Redémarrer le serveur dev** :
   ```bash
   cd apps/web
   npm run dev
   ```

3. **Vider le cache du navigateur** :
   - Chrome/Edge : `Ctrl+Shift+R` (ou `Cmd+Shift+R` sur Mac)
   - Firefox : `Ctrl+F5` (ou `Cmd+Shift+R` sur Mac)

### Option 2 : Forcer le Rechargement (Si Option 1 ne fonctionne pas)

1. **Arrêter le serveur dev**

2. **Nettoyer les caches** :
   ```bash
   cd apps/web
   rm -rf node_modules/.vite
   rm -rf dist
   ```

3. **Redémarrer** :
   ```bash
   npm run dev
   ```

4. **Vider le cache du navigateur** (voir Option 1)

## ✅ Vérification

Après redémarrage, vérifier que :

1. **Au chargement de la page** : Aucun input n'a de contour cyan
2. **Au clic souris** : Pas de contour cyan
3. **Navigation clavier (Tab)** : Contour cyan discret visible (60% opacité)
4. **Après clic ailleurs** : Le contour disparaît

## 🐛 Si le Problème Persiste

1. Vérifier dans les DevTools (F12) → Elements → Inspecter un input
2. Vérifier que les classes contiennent `focus-visible:` et non `focus:`
3. Si les classes sont encore `focus:`, le cache n'a pas été vidé

**Solution** :
- Vider complètement le cache du navigateur
- Redémarrer le serveur dev
- Vérifier que `packages/design-system/dist/index.js` contient `focus-visible:border-kodo-cyan/60`