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/home/HomeConsole.vue

@@ -1,17 +1,25 @@
 <template>
-  <div class="console" :class="{ 'console--ready': ready, 'console--compact': compact }">
+  <div
+    ref="root"
+    class="console"
+    :class="{ 'console--compact': compact, 'console--still': reduced }"
+    @pointerenter="hovered = true"
+    @pointerleave="hovered = false"
+    @focusin="hovered = true"
+    @focusout="hovered = false"
+  >
     <div class="console-board">
-      <!-- Scale: from « je subis » to « je m'affranchis » (evenement.yml) -->
+      <!-- Scale, read bottom to top: from asservissement to émancipation -->
       <div class="console-scale" aria-hidden="true">
-        <span>je m'affranchis</span>
-        <span class="console-ticks"><i v-for="n in 5" :key="n" /></span>
-        <span>je subis</span>
+        <span class="console-scale-bottom">{{ bottomLabel }}</span>
+        <span class="console-scale-line" />
+        <span class="console-scale-top">{{ topLabel }}</span>
       </div>
 
       <div
         class="console-faders"
         role="tablist"
-        aria-label="Les trois axes de l'autonomie"
+        :aria-label="`Les trois axes — ${bottomLabel} ou ${topLabel}`"
         @keydown="onKeydown"
       >
         <button
@@ -23,17 +31,20 @@
           role="tab"
           class="fader"
           :class="{ 'fader--active': axis.key === active }"
-          :style="{ '--hue': `var(${axis.hue})`, '--level': level(axis.key), '--i': i }"
+          :style="{ '--hue': `var(${axis.hue})`, '--level': levels[axis.key] ?? 0, '--i': i }"
           :aria-selected="axis.key === active"
           :aria-controls="`panel-${uid}`"
           :tabindex="axis.key === active ? 0 : -1"
-          @click="select(axis.key)"
+          @click="choose(axis.key)"
         >
           <span class="fader-track" aria-hidden="true">
             <span class="fader-fill" />
             <span class="fader-cap" />
           </span>
-          <span class="fader-name">{{ axis.short }}</span>
+          <span class="fader-label">
+            <span class="fader-prefix">{{ prefix }}</span>
+            <span class="fader-name">{{ axis.short }}</span>
+          </span>
           <span class="fader-lever">{{ axis.lever }}</span>
         </button>
       </div>
@@ -61,7 +72,7 @@
               <NuxtLink v-if="tool.to" :to="tool.to" class="panel-tool">
                 <span class="panel-tool-name">{{ tool.label }}</span>
                 <span v-if="tool.presentation" class="panel-tool-app">{{ tool.presentation.title }}</span>
-                <span v-if="tool.gestation" class="panel-tool-state">en gestation</span>
+                <span v-if="tool.status || tool.gestation" class="panel-tool-state">{{ (tool.status || 'En gestation').toLowerCase() }}</span>
               </NuxtLink>
             </li>
           </ul>
@@ -89,6 +100,9 @@ import type { AxisKey, HomeAxis, HomeStack } from '~/composables/useHomeData'
 
 const props = withDefaults(defineProps<{
   axes: HomeAxis[]
+  prefix?: string
+  topLabel?: string
+  bottomLabel?: string
   upstreamLabel?: string
   stacks?: HomeStack[]
   stacksLabel?: string
@@ -96,6 +110,9 @@ const props = withDefaults(defineProps<{
   maxStacks?: number
   compact?: boolean
 }>(), {
+  prefix: 'Autonomie',
+  topLabel: 'Émancipation',
+  bottomLabel: 'Asservissement',
   maxStacks: 8,
   upstreamLabel: 'en amont',
   stacksLabel: 'En service',
@@ -104,21 +121,58 @@ const props = withDefaults(defineProps<{
 
 const active = defineModel<AxisKey>({ default: 'numerique' })
 const uid = useId()
+const root = ref<HTMLElement | null>(null)
 const tabs = ref<HTMLButtonElement[]>([])
-const ready = ref(false)
 
 const current = computed(() => props.axes.find(a => a.key === active.value) ?? props.axes[0])
 
-// Faders rise from « je subis » once mounted; the selected one is pushed to the top.
-function level(key: AxisKey) {
-  if (!ready.value) return 0
-  return key === active.value ? 0.94 : 0.3
+// ── Motion ──────────────────────────────────────────────────────────────
+// The cursors move on their own, slowly: each one drifts, and every few
+// beats another axis is pushed up towards émancipation. Visitors watch it;
+// they can still pick an axis (click, arrows), which stops the rotation.
+// SSR renders every cursor at the bottom, so the first move is the rise.
+const BEAT_MS = 2600
+const BEATS_PER_AXIS = 3
+
+const levels = reactive<Partial<Record<AxisKey, number>>>({})
+const reduced = ref(false)
+const hovered = ref(false)
+const visible = ref(true)
+const chosen = ref(false)
+let beat = 0
+let timer: ReturnType<typeof setInterval> | undefined
+
+function place() {
+  props.axes.forEach((axis, i) => {
+    const isActive = axis.key === active.value
+    if (reduced.value) {
+      levels[axis.key] = isActive ? 0.94 : 0.3
+      return
+    }
+    const wave = Math.sin(beat * 0.9 + i * 2.1)
+    levels[axis.key] = isActive ? 0.87 + 0.06 * wave : 0.3 + 0.14 * wave
+  })
 }
 
-function select(key: AxisKey) {
+function advance() {
+  const idx = props.axes.findIndex(a => a.key === active.value)
+  active.value = props.axes[(idx + 1) % props.axes.length]!.key
+}
+
+function onBeat() {
+  if (!visible.value) return
+  beat++
+  if (!chosen.value && !hovered.value && beat % BEATS_PER_AXIS === 0) advance()
+  place()
+}
+
+function choose(key: AxisKey) {
+  chosen.value = true
   active.value = key
 }
 
+watch(active, place)
+
 function onKeydown(e: KeyboardEvent) {
   const keys = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End']
   if (!keys.includes(e.key)) return
@@ -130,12 +184,23 @@ function onKeydown(e: KeyboardEvent) {
   if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') next = idx === 0 ? last : idx - 1
   if (e.key === 'Home') next = 0
   if (e.key === 'End') next = last
-  active.value = props.axes[next]!.key
+  choose(props.axes[next]!.key)
   nextTick(() => tabs.value[next]?.focus())
 }
 
 onMounted(() => {
-  requestAnimationFrame(() => { ready.value = true })
+  reduced.value = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  requestAnimationFrame(place)
+  if (reduced.value) return
+
+  timer = setInterval(onBeat, BEAT_MS)
+  const io = new IntersectionObserver(([entry]) => { visible.value = !!entry?.isIntersecting })
+  if (root.value) io.observe(root.value)
+
+  onUnmounted(() => {
+    clearInterval(timer)
+    io.disconnect()
+  })
 })
 </script>
 
@@ -155,7 +220,7 @@ onMounted(() => {
 .console-board {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: 0.75rem;
+  gap: 0.9rem;
   padding: 1.25rem 1.25rem 1rem;
   border-radius: 16px;
   background: hsl(var(--color-surface));
@@ -164,32 +229,34 @@ onMounted(() => {
     0 18px 40px -24px hsl(var(--color-text) / 0.35);
 }
 
+/* Vertical scale, read from bottom to top */
 .console-scale {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   justify-content: space-between;
-  align-items: flex-end;
+  gap: 0.5rem;
   height: var(--track-h);
-  font-family: var(--font-mono);
-  font-size: 0.62rem;
-  line-height: 1.2;
-  color: hsl(var(--color-text) / 0.45);
-  text-align: right;
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  font-family: var(--font-display);
+  font-size: 0.72rem;
+  letter-spacing: 0.02em;
   white-space: nowrap;
 }
 
-.console-ticks {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--track-h) / 9);
-  align-items: flex-end;
+.console-scale-bottom {
+  color: hsl(var(--color-text) / 0.45);
 }
 
-.console-ticks i {
-  display: block;
-  width: 0.5rem;
-  height: 1px;
-  background: hsl(var(--color-text) / 0.2);
+.console-scale-top {
+  font-weight: 800;
+  color: hsl(var(--color-text));
+}
+
+.console-scale-line {
+  flex: 1;
+  width: 1px;
+  background: linear-gradient(to bottom, hsl(var(--color-text) / 0.12), hsl(var(--color-text) / 0.45));
 }
 
 .console-faders {
@@ -203,15 +270,13 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.55rem;
   padding: 0 0.25rem 0.25rem;
   border-radius: 12px;
   cursor: pointer;
-  transition: background 0.2s ease;
-}
-
-.fader:hover {
-  background: hsl(var(--hue) / 0.06);
+  /* --level is a registered property (main.css): the cursors glide */
+  transition: --level 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95);
+  transition-delay: calc(var(--i) * 160ms);
 }
 
 .fader:focus-visible {
@@ -233,6 +298,7 @@ onMounted(() => {
   height: calc(var(--level) * (var(--track-h) - var(--cap-h)) + var(--cap-h) / 2);
   border-radius: inherit;
   background: hsl(var(--hue) / 0.45);
+  transition: background 0.6s ease;
 }
 
 .fader--active .fader-fill {
@@ -267,25 +333,28 @@ onMounted(() => {
   background: hsl(var(--hue));
 }
 
-.console--ready .fader-fill,
-.console--ready .fader-cap {
-  transition:
-    height 0.7s var(--ease-out-expo),
-    transform 0.7s var(--ease-out-expo);
+.fader-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.1;
 }
 
-/* Orchestrated first rise: one fader after the other */
-.console--ready .fader-fill,
-.console--ready .fader-cap {
-  transition-delay: calc(var(--i) * 90ms);
+.fader-prefix {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: hsl(var(--color-text) / 0.5);
 }
 
 .fader-name {
   font-family: var(--font-display);
-  font-weight: 700;
-  font-size: 0.95rem;
+  font-weight: 800;
+  font-size: 1.05rem;
   letter-spacing: -0.01em;
-  color: hsl(var(--color-text) / 0.6);
+  color: hsl(var(--color-text) / 0.65);
+  transition: color 0.6s ease;
 }
 
 .fader--active .fader-name {
@@ -293,11 +362,21 @@ onMounted(() => {
 }
 
 .fader-lever {
-  font-family: var(--font-mono);
-  font-size: 0.64rem;
-  line-height: 1.25;
+  padding: 0.2rem 0.55rem;
+  border-radius: 20px;
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 0.8rem;
+  line-height: 1.2;
   text-align: center;
-  color: hsl(var(--color-text) / 0.45);
+  color: hsl(var(--color-text) / 0.8);
+  background: hsl(var(--hue) / 0.1);
+  transition: background 0.6s ease, color 0.6s ease;
+}
+
+.fader--active .fader-lever {
+  color: hsl(var(--color-bg));
+  background: hsl(var(--hue));
 }
 
 /* ── Panel ── */
@@ -455,15 +534,19 @@ onMounted(() => {
 
 @media (max-width: 480px) {
   .console { --track-h: 8.5rem; }
-  .console-board { padding: 1rem 0.75rem 0.75rem; gap: 0.4rem; }
-  .console-scale { white-space: normal; max-width: 3.4rem; font-size: 0.56rem; }
+  .console-board { padding: 1rem 0.6rem 0.75rem; gap: 0.35rem; }
+  .console-scale { font-size: 0.62rem; }
   .fader-cap { width: 2.2rem; margin-left: -1.1rem; }
-  .fader-name { font-size: 0.85rem; }
+  .fader-name { font-size: 0.88rem; }
+  .fader-prefix { font-size: 0.52rem; letter-spacing: 0.08em; }
+  .fader-lever { font-size: 0.68rem; padding: 0.2rem 0.4rem; }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .console--ready .fader-fill,
-  .console--ready .fader-cap,
+  .fader,
+  .fader-fill,
+  .fader-name,
+  .fader-lever,
   .panel-enter-active,
   .panel-leave-active {
     transition: none;