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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+// <!-- ld-v2 --> Période du mandat — barre de temps simple : début, fin,
+// marqueur aujourd'hui. Un fait daté, pas une jauge de quoi que ce soit.
+import { formatDay } from './mandateUi'
+
+const props = defineProps<{ startsAt: string; endsAt: string }>()
+
+const pct = computed(() => {
+  const start = new Date(props.startsAt).getTime()
+  const end = new Date(props.endsAt).getTime()
+  if (end <= start) return 100
+  return Math.min(100, Math.max(0, ((Date.now() - start) / (end - start)) * 100))
+})
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <div class="mperiod">
+    <div class="mperiod__track">
+      <div class="mperiod__fill" :style="{ width: `${pct}%` }" />
+      <div class="mperiod__today" :style="{ left: `${pct}%` }" title="aujourd'hui" />
+    </div>
+    <div class="mperiod__dates">
+      <span>{{ formatDay(startsAt) }}</span>
+      <span>{{ formatDay(endsAt) }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.mperiod { display: flex; flex-direction: column; gap: 0.375rem; }
+.mperiod__track {
+  position: relative;
+  height: 8px;
+  border-radius: 4px;
+  background: var(--mood-accent-soft);
+}
+.mperiod__fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  border-radius: 4px 0 0 4px;
+  background: var(--mood-accent);
+  opacity: 0.55;
+}
+.mperiod__today {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--mood-accent);
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 0 2px var(--mood-surface);
+}
+.mperiod__dates {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.8125rem;
+  color: var(--mood-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+</style>