UX: Refonte complète - Notes en expansion inline (Google Keep style)

Implémentation d'un système d'expansion inline des notes au lieu de modals:
- Les notes s'agrandissent directement dans la grille au clic
- Mode compact: prévisualisation avec titre, contenu, image, premiers 3 todos
- Mode étendu: édition complète avec titre, contenu, todos, image, actions
- Auto-save avec debounce (1s) sur les modifications
- Filtres Actives/Archivées pour organiser les notes
- Système d'archivage avec endpoint API dédié

Fonctionnalités inline:
- expandNote(noteId): agrandir une note
- collapseNote(): réduire la note étendue
- saveNoteInline(noteId): sauvegarde auto avec debounce
- archiveNote(noteId, archived): archiver/désarchiver
- deleteNoteInline(noteId): supprimer depuis l'inline
- Gestion complète des todos inline (add, toggle, delete)
- Upload/suppression d'images inline
- Fermeture avec Escape

Event delegation pour performances:
- Tous les événements gérés via delegation sur #notesGrid
- Suppression de tous les attributs onclick/onchange (CSP compliant)
- Click handlers: expand, collapse, archive, delete, image, todos
- Change handlers: checkbox todos inline

CSS moderne avec shadows:
- .note-card.expanded: carte agrandie sur toute la largeur
- Styles inline pour titre, contenu, todos, image, footer
- Transitions fluides et hover effects
- View filters avec background pills
- Responsive grid layout

Backend prêt:
- GET /api/notes?archived=true/false
- PUT /api/notes/:id/archive
- Todos chargés avec chaque note
- Migration auto colonne 'archived'

public/css/layout.css

@@ -244,6 +244,8 @@ body {
   align-items: center;
   justify-content: space-between;
   margin-bottom: var(--spacing-lg);
+  gap: var(--spacing-lg);
+  flex-wrap: wrap;
 }
 
 .section-title {
@@ -252,6 +254,51 @@ body {
   color: var(--color-text-primary);
 }
 
+.section-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.view-filters {
+  display: flex;
+  gap: var(--spacing-xs);
+  background: var(--color-background);
+  border-radius: var(--radius-md);
+  padding: 4px;
+}
+
+.view-filter {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.view-filter svg {
+  width: 16px;
+  height: 16px;
+}
+
+.view-filter:hover {
+  background: var(--color-hover);
+  color: var(--color-text-primary);
+}
+
+.view-filter.active {
+  background: var(--color-card);
+  color: var(--color-accent);
+  box-shadow: var(--shadow-xs);
+}
+
 .btn-new-note {
   display: flex;
   align-items: center;