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/components/admin/AdminMarkdownEditor.vue

@@ -1,34 +1,57 @@
 <template>
   <div class="md-editor">
-    <div class="md-tabs">
+    <div class="md-toolbar">
+      <div class="md-tabs">
+        <button
+          class="md-tab"
+          :class="{ 'md-tab--active': tab === 'edit' }"
+          @click="tab = 'edit'"
+        >
+          <div class="i-lucide-pencil h-3.5 w-3.5" />
+          Édition
+        </button>
+        <button
+          class="md-tab"
+          :class="{ 'md-tab--active': tab === 'split' }"
+          @click="tab = 'split'"
+        >
+          <div class="i-lucide-columns-2 h-3.5 w-3.5" />
+          Split
+        </button>
+        <button
+          class="md-tab"
+          :class="{ 'md-tab--active': tab === 'preview' }"
+          @click="tab = 'preview'"
+        >
+          <div class="i-lucide-eye h-3.5 w-3.5" />
+          Aperçu
+        </button>
+      </div>
       <button
-        class="md-tab"
-        :class="{ 'md-tab--active': tab === 'edit' }"
-        @click="tab = 'edit'"
+        class="md-fullscreen"
+        :class="{ 'md-fullscreen--active': fullscreen }"
+        @click="fullscreen = !fullscreen"
       >
-        Édition
-      </button>
-      <button
-        class="md-tab"
-        :class="{ 'md-tab--active': tab === 'preview' }"
-        @click="tab = 'preview'"
-      >
-        Aperçu
+        <div :class="fullscreen ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'" class="h-3.5 w-3.5" />
       </button>
     </div>
 
-    <textarea
-      v-if="tab === 'edit'"
-      :value="modelValue"
-      class="md-textarea"
-      :rows="rows"
-      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
-    />
-    <div
-      v-else
-      class="md-preview prose"
-      v-html="renderedHtml"
-    />
+    <div class="md-body" :class="{ 'md-body--split': tab === 'split', 'md-body--fullscreen': fullscreen }">
+      <textarea
+        v-if="tab === 'edit' || tab === 'split'"
+        ref="textareaRef"
+        :value="modelValue"
+        class="md-textarea"
+        :rows="rows"
+        @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+        @keydown.tab.prevent="insertTab"
+      />
+      <div
+        v-if="tab === 'preview' || tab === 'split'"
+        class="md-preview prose"
+        v-html="renderedHtml"
+      />
+    </div>
   </div>
 </template>
 
@@ -38,22 +61,38 @@ const props = defineProps<{
   rows?: number
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   'update:modelValue': [value: string]
 }>()
 
-const tab = ref<'edit' | 'preview'>('edit')
+const tab = ref<'edit' | 'preview' | 'split'>('edit')
+const fullscreen = ref(false)
+const textareaRef = ref<HTMLTextAreaElement>()
+
+function insertTab(e: KeyboardEvent) {
+  const ta = e.target as HTMLTextAreaElement
+  const start = ta.selectionStart
+  const end = ta.selectionEnd
+  const val = ta.value
+  const newVal = val.substring(0, start) + '  ' + val.substring(end)
+  emit('update:modelValue', newVal)
+  nextTick(() => {
+    ta.selectionStart = ta.selectionEnd = start + 2
+  })
+}
 
 const renderedHtml = computed(() => {
-  // Simple markdown rendering for preview
   return props.modelValue
+    .replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
     .replace(/^### (.+)$/gm, '<h3>$1</h3>')
     .replace(/^## (.+)$/gm, '<h2>$1</h2>')
     .replace(/^# (.+)$/gm, '<h1>$1</h1>')
+    .replace(/^- (.+)$/gm, '<li>$1</li>')
+    .replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>')
     .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
     .replace(/\*(.+?)\*/g, '<em>$1</em>')
     .replace(/\n\n/g, '</p><p>')
-    .replace(/^(?!<[hp])(.+)/gm, '<p>$1</p>')
+    .replace(/^(?!<[hpulob])(.+)/gm, '<p>$1</p>')
 })
 </script>
 
@@ -64,14 +103,23 @@ const renderedHtml = computed(() => {
   overflow: hidden;
 }
 
-.md-tabs {
+.md-toolbar {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
   background: hsl(20 8% 6%);
   border-bottom: 1px solid hsl(20 8% 14%);
 }
 
+.md-tabs {
+  display: flex;
+}
+
 .md-tab {
-  padding: 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
   border: none;
   background: none;
   color: hsl(20 8% 50%);
@@ -85,6 +133,39 @@ const renderedHtml = computed(() => {
   background: hsl(20 8% 10%);
 }
 
+.md-fullscreen {
+  padding: 0.5rem 0.75rem;
+  color: hsl(20 8% 40%);
+  transition: color 0.2s;
+}
+.md-fullscreen:hover,
+.md-fullscreen--active { color: white; }
+
+.md-body {
+  display: flex;
+}
+
+.md-body--split .md-textarea,
+.md-body--split .md-preview {
+  width: 50%;
+}
+
+.md-body--split .md-preview {
+  border-left: 1px solid hsl(20 8% 14%);
+}
+
+.md-body--fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: hsl(20 8% 4%);
+}
+
+.md-body--fullscreen .md-textarea,
+.md-body--fullscreen .md-preview {
+  height: 100vh;
+}
+
 .md-textarea {
   width: 100%;
   padding: 1rem;
@@ -95,7 +176,8 @@ const renderedHtml = computed(() => {
   font-size: 0.85rem;
   line-height: 1.7;
   resize: vertical;
-  min-height: 20rem;
+  min-height: 24rem;
+  tab-size: 2;
 }
 
 .md-textarea:focus {
@@ -104,7 +186,9 @@ const renderedHtml = computed(() => {
 
 .md-preview {
   padding: 1rem;
-  min-height: 20rem;
+  min-height: 24rem;
+  max-height: 70vh;
+  overflow-y: auto;
   background: hsl(20 8% 4%);
 }
 </style>

app/components/admin/AdminSidebar.vue

@@ -27,13 +27,13 @@
         <div class="i-lucide-home h-4 w-4" />
         Accueil
       </NuxtLink>
-      <NuxtLink to="/admin/pages/lire" class="sidebar-link" active-class="sidebar-link--active">
+      <NuxtLink to="/admin/pages/modele-eco" class="sidebar-link" active-class="sidebar-link--active">
         <div class="i-lucide-book-open h-4 w-4" />
-        Lire
+        Modèle éco
       </NuxtLink>
-      <NuxtLink to="/admin/pages/ecouter" class="sidebar-link" active-class="sidebar-link--active">
+      <NuxtLink to="/admin/pages/en-musique" class="sidebar-link" active-class="sidebar-link--active">
         <div class="i-lucide-headphones h-4 w-4" />
-        Écouter
+        En musique
       </NuxtLink>
       <NuxtLink to="/admin/pages/gratewizard" class="sidebar-link" active-class="sidebar-link--active">
         <div class="i-lucide-sparkles h-4 w-4" />