Refactoring complet : contenu livre, config unique, routes, admin et light mode

- Source unique : supprime app/data/librodrome.config.yml, renomme site/ en bookplayer.config.yml
- Morceaux : renommés avec slugs lisibles, fichiers audio renommés, inversion ch2↔ch3 corrigée
- Chapitres : 11 fichiers .md réécrits avec le vrai contenu du livre (synthèse fidèle du PDF)
- Routes : /lire → /modele-eco, /ecouter → /en-musique, redirections 301
- Admin chapitres : champs structurés (titre, description, temps lecture), compteur mots
- Éditeur markdown : mode split, plein écran, support Tab, meilleur rendu aperçu
- Admin morceaux : drag & drop, ajout/suppression, gestion playlist
- Light mode : palettes printemps/été plus saturées et contrastées, teintes primary
- Raccourcis clavier player : espace, flèches gauche/droite
- Paroles : toggle supprimé, toujours visibles et scrollables
- Nouvelles pages : autonomie, evenement

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

app/pages/admin/book/index.vue

@@ -1,18 +1,58 @@
 <template>
   <div>
-    <h1 class="font-display text-2xl font-bold text-white mb-6">Chapitres</h1>
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="font-display text-2xl font-bold text-white">Chapitres</h1>
+      <AdminSaveButton :saving="saving" :saved="saved" @save="saveOrder" />
+    </div>
 
     <div class="flex flex-col gap-2">
-      <NuxtLink
-        v-for="chapter in chapters"
+      <div
+        v-for="(chapter, i) in chapters"
         :key="chapter.slug"
-        :to="`/admin/book/${chapter.slug}`"
         class="chapter-item"
+        draggable="true"
+        @dragstart="onDragStart(i, $event)"
+        @dragover.prevent="onDragOver(i)"
+        @dragend="onDragEnd"
+        :class="{ 'chapter-item--dragging': dragIdx === i, 'chapter-item--over': dropIdx === i && dropIdx !== dragIdx }"
       >
-        <span class="chapter-order">{{ String(chapter.order ?? 0).padStart(2, '0') }}</span>
-        <span class="chapter-title">{{ chapter.title }}</span>
-        <div class="i-lucide-chevron-right h-4 w-4 text-white/20" />
-      </NuxtLink>
+        <div class="drag-handle" aria-label="Réordonner">
+          <div class="i-lucide-grip-vertical h-4 w-4" />
+        </div>
+        <span class="chapter-order">{{ String(i + 1).padStart(2, '0') }}</span>
+        <NuxtLink
+          :to="`/admin/book/${chapter.slug}`"
+          class="chapter-title"
+        >
+          {{ chapter.title }}
+        </NuxtLink>
+        <button
+          class="delete-btn"
+          @click="removeChapter(chapter.slug)"
+          aria-label="Supprimer"
+        >
+          <div class="i-lucide-trash-2 h-4 w-4" />
+        </button>
+        <NuxtLink :to="`/admin/book/${chapter.slug}`">
+          <div class="i-lucide-chevron-right h-4 w-4 text-white/20" />
+        </NuxtLink>
+      </div>
+    </div>
+
+    <!-- Add chapter -->
+    <div class="mt-6 flex items-end gap-3">
+      <div class="flex-1">
+        <label class="block text-xs text-white/40 mb-1">Titre</label>
+        <input v-model="newTitle" class="admin-input w-full" placeholder="Nouveau chapitre" />
+      </div>
+      <div>
+        <label class="block text-xs text-white/40 mb-1">Slug</label>
+        <input v-model="newSlug" class="admin-input w-full font-mono text-xs" placeholder="12-slug" />
+      </div>
+      <button class="add-btn" @click="addChapter" :disabled="!newTitle || !newSlug">
+        <div class="i-lucide-plus h-4 w-4" />
+        Ajouter
+      </button>
     </div>
   </div>
 </template>
@@ -23,7 +63,74 @@ definePageMeta({
   middleware: 'admin',
 })
 
-const { data: chapters } = await useFetch('/api/admin/chapters')
+const { data: chapters, refresh } = await useFetch<any[]>('/api/admin/chapters')
+const saving = ref(false)
+const saved = ref(false)
+const newTitle = ref('')
+const newSlug = ref('')
+
+// Drag & drop state
+const dragIdx = ref<number | null>(null)
+const dropIdx = ref<number | null>(null)
+
+function onDragStart(i: number, e: DragEvent) {
+  dragIdx.value = i
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+function onDragOver(i: number) {
+  dropIdx.value = i
+}
+
+function onDragEnd() {
+  if (dragIdx.value !== null && dropIdx.value !== null && dragIdx.value !== dropIdx.value && chapters.value) {
+    const [moved] = chapters.value.splice(dragIdx.value, 1)
+    chapters.value.splice(dropIdx.value, 0, moved)
+  }
+  dragIdx.value = null
+  dropIdx.value = null
+}
+
+async function saveOrder() {
+  if (!chapters.value) return
+  saving.value = true
+  saved.value = false
+  try {
+    const orderedChapters = chapters.value.map((ch: any, i: number) => ({
+      slug: ch.slug,
+      order: i + 1,
+    }))
+    await $fetch('/api/admin/chapters', {
+      method: 'PUT',
+      body: { chapters: orderedChapters },
+    })
+    saved.value = true
+    setTimeout(() => { saved.value = false }, 2000)
+  }
+  finally {
+    saving.value = false
+  }
+}
+
+async function addChapter() {
+  if (!newTitle.value || !newSlug.value) return
+  const order = (chapters.value?.length ?? 0) + 1
+  await $fetch('/api/admin/chapters', {
+    method: 'POST',
+    body: { slug: newSlug.value, title: newTitle.value, order },
+  })
+  newTitle.value = ''
+  newSlug.value = ''
+  await refresh()
+}
+
+async function removeChapter(slug: string) {
+  if (!confirm(`Supprimer le chapitre "${slug}" ?`)) return
+  await $fetch(`/api/admin/chapters/${slug}`, { method: 'DELETE' })
+  await refresh()
+}
 </script>
 
 <style scoped>
@@ -34,7 +141,6 @@ const { data: chapters } = await useFetch('/api/admin/chapters')
   padding: 0.75rem 1rem;
   border: 1px solid hsl(20 8% 14%);
   border-radius: 0.5rem;
-  text-decoration: none;
   transition: all 0.2s;
 }
 
@@ -43,6 +149,25 @@ const { data: chapters } = await useFetch('/api/admin/chapters')
   background: hsl(20 8% 6%);
 }
 
+.chapter-item--dragging {
+  opacity: 0.4;
+}
+
+.chapter-item--over {
+  border-top: 2px solid hsl(12 76% 48%);
+}
+
+.drag-handle {
+  cursor: grab;
+  padding: 0.25rem;
+  color: hsl(20 8% 35%);
+  flex-shrink: 0;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
 .chapter-order {
   font-family: var(--font-mono, monospace);
   font-size: 0.85rem;
@@ -55,5 +180,64 @@ const { data: chapters } = await useFetch('/api/admin/chapters')
   flex: 1;
   color: white;
   font-weight: 500;
+  text-decoration: none;
+}
+
+.chapter-title:hover {
+  color: hsl(12 76% 68%);
+}
+
+.delete-btn {
+  flex-shrink: 0;
+  padding: 0.375rem;
+  border-radius: 0.375rem;
+  color: hsl(0 60% 50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.delete-btn:hover {
+  background: hsl(0 60% 50% / 0.1);
+}
+
+.admin-input {
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid hsl(20 8% 18%);
+  background: hsl(20 8% 6%);
+  color: white;
+  font-size: 0.8rem;
+}
+
+.admin-input:focus {
+  outline: none;
+  border-color: hsl(12 76% 48% / 0.5);
+}
+
+.add-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid hsl(20 8% 25%);
+  background: none;
+  color: hsl(20 8% 55%);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.add-btn:hover:not(:disabled) {
+  border-color: hsl(12 76% 48% / 0.5);
+  color: hsl(12 76% 68%);
+}
+
+.add-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
 }
 </style>