# Audit visuel — Résumé et écarts World-Class

**Date** : 2025-02-08  
**Référents** : Discord (densité, clarté sidebar), Spotify (rythme vertical, rounded-xl, listes).

---

## Ce qui a été capturé

- **Login** (full page) — spacing inputs, social buttons, primary CTA
- **Register** (full page) — idem
- **Dashboard** (full page) — cartes stats, activité récente
- **Playlists** (full page) — liste / grille
- **Library** (full page) — contenu bibliothèque
- **404** (full page)
- **Header** (composant isolé) — barre supérieure
- **Sidebar** et **Player** — locators mis à jour (`data-testid="app-sidebar"`, `data-testid="global-player"` sur GlobalPlayer). Si toujours skippés, vérifier ordre de rendu ou visibilité (sidebar collapsed par défaut, player sans piste).

---

## Ce que j’ai “vu” (analyse des screenshots)

### 1. Login & Register (focus spacing & inputs)

- **Points positifs** : Inputs en `rounded-xl`, bouton principal en gradient bien mis en avant, champs avec `space-y-5` cohérent.
- **Écarts** :
  - Espace entre la ligne “Remember me / Forgot password?” et le bouton “Sign In” un peu grand ou variable par rapport au rythme des champs → à caler sur l’échelle (ex. `mt-4` / `mt-5`).
  - Texte secondaire (“OR CONTINUE WITH”, “Don’t have an account?”) en contraste un peu faible → vérifier `muted-foreground` / tokens pour respect AA.
- **Tokens** : Pas de valeurs arbitraires visibles dans les forms ; `space-y-5` / `space-y-8` alignés sur l’échelle Tailwind.

### 2. Dashboard (hiérarchie des cartes)

- **Points positifs** : Cartes stats utilisent déjà `drop-shadow-stat-icon` (ombre neutre), grille `gap-4` / `gap-6`, pas de glow coloré sur les icônes.
- **Écarts** : Activité récente / listes internes : ombres ou bordures encore marquées sur certains blocs → à atténuer pour renforcer la hiérarchie (contenu > chrome).

### 3. Sidebar (alignements, 240px)

- **Code** : Largeur gérée par tokens (`--sidebar-width-expanded: 15rem` = 240px), classes `left-sidebar`, `top-sidebar`, etc. → aligné Discord.
- **Capture** : Test sidebar skippé (locator trop strict). À corriger en `aside[class*="left-sidebar"]` pour rendre la capture fiable.

### 4. Playlists & Library (densité verticale)

- **Points positifs** : `PlaylistTrackItem` en `p-3 sm:p-4`, `gap-2 sm:gap-4` ; liste en `gap-3 sm:gap-4` → rythme correct.
- **Écarts** : Vérifier qu’aucun `gap-[Xpx]` ou `p-[Xpx]` ne reste ; tout doit passer par l’échelle ou des tokens.

### 5. Global Player

- **Code** : Barre fixe en bas (`fixed bottom-0 left-0 right-0`, `h-16`).
- **Capture** : Skippée car le locator `div.fixed.bottom-0.left-0.right-0` peut matcher un autre élément ou l’ordre du DOM. À cibler via `div.fixed.bottom-0.left-0.right-0.h-16` (ou une classe dédiée).

---

## Synthèse des corrections appliquées

| Zone | Action |
|------|--------|
| **Login/Register** | Espacement explicite entre la ligne “Remember me” et le bouton submit (`mt-5`) pour un rythme vertical cohérent. |
| **Tokens** | Vérification que `--layout-gap` ou équivalent est documenté/utilisé là où c’est pertinent. |
| **Spec visuelle** | Locators sidebar → `aside[class*="left-sidebar"]` ; player → `div.fixed.bottom-0.left-0.right-0.h-16` pour capturer les deux composants. |
| **Hiérarchie** | Déjà en bonne voie (stat cards, ombres). Pas de changement supplémentaire dans ce cycle. |

---

## Contraste (muted-foreground)

Les textes secondaires (“Sign in to your account”, “OR CONTINUE WITH”, “Don’t have an account?”) reposent sur `text-muted-foreground`. Pour viser un niveau “World-Class” et AA, garder ou ajuster la variable `--muted-foreground` (dark) dans `index.css` pour un ratio ≥ 4.5:1 sur le fond sombre.

---

## Prochaines étapes recommandées

1. Relancer `npm run visual:capture` après correction des locators → vérifier que **sidebar** et **player** sont bien capturés.
2. Mettre à jour les baselines avec `npm run visual:update` si les changements de spacing sont validés.
3. Optionnel : audit contraste (muted-foreground) avec outil type axe DevTools ou Contrast Checker.