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/SectionSign.vue

@@ -0,0 +1,16 @@
+<template>
+  <!-- § — glyphe de Playfair Display 700 (SIL OFL), vectorisé ; dégradé primaire → accent -->
+  <svg class="section-sign" viewBox="0 0 511 970" aria-hidden="true">
+    <defs>
+      <linearGradient :id="gradId" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="hsl(var(--color-primary))" />
+        <stop offset="100%" stop-color="hsl(var(--color-accent))" />
+      </linearGradient>
+    </defs>
+    <path :fill="`url(#${gradId})`" d="M277 0Q320 0 349 7.5Q378 15 395 22Q426 37 443.5 59.5Q461 82 461 115Q461 143 441.5 164Q422 185 387 185Q354 185 332.5 165.5Q311 146 311 116Q311 92 324.5 71Q338 50 362 42Q357 34 344.5 29Q332 24 316 21.5Q300 19 284 19Q246 19 223 32.5Q200 46 190 66.5Q180 87 180 110Q180 150 200 177.5Q220 205 256 230Q292 255 340 287Q394 324 432.5 354.5Q471 385 491 418Q511 451 511 495Q511 548 475.5 593Q440 638 352 677L343 667Q373 646 388 623Q403 600 403 567Q403 536 386 511.5Q369 487 333.5 459Q298 431 241 394Q178 353 135.5 318.5Q93 284 71.5 248Q50 212 50 167Q50 116 78.5 78.5Q107 41 158.5 20.5Q210 0 277 0ZM158 292 168 303Q137 323 122.5 346Q108 369 108 403Q108 433 124.5 458Q141 483 177 511Q213 539 270 576Q332 617 374.5 651.5Q417 686 439 722Q461 758 461 803Q461 853 432 891Q403 929 352 949.5Q301 970 233 970Q190 970 161 962.5Q132 955 115 948Q85 933 67 910.5Q49 888 49 855Q49 827 69 806Q89 785 123 785Q157 785 178 804.5Q199 824 199 854Q199 878 185.5 898.5Q172 919 148 928Q152 935 165 940.5Q178 946 194.5 948.5Q211 951 226 951Q265 951 287.5 937.5Q310 924 320.5 903Q331 882 331 860Q331 820 311 792.5Q291 765 255 740Q219 715 171 683Q116 646 78 615.5Q40 585 20 551.5Q0 518 0 475Q0 421 34.5 376Q69 331 158 292Z" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+const gradId = `sect-grad-${useId()}`
+</script>

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>