Restructuration sections, contenu administrable, shadoks, palette été

- Structure par section : /numerique, /economique, /citoyenne (plus de /gestation)
- Chaque section a index + sous-pages avec contenu YAML administrable
- API content supporte les chemins imbriqués ([...path])
- Admin : liste des pages + éditeur par section
- Page /economique : monnaie libre (picto Ğ1), modèle éco, productions collectives, commande livre
- Page /citoyenne : decision (CTA Glibredecision), tarifs-eau (CTA SejeteralO)
- BookActions : composant partagé (player, PDF, chapitres, commande) sur home, eco et modele-eco
- GrateWizard remonté dans la section économique de la home
- Palette été par défaut, choix persisté en localStorage
- Fix lisibilité été (text-white/65 + variables CSS)
- Shadoks thématiques sur toutes les pages (8-10 par page, métiers variés)
- Redirections 301 : /gestation/*, /modele-eco/*, /decision, /lire/*
- README, CONTRIBUTING, CLAUDE.md mis à jour

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/pages/economique/monnaie-libre.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="section-padding">
+    <div class="container-content">
+      <div class="mx-auto max-w-2xl">
+        <div class="section-icon mx-auto mb-6">
+          <span v-if="content?.icon === 'g1'" class="g1-icon">Ğ1</span>
+          <div v-else :class="`i-lucide-${content?.icon ?? 'coins'}`" class="h-12 w-12" />
+        </div>
+
+        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
+          {{ content?.kicker }}
+        </p>
+
+        <h1 class="font-display text-3xl font-bold mb-4 text-center" style="color: hsl(var(--color-text))">
+          {{ content?.title }}
+        </h1>
+
+        <p class="text-lg leading-relaxed mb-8 text-center" style="color: hsl(var(--color-text-muted))">
+          {{ content?.description }}
+        </p>
+
+        <!-- Content -->
+        <div v-if="content?.content" class="prose-block mb-8">
+          <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
+            {{ content.content }}
+          </p>
+        </div>
+
+        <!-- External links -->
+        <div v-if="content?.links" class="flex flex-col gap-3 mb-10">
+          <a
+            v-for="link in content.links"
+            :key="link.href"
+            :href="link.href"
+            target="_blank"
+            rel="noopener"
+            class="link-card group"
+          >
+            <div class="link-icon">
+              <div :class="`i-lucide-${link.icon ?? 'external-link'} h-4 w-4`" />
+            </div>
+            <span class="text-sm font-medium" style="color: hsl(var(--color-text))">{{ link.label }}</span>
+            <div class="i-lucide-arrow-up-right h-3.5 w-3.5 ml-auto text-primary/40 group-hover:text-primary transition-colors" />
+          </a>
+        </div>
+
+        <div class="text-center">
+          <UiBaseButton variant="ghost" to="/economique">
+            <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
+            Autonomie économique
+          </UiBaseButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { data: content } = await usePageContent('economique/monnaie-libre')
+
+useHead({
+  title: content.value?.meta?.title ?? 'Monnaie libre',
+})
+</script>
+
+<style scoped>
+.g1-icon {
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 1.75rem;
+  line-height: 1;
+}
+
+.section-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 5rem;
+  border-radius: 1rem;
+  background: hsl(var(--color-primary) / 0.1);
+  border: 1px solid hsl(var(--color-primary) / 0.2);
+  color: hsl(var(--color-primary));
+}
+
+.prose-block {
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  background: hsl(var(--color-surface));
+}
+
+.link-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid hsl(var(--color-primary) / 0.1);
+  background: hsl(var(--color-surface));
+  text-decoration: none;
+  transition: border-color 0.2s;
+}
+
+.link-card:hover {
+  border-color: hsl(var(--color-primary) / 0.25);
+}
+
+.link-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.375rem;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary));
+  flex-shrink: 0;
+}
+</style>