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/texts/ClauseDetail.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+// <!-- ld-v2 --> Détail dépliable d'une clause : version courante (markdown
+// simple), versions proposées avec diff (contenu d'abord, auteur replié),
+// décision fondatrice et amendements chaînés, valeur en clair des clauses de
+// réglage du Pacte (« effet immédiat à l'adoption »), geste « Proposer une version ».
+import type { Clause, ClauseVersion } from '~/types/domain'
+import { STATUS_LABELS } from '~/lexicon'
+import type { ChainEntry, ClauseSessionGauge, ProposedEntry } from './textsModel'
+import { formatDateFr } from './textsModel'
+
+const props = withDefaults(defineProps<{
+  clause: Clause
+  currentVersion?: ClauseVersion
+  proposed?: ProposedEntry[]
+  founding?: ChainEntry
+  amendments?: ChainEntry[]
+  /** Valeur en clair (clauses de réglage du Pacte). */
+  settingText?: string | null
+  gauge?: ClauseSessionGauge | null
+  /** Atelier pré-réglé sur le protocole d'amendement de cette clause. */
+  atelierLink?: string | null
+}>(), { proposed: () => [], amendments: () => [], settingText: null, gauge: null, atelierLink: null })
+
+const hasChain = computed(() => props.founding !== undefined || props.amendments.length > 0)
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <div class="clause-detail">
+    <!-- Valeur en clair — Pacte -->
+    <div v-if="settingText" class="clause-detail__setting">
+      <UIcon name="i-lucide-settings-2" class="clause-detail__setting-icon" />
+      <div>
+        <p class="clause-detail__setting-value">{{ settingText }}</p>
+        <p class="clause-detail__setting-note">Effet immédiat à l'adoption — le Pacte est le réglage.</p>
+      </div>
+    </div>
+
+    <!-- Session en cours -->
+    <SessionMiniGauge v-if="gauge" :gauge="gauge" with-title class="clause-detail__gauge" />
+
+    <!-- Version courante -->
+    <div v-if="currentVersion" class="clause-detail__current">
+      <p class="clause-detail__heading">
+        Version en vigueur
+        <span class="clause-detail__version-label">{{ currentVersion.versionLabel }}</span>
+        <span v-if="currentVersion.adoptedAt" class="clause-detail__date">
+          adoptée le {{ formatDateFr(currentVersion.adoptedAt) }}
+        </span>
+      </p>
+      <MarkdownRenderer :content="currentVersion.content" class="clause-detail__content" />
+    </div>
+    <p v-else class="clause-detail__empty">Cette clause n'a pas encore de version en vigueur.</p>
+
+    <!-- Versions proposées : le contenu d'abord, l'auteur replié -->
+    <div v-if="proposed.length" class="clause-detail__proposals">
+      <p class="clause-detail__heading">
+        {{ proposed.length > 1 ? `${proposed.length} versions proposées` : 'Une version est proposée' }}
+      </p>
+      <article
+        v-for="entry in proposed"
+        :key="entry.version.id"
+        class="clause-detail__proposal"
+      >
+        <ClauseVersionDiff
+          :current="currentVersion?.content ?? ''"
+          :proposed="entry.version.content"
+        />
+        <details class="clause-detail__author">
+          <summary class="clause-detail__author-summary">
+            <UIcon name="i-lucide-user" />
+            Qui propose ? <span class="clause-detail__version-label">{{ entry.version.versionLabel }}</span>
+          </summary>
+          <p class="clause-detail__author-body">
+            Proposée par <strong>{{ entry.authorName }}</strong>
+            <template v-if="entry.decisionId">
+              — dans le cadre de
+              <NuxtLink :to="`/decisions/${entry.decisionId}`" class="clause-detail__link">
+                {{ entry.decisionTitle ?? 'la décision liée' }}
+              </NuxtLink>
+            </template>
+          </p>
+        </details>
+      </article>
+    </div>
+
+    <!-- Décision fondatrice + amendements chaînés -->
+    <div v-if="hasChain" class="clause-detail__chain">
+      <p class="clause-detail__heading">D'où vient cette clause</p>
+      <ol class="clause-detail__chain-list">
+        <li v-if="founding" class="clause-detail__chain-item">
+          <UIcon name="i-lucide-sprout" class="clause-detail__chain-icon" />
+          <NuxtLink :to="`/decisions/${founding.id}`" class="clause-detail__link">
+            {{ founding.title }}
+          </NuxtLink>
+          <span v-if="founding.decidedAt" class="clause-detail__date">
+            {{ formatDateFr(founding.decidedAt) }}
+          </span>
+        </li>
+        <li
+          v-for="amendment in amendments"
+          :key="amendment.id"
+          class="clause-detail__chain-item"
+        >
+          <UIcon name="i-lucide-git-commit-vertical" class="clause-detail__chain-icon" />
+          <NuxtLink :to="`/decisions/${amendment.id}`" class="clause-detail__link">
+            {{ amendment.title }}
+          </NuxtLink>
+          <span class="status-pill" :class="`status-${amendment.status}`">
+            {{ STATUS_LABELS[amendment.status] }}
+          </span>
+        </li>
+      </ol>
+    </div>
+
+    <!-- Le geste -->
+    <div class="clause-detail__actions">
+      <NuxtLink :to="`/decider?clause=${clause.id}`" class="ld-btn clause-detail__propose">
+        <UIcon name="i-lucide-pen-line" />
+        Proposer une version
+      </NuxtLink>
+      <NuxtLink v-if="atelierLink" :to="atelierLink" class="ld-btn ld-btn--quiet clause-detail__propose">
+        <UIcon name="i-lucide-flask-conical" />
+        Comprendre ce seuil
+      </NuxtLink>
+      <p class="clause-detail__actions-note">
+        Amender, c'est décider — le chemin s'ouvre avec l'inertie de cette clause.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.clause-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0.9rem 1rem 1.1rem;
+  border-radius: var(--r-input);
+  background: color-mix(in srgb, var(--mood-text) 2.5%, var(--mood-surface));
+}
+
+.clause-detail__setting {
+  display: flex;
+  gap: 0.6rem;
+  align-items: flex-start;
+  padding: 0.7rem 0.9rem;
+  border-radius: var(--r-input);
+  background: var(--mood-accent-soft);
+}
+.clause-detail__setting-icon { color: var(--mood-accent); font-size: 1.1rem; margin-top: 2px; }
+.clause-detail__setting-value { font-size: 0.9375rem; font-weight: 800; color: var(--mood-text); }
+.clause-detail__setting-note { font-size: 0.75rem; color: var(--mood-text-muted); margin-top: 2px; }
+
+.clause-detail__gauge { align-self: flex-start; }
+
+.clause-detail__heading {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  font-size: 0.6875rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--mood-text-muted);
+  margin-bottom: 0.4rem;
+}
+.clause-detail__version-label {
+  font-family: monospace;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  padding: 1px 7px;
+  border-radius: var(--r-pill);
+  background: color-mix(in srgb, var(--mood-text) 7%, transparent);
+  color: var(--mood-text);
+  text-transform: none;
+  letter-spacing: 0;
+}
+.clause-detail__date {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--mood-text-muted);
+  text-transform: none;
+  letter-spacing: 0;
+}
+.clause-detail__content { font-size: 0.875rem; }
+.clause-detail__empty { font-size: 0.8125rem; color: var(--mood-text-muted); font-style: italic; }
+
+.clause-detail__proposal { display: flex; flex-direction: column; gap: 0.4rem; }
+.clause-detail__proposal + .clause-detail__proposal { margin-top: 0.75rem; }
+
+.clause-detail__author-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--mood-text-muted);
+  cursor: pointer;
+  user-select: none;
+}
+.clause-detail__author-body { font-size: 0.8125rem; color: var(--mood-text); margin-top: 0.35rem; }
+
+.clause-detail__chain-list { display: flex; flex-direction: column; gap: 0.35rem; }
+.clause-detail__chain-item {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  flex-wrap: wrap;
+  font-size: 0.8125rem;
+}
+.clause-detail__chain-icon { color: var(--mood-accent); font-size: 0.95rem; flex-shrink: 0; }
+.clause-detail__chain-item .status-pill { font-size: 0.6875rem; padding: 2px 9px; }
+
+.clause-detail__link { color: var(--mood-accent); text-decoration: none; font-weight: 600; }
+.clause-detail__link:hover { text-decoration: underline; }
+
+.clause-detail__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-top: 0.25rem;
+}
+.clause-detail__propose { text-decoration: none; font-size: 0.875rem; }
+.clause-detail__actions-note { font-size: 0.75rem; color: var(--mood-text-muted); }
+</style>