Refonte mini-player flottant, nettoyage GrateWizard, corrections UI

- PlayerPersistent: widget compact pill + panneau extensible, aligné au contenu
- BookPlayer: ajustements scroll mode, suppression bordures boutons
- UnoCSS: ajout border-none au shortcut btn-ghost
- GrateWizard: suppression composants, services et utils obsolètes
- Ajout du PDF source des paroles (media/)
- Mises à jour config et dépendances

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

app/components/book/BookPlayer.vue

@@ -564,6 +564,7 @@ onUnmounted(() => {
   align-items: center;
   width: 100%;
   flex: 1;
+  min-height: 0;
 }
 
 /* ═══════════════════════════════════════
@@ -574,6 +575,7 @@ onUnmounted(() => {
   max-width: 52rem;
   padding: 0 1rem;
   gap: 0;
+  min-height: 0;
 }
 
 /* ─── Top bar ─── */
@@ -729,11 +731,13 @@ onUnmounted(() => {
 
 /* ─── Scroll mode overrides ─── */
 .reader-viewport--scroll {
-  overflow-y: auto;
+  overflow: hidden auto;
+  min-height: 0;
 }
 .reader-columns--scroll {
   height: auto;
   column-fill: unset;
+  column-width: unset !important;
   transition: none;
 }
 

app/components/gratewizard/GwCRA.vue

@@ -1,194 +0,0 @@
-<template>
-  <div class="flex flex-col gap-5 pt-4">
-    <div class="card-surface">
-      <div class="flex flex-col items-center gap-3">
-        <p class="gw-metric">Coefficient relatif &agrave; l'anciennet&eacute;</p>
-
-        <!-- My seniority -->
-        <div class="flex flex-col items-center gap-1 w-full max-w-80">
-          <label class="gw-text text-sm">Mon anciennet&eacute;</label>
-          <input
-            v-model="myDate"
-            type="date"
-            :min="Block0Date"
-            :max="todayDate"
-            class="gw-input w-full"
-          />
-          <p :class="['gw-text text-center text-sm', { invisible: !myDate }]">
-            {{ getDays(myDate) || 0 }} DUs cr&eacute;&eacute;s
-          </p>
-        </div>
-
-        <!-- Role -->
-        <div class="flex items-center justify-center gap-2 mt-2">
-          <span class="gw-text text-xs text-right">offre<br />le produit ou service</span>
-          <label class="gw-toggle shrink-0">
-            <input v-model="isSeller" type="checkbox" />
-            <span class="gw-toggle-slider" />
-          </label>
-          <span class="gw-text text-xs">re&ccedil;oit<br />le produit ou service</span>
-        </div>
-
-        <!-- Other party name + add button -->
-        <div class="flex items-center gap-4 w-full max-w-80">
-          <div class="flex-1">
-            <label class="gw-text text-sm">Nom {{ !isSeller ? 'du receveur' : "de l'offreur" }}</label>
-            <input
-              v-model="otherName"
-              type="text"
-              maxlength="25"
-              class="gw-input w-full"
-            />
-          </div>
-          <button
-            v-if="!isBaseFriend"
-            class="gw-icon-btn self-end mb-0.5"
-            :disabled="!otherName || !otherDate || isFriend"
-            :title="friends.some((f) => f.name === otherName) ? 'Mettre \u00e0 jour' : 'Ajouter relation'"
-            @click="addFriend"
-          >
-            <svg v-if="friends.some((f) => f.name === otherName)" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16" /></svg>
-            <svg v-else class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-          </button>
-        </div>
-
-        <!-- Other party date -->
-        <div class="flex flex-col items-center gap-1 w-full max-w-80">
-          <label class="gw-text text-sm">
-            Anciennet&eacute; {{ otherName ? 'de ' + otherName : !isSeller ? 'du receveur' : "de l'offreur" }}
-          </label>
-          <input
-            v-model="otherDate"
-            type="date"
-            :min="Block0Date"
-            :max="todayDate"
-            class="gw-input w-full max-w-64"
-          />
-          <p :class="['gw-text text-center text-sm', { invisible: !otherDate }]">
-            {{ getDays(otherDate) || 0 }} DUs cr&eacute;&eacute;s
-          </p>
-        </div>
-
-        <!-- Price -->
-        <div class="flex items-center gap-3 justify-center">
-          <label class="gw-text text-sm whitespace-nowrap">&Eacute;valuation de r&eacute;f.</label>
-          <div class="relative">
-            <input
-              :value="price"
-              type="number"
-              min="0"
-              :step="Math.ceil(Number(price) / 10 / 2) || 1"
-              placeholder="0.00"
-              class="gw-input w-40 pr-14"
-              @input="price = Math.min(Number(($event.target as HTMLInputElement).value), 9999).toString()"
-            />
-            <select
-              v-model="currency"
-              class="absolute right-2 top-1/2 -translate-y-1/2 bg-transparent text-white/40 text-sm cursor-pointer border-0 outline-none"
-              @change="price = '1'"
-            >
-              <option value="DU" class="bg-surface-100">DU</option>
-              <option value="G1" class="bg-surface-100">&#x11E;1</option>
-            </select>
-          </div>
-        </div>
-
-        <!-- Discount -->
-        <div class="flex items-center gap-3 justify-center">
-          <label class="gw-text text-sm whitespace-nowrap">R&eacute;duction newbie</label>
-          <div class="relative">
-            <input
-              :value="discount"
-              type="number"
-              min="0"
-              :step="Math.ceil(Number(discount) / 10 / 2) || 1"
-              placeholder="0"
-              class="gw-input w-40 pr-8"
-              @input="discount = Math.min(Number(($event.target as HTMLInputElement).value), 99).toString()"
-            />
-            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-white/40 text-sm pointer-events-none">%</span>
-          </div>
-        </div>
-
-        <!-- Corrected price -->
-        <p class="gw-title mt-4">
-&Eacute;valuation corrig&eacute;e : {{ fr(getFinalPrice(isSeller ? myDate : otherDate)) }} {{ currencyDisplay }}
-        </p>
-      </div>
-    </div>
-
-    <!-- Relations table -->
-    <GratewizardGwRelations
-      :items="tableItems"
-      :base-friends="baseFriends"
-      result-label="ÉVAL."
-      @select="(f) => { otherName = f.name; otherDate = f.date; }"
-      @remove="removeFriend"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Block0Date, getDays, getRatio, dateToString, fr, type Friend, type TableFriend } from '~/utils/gratewizard';
-
-const todayDate = dateToString(new Date());
-const baseFriends: Friend[] = [
-  { name: 'Bloc 0', date: Block0Date },
-  { name: 'Arrivant juste', date: todayDate },
-];
-
-const price = useLocalStorage('price', '1');
-const discount = useLocalStorage('discount', '0');
-const myDate = useLocalStorage<string | undefined>('myDate', undefined);
-const isSeller = useLocalStorage('isSeller', true);
-const currency = useLocalStorage('currency', 'DU');
-const otherName = useLocalStorage('otherName', '');
-const otherDate = useLocalStorage<string | undefined>('otherDate', undefined);
-const friends = useLocalStorage<Friend[]>('friends', []);
-
-const currencyDisplay = computed(() => currency.value === 'G1' ? '\u011e1' : 'DU');
-
-function getFinalPrice(date: string | undefined): number {
-  if ((!date && !myDate.value) || (!date && !otherDate.value)) return Number(price.value);
-  const ratio = date
-    ? myDate.value && (!isSeller.value || !otherDate.value)
-      ? getRatio(date, myDate.value)
-      : getRatio(date, otherDate.value)
-    : 1;
-  const d = Number(discount.value) / 100;
-  const p = Number(price.value);
-  return (1 - d) * p + d * p * ratio;
-}
-
-function addFriend() {
-  if (!otherDate.value || !otherName.value) return;
-  if (friends.value.some((f) => f.name === otherName.value)) {
-    friends.value = friends.value.map((f) =>
-      f.name === otherName.value ? { ...f, date: otherDate.value! } : f
-    );
-  } else {
-    friends.value = [...friends.value, { name: otherName.value, date: otherDate.value }];
-  }
-}
-
-function removeFriend(name: string) {
-  friends.value = friends.value.filter((f) => f.name !== name);
-}
-
-const isBaseFriend = computed(() =>
-  baseFriends.some((f) => f.name === otherName.value && f.date === otherDate.value)
-);
-const isFriend = computed(() =>
-  friends.value.some((f) => f.name === otherName.value && f.date === otherDate.value)
-);
-
-const tableItems = computed<TableFriend[]>(() => {
-  return baseFriends.concat(friends.value).map((friend) => ({
-    ...friend,
-    displayName: friend.name.substring(0, 10),
-    displayDate: new Date(friend.date).toLocaleDateString('fr-FR', { dateStyle: 'short' }),
-    result: fr(getFinalPrice(friend.date)),
-    du: getDays(friend.date),
-  }));
-});
-</script>

app/components/gratewizard/GwCRS.vue

@@ -1,208 +0,0 @@
-<template>
-  <div class="flex flex-col gap-5 pt-4">
-    <div class="card-surface">
-      <div class="flex flex-col items-center gap-3">
-        <p class="gw-metric">Coefficient relatif au solde net</p>
-
-        <!-- Buyer name + add button -->
-        <div class="flex items-center gap-4 w-full max-w-80">
-          <div class="flex-1">
-            <label class="gw-text text-sm">Qui re&ccedil;oit le produit ou service ?</label>
-            <input
-              v-model="otherName"
-              type="text"
-              maxlength="25"
-              class="gw-input w-full"
-            />
-          </div>
-          <button
-            v-if="!isBaseFriend"
-            class="gw-icon-btn self-end mb-0.5"
-            :disabled="!otherName || !otherDate || isFriend"
-            :title="friends.some((f) => f.name === otherName) ? 'Mettre \u00e0 jour' : 'Ajouter relation'"
-            @click="addFriend"
-          >
-            <svg v-if="friends.some((f) => f.name === otherName)" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16" /></svg>
-            <svg v-else class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-          </button>
-        </div>
-
-        <!-- Buyer seniority -->
-        <div class="flex flex-col items-center gap-1 w-full max-w-80">
-          <label class="gw-text text-sm">
-            Anciennet&eacute; {{ otherName ? 'de ' + otherName : 'du receveur' }}
-          </label>
-          <input
-            v-model="otherDate"
-            type="date"
-            :min="Block0Date"
-            :max="todayDate"
-            class="gw-input w-full max-w-64"
-          />
-          <p :class="['gw-text text-center text-sm', { invisible: !otherDate }]">
-            {{ seniority || 0 }} DUs cr&eacute;&eacute;s
-          </p>
-        </div>
-
-        <!-- DU Balance -->
-        <div class="flex items-center gap-3 justify-center">
-          <label class="gw-text text-sm whitespace-nowrap">Solde DU{{ otherName ? ' de ' + otherName : ' du receveur' }}</label>
-          <div class="relative">
-            <input
-              :value="balance"
-              type="number"
-              min="0"
-              placeholder="0"
-              class="gw-input w-40 pr-10"
-              @input="balance = Math.max(0, Number(($event.target as HTMLInputElement).value)).toString()"
-            />
-            <span class="absolute right-2 top-1/2 -translate-y-1/2 text-white/40 text-sm pointer-events-none">DU</span>
-          </div>
-        </div>
-
-        <!-- Net balance -->
-        <p v-if="seniority > 0" class="gw-text text-center">
-          Solde net : {{ fr(netBalance, 0) }} DU
-          {{ netBalance < 0
-            ? ' (b\u00e9n\u00e9ficie de valeurs \u2192 majoration)'
-            : netBalance > 0
-            ? ' (alimente en valeurs \u2192 minoration)'
-            : ' (\u00e9quilibr\u00e9)' }}
-        </p>
-
-        <!-- Reference value -->
-        <div class="flex items-center gap-3 justify-center">
-          <label class="gw-text text-sm whitespace-nowrap">Valeur de r&eacute;f.</label>
-          <div class="relative">
-            <input
-              :value="refValue"
-              type="number"
-              min="0"
-              :step="Math.ceil(v / 10 / 2) || 1"
-              placeholder="0.00"
-              class="gw-input w-40 pr-14"
-              @input="refValue = Math.min(Number(($event.target as HTMLInputElement).value), 9999).toString()"
-            />
-            <select
-              v-model="currency"
-              class="absolute right-2 top-1/2 -translate-y-1/2 bg-transparent text-white/40 text-sm cursor-pointer border-0 outline-none"
-              @change="refValue = '1'"
-            >
-              <option value="DU" class="bg-surface-100">DU</option>
-              <option value="G1" class="bg-surface-100">&#x11E;1</option>
-            </select>
-          </div>
-        </div>
-
-        <!-- Weight slider -->
-        <div class="flex items-center gap-3 w-full max-w-80">
-          <span class="gw-text whitespace-nowrap text-sm">Poids</span>
-          <input
-            v-model="weight"
-            type="range"
-            min="0"
-            max="1"
-            step="0.01"
-            class="flex-1 h-2 rounded-lg appearance-none cursor-pointer accent-accent"
-          />
-          <span class="gw-text text-sm w-10 text-right">{{ fr(w) }}</span>
-        </div>
-
-        <!-- Formula + result -->
-        <div class="w-full max-w-sm text-center p-4 rounded-lg bg-surface-200">
-          <p class="gw-text text-xs font-mono mb-1">
-            V &times; (1 + w &times; (1 &minus; S / C))
-          </p>
-          <template v-if="seniority > 0">
-            <p class="gw-text text-xs font-mono mb-2">
-              {{ fr(v) }} &times; (1 + {{ fr(w) }} &times; (1 &minus; {{ fr(s, 0) }} / {{ fr(seniority, 0) }}))
-              = {{ fr(v) }} &times; {{ fr(factor) }}
-            </p>
-            <p class="gw-title">= {{ fr(correctedValue) }} {{ currencyDisplay }}</p>
-          </template>
-          <p v-else class="gw-text text-xs">Renseigner l'anciennet&eacute; pour calculer</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Relations table (shared with CRA) -->
-    <GratewizardGwRelations
-      :items="tableItems"
-      :base-friends="baseFriends"
-      result-label="VALEUR"
-      @select="(f) => { otherName = f.name; otherDate = f.date; }"
-      @remove="removeFriend"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Block0Date, getDays, dateToString, fr, type Friend, type TableFriend } from '~/utils/gratewizard';
-
-const todayDate = dateToString(new Date());
-const baseFriends: Friend[] = [{ name: 'Bloc 0', date: Block0Date }];
-
-// Shared state with CRA (same localStorage keys)
-const currency = useLocalStorage('currency', 'DU');
-const friends = useLocalStorage<Friend[]>('friends', []);
-const otherName = useLocalStorage('otherName', '');
-const otherDate = useLocalStorage<string | undefined>('otherDate', undefined);
-
-// CRS-specific state
-const refValue = useLocalStorage('crs-value', '1');
-const balance = useLocalStorage('crs-balance', '0');
-const weight = useLocalStorage('crs-weight', '0.50');
-
-const currencyDisplay = computed(() => currency.value === 'G1' ? '\u011e1' : 'DU');
-const seniority = computed(() => getDays(otherDate.value));
-const s = computed(() => Number(balance.value));
-const w = computed(() => Number(weight.value));
-const v = computed(() => Number(refValue.value));
-const netBalance = computed(() => s.value - seniority.value);
-
-const correctedValue = computed(() =>
-  seniority.value > 0 ? v.value * (1 + w.value * (1 - s.value / seniority.value)) : v.value
-);
-const factor = computed(() =>
-  seniority.value > 0 ? 1 + w.value * (1 - s.value / seniority.value) : 1
-);
-
-// Friend management (shared with CRA)
-function addFriend() {
-  if (!otherDate.value || !otherName.value) return;
-  if (friends.value.some((f) => f.name === otherName.value)) {
-    friends.value = friends.value.map((f) =>
-      f.name === otherName.value ? { ...f, date: otherDate.value! } : f
-    );
-  } else {
-    friends.value = [...friends.value, { name: otherName.value, date: otherDate.value }];
-  }
-}
-
-function removeFriend(name: string) {
-  friends.value = friends.value.filter((f) => f.name !== name);
-}
-
-const isBaseFriend = computed(() =>
-  baseFriends.some((f) => f.name === otherName.value && f.date === otherDate.value)
-);
-const isFriend = computed(() =>
-  friends.value.some((f) => f.name === otherName.value && f.date === otherDate.value)
-);
-
-function getCorrectedValueFor(friendDate: string): number {
-  const c = getDays(friendDate);
-  if (c <= 0) return v.value;
-  return v.value * (1 + w.value * (1 - s.value / c));
-}
-
-const tableItems = computed<TableFriend[]>(() => {
-  return baseFriends.concat(friends.value).map((f) => ({
-    ...f,
-    displayName: f.name.substring(0, 10),
-    displayDate: new Date(f.date).toLocaleDateString('fr-FR', { dateStyle: 'short' }),
-    result: fr(getCorrectedValueFor(f.date)),
-    du: getDays(f.date),
-  }));
-});
-</script>

app/components/gratewizard/GwMN.vue

@@ -1,272 +0,0 @@
-<template>
-  <div class="flex flex-col gap-5 pt-4">
-    <!-- Error state -->
-    <div v-if="error" class="p-8 flex flex-col gap-4">
-      <p class="gw-text">Erreur : {{ error }}</p>
-    </div>
-
-    <template v-else>
-      <!-- Currency selector -->
-      <div class="flex items-center justify-center gap-2">
-        <span class="gw-text text-xs">DU</span>
-        <label class="gw-toggle">
-          <input
-            type="checkbox"
-            :checked="unit === 'G1'"
-            @change="unit = ($event.target as HTMLInputElement).checked ? 'G1' : 'DU'"
-          />
-          <span class="gw-toggle-slider" />
-        </label>
-        <span class="gw-text text-xs">&#x11E;1</span>
-      </div>
-
-      <!-- Monetary data card -->
-      <div ref="topRef" class="card-surface">
-        <div class="flex flex-col items-center gap-3">
-          <p class="gw-metric">Masse mon&eacute;taire / Membres</p>
-
-          <span v-if="polygon" class="gw-chip">
-            {{ activePerimeterName ?? 'S\u00e9lection manuelle' }}
-          </span>
-
-          <!-- Loading -->
-          <div v-if="loading" class="flex flex-col items-center gap-2 py-4">
-            <div class="gw-spinner" />
-            <p class="gw-text text-sm">Connexion au r&eacute;seau...</p>
-          </div>
-
-          <!-- Data grid -->
-          <div v-else-if="monetary" class="grid grid-cols-2 gap-2 w-full max-w-sm">
-            <div :class="['text-center p-2 rounded-md text-xs', polygon ? 'bg-accent/10' : 'bg-surface-200']">
-              <p class="gw-text">M (masse{{ polygon ? ' locale' : '' }})</p>
-              <p class="gw-title mt-1">
-                {{ mnIsLoading ? '...' : formatValue(displayM!, unit, duDaily) }}
-              </p>
-            </div>
-            <div :class="['text-center p-2 rounded-md text-xs', polygon ? 'bg-accent/10' : 'bg-surface-200']">
-              <p class="gw-text">N (membres{{ polygon ? ' locaux' : '' }})</p>
-              <p class="gw-title mt-1">{{ displayN.toLocaleString('fr-FR') }}</p>
-            </div>
-            <div :class="['text-center p-2 rounded-md text-xs', polygon ? 'bg-accent/10' : 'bg-surface-200']">
-              <p class="gw-text">M / N{{ polygon ? ' (local)' : '' }}</p>
-              <p class="gw-title mt-1">
-                {{ mnIsLoading ? '...' : formatValue(displayMN!, unit, duDaily) }}
-              </p>
-            </div>
-            <div class="text-center p-2 rounded-md text-xs bg-surface-200">
-              <p class="gw-text">DU journalier</p>
-              <p class="gw-title mt-1">{{ fr(duDaily) }} &#x11E;1</p>
-            </div>
-
-            <!-- Extra cells when polygon is active -->
-            <template v-if="polygon && nLocal > 0 && monetary">
-              <div class="text-center p-2 rounded-md text-xs bg-surface-200">
-                <p class="gw-text">M / N (r&eacute;seau)</p>
-                <p class="gw-title mt-1">{{ formatValue(mnG1, unit, duDaily) }}</p>
-              </div>
-              <div class="text-center p-2 rounded-md text-xs bg-accent/10">
-                <p class="gw-text">Part du r&eacute;seau</p>
-                <p class="gw-title mt-1">{{ fr(nLocal / monetary.membersCount * 100) }} %</p>
-              </div>
-            </template>
-
-            <div class="col-span-2 text-center">
-              <p class="gw-text">
-                Bloc #{{ monetary.blockNumber }} &mdash;
-                {{ new Date(monetary.timestamp).toLocaleDateString('fr-FR', { dateStyle: 'long' }) }}
-              </p>
-            </div>
-          </div>
-
-          <!-- Clear selection button -->
-          <div v-if="polygon" class="flex flex-col items-center gap-2">
-            <button
-              class="gw-btn gw-btn-danger"
-              @click="handleClearSelection"
-            >
-              P&eacute;rim&egrave;tre monde
-            </button>
-          </div>
-
-          <!-- Saved perimeters -->
-          <GratewizardGwPerimeterList
-            :perimeters="perimeters"
-            @load="handleLoadPerimeter"
-            @delete="deletePerimeter"
-          />
-        </div>
-      </div>
-
-      <!-- Map card -->
-      <div class="card-surface">
-        <div class="flex flex-col items-center gap-3">
-          <p class="gw-metric">
-            Carte des membres g&eacute;olocalis&eacute;s
-            <span v-if="!geoLoading && v1Pubkeys" class="gw-chip ml-2">
-              {{ geoMembers.length.toLocaleString('fr-FR') }}
-            </span>
-          </p>
-
-          <p v-if="geoError" class="gw-text">Erreur Cesium+ : {{ geoError }}</p>
-
-          <!-- Loading map -->
-          <div v-if="geoLoading || !v1Pubkeys" class="flex flex-col items-center gap-2 py-4">
-            <div class="gw-spinner" />
-            <p class="gw-text text-sm">Chargement des profils g&eacute;olocalis&eacute;s...</p>
-          </div>
-
-          <!-- Map -->
-          <template v-else>
-            <GratewizardGwMap
-              :members="geoMembers"
-              :clear-trigger="clearTrigger"
-              :load-polygon="loadPolygonTrigger"
-              @polygon-change="handlePolygonChange"
-            />
-
-            <p v-if="!loading && monetary" class="gw-text">
-              {{ geoMembers.length.toLocaleString('fr-FR') }} membres certifi&eacute;s g&eacute;olocalis&eacute;s sur
-              {{ monetary.membersCount.toLocaleString('fr-FR') }} membres au total
-            </p>
-
-            <!-- Save perimeter form -->
-            <div v-if="polygon" class="flex gap-2 items-center">
-              <input
-                v-model="perimeterName"
-                type="text"
-                placeholder="Nom du p&eacute;rim&egrave;tre"
-                class="gw-input"
-                @keydown.enter="handleSavePerimeter"
-              />
-              <button
-                class="gw-btn gw-btn-accent"
-                :disabled="!perimeterName.trim()"
-                @click="handleSavePerimeter"
-              >
-                Sauvegarder
-              </button>
-            </div>
-          </template>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { duniter, type MonetaryData } from '~/services/duniter';
-import { pointInPolygon, fr, formatValue, countUdSince, type CurrencyUnit } from '~/utils/gratewizard';
-import type { GeoMember } from '~/composables/useCesiumProfiles';
-import type { SavedPerimeter } from '~/composables/useSavedPerimeters';
-
-const unit = useLocalStorage<CurrencyUnit>('gw-currency-unit', 'DU');
-
-const monetary = ref<MonetaryData | null>(null);
-const v1Pubkeys = ref<string[] | null>(null);
-const loading = ref(true);
-const error = ref<string | null>(null);
-const polygon = ref<[number, number][] | null>(null);
-const clearTrigger = ref(0);
-const loadPolygonTrigger = ref<{ coords: [number, number][]; name: string } | null>(null);
-const perimeterName = ref('');
-const activePerimeterName = ref<string | null>(null);
-const localMNg1 = ref<number | null>(null);
-const mnLoading = ref(false);
-const topRef = ref<HTMLDivElement | null>(null);
-
-const { geoMembers, loading: geoLoading, error: geoError } = useCesiumProfiles(v1Pubkeys);
-const { perimeters, savePerimeter, deletePerimeter } = useSavedPerimeters();
-
-// Fetch monetary data on mount
-onMounted(async () => {
-  try {
-    const [mon, pubkeys] = await Promise.all([
-      duniter.fetchMonetary(),
-      duniter.fetchMemberPubkeys(),
-    ]);
-    monetary.value = mon;
-    v1Pubkeys.value = pubkeys;
-  } catch (e: any) {
-    error.value = e.message;
-  } finally {
-    loading.value = false;
-  }
-});
-
-const duDaily = computed(() => monetary.value ? Number(monetary.value.amount) / 100 : 1);
-const massG1 = computed(() => monetary.value ? Number(monetary.value.monetaryMass) / 100 : 0);
-const mnG1 = computed(() => monetary.value && monetary.value.membersCount ? massG1.value / monetary.value.membersCount : 0);
-
-const localMembers = computed(() => {
-  if (!polygon.value) return [];
-  return geoMembers.value.filter((m) => pointInPolygon(m.lat, m.lon, polygon.value!));
-});
-
-const nLocal = computed(() => localMembers.value.length);
-
-// Compute local M/N based on member seniority
-watch([polygon, localMembers, monetary], async ([poly, members, mon]) => {
-  if (!poly || members.length === 0 || !mon) {
-    localMNg1.value = null;
-    return;
-  }
-
-  mnLoading.value = true;
-
-  try {
-    const pubkeys = members.map((m) => m.pubkey);
-    const joinBlocks = await duniter.fetchMemberJoinBlocks(pubkeys);
-
-    const udBlocks = mon.udBlockNumbers;
-    let totalSeniority = 0;
-    let validCount = 0;
-
-    for (const pk of pubkeys) {
-      const joinBlock = joinBlocks.get(pk);
-      if (joinBlock === undefined) continue;
-      totalSeniority += countUdSince(udBlocks, joinBlock);
-      validCount++;
-    }
-
-    if (validCount > 0) {
-      const localAvgSeniority = totalSeniority / validCount;
-      const globalAvgSeniority =
-        Number(mon.monetaryMass) / (Number(mon.amount) * mon.membersCount);
-      localMNg1.value = mnG1.value * (localAvgSeniority / globalAvgSeniority);
-    }
-  } catch (e) {
-    console.error('Failed to compute local M/N:', e);
-  } finally {
-    mnLoading.value = false;
-  }
-});
-
-const displayN = computed(() => polygon.value ? nLocal.value : monetary.value?.membersCount ?? 0);
-const displayMN = computed(() => polygon.value ? localMNg1.value : mnG1.value);
-const displayM = computed(() => polygon.value ? (localMNg1.value !== null ? localMNg1.value * nLocal.value : null) : massG1.value);
-const mnIsLoading = computed(() => polygon.value && (mnLoading.value || localMNg1.value === null));
-
-function handlePolygonChange(poly: [number, number][] | null, name?: string) {
-  polygon.value = poly;
-  activePerimeterName.value = name ?? null;
-  if (poly) nextTick(() => topRef.value?.scrollIntoView({ behavior: 'smooth' }));
-}
-
-function handleClearSelection() {
-  polygon.value = null;
-  activePerimeterName.value = null;
-  localMNg1.value = null;
-  clearTrigger.value++;
-  loadPolygonTrigger.value = null;
-}
-
-function handleSavePerimeter() {
-  if (!polygon.value || !perimeterName.value.trim()) return;
-  savePerimeter(perimeterName.value.trim(), polygon.value);
-  perimeterName.value = '';
-}
-
-function handleLoadPerimeter(p: SavedPerimeter) {
-  loadPolygonTrigger.value = { coords: p.polygon, name: p.name };
-}
-</script>

app/components/gratewizard/GwMap.client.vue

@@ -1,146 +0,0 @@
-<template>
-  <div ref="containerRef" class="gw-map" />
-</template>
-
-<script setup lang="ts">
-import L from 'leaflet';
-import 'leaflet/dist/leaflet.css';
-import 'leaflet.markercluster';
-import 'leaflet.markercluster/dist/MarkerCluster.css';
-import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
-import '@geoman-io/leaflet-geoman-free';
-import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
-import type { GeoMember } from '~/composables/useCesiumProfiles';
-
-type LoadPolygon = { coords: [number, number][]; name: string } | null;
-
-const props = defineProps<{
-  members: GeoMember[];
-  clearTrigger?: number;
-  loadPolygon?: LoadPolygon;
-}>();
-
-const emit = defineEmits<{
-  polygonChange: [polygon: [number, number][] | null, name?: string];
-}>();
-
-const containerRef = ref<HTMLDivElement | null>(null);
-let map: L.Map | null = null;
-let cluster: any = null;
-let polygonLayer: L.Layer | null = null;
-
-onMounted(() => {
-  if (!containerRef.value) return;
-
-  map = L.map(containerRef.value).setView([46.5, 2.5], 6);
-  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-  }).addTo(map);
-
-  cluster = (L as any).markerClusterGroup();
-  map.addLayer(cluster);
-
-  // Geoman controls
-  if (map.pm) {
-    map.pm.addControls({
-      position: 'topleft',
-      drawCircle: false,
-      drawCircleMarker: false,
-      drawMarker: false,
-      drawPolyline: false,
-      drawText: false,
-      editMode: false,
-      dragMode: false,
-      cutPolygon: false,
-      rotateMode: false,
-      removalMode: false,
-    });
-    map.pm.setLang('fr');
-  }
-
-  map.on('pm:create', (e: any) => {
-    if (polygonLayer) {
-      map!.removeLayer(polygonLayer);
-    }
-    polygonLayer = e.layer;
-    const latlngs = (e.layer as L.Polygon).getLatLngs()[0] as L.LatLng[];
-    emit('polygonChange', latlngs.map((ll) => [ll.lat, ll.lng]));
-  });
-
-  map.on('pm:remove', () => {
-    polygonLayer = null;
-    emit('polygonChange', null);
-  });
-
-  // Populate initial markers
-  updateMarkers(props.members);
-});
-
-onUnmounted(() => {
-  if (map) {
-    map.remove();
-    map = null;
-    cluster = null;
-  }
-});
-
-// Clear polygon when clearTrigger changes
-watch(() => props.clearTrigger, () => {
-  if (!props.clearTrigger || !map) return;
-  if (polygonLayer) {
-    const center = map.getCenter();
-    const zoom = map.getZoom();
-    map.removeLayer(polygonLayer);
-    polygonLayer = null;
-    map.setView(center, zoom, { animate: false });
-  }
-  if (map.pm) {
-    map.pm.disableDraw();
-  }
-});
-
-// Load a saved polygon
-watch(() => props.loadPolygon, (loadPolygon) => {
-  if (!map || !loadPolygon) return;
-
-  if (polygonLayer) {
-    map.removeLayer(polygonLayer);
-    polygonLayer = null;
-  }
-
-  const latlngs = loadPolygon.coords.map(([lat, lng]) => L.latLng(lat, lng));
-  const poly = L.polygon(latlngs, { color: '#3388ff' }).addTo(map);
-  polygonLayer = poly;
-  map.fitBounds(poly.getBounds(), { padding: [20, 20] });
-  emit('polygonChange', loadPolygon.coords, loadPolygon.name);
-});
-
-// Update markers when members change
-function updateMarkers(members: GeoMember[]) {
-  if (!cluster) return;
-  cluster.clearLayers();
-  const markers = members.map((m) =>
-    L.circleMarker([m.lat, m.lon], {
-      radius: 6,
-      color: '#f59e0b',
-      fillColor: '#f59e0b',
-      fillOpacity: 0.7,
-    }).bindPopup(
-      `<strong>${m.title || m.pubkey.slice(0, 8)}</strong>${m.city ? '<br>' + m.city : ''}`
-    )
-  );
-  cluster.addLayers(markers);
-}
-
-watch(() => props.members, (members) => {
-  updateMarkers(members);
-});
-</script>
-
-<style scoped>
-.gw-map {
-  height: 500px;
-  width: 100%;
-  border-radius: 0.75rem;
-}
-</style>

app/components/gratewizard/GwPerimeterList.vue

@@ -1,40 +0,0 @@
-<template>
-  <div v-if="perimeters.length > 0" class="w-full flex flex-col gap-1">
-    <p class="text-xs font-semibold text-white/50 uppercase tracking-wide">P&eacute;rim&egrave;tres sauvegard&eacute;s</p>
-    <div class="flex flex-col gap-0.5 w-full">
-      <div
-        v-for="p in perimeters"
-        :key="p.name"
-        class="gw-perimeter-item"
-        @click="emit('load', p)"
-      >
-        <div class="flex items-center gap-1.5 min-w-0">
-          <span class="text-accent text-xs shrink-0">&#x1F4CD;</span>
-          <span class="text-xs font-medium truncate">{{ p.name }}</span>
-          <span class="text-[10px] text-white/30 shrink-0">
-            {{ new Date(p.createdAt).toLocaleDateString('fr-FR', { dateStyle: 'short' }) }}
-          </span>
-        </div>
-        <button
-          class="gw-perimeter-delete"
-          @click.stop="emit('delete', p.name)"
-        >
-          &times;
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { SavedPerimeter } from '~/composables/useSavedPerimeters';
-
-defineProps<{
-  perimeters: SavedPerimeter[];
-}>();
-
-const emit = defineEmits<{
-  load: [perimeter: SavedPerimeter];
-  delete: [name: string];
-}>();
-</script>

app/components/gratewizard/GwRelations.vue

@@ -1,141 +0,0 @@
-<template>
-  <div class="card-surface !p-0">
-    <div class="flex items-center justify-center py-3 px-4">
-      <p class="gw-metric text-sm">Mes relations</p>
-    </div>
-    <div class="overflow-x-auto">
-      <table class="w-full text-sm">
-        <thead>
-          <tr class="border-b border-white/8">
-            <th
-              v-for="col in columns"
-              :key="col.key"
-              class="px-3 py-2 text-left text-xs font-semibold text-white/60 uppercase cursor-pointer select-none hover:text-white/80 transition-colors"
-              @click="col.sortable && toggleSort(col.key)"
-            >
-              <span class="inline-flex items-center gap-1">
-                {{ col.label }}
-                <span v-if="col.sortable && sortKey === col.key" class="text-accent">
-                  {{ sortAsc ? '\u25B2' : '\u25BC' }}
-                </span>
-              </span>
-            </th>
-            <th class="px-3 py-2 w-8" />
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="sortedItems.length === 0">
-            <td :colspan="columns.length + 1" class="px-3 py-3 text-center text-white/40 text-xs">
-              Aucune relation
-            </td>
-          </tr>
-          <tr
-            v-for="(friend, index) in sortedItems"
-            :key="friend.name"
-            class="cursor-pointer border-b border-white/5 transition-colors"
-            :class="index % 2 === 0 ? 'bg-surface-200/50' : ''"
-            @click="emit('select', friend)"
-          >
-            <td class="px-3 py-1.5">{{ friend.displayName }}</td>
-            <td v-if="resultLabel" class="px-3 py-1.5">{{ friend.result }}</td>
-            <td class="px-3 py-1.5">{{ friend.displayDate }}</td>
-            <td class="px-3 py-1.5">{{ friend.du }}</td>
-            <td class="px-3 py-1.5 w-8">
-              <button
-                v-if="!isBaseFriend(friend)"
-                class="text-red-400 hover:text-red-300 transition-colors"
-                title="Effacer relation"
-                @click.stop="emit('remove', friend.name)"
-              >
-                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                  <circle cx="12" cy="12" r="10" />
-                  <path d="M15 9l-6 6M9 9l6 6" />
-                </svg>
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Block0Date, type TableFriend } from '~/utils/gratewizard';
-
-const props = defineProps<{
-  items: TableFriend[];
-  baseFriends: { name: string; date: string }[];
-  resultLabel?: string;
-}>();
-
-const emit = defineEmits<{
-  select: [friend: TableFriend];
-  remove: [name: string];
-}>();
-
-const sortKey = ref<string>('name');
-const sortAsc = ref(true);
-
-const columns = computed(() => {
-  const cols = [
-    { key: 'name', label: 'NOM', sortable: true },
-  ];
-  if (props.resultLabel) {
-    cols.push({ key: 'result', label: props.resultLabel, sortable: true });
-  }
-  cols.push(
-    { key: 'date', label: 'DATE', sortable: true },
-    { key: 'du', label: 'DU', sortable: true },
-  );
-  return cols;
-});
-
-function toggleSort(key: string) {
-  if (sortKey.value === key) {
-    sortAsc.value = !sortAsc.value;
-  } else {
-    sortKey.value = key;
-    sortAsc.value = true;
-  }
-}
-
-const sortedItems = computed(() => {
-  const baseNames = new Set(props.baseFriends.map((f) => f.name));
-  const bases: TableFriend[] = [];
-  const others: TableFriend[] = [];
-
-  for (const item of props.items) {
-    if (baseNames.has(item.name)) bases.push(item);
-    else others.push(item);
-  }
-
-  const key = sortKey.value;
-  const dir = sortAsc.value ? 1 : -1;
-
-  others.sort((a, b) => {
-    const first = a[key];
-    const second = b[key];
-    let cmp = 0;
-    switch (key) {
-      case 'name':
-        cmp = String(first).localeCompare(String(second));
-        break;
-      case 'result':
-      case 'du':
-        cmp = Number(first) - Number(second);
-        break;
-      case 'date':
-        cmp = new Date(a.date).getTime() - new Date(b.date).getTime();
-        break;
-    }
-    return cmp * dir;
-  });
-
-  return [...bases, ...others];
-});
-
-function isBaseFriend(friend: TableFriend): boolean {
-  return props.baseFriends.some(({ name, date }) => name === friend.name && date === friend.date);
-}
-</script>

app/components/gratewizard/GwTabs.vue

@@ -1,41 +0,0 @@
-<template>
-  <div class="flex flex-col items-center">
-    <p class="gw-metric pb-3" style="font-size: 1.75rem">grateWizard</p>
-
-    <!-- Tab buttons -->
-    <div class="flex gap-0.5 p-0.5 rounded-full bg-surface-200">
-      <button
-        v-for="tab in tabs"
-        :key="tab.key"
-        class="gw-tab-btn"
-        :class="activeTab === tab.key
-          ? 'gw-tab-active'
-          : 'gw-tab-inactive'"
-        :disabled="tab.disabled"
-        @click="activeTab = tab.key"
-      >
-        {{ tab.label }}
-      </button>
-    </div>
-
-    <!-- Tab content with KeepAlive -->
-    <div class="w-full">
-      <KeepAlive>
-        <GratewizardGwMN v-if="activeTab === '1'" />
-        <GratewizardGwCRA v-else-if="activeTab === '2'" />
-        <GratewizardGwCRS v-else-if="activeTab === '3'" />
-      </KeepAlive>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const tabs = [
-  { key: '1', label: 'M/N local', disabled: false },
-  { key: '2', label: "A l'anciennet\u00e9", disabled: false },
-  { key: '3', label: 'Au solde', disabled: false },
-  { key: '4', label: 'Au volume', disabled: true },
-];
-
-const activeTab = ref('1');
-</script>

app/components/player/PlayerPersistent.vue

@@ -5,106 +5,107 @@
       ref="widgetRef"
       class="mini-player"
     >
-      <!-- Expanded panel (above the pill) -->
+      <!-- ═══ EXPANDED PANEL ═══ -->
       <Transition name="panel-expand">
         <div v-if="isExpanded" class="mini-panel">
-          <!-- Visualizer -->
-          <div class="mini-panel-section">
-            <KeepAlive>
-              <PlayerVisualizer />
-            </KeepAlive>
+          <!-- Track info + visualizer -->
+          <div class="panel-top">
+            <div class="panel-track">
+              <p class="panel-title">{{ store.currentSong.title }}</p>
+              <p class="panel-artist">{{ store.currentSong.artist }}</p>
+            </div>
+            <div class="panel-viz">
+              <KeepAlive>
+                <PlayerVisualizer />
+              </KeepAlive>
+            </div>
           </div>
 
-          <!-- Progress bar + controls -->
-          <div class="mini-panel-section">
+          <!-- Progress -->
+          <div class="panel-progress">
             <PlayerProgress />
-            <div class="mt-3 flex items-center justify-center">
-              <PlayerControls />
+            <div class="panel-times">
+              <span>{{ store.formattedCurrentTime }}</span>
+              <span>{{ store.formattedDuration }}</span>
             </div>
           </div>
 
-          <!-- Volume + mode + time -->
-          <div class="mini-panel-section mini-panel-row">
-            <PlayerModeToggle />
-            <div class="flex items-center gap-2">
-              <button class="btn-ghost !p-1" @click="toggleMute">
-                <div :class="volumeIcon" class="h-4 w-4" />
-              </button>
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.01"
-                :value="store.volume"
-                class="volume-slider w-20"
-                @input="handleVolumeChange"
-              >
-            </div>
-            <span class="font-mono text-xs text-white/40">
-              {{ store.formattedCurrentTime }} / {{ store.formattedDuration }}
-            </span>
+          <!-- Controls -->
+          <div class="panel-controls">
+            <PlayerControls />
+          </div>
+
+          <!-- Volume -->
+          <div class="panel-volume-row">
+            <button class="panel-vol-btn" @click="toggleMute">
+              <div :class="volumeIcon" class="h-3.5 w-3.5" />
+            </button>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              :value="store.volume"
+              class="volume-slider"
+              @input="handleVolumeChange"
+            >
+          </div>
+
+          <!-- Lyrics (if available) -->
+          <div v-if="store.currentSong.lyrics" class="panel-lyrics">
+            <pre class="panel-lyrics-text">{{ store.currentSong.lyrics }}</pre>
           </div>
 
           <!-- Playlist -->
-          <div class="mini-panel-playlist">
+          <div class="panel-playlist">
             <PlayerPlaylist />
           </div>
         </div>
       </Transition>
 
-      <!-- Compact pill (always visible) -->
-      <div class="mini-pill" @click="onPillClick">
-        <!-- SVG circular progress ring -->
-        <div class="mini-pill-ring">
-          <svg viewBox="0 0 40 40" class="mini-pill-svg">
+      <!-- ═══ COMPACT PILL ═══ -->
+      <div class="mini-pill" @click="toggleExpanded">
+        <!-- Progress ring -->
+        <div class="pill-ring">
+          <svg viewBox="0 0 36 36" class="pill-ring-svg">
             <circle
-              cx="20" cy="20" r="18"
+              cx="18" cy="18" r="16"
               fill="none"
-              stroke="hsl(0 0% 100% / 0.1)"
-              stroke-width="2.5"
+              stroke="hsl(0 0% 100% / 0.06)"
+              stroke-width="2"
             />
             <circle
-              cx="20" cy="20" r="18"
+              cx="18" cy="18" r="16"
               fill="none"
               stroke="hsl(12 76% 48%)"
-              stroke-width="2.5"
+              stroke-width="2"
               stroke-linecap="round"
               :stroke-dasharray="circumference"
               :stroke-dashoffset="circumference - (circumference * store.progress / 100)"
-              class="mini-pill-progress"
+              class="pill-ring-progress"
             />
           </svg>
-          <!-- Cover image inside ring -->
-          <div class="mini-pill-cover">
-            <img
-              v-if="store.currentSong.coverImage"
-              :src="store.currentSong.coverImage"
-              :alt="store.currentSong.title"
-              class="h-full w-full object-cover"
-            >
-            <div v-else class="i-lucide-music h-4 w-4 text-primary" />
-          </div>
         </div>
 
         <!-- Title -->
-        <span class="mini-pill-title">{{ store.currentSong.title }}</span>
+        <span class="pill-title">{{ store.currentSong.title }}</span>
 
         <!-- Play/Pause -->
         <button
-          class="mini-pill-btn"
+          class="pill-play"
           :aria-label="store.isPlaying ? 'Pause' : 'Lecture'"
           @click.stop="togglePlayPause"
         >
           <div :class="store.isPlaying ? 'i-lucide-pause' : 'i-lucide-play'" class="h-4 w-4" />
         </button>
 
-        <!-- Expand chevron -->
+        <!-- Expand -->
         <button
-          class="mini-pill-btn"
+          class="pill-expand"
           :aria-label="isExpanded ? 'Réduire' : 'Développer'"
           @click.stop="toggleExpanded"
         >
-          <div :class="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-4 w-4" />
+          <div :class="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-3.5 w-3.5" />
         </button>
       </div>
     </div>
@@ -123,7 +124,7 @@ const widgetRef = ref<HTMLElement>()
 const isExpanded = ref(false)
 let previousVolume = 0.8
 
-const circumference = 2 * Math.PI * 18 // r=18
+const circumference = 2 * Math.PI * 16
 
 const volumeIcon = computed(() => {
   if (store.volume === 0) return 'i-lucide-volume-x'
@@ -151,11 +152,6 @@ function toggleExpanded() {
   isExpanded.value = !isExpanded.value
 }
 
-function onPillClick() {
-  isExpanded.value = !isExpanded.value
-}
-
-// Close expanded panel on click outside
 onClickOutside(widgetRef, () => {
   if (isExpanded.value) isExpanded.value = false
 })
@@ -163,168 +159,247 @@ onClickOutside(widgetRef, () => {
 
 <style scoped>
 /* ═══════════════════════════════════════
-   MINI-PLAYER FLOATING WIDGET
+   POSITION
    ═══════════════════════════════════════ */
 .mini-player {
   position: fixed;
   bottom: 1rem;
-  right: 1rem;
+  right: max(1rem, calc((100vw - 80rem) / 2));
   z-index: 70;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  max-width: 360px;
 }
 
-/* ─── COMPACT PILL ─── */
+/* ═══════════════════════════════════════
+   PILL
+   ═══════════════════════════════════════ */
 .mini-pill {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.375rem 0.625rem 0.375rem 0.375rem;
+  gap: 0.625rem;
+  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
   border-radius: 9999px;
-  background: hsl(20 8% 8% / 0.9);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid hsl(0 0% 100% / 0.1);
+  background: hsl(20 8% 7% / 0.92);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
   cursor: pointer;
   transition: all 0.3s var(--ease-out-expo);
-  box-shadow: 0 4px 24px hsl(0 0% 0% / 0.4);
+  box-shadow: 0 4px 20px hsl(0 0% 0% / 0.35);
 }
 .mini-pill:hover {
-  border-color: hsl(12 76% 48% / 0.3);
-  box-shadow: 0 4px 32px hsl(12 76% 48% / 0.15);
+  background: hsl(20 8% 9% / 0.96);
 }
 
-.mini-pill-ring {
-  position: relative;
-  width: 2.25rem;
-  height: 2.25rem;
+/* Progress ring */
+.pill-ring {
+  width: 1.75rem;
+  height: 1.75rem;
   flex-shrink: 0;
 }
-.mini-pill-svg {
+.pill-ring-svg {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
 }
-.mini-pill-progress {
+.pill-ring-progress {
   transition: stroke-dashoffset 0.3s ease;
 }
-.mini-pill-cover {
-  position: absolute;
-  inset: 4px;
-  border-radius: 50%;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: hsl(20 8% 12%);
-}
 
-.mini-pill-title {
+/* Title */
+.pill-title {
   font-size: 0.8rem;
   font-weight: 500;
-  color: white;
+  color: hsl(0 0% 100% / 0.8);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 140px;
+  max-width: 160px;
 }
 
-.mini-pill-btn {
+/* Play/Pause — white circle */
+.pill-play {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: white;
+  border: none;
+  color: hsl(20 8% 6%);
+  cursor: pointer;
+  transition: transform 0.15s var(--ease-out-expo);
+  flex-shrink: 0;
+}
+.pill-play:hover { transform: scale(1.08); }
+.pill-play:active { transform: scale(0.94); }
+
+/* Expand chevron */
+.pill-expand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
   border-radius: 50%;
   background: transparent;
   border: none;
-  color: hsl(0 0% 100% / 0.7);
+  color: hsl(0 0% 100% / 0.3);
   cursor: pointer;
-  transition: all 0.2s;
+  transition: color 0.2s;
   flex-shrink: 0;
 }
-.mini-pill-btn:hover {
-  color: white;
-  background: hsl(0 0% 100% / 0.1);
-}
+.pill-expand:hover { color: hsl(0 0% 100% / 0.7); }
 
-/* ─── EXPANDED PANEL ─── */
+/* ═══════════════════════════════════════
+   PANEL
+   ═══════════════════════════════════════ */
 .mini-panel {
-  width: 340px;
+  width: 360px;
   margin-bottom: 0.5rem;
   border-radius: 1rem;
-  background: hsl(20 8% 6% / 0.95);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid hsl(0 0% 100% / 0.08);
-  box-shadow: 0 8px 40px hsl(0 0% 0% / 0.5);
+  background: hsl(20 8% 6% / 0.94);
+  backdrop-filter: blur(32px);
+  -webkit-backdrop-filter: blur(32px);
+  box-shadow: 0 8px 40px hsl(0 0% 0% / 0.4);
   overflow: hidden;
 }
 
-.mini-panel-section {
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid hsl(0 0% 100% / 0.06);
+/* ─── Track + visualizer ─── */
+.panel-top {
+  padding: 1rem 1.25rem 0.5rem;
 }
-.mini-panel-section:last-child {
-  border-bottom: none;
+.panel-track {
+  margin-bottom: 0.5rem;
+}
+.panel-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: white;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.panel-artist {
+  font-size: 0.75rem;
+  color: hsl(0 0% 100% / 0.35);
+  margin-top: 0.125rem;
+}
+.panel-viz {
+  opacity: 0.6;
 }
 
-.mini-panel-row {
+/* ─── Progress ─── */
+.panel-progress {
+  padding: 0.5rem 1.25rem 0;
+}
+.panel-times {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.25rem;
+  font-family: var(--font-mono, monospace);
+  font-size: 0.625rem;
+  color: hsl(0 0% 100% / 0.25);
+  letter-spacing: 0.02em;
+}
+
+/* ─── Controls ─── */
+.panel-controls {
+  display: flex;
+  justify-content: center;
+  padding: 0.25rem 1.25rem 0.375rem;
+}
+
+/* ─── Volume ─── */
+.panel-volume-row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
   gap: 0.5rem;
+  padding: 0 1.25rem 0.75rem;
 }
-
-.mini-panel-playlist {
-  max-height: 240px;
-  overflow-y: auto;
+.panel-vol-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: hsl(0 0% 100% / 0.35);
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.2s;
 }
+.panel-vol-btn:hover { color: hsl(0 0% 100% / 0.7); }
 
-/* ─── VOLUME SLIDER ─── */
 .volume-slider {
   -webkit-appearance: none;
   appearance: none;
-  height: 4px;
-  background: hsl(0 0% 100% / 0.15);
+  flex: 1;
+  height: 3px;
+  background: hsl(0 0% 100% / 0.08);
   border-radius: 2px;
   outline: none;
 }
 .volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 12px;
-  height: 12px;
-  background: white;
+  width: 10px;
+  height: 10px;
+  background: hsl(0 0% 100% / 0.7);
   border-radius: 50%;
   cursor: pointer;
+  transition: transform 0.15s;
 }
+.volume-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
 .volume-slider::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  background: white;
+  width: 10px;
+  height: 10px;
+  background: hsl(0 0% 100% / 0.7);
   border: none;
   border-radius: 50%;
   cursor: pointer;
 }
 
-/* ─── TRANSITIONS ─── */
+/* ─── Lyrics ─── */
+.panel-lyrics {
+  max-height: 160px;
+  overflow-y: auto;
+  padding: 0.75rem 1.25rem;
+  border-top: 1px solid hsl(0 0% 100% / 0.04);
+}
+.panel-lyrics-text {
+  font-family: var(--font-sans, sans-serif);
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: hsl(0 0% 100% / 0.4);
+  white-space: pre-wrap;
+  margin: 0;
+}
+
+/* ─── Playlist ─── */
+.panel-playlist {
+  max-height: 200px;
+  overflow-y: auto;
+  border-top: 1px solid hsl(0 0% 100% / 0.04);
+}
+
+/* ═══════════════════════════════════════
+   TRANSITIONS
+   ═══════════════════════════════════════ */
 .player-slide-enter-active,
 .player-slide-leave-active {
-  transition: transform 0.3s var(--ease-out-expo), opacity 0.3s var(--ease-out-expo);
+  transition: transform 0.35s var(--ease-out-expo), opacity 0.35s var(--ease-out-expo);
 }
 .player-slide-enter-from,
 .player-slide-leave-to {
-  transform: translateY(20px);
+  transform: translateY(16px);
   opacity: 0;
 }
 
 .panel-expand-enter-active,
 .panel-expand-leave-active {
-  transition: all 0.3s var(--ease-out-expo);
+  transition: all 0.35s var(--ease-out-expo);
   overflow: hidden;
 }
 .panel-expand-enter-from,
@@ -335,25 +410,21 @@ onClickOutside(widgetRef, () => {
 }
 .panel-expand-enter-to,
 .panel-expand-leave-from {
-  max-height: 600px;
+  max-height: 800px;
   opacity: 1;
   transform: translateY(0);
 }
 
-/* ─── MOBILE ─── */
+/* ═══════════════════════════════════════
+   MOBILE
+   ═══════════════════════════════════════ */
 @media (max-width: 768px) {
   .mini-player {
     right: 0.75rem;
     left: 0.75rem;
-    max-width: none;
     align-items: stretch;
   }
-  .mini-panel {
-    width: auto;
-  }
-  .mini-pill-title {
-    max-width: none;
-    flex: 1;
-  }
+  .mini-panel { width: auto; }
+  .pill-title { max-width: none; flex: 1; }
 }
 </style>