v2 : les 14 écrans — le tour complet de la démocratie d'exercice

- Aujourd'hui (Fil 13 sections + capture sticky) + Le chemin (tunnel 2 gestes,
  Q0 inline, 3 chips, dérogation asymétrique, alternatives réglage/consignation)
- Registre + fiche décision (timeline, périmètre premier/second lieu auditable,
  affluence non-ignorable, S'instruire condensé, éléments + cartographie de
  clôture, épreuve du réel, Remettre en question, PV A4, gravure)
- Salle de vote 5 modalités (consentement, nuancé+histogramme, binaire hérité
  avec jauge inertielle, Réglage collectif complet — faisceau, médiane basse,
  Pour moi, Explorer, cristallisation-geste —, élection à départage humain)
- Textes (Pacte en clair, document vivant, diff, vue projetée, Atelier des
  formules porté du v1 sur le moteur unique) + Mandats (faits comptés, feux
  de la rampe, wizard 3 étapes) + Observatoire (consigner→observer→protocoliser)
- Onboarding 7 gabarits + Données locales (export/import, attributs, atelier)
- voting→framing gardé (Reformuler d'un réglage figé non cristallisé)
- Pages v1 supprimées (login, documents, mandates, protocols, sanctuary,
  tools, decisions/new) — 342 tests verts, build zéro erreur

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/app/components/mandates/ObservatoryBars.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+// <!-- ld-v2 --> Barres horizontales sobres de l'Observatoire — une mesure,
+// une teinte (l'accent du mood, jamais codée en dur) ; l'identité est portée
+// par le libellé, la grandeur par la longueur. Extrémité arrondie côté donnée,
+// base carrée sur la ligne de base (specs dataviz).
+export interface BarItem {
+  label: string
+  value: number
+  display?: string
+}
+
+const props = defineProps<{ items: BarItem[] }>()
+
+const max = computed(() => Math.max(1, ...props.items.map(i => i.value)))
+
+function width(value: number): string {
+  if (value <= 0) return '0'
+  return `${Math.max(2, (value / max.value) * 100)}%`
+}
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <div class="obars" role="img">
+    <div v-for="item in items" :key="item.label" class="obars__row">
+      <span class="obars__label">{{ item.label }}</span>
+      <span class="obars__plot">
+        <span class="obars__fill" :style="{ width: width(item.value) }" />
+      </span>
+      <span class="obars__value">{{ item.display ?? item.value }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.obars { display: flex; flex-direction: column; gap: 0.5rem; }
+.obars__row {
+  display: grid;
+  grid-template-columns: minmax(5.5rem, 8rem) 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+}
+.obars__label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--mood-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.obars__plot {
+  position: relative;
+  height: 14px;
+  /* ligne de base : filet discret, une teinte du mood */
+  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--mood-text-muted) 35%, transparent);
+}
+.obars__fill {
+  position: absolute;
+  inset: 1px auto 1px 0;
+  background: var(--mood-accent);
+  border-radius: 0 4px 4px 0; /* extrémité donnée arrondie, base carrée */
+}
+.obars__value {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--mood-text);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+</style>