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;
 }

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

app/pages/evenement.vue

@@ -332,20 +332,16 @@
     <div class="container-content relative z-10 text-center">
       <!-- Logo SVG vectoriel — inline pour currentColor -->
       <div class="evt-logo-wrap mx-auto mb-6" aria-hidden="true">
-        <svg viewBox="0 0 64 80" fill="none" class="evt-logo">
-          <path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
-                stroke="currentColor" stroke-width="16" stroke-linecap="round" stroke-linejoin="round" opacity="0.12"/>
-          <path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
-                stroke="currentColor" stroke-width="9" stroke-linecap="round" stroke-linejoin="round" opacity="0.38"/>
-          <path d="M 28 6 C 44 2,52 12,47 14 C 40 18,16 18,12 28 C 8 38,16 50,28 54 C 38 56,52 60,52 68 C 52 76,42 78,34 74"
-                stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.92"/>
-        </svg>
+        <UiSectionSign class="evt-logo" />
       </div>
 
       <p class="mb-3 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
       <h1 class="page-title font-display font-extrabold tracking-tight" style="color: hsl(var(--color-text))">
         {{ content?.title }}
       </h1>
+      <p v-if="evtContent?.format" class="evt-format font-display">
+        {{ evtContent.format }}
+      </p>
       <p v-if="evtContent?.subtitle" class="mt-2 text-base italic" style="color: hsl(var(--color-text-muted))">
         {{ evtContent.subtitle }}
       </p>
@@ -447,6 +443,14 @@ useSeoPage({
 </script>
 
 <style scoped>
+.evt-format {
+  margin-top: 0.35rem;
+  font-weight: 600;
+  font-size: clamp(1.25rem, 3vw, 1.75rem);
+  letter-spacing: -0.02em;
+  color: hsl(var(--axis-cit));
+}
+
 .page-title {
   font-size: clamp(2.5rem, 6vw, 3.5rem);
 }
@@ -657,12 +661,12 @@ useSeoPage({
   align-items: center;
   justify-content: center;
   color: hsl(var(--color-primary));
-  filter: drop-shadow(0 0 14px hsl(var(--color-primary) / 0.25));
+  filter: drop-shadow(0 6px 14px hsl(var(--color-primary) / 0.25));
 }
 
 .evt-logo {
-  width: 100%;
   height: 100%;
+  width: auto;
 }
 
 /* ── Badge gestation hero ── */

app/pages/index.vue

@@ -1,27 +1,7 @@
 <template>
   <div>
-    <HomeVariantParcours
-      v-if="variant === 'b'"
-      @open-player="showBookPlayer = true"
-      @open-pdf="showPdfReader = true"
-    />
-    <HomeVariantEtabli
-      v-else-if="variant === 'c'"
-      @open-player="showBookPlayer = true"
-      @open-pdf="showPdfReader = true"
-    />
-    <template v-else-if="variant === '0'">
-      <HomeHeroSection />
-      <HomeAxisGrid @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
-    </template>
-    <HomeVariantConsole
-      v-else
-      @open-player="showBookPlayer = true"
-      @open-pdf="showPdfReader = true"
-    />
-
+    <HomeLanding @open-player="showBookPlayer = true" @open-pdf="showPdfReader = true" />
     <HomeMessages />
-    <HomeVariantSwitch v-if="showSwitch" :current="variant" />
     <BookPlayer v-model="showBookPlayer" />
     <BookPdfReader v-model="showPdfReader" />
   </div>
@@ -33,15 +13,6 @@ useSeoPage({
   description: 'Construire une autonomie collective à l\'échelle des bassins de vie. Un livre, des chansons et des outils pour l\'émancipation.',
 })
 
-// Home variants under review: ?v=a (console, default) · ?v=b (parcours) · ?v=c (établi) · ?v=0 (previous home)
-const route = useRoute()
-const VARIANTS = ['a', 'b', 'c', '0'] as const
-const variant = computed(() => {
-  const v = String(route.query.v ?? 'a')
-  return (VARIANTS as readonly string[]).includes(v) ? v : 'a'
-})
-const showSwitch = computed(() => route.query.v !== undefined)
-
 const showBookPlayer = ref(false)
 const showPdfReader = ref(false)
 </script>

app/pages/numerique/[slug].vue

@@ -247,10 +247,19 @@
           <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.project.status"
+            :gestation="content.project.gestation || content?.gestation"
+            :since="content.project.since"
+          />
+          <div v-if="content.project.action?.href" class="project-action mt-4">
+            <UiBaseButton :href="content.project.action.href" target="_blank">
+              <div class="i-lucide-external-link mr-2 h-4 w-4" />
+              {{ content.project.action.label }}
+            </UiBaseButton>
+            <span v-if="content.project.action.note" class="project-action-note">{{ content.project.action.note }}</span>
+          </div>
         </div>
       </div>
 
@@ -477,7 +486,7 @@
                 </div>
               </div>
 
-              <!-- Bouquet sweethomeCloud -->
+              <!-- Bouquet sweetHome -->
               <div v-if="section.bouquet" class="territoire-bouquet">
                 <h3 class="territoire-bouquet-title">
                   <div class="i-lucide-package h-4 w-4" />
@@ -621,13 +630,6 @@
 
       </div><!-- /sections-area -->
 
-      <div v-if="slug === 'logiciel-libre'" class="text-center mt-6">
-        <UiBaseButton href="https://axiom-team.fr/dons" target="_blank">
-          <div class="i-lucide-external-link mr-2 h-4 w-4" />
-          Voir la v1 bridée (premier flux)
-        </UiBaseButton>
-      </div>
-
       <div v-if="slug === 'tarifs-eau'" class="text-center mt-6">
         <UiBaseButton :href="sejeteral0Url" target="_blank">
           <div class="i-lucide-external-link mr-2 h-4 w-4" />
@@ -1650,6 +1652,19 @@ useSeoPage({
   color: hsl(var(--color-primary) / 0.5);
 }
 
+.project-action {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1rem;
+}
+
+.project-action-note {
+  font-family: var(--font-mono);
+  font-size: 0.72rem;
+  color: hsl(var(--axis-cit));
+}
+
 /* Bouquet — status of each stack */
 .territoire-bouquet-provider {
   font-size: 0.8rem;

app/pages/numerique/index.vue

@@ -319,7 +319,7 @@
         <NuxtLink v-if="lpk" :to="lpk.to" class="lpk-card">
           <span class="lpk-name">{{ lpk.name }}</span>
           <span class="lpk-body">
-            <span class="lpk-full">{{ lpk.fullName }} — {{ lpk.text }}</span>
+            <span class="lpk-full">{{ lpk.text }}</span>
             <span class="lpk-role">{{ lpk.role }}</span>
           </span>
           <span class="i-lucide-arrow-right h-5 w-5 lpk-arrow" aria-hidden="true" />
@@ -342,10 +342,7 @@
               <h2 class="font-display text-xl font-bold" style="color: hsl(var(--color-text))">
                 {{ pillar.label }}
               </h2>
-              <span v-if="pillar.gestation" class="gestation-badge">
-                <div class="i-lucide-flask-conical h-3 w-3" />
-                En gestation
-              </span>
+              <UiStatusBadge class="ml-auto" :status="pillar.status" :gestation="pillar.gestation" :since="pillar.since" />
             </div>
 
             <p class="leading-relaxed whitespace-pre-line mt-3" style="color: hsl(var(--color-text-muted))">{{ pillar.text }}</p>
@@ -376,6 +373,7 @@
               <div :class="`i-lucide-${action.icon}`" class="h-3.5 w-3.5" />
               {{ action.label }}
             </a>
+            <span v-for="action in (pillar as any).actions.filter((a: any) => a.note)" :key="`n-${action.label}`" class="pillar-action-note">{{ action.note }}</span>
           </div>
         </div>
       </div>
@@ -439,6 +437,13 @@ useSeoPage({
   line-height: 1.45;
 }
 
+.pillar-action-note {
+  align-self: center;
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: hsl(var(--axis-cit));
+}
+
 .lpk-arrow { color: hsl(var(--color-primary)); flex-shrink: 0; }
 
 @media (prefers-reduced-motion: reduce) {
@@ -520,6 +525,7 @@ useSeoPage({
 
 .pillar-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.75rem;
 }