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/components/ui/StatusBadge.vue

@@ -0,0 +1,69 @@
+<template>
+  <span v-if="label" class="status" :class="`status--${tone}`">
+    <span class="status-dot" aria-hidden="true" />
+    <span>{{ label }}</span>
+    <span v-if="since" class="status-since">· {{ since }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+// Project maturity, as written in YAML: `status: En production` (+ `since`),
+// `status: En développement`, or the legacy `gestation: true`.
+const props = defineProps<{
+  status?: string
+  gestation?: boolean
+  since?: string
+}>()
+
+const label = computed(() => props.status || (props.gestation ? 'En gestation' : ''))
+
+const tone = computed(() => {
+  const s = label.value.toLowerCase()
+  if (s.includes('production')) return 'prod'
+  if (s.includes('développement') || s.includes('developpement')) return 'dev'
+  return 'gest'
+})
+</script>
+
+<style scoped>
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.15rem 0.6rem;
+  border-radius: 20px;
+  font-family: var(--font-mono);
+  font-size: 0.68rem;
+  font-weight: 500;
+  line-height: 1.5;
+  white-space: nowrap;
+  vertical-align: middle;
+  color: hsl(var(--color-text) / 0.75);
+  background: hsl(var(--color-text) / 0.06);
+}
+
+.status-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* En production : plein */
+.status--prod .status-dot { background: hsl(var(--axis-cit)); }
+.status--prod { color: hsl(var(--axis-cit)); background: hsl(var(--axis-cit) / 0.1); }
+
+/* En développement : demi-plein */
+.status--dev .status-dot {
+  background: linear-gradient(to top, hsl(var(--axis-eco)) 50%, transparent 50%);
+  box-shadow: inset 0 0 0 1.5px hsl(var(--axis-eco));
+}
+.status--dev { color: hsl(var(--axis-eco)); background: hsl(var(--axis-eco) / 0.1); }
+
+/* En gestation : cercle */
+.status--gest .status-dot { box-shadow: inset 0 0 0 1.5px hsl(var(--color-text) / 0.45); }
+
+.status-since {
+  opacity: 0.75;
+}
+</style>