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" />

app/components/book/BookPlayer.vue

@@ -217,17 +217,17 @@ const activeChapter = computed(() => {
 
 // ── Chapter metadata ──
 const chapters = [
-  { slug: 'introduction', title: 'Introduction' },
-  { slug: 'de-quel-don-parlons-nous', title: 'De quel don parlons-nous ?' },
-  { slug: 'la-mesure-du-don', title: 'La mesure du don' },
-  { slug: 'raison-d-etre-d-une-monnaie', title: 'Raison d\'être d\'une monnaie' },
-  { slug: 'la-trm', title: 'La TRM' },
-  { slug: 'creer-une-economie', title: 'Créer une économie ?' },
-  { slug: 'echanger', title: 'Échanger' },
-  { slug: 'relation-institutionnelle', title: 'Relation institutionnelle' },
-  { slug: 'autres-greffes', title: 'Autres greffes' },
-  { slug: 'et-maintenant', title: 'Et maintenant ?… action ?' },
-  { slug: 'annexes', title: 'Chapitres annexes' },
+  { slug: '01-introduction', title: 'Introduction' },
+  { slug: '02-don', title: 'De quel don parlons-nous ?' },
+  { slug: '03-mesure', title: 'La mesure du don' },
+  { slug: '04-monnaie', title: 'Raison d\'être d\'une monnaie' },
+  { slug: '05-trm', title: 'La TRM' },
+  { slug: '06-economie', title: 'Créer une économie ?' },
+  { slug: '07-echange', title: 'Échanger' },
+  { slug: '08-institution', title: 'Relation institutionnelle' },
+  { slug: '09-greffes', title: 'Autres greffes' },
+  { slug: '10-maintenant', title: 'Et maintenant ?… action ?' },
+  { slug: '11-annexes', title: 'Chapitres annexes' },
 ]
 
 // ── Per-chapter color hues ──
@@ -424,7 +424,7 @@ watch(isOpen, async (open) => {
     // Load playlist & play first song
     const playlist = getPlaylistOrder()
     if (playlist.length) playerStore.setPlaylist(playlist)
-    const first = getSongs().find(s => s.id === 'chanson-01')
+    const first = getSongs().find(s => s.id === 'ce-livre-est-une-facon')
     if (first) {
       _skipSongWatch = true
       audioPlayer.loadAndPlay(first)

app/components/book/ChapterNav.vue

@@ -6,7 +6,7 @@
     <ul class="flex flex-col gap-1">
       <li v-for="chapter in chapters" :key="chapter.path">
         <NuxtLink
-          :to="`/lire/${chapter.stem}`"
+          :to="`/modele-eco/${chapter.stem}`"
           class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-white/5"
           active-class="bg-primary/10 text-primary font-medium"
         >

app/components/home/BookPresentation.vue

@@ -29,6 +29,28 @@
       <circle cx="185" cy="42" r="12" fill="currentColor" opacity="0.2"/>
     </svg>
 
+    <!-- Shadok menuisier: character with plane and plank -->
+    <svg class="shadok-menuisier" viewBox="0 0 240 300" fill="none" aria-hidden="true">
+      <ellipse cx="120" cy="155" rx="40" ry="48" fill="currentColor" opacity="0.85"/>
+      <circle cx="120" cy="92" r="25" fill="currentColor" opacity="0.8"/>
+      <path d="M98 82 Q120 68 142 82" fill="currentColor" opacity="0.35"/>
+      <rect x="100" y="80" width="40" height="5" rx="1" fill="currentColor" opacity="0.3"/>
+      <circle cx="112" cy="90" r="4" fill="currentColor" opacity="0.2"/>
+      <circle cx="130" cy="90" r="4" fill="currentColor" opacity="0.2"/>
+      <circle cx="113" cy="89" r="1.8" fill="currentColor" opacity="0.5"/>
+      <circle cx="131" cy="89" r="1.8" fill="currentColor" opacity="0.5"/>
+      <line x1="114" y1="103" x2="126" y2="103" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.3"/>
+      <line x1="160" y1="145" x2="195" y2="160" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <rect x="190" y="155" width="30" height="12" rx="2" fill="currentColor" opacity="0.4"/>
+      <rect x="200" y="150" width="8" height="8" rx="1" fill="currentColor" opacity="0.35"/>
+      <line x1="80" y1="148" x2="50" y2="168" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <line x1="105" y1="200" x2="95" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <line x1="135" y1="200" x2="145" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <rect x="35" y="170" width="80" height="8" rx="1" fill="currentColor" opacity="0.3"/>
+      <path d="M60 168 Q55 162 62 160" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.2"/>
+      <path d="M80 166 Q76 158 83 157" stroke="currentColor" stroke-width="1" stroke-linecap="round" fill="none" opacity="0.18"/>
+    </svg>
+
     <div class="container-content">
       <div class="grid items-center gap-12 md:grid-cols-2">
         <!-- Book cover -->
@@ -135,7 +157,24 @@ const { data: content } = await usePageContent('home')
   50% { transform: translateY(-8px); }
 }
 
+.shadok-menuisier {
+  position: absolute;
+  left: 2%;
+  top: 5%;
+  width: clamp(100px, 13vw, 190px);
+  opacity: 0.25;
+  pointer-events: none;
+  color: hsl(var(--color-primary));
+  animation: shadok-float-menuisier 10s ease-in-out infinite;
+}
+
+@keyframes shadok-float-menuisier {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-9px); }
+}
+
 @media (max-width: 768px) {
   .shadok-thinker { display: none; }
+  .shadok-menuisier { display: none; }
 }
 </style>

app/components/home/HeroSection.vue

@@ -23,6 +23,25 @@
       <path d="M48 105 Q25 102 12 100" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity="0.3" fill="none"/>
     </svg>
 
+    <!-- Shadok boulanger: character with oven and bread -->
+    <svg class="shadok-boulanger" viewBox="0 0 240 300" fill="none" aria-hidden="true">
+      <ellipse cx="120" cy="155" rx="40" ry="48" fill="currentColor" opacity="0.85"/>
+      <circle cx="120" cy="92" r="25" fill="currentColor" opacity="0.8"/>
+      <ellipse cx="120" cy="68" rx="18" ry="22" fill="currentColor" opacity="0.35"/>
+      <rect x="105" y="78" width="30" height="5" rx="1" fill="currentColor" opacity="0.4"/>
+      <path d="M110 88 Q114 84 118 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
+      <path d="M124 88 Q128 84 132 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
+      <path d="M112 102 Q120 108 128 102" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.35"/>
+      <line x1="160" y1="145" x2="190" y2="135" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <rect x="185" y="125" width="40" height="10" rx="5" fill="currentColor" opacity="0.4" transform="rotate(-15 205 130)"/>
+      <line x1="80" y1="148" x2="55" y2="175" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <line x1="105" y1="200" x2="95" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <line x1="135" y1="200" x2="145" y2="258" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
+      <rect x="30" y="180" width="50" height="40" rx="4" fill="currentColor" opacity="0.25"/>
+      <rect x="35" y="185" width="40" height="20" rx="2" fill="currentColor" opacity="0.15"/>
+      <ellipse cx="55" cy="195" rx="12" ry="6" fill="currentColor" opacity="0.12"/>
+    </svg>
+
     <!-- Content -->
     <div class="container-content relative z-10 px-4">
       <div class="mx-auto max-w-3xl text-center">
@@ -91,7 +110,25 @@ const { data: content } = await usePageContent('home')
   50% { transform: translateY(-12px); }
 }
 
+.shadok-boulanger {
+  position: absolute;
+  left: 3%;
+  bottom: 8%;
+  width: clamp(100px, 13vw, 190px);
+  opacity: 0.25;
+  pointer-events: none;
+  color: hsl(var(--color-accent));
+  animation: shadok-float-boulanger 9s ease-in-out infinite;
+  z-index: 1;
+}
+
+@keyframes shadok-float-boulanger {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
 @media (max-width: 768px) {
   .shadok-bird { display: none; }
+  .shadok-boulanger { display: none; }
 }
 </style>

app/components/player/PlayerPersistent.vue

@@ -124,6 +124,7 @@ const store = usePlayerStore()
 const { setVolume, togglePlayPause, playNext } = useAudioPlayer()
 
 useMediaSession()
+useKeyboardShortcuts()
 
 const widgetRef = ref<HTMLElement>()
 const isExpanded = ref(false)

app/components/song/SongItem.vue

@@ -1,38 +1,45 @@
 <template>
-  <div
-    class="card-surface flex cursor-pointer items-center gap-4"
-    :class="{ 'border-primary/40! shadow-primary/10!': isCurrent }"
-    @click="handlePlay"
-  >
-    <!-- Play indicator / cover -->
+  <div class="song-item-wrapper">
     <div
-      class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-surface-200"
-      :class="{ 'animate-glow-pulse': isCurrent && store.isPlaying }"
+      class="card-surface flex cursor-pointer items-center gap-4"
+      :class="{ 'border-primary/40! shadow-primary/10!': isCurrent }"
+      @click="handlePlay"
     >
+      <!-- Play indicator / cover -->
       <div
-        v-if="isCurrent && store.isPlaying"
-        class="i-lucide-volume-2 h-5 w-5 text-primary"
-      />
-      <div
-        v-else
-        class="i-lucide-play h-5 w-5 text-white/40 transition-colors group-hover:text-primary"
-      />
+        class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-surface-200"
+        :class="{ 'animate-glow-pulse': isCurrent && store.isPlaying }"
+      >
+        <div
+          v-if="isCurrent && store.isPlaying"
+          class="i-lucide-volume-2 h-5 w-5 text-primary"
+        />
+        <div
+          v-else
+          class="i-lucide-play h-5 w-5 text-white/40 transition-colors group-hover:text-primary"
+        />
+      </div>
+
+      <!-- Info -->
+      <div class="min-w-0 flex-1">
+        <p class="truncate text-sm font-medium" :class="isCurrent ? 'text-primary' : 'text-white'">
+          {{ song.title }}
+        </p>
+        <p class="truncate text-xs text-white/40">
+          {{ song.artist }}
+        </p>
+      </div>
+
+      <!-- Duration -->
+      <span class="font-mono text-xs text-white/30 flex-shrink-0">
+        {{ formatDuration(song.duration) }}
+      </span>
     </div>
 
-    <!-- Info -->
-    <div class="min-w-0 flex-1">
-      <p class="truncate text-sm font-medium" :class="isCurrent ? 'text-primary' : 'text-white'">
-        {{ song.title }}
-      </p>
-      <p class="truncate text-xs text-white/40">
-        {{ song.artist }}
-      </p>
+    <!-- Lyrics panel (always visible) -->
+    <div v-if="song.lyrics" class="lyrics-panel">
+      <pre class="lyrics-text">{{ song.lyrics }}</pre>
     </div>
-
-    <!-- Duration -->
-    <span class="font-mono text-xs text-white/30 flex-shrink-0">
-      {{ formatDuration(song.duration) }}
-    </span>
   </div>
 </template>
 
@@ -63,3 +70,23 @@ function formatDuration(seconds: number): string {
   return `${mins}:${secs.toString().padStart(2, '0')}`
 }
 </script>
+
+<style scoped>
+.lyrics-panel {
+  margin-top: 0.25rem;
+  padding: 1rem 1.25rem;
+  border-radius: 0.75rem;
+  background: hsl(var(--color-surface));
+  border: 1px solid hsl(var(--color-text) / 0.08);
+  max-height: 24rem;
+  overflow-y: auto;
+}
+
+.lyrics-text {
+  white-space: pre-wrap;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: hsl(var(--color-text) / 0.6);
+}
+</style>

app/components/song/SongLyrics.vue

@@ -1,21 +1,9 @@
 <template>
   <div v-if="song.lyrics" class="rounded-xl bg-surface p-6">
-    <button
-      class="flex w-full items-center justify-between text-left"
-      @click="isOpen = !isOpen"
-    >
-      <span class="font-display text-sm font-semibold text-white/70">Paroles</span>
-      <div
-        :class="isOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-        class="h-4 w-4 text-white/40 transition-transform"
-      />
-    </button>
-
-    <Transition name="lyrics-expand">
-      <div v-if="isOpen" class="mt-4">
-        <pre class="whitespace-pre-wrap font-sans text-sm leading-relaxed text-white/60">{{ song.lyrics }}</pre>
-      </div>
-    </Transition>
+    <span class="font-display text-sm font-semibold text-white/70">Paroles</span>
+    <div class="mt-4 max-h-96 overflow-y-auto">
+      <pre class="whitespace-pre-wrap font-sans text-sm leading-relaxed text-white/60">{{ song.lyrics }}</pre>
+    </div>
   </div>
 </template>
 
@@ -25,26 +13,4 @@ import type { Song } from '~/types/song'
 defineProps<{
   song: Song
 }>()
-
-const isOpen = ref(false)
 </script>
-
-<style scoped>
-.lyrics-expand-enter-active,
-.lyrics-expand-leave-active {
-  transition: all 0.3s var(--ease-out-expo);
-  overflow: hidden;
-}
-
-.lyrics-expand-enter-from,
-.lyrics-expand-leave-to {
-  max-height: 0;
-  opacity: 0;
-}
-
-.lyrics-expand-enter-to,
-.lyrics-expand-leave-from {
-  max-height: 500px;
-  opacity: 1;
-}
-</style>