Feature: Sélection multiple d'instruments dans les filtres

Frontend:
- FilterPanel: Remplacer select par checkboxes pour instruments
- Zone scrollable (max-height 12rem) pour la liste
- Affichage des instruments sélectionnés dans résumé filtres actifs

Backend:
- API tracks: Nouveau paramètre instruments (List[str])
- Backward compatible avec ancien paramètre instrument
- CRUD: Filtrage AND (track doit avoir TOUS les instruments)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

frontend/components/FilterPanel.tsx

@@ -93,23 +93,40 @@ export default function FilterPanel({
         </select>
       </div>
 
-      {/* Instrument Filter */}
+      {/* Instrument Filter - Multiple Selection */}
       <div>
         <label className="block text-sm font-semibold text-slate-700 mb-2">
-          Instrument
+          Instruments
         </label>
-        <select
-          value={localFilters.instrument || ""}
-          onChange={(e) => handleFilterChange("instrument", e.target.value || undefined)}
-          className="w-full px-3 py-2 bg-slate-50 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"
-        >
-          <option value="">Tous les instruments</option>
-          {availableInstruments.map((instrument) => (
-            <option key={instrument} value={instrument}>
-              {instrument}
-            </option>
-          ))}
-        </select>
+        <div className="space-y-2 max-h-48 overflow-y-auto bg-slate-50 border border-slate-300 rounded-lg p-2">
+          {availableInstruments.length === 0 ? (
+            <p className="text-xs text-slate-500 p-2">Aucun instrument disponible</p>
+          ) : (
+            availableInstruments.map((instrument) => {
+              const isSelected = localFilters.instruments?.includes(instrument) || false
+              return (
+                <label
+                  key={instrument}
+                  className="flex items-center gap-2 p-2 hover:bg-slate-100 rounded cursor-pointer transition-colors"
+                >
+                  <input
+                    type="checkbox"
+                    checked={isSelected}
+                    onChange={(e) => {
+                      const currentInstruments = localFilters.instruments || []
+                      const newInstruments = e.target.checked
+                        ? [...currentInstruments, instrument]
+                        : currentInstruments.filter(i => i !== instrument)
+                      handleFilterChange("instruments", newInstruments.length > 0 ? newInstruments : undefined)
+                    }}
+                    className="w-4 h-4 text-orange-500 border-slate-300 rounded focus:ring-2 focus:ring-orange-500 focus:ring-offset-0"
+                  />
+                  <span className="text-sm text-slate-700">{instrument}</span>
+                </label>
+              )
+            })
+          )}
+        </div>
       </div>
 
       {/* Key Filter */}
@@ -165,10 +182,16 @@ export default function FilterPanel({
                 <span className="font-medium text-slate-800">{localFilters.mood}</span>
               </div>
             )}
-            {localFilters.instrument && (
-              <div className="flex items-center justify-between text-xs">
-                <span className="text-slate-600">Instrument:</span>
-                <span className="font-medium text-slate-800">{localFilters.instrument}</span>
+            {localFilters.instruments && localFilters.instruments.length > 0 && (
+              <div className="text-xs">
+                <span className="text-slate-600">Instruments:</span>
+                <div className="flex flex-wrap gap-1 mt-1">
+                  {localFilters.instruments.map((instrument) => (
+                    <span key={instrument} className="inline-flex items-center px-2 py-0.5 rounded text-xs bg-emerald-50 text-emerald-700">
+                      {instrument}
+                    </span>
+                  ))}
+                </div>
               </div>
             )}
             {localFilters.key && (

frontend/lib/types.ts

@@ -60,6 +60,7 @@ export interface FilterParams {
   has_vocals?: boolean
   key?: string
   instrument?: string
+  instruments?: string[] // Multiple instruments filter
   tempo_range?: 'slow' | 'medium' | 'fast' // Lent (<100), Moyen (100-140), Rapide (>140)
   sort_by?: 'analyzed_at' | 'tempo_bpm' | 'duration_seconds' | 'filename' | 'energy'
   sort_desc?: boolean