design : accueil console seul, vrai §, curseurs animés, statuts, lecteur

- accueil : la console devient l'accueil unique (variantes B/C, sélecteur
  et ancien accueil retirés) ; curseurs qui montent de l'asservissement et
  dérivent seuls, un axe mis en avant à tour de rôle, arrêt au clic,
  immobiles en prefers-reduced-motion ; « AUTONOMIE » devant chaque axe,
  leviers mis en valeur, ligne des trois autonomies en couleurs
- logo : § de Playfair Display (SIL OFL) vectorisé, composant partagé
  UiSectionSign (en-tête, page événement) + favicon.svg
- UiStatusBadge (production / développement / gestation) sur l'accueil,
  les pages d'axe et les pages projet
- liens libreDecision / SejeteralO fixés sur la prod (plus de repli localhost)
- logiciel libre : bouton v1 dans la carte projet en tête de page
- couverture du livre : recadrage corrigé (BookSection)
- texte courant en Public Sans (zéros non barrés)
- lecteur : la pastille persistante ne masque plus la navigation du
  BookPlayer ; lecture directe du MP3 (les .ogg n'existent pas : 404)

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

app/pages/economique/index.vue

@@ -396,6 +396,7 @@
             <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
               Monnaie libre
             </h2>
+            <UiStatusBadge class="ml-auto" v-bind="statusOf('monnaie-libre')" />
           </div>
           <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
             La Ğ1 (June) : une monnaie co-créée par ses membres, sans dette ni intérêt. Le dividende universel comme base.
@@ -424,10 +425,7 @@
             <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
               Productions collectives
             </h2>
-            <span class="gestation-badge">
-              <div class="i-lucide-flask-conical h-3 w-3" />
-              En gestation
-            </span>
+            <UiStatusBadge class="ml-auto" v-bind="statusOf('productions-collectives')" />
           </div>
           <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
             Une plateforme pour faciliter la création d'équipes et la réalisation de productions à l'échelle des bassins de vie. Passer la seconde.
@@ -451,6 +449,10 @@ definePageMeta({
 })
 
 const { data: content } = await usePageContent('economique')
+const statusOf = (id: string) => {
+  const item = ((content.value as any)?.items ?? []).find((i: any) => i.id === id) ?? {}
+  return { status: item.status, since: item.since, gestation: item.gestation }
+}
 
 useSeoPage({
   title: content.value?.meta?.title ?? 'Autonomie économique',
@@ -484,6 +486,7 @@ const showPdfReader = ref(false)
 
 .item-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
 }

app/pages/economique/monnaie-libre.vue

@@ -17,6 +17,7 @@
         <p class="text-lg leading-relaxed" style="color: hsl(var(--color-text-muted))">
           {{ content?.description }}
         </p>
+        <UiStatusBadge class="mt-4" :status="content?.status" :since="content?.since" />
       </div>
 
       <!-- Navigation prev / index / next -->

app/pages/economique/productions-collectives.vue

@@ -18,10 +18,9 @@
           {{ content?.description }}
         </p>
 
-        <span v-if="content?.gestation" class="gestation-badge mx-auto mb-8">
-          <div class="i-lucide-flask-conical h-3 w-3" />
-          En gestation
-        </span>
+        <div class="mb-8 text-center">
+          <UiStatusBadge :status="content?.status" :gestation="content?.gestation" />
+        </div>
 
         <!-- Content -->
         <div v-if="content?.content" class="prose-block mb-10">