fix(notes): audio overflow + volume 50%, grille 3col, bouton laptop, sidebar BDD

- Audio : minWidth:0 + onLoadedMetadata volume=0.5 (plus de débordement)
- Grille : repeat(3,1fr) sur laptop, 1fr sur mobile (était auto-fill)
- Header laptop : bouton "Nouvelle note" (fa-plus + accent) visible lg:flex
- SideNav : DbStatusBar en bas — LED verte/rouge + taille BDD, polling 30s
- docs/plan.md : Phase 4c documentée

v0.5.7

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

docs/plan.md

@@ -150,6 +150,38 @@
 
 ---
 
+## Phase 4c — Notes v2 : états de tuile + médias ✅
+
+**Objectif** : refonte de l'interface Notes avec tuiles à 3 états, support vidéo, transcodage audio universel.
+
+### Backend
+- [x] `ffmpeg` dans le Dockerfile backend — transcodage audio et vidéo
+- [x] `save_audio()` : transcode toute entrée (webm/ogg/m4a) → AAC `.m4a` — lecture Safari iOS garantie
+- [x] `save_video()` : stockage mp4/quicktime direct, webm → H.264/mp4 via ffmpeg
+- [x] `ALLOWED_VIDEO_TYPES` : mp4, webm, quicktime, m4v, 3gpp
+- [x] `GET /api/notes` : filtre `has_video` ajouté
+- [x] `POST /api/notes/{id}/attachments` : gère `file_type = "video"`
+- [x] `GET /api/admin/stats` : section `media.video` (count + size_bytes)
+- [x] Schémas Pydantic notes : `gps_lat/gps_lon` passés en `float | None` (fix `Decimal` sérialisé en string → TypeError JS)
+
+### Frontend
+- [x] NoteCard à 3 états : **semi** (défaut, 3 lignes + actions) / **expanded** (markdown complet + médias) / **collapsed** (titre + date)
+- [x] Bouton toggle `fa-chevron-down / fa-minus / fa-chevron-right` dans le coin haut-droit de chaque tuile
+- [x] Renderer pseudo-markdown : `# ## ###`, `- * 1.` listes, `> citations`, `---`, `` **gras** *italique* `code` ``, ` ``` ` blocs
+- [x] Icônes méta sur la tuile : `fa-image` / `fa-microphone` / `fa-video` / `fa-location-dot`
+- [x] Bouton vidéo `fa-video` dans les actions de chaque note
+- [x] Lecteur `<video playsInline>` inline dans l'état expanded
+- [x] Audio : `onLoadedMetadata` règle le volume à 50% + fix overflow (`minWidth: 0`)
+- [x] Filtres rapides : Photo / Audio / Vidéo / GPS (avec icônes Font Awesome)
+- [x] Grille : 3 colonnes max sur laptop (`repeat(3, 1fr)`), 1 colonne sur mobile
+- [x] Bouton "Nouvelle note" dans le header, visible sur laptop uniquement
+- [x] Sidebar laptop : indicateur de statut BDD (LED verte/rouge + taille) avec polling 30s sur `/api/health`
+- [x] ConfigPage : grille médias 3 colonnes (Photos / Audio / Vidéos)
+- [x] `client_max_body_size nginx` : 15m → 200m pour les vidéos
+- [x] `docker-compose.yml` : `user: "1000:1000"` sur backend et backend-worker
+
+---
+
 ## Phase 4b — UX transversale ✅
 
 **Objectif** : améliorations d'expérience applicables à tous les modules.