Replie les paroles par défaut dans le player persistant

Toggle discret pour les afficher au besoin (usage autonome).
Gain de place dans le panel déployé.

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

app/components/player/PlayerPersistent.vue

@@ -51,10 +51,18 @@
             >
           </div>
 
-          <!-- Lyrics (if available) -->
-          <div v-if="store.currentSong.lyrics" class="panel-lyrics">
+          <!-- Lyrics (collapsed by default, available for standalone use) -->
+          <div v-if="store.currentSong.lyrics && showLyrics" class="panel-lyrics">
             <pre class="panel-lyrics-text">{{ store.currentSong.lyrics }}</pre>
           </div>
+          <button
+            v-if="store.currentSong.lyrics"
+            class="panel-lyrics-toggle"
+            @click="showLyrics = !showLyrics"
+          >
+            <div :class="showLyrics ? 'i-lucide-chevron-up' : 'i-lucide-text'" class="h-3 w-3" />
+            {{ showLyrics ? 'Masquer les paroles' : 'Paroles' }}
+          </button>
 
           <!-- Playlist -->
           <div class="panel-playlist">
@@ -128,6 +136,7 @@ useKeyboardShortcuts()
 
 const widgetRef = ref<HTMLElement>()
 const isExpanded = ref(false)
+const showLyrics = ref(false)
 let previousVolume = 0.8
 
 const circumference = 2 * Math.PI * 16
@@ -401,6 +410,26 @@ onClickOutside(widgetRef, () => {
   margin: 0;
 }
 
+/* ─── Lyrics toggle ─── */
+.panel-lyrics-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.375rem;
+  border: none;
+  border-top: 1px solid hsl(0 0% 100% / 0.04);
+  background: none;
+  color: hsl(0 0% 100% / 0.25);
+  font-size: 0.65rem;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.panel-lyrics-toggle:hover {
+  color: hsl(0 0% 100% / 0.5);
+}
+
 /* ─── Playlist ─── */
 .panel-playlist {
   max-height: 200px;