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/citoyenne/[slug].vue

@@ -86,10 +86,7 @@
           <p style="color: hsl(var(--color-text-muted))" class="leading-relaxed">
             {{ content.project.text }}
           </p>
-          <span v-if="content?.gestation" class="gestation-badge mt-3">
-            <div class="i-lucide-flask-conical h-3 w-3" />
-            En gestation
-          </span>
+          <UiStatusBadge class="mt-3" :status="content?.status" :gestation="content?.gestation" />
         </div>
 
         <!-- Extended content -->

app/pages/citoyenne/index.vue

@@ -352,6 +352,7 @@
               <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
                 Décision collective
               </h2>
+              <UiStatusBadge class="ml-auto" v-bind="statusOf('decision')" />
             </div>
             <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
               Se donner les moyens de la décision collective.
@@ -376,10 +377,7 @@
               <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
                 Tarifs de l'eau
               </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('tarifs-eau')" />
             </div>
             <p class="leading-relaxed mt-3" style="color: hsl(var(--color-text-muted))">
               Application pour obtenir justice sociale et incitation dynamique à la réduction.
@@ -404,6 +402,10 @@ definePageMeta({
 })
 
 const { data: content } = await usePageContent('citoyenne')
+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 }
+}
 
 const appConfig = useAppConfig()
 const decisionUrl = (appConfig.libredecision as { url: string })?.url ?? '#'
@@ -449,6 +451,7 @@ useSeoPage({
 
 .item-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
 }