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/chemin/CheminAlternatives.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+// « Je choisis autrement » — the permanent alternatives, each with its cost.
+// Weighting up is one tap; lightening REQUIRES a note and imposes a window.
+import type { ParamSpec, Verdict } from '~/types/domain'
+import { CHOOSE_OTHERWISE, PARAMETRIC_ALT, RECORD_HOW } from '~/lexicon'
+
+type AltKey = 'parametric' | 'record' | 'binary'
+
+const props = defineProps<{
+  alternatives: Verdict['alternatives']
+  parametricHint: boolean
+  chosen: AltKey | null
+  lightening: boolean
+  decidedHow: string
+  overrideNote: string
+  spec?: ParamSpec
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:chosen', value: AltKey | null): void
+  (e: 'update:decidedHow' | 'update:overrideNote', value: string): void
+  (e: 'update:spec', value: ParamSpec): void
+}>()
+
+const open = ref(false)
+
+const keyed = computed(() =>
+  props.alternatives.map((alt) => ({
+    ...alt,
+    key: (alt.route === 'record'
+      ? 'record'
+      : alt.label === PARAMETRIC_ALT ? 'parametric' : 'binary') as AltKey,
+  })),
+)
+
+function pick(key: AltKey) {
+  emit('update:chosen', props.chosen === key ? null : key)
+}
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <section class="alt">
+    <button class="alt__toggle" type="button" @click="open = !open">
+      <UIcon :name="open ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'" />
+      <span>{{ CHOOSE_OTHERWISE }}</span>
+      <span v-if="chosen && !open" class="alt__chosen-hint">1 choix actif</span>
+    </button>
+
+    <div v-if="open" class="alt__body">
+      <div class="alt__list">
+        <button
+          v-for="alt in keyed"
+          :key="alt.key"
+          class="alt__item"
+          :class="{
+            'alt__item--on': chosen === alt.key,
+            'alt__item--hint': alt.key === 'parametric' && parametricHint,
+          }"
+          type="button"
+          @click="pick(alt.key)"
+        >
+          <span class="alt__label">{{ alt.label }}</span>
+          <span class="alt__cost">{{ alt.cost }}</span>
+        </button>
+      </div>
+
+      <div v-if="chosen === 'parametric'" class="alt__detail">
+        <CheminParamEditor
+          :model-value="spec"
+          @update:model-value="emit('update:spec', $event)"
+        />
+      </div>
+
+      <div v-else-if="chosen === 'record'" class="alt__detail">
+        <label class="alt__field">
+          <span>{{ RECORD_HOW }}</span>
+          <input
+            :value="decidedHow"
+            type="text"
+            placeholder="Décidé au café, comme d'habitude…"
+            @input="emit('update:decidedHow', ($event.target as HTMLInputElement).value)"
+          >
+        </label>
+      </div>
+
+      <div v-if="lightening" class="alt__lighten">
+        <p class="alt__lighten-mention">
+          <UIcon name="i-lucide-scale" />
+          Tu prends un chemin plus léger que celui du collectif : une fenêtre d'objection
+          de 48 h est imposée, et ta raison s'affiche.
+        </p>
+        <textarea
+          :value="overrideNote"
+          class="alt__note"
+          rows="2"
+          placeholder="Pourquoi alléger ? (obligatoire)"
+          @input="emit('update:overrideNote', ($event.target as HTMLTextAreaElement).value)"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.alt { display: flex; flex-direction: column; gap: 0.625rem; }
+.alt__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: none;
+  padding: 0.375rem 0.25rem;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--mood-text-muted);
+  cursor: pointer;
+  align-self: flex-start;
+  border-radius: var(--r-input);
+}
+.alt__toggle:hover { color: var(--mood-text); }
+.alt__chosen-hint { font-size: 0.75rem; font-weight: 600; color: var(--mood-accent); }
+.alt__body { display: flex; flex-direction: column; gap: 0.75rem; }
+.alt__list { display: flex; flex-direction: column; gap: 0.5rem; }
+.alt__item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.2rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: var(--r-icon);
+  background: var(--mood-input-bg);
+  cursor: pointer;
+  text-align: left;
+  transition: transform 0.1s ease;
+}
+.alt__item:hover { transform: translateY(-1px); }
+.alt__item--hint { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--mood-accent) 55%, transparent); }
+.alt__item--on {
+  background: var(--mood-accent-soft);
+  box-shadow: 0 0 0 2px var(--mood-accent);
+}
+.alt__label { font-size: 0.9063rem; font-weight: 700; color: var(--mood-text); }
+.alt__cost { font-size: 0.8125rem; font-style: italic; color: var(--mood-text-muted); }
+.alt__detail { padding-left: 0.25rem; }
+.alt__field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.875rem; font-weight: 700; }
+.alt__field input { padding: 0.625rem 0.75rem; font-size: 0.9375rem; width: 100%; }
+.alt__lighten {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-radius: var(--r-input);
+  background: var(--mood-status-fenetre-bg);
+}
+.alt__lighten-mention {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.4rem;
+  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--mood-status-fenetre);
+}
+.alt__note { width: 100%; padding: 0.625rem 0.75rem; font-size: 0.9375rem; resize: vertical; }
+</style>

frontend/app/components/chemin/CheminChips.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+// The three tunnel chips — Concernés / Réversible ? / Ça engage quoi ? —
+// one unfolded at a time (mobile-first), plus the discreet urgency toggle,
+// the never-blocking « Ce que ça engage » suggestion line and the
+// « Aujourd'hui : … » status-quo line.
+import type { Decision, Person, Reversibility, Weight } from '~/types/domain'
+import {
+  BASELINE_PREFIX,
+  ENGAGES_LABEL,
+  REVERSIBILITY_LABELS,
+  URGENT_TOGGLE,
+  WEIGHT_LABELS,
+} from '~/lexicon'
+
+defineProps<{
+  stack: { person: Person; origin?: 'computed' | 'declared'; reason?: string }[]
+  engagesOpen: boolean
+  baselineSuggested: boolean
+}>()
+
+const scope = defineModel<Decision['scope']>('scope', { required: true })
+const reversibility = defineModel<Reversibility>('reversibility', { required: true })
+const weight = defineModel<Weight>('weight', { required: true })
+const urgent = defineModel<boolean>('urgent', { required: true })
+const resourceNote = defineModel<string>('resourceNote', { required: true })
+const resourceAmount = defineModel<number | null>('resourceAmount', { required: true })
+const resourceUnit = defineModel<string>('resourceUnit', { required: true })
+const baselineNote = defineModel<string>('baselineNote', { required: true })
+
+const openChip = ref<'scope' | 'rev' | 'weight' | null>(null)
+const REV_OPTIONS = Object.keys(REVERSIBILITY_LABELS) as Reversibility[]
+const WEIGHT_OPTIONS = Object.keys(WEIGHT_LABELS) as Weight[]
+
+function toggle(chip: 'scope' | 'rev' | 'weight') {
+  openChip.value = openChip.value === chip ? null : chip
+}
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <div class="chips">
+    <div class="chips__row">
+      <button
+        class="chips__chip"
+        :class="{ 'chips__chip--open': openChip === 'scope' }"
+        type="button"
+        @click="toggle('scope')"
+      >
+        <span class="chips__name">Concernés</span>
+        <span class="chips__value">
+          {{ scope.selfOnly ? 'moi seul' : `${stack.length} personne${stack.length > 1 ? 's' : ''}` }}
+        </span>
+      </button>
+      <button
+        class="chips__chip"
+        :class="{ 'chips__chip--open': openChip === 'rev' }"
+        type="button"
+        @click="toggle('rev')"
+      >
+        <span class="chips__name">Réversible ?</span>
+        <span class="chips__value">{{ REVERSIBILITY_LABELS[reversibility] }}</span>
+      </button>
+      <button
+        class="chips__chip"
+        :class="{ 'chips__chip--open': openChip === 'weight' }"
+        type="button"
+        @click="toggle('weight')"
+      >
+        <span class="chips__name">Ça engage quoi ?</span>
+        <span class="chips__value">{{ WEIGHT_LABELS[weight] }}</span>
+      </button>
+      <label class="chips__urgent" :class="{ 'chips__urgent--on': urgent }">
+        <input v-model="urgent" type="checkbox">
+        <UIcon name="i-lucide-siren" />
+        <span>{{ URGENT_TOGGLE }}</span>
+      </label>
+    </div>
+
+    <div v-if="openChip === 'scope'" class="ld-card chips__panel">
+      <CheminScope v-model:scope="scope" :stack="stack" />
+    </div>
+    <div v-else-if="openChip === 'rev'" class="ld-card chips__panel">
+      <div class="chips__options">
+        <button
+          v-for="opt in REV_OPTIONS"
+          :key="opt"
+          class="chips__option"
+          :class="{ 'chips__option--on': reversibility === opt }"
+          type="button"
+          @click="reversibility = opt"
+        >
+          {{ REVERSIBILITY_LABELS[opt] }}
+        </button>
+      </div>
+    </div>
+    <div v-else-if="openChip === 'weight'" class="ld-card chips__panel">
+      <div class="chips__options">
+        <button
+          v-for="opt in WEIGHT_OPTIONS"
+          :key="opt"
+          class="chips__option"
+          :class="{ 'chips__option--on': weight === opt }"
+          type="button"
+          @click="weight = opt"
+        >
+          {{ WEIGHT_LABELS[opt] }}
+        </button>
+      </div>
+    </div>
+
+    <!-- « Ce que ça engage » — suggestion dépliée, JAMAIS bloquante -->
+    <div v-if="engagesOpen" class="chips__engages">
+      <span class="chips__engages-label">{{ ENGAGES_LABEL }}</span>
+      <input
+        v-model="resourceNote"
+        class="chips__engages-note"
+        type="text"
+        placeholder="En une phrase — suggéré, jamais exigé ici"
+      >
+      <div class="chips__engages-amount">
+        <input
+          v-model.number="resourceAmount"
+          type="number"
+          min="0"
+          placeholder="Montant"
+        >
+        <select v-model="resourceUnit">
+          <option value="heures">heures</option>
+          <option value="€">€</option>
+          <option value="DU">DU</option>
+          <option value="jours">jours</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- « Aujourd'hui : … » — le statu quo, suggéré sur avis/collectif -->
+    <label v-if="baselineSuggested" class="chips__baseline">
+      <span>{{ BASELINE_PREFIX }}</span>
+      <input
+        v-model="baselineNote"
+        type="text"
+        placeholder="ce qui se passe si rien ne change"
+      >
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.chips { display: flex; flex-direction: column; gap: 0.625rem; }
+.chips__row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; }
+.chips__chip {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: var(--r-icon);
+  background: var(--mood-surface);
+  box-shadow: var(--shadow-card);
+  cursor: pointer;
+  text-align: left;
+  min-height: 2.25rem;
+  transition: transform 0.1s ease;
+}
+.chips__chip:hover { transform: translateY(-1px); }
+.chips__chip--open { box-shadow: 0 0 0 2px var(--mood-accent), var(--shadow-card); }
+.chips__name {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--mood-text-muted);
+}
+.chips__value { font-size: 0.875rem; font-weight: 700; color: var(--mood-text); }
+.chips__urgent {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-left: auto;
+  padding: 0.4rem 0.875rem;
+  border-radius: var(--r-pill);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--mood-text-muted);
+  cursor: pointer;
+  align-self: center;
+}
+.chips__urgent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+.chips__urgent--on {
+  color: var(--route-urgent);
+  background: color-mix(in srgb, var(--route-urgent) 12%, transparent);
+}
+.chips__panel { padding: 1rem; }
+.chips__options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.chips__option {
+  padding: 0.5rem 1rem;
+  border-radius: var(--r-pill);
+  font-size: 0.875rem;
+  font-weight: 600;
+  background: var(--mood-input-bg);
+  color: var(--mood-text-muted);
+  cursor: pointer;
+  min-height: 2.25rem;
+}
+.chips__option--on {
+  background: var(--mood-accent-soft);
+  color: var(--mood-accent);
+  box-shadow: 0 0 0 1.5px var(--mood-accent);
+}
+.chips__engages {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-radius: var(--r-input);
+  background: color-mix(in srgb, var(--mood-accent) 6%, transparent);
+}
+.chips__engages-label { font-size: 0.8125rem; font-weight: 700; color: var(--mood-accent); }
+.chips__engages-note { width: 100%; padding: 0.5rem 0.75rem; font-size: 0.9375rem; }
+.chips__engages-amount { display: flex; gap: 0.5rem; }
+.chips__engages-amount input { width: 7rem; padding: 0.5rem 0.75rem; font-size: 0.9375rem; }
+.chips__engages-amount select { padding: 0.5rem 0.75rem; font-size: 0.9375rem; }
+.chips__baseline {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  font-weight: 700;
+}
+.chips__baseline input {
+  flex: 1;
+  min-width: 0;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
+}
+</style>

frontend/app/components/chemin/CheminParamEditor.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+// Mini-editor of a « Réglage collectif »: up to 7 named sliders
+// {label, min, max, step, unit, baseline}, plus the 100 % split option with
+// its ONE named derived share (« calculé » — resolved, never voted).
+import type { ParamDef, ParamSpec } from '~/types/domain'
+
+const props = defineProps<{ modelValue?: ParamSpec }>()
+const emit = defineEmits<{ (e: 'update:modelValue', spec: ParamSpec): void }>()
+
+interface Row {
+  label: string
+  min: number
+  max: number
+  step: number
+  unit: string
+  baseline: number | null
+}
+
+const blankRow = (): Row => ({ label: '', min: 0, max: 100, step: 1, unit: '', baseline: null })
+
+const rows = ref<Row[]>(
+  props.modelValue
+    ? props.modelValue.params
+        .filter(p => !p.derived)
+        .map(p => ({
+          label: p.label,
+          min: p.min,
+          max: p.max,
+          step: p.step,
+          unit: p.unit ?? '',
+          baseline: p.baseline ?? null,
+        }))
+    : [blankRow()],
+)
+const sum100 = ref(props.modelValue?.constraint === 'sum100')
+const derivedName = ref(
+  props.modelValue?.params.find(p => p.derived)?.label ?? 'Réserve (calculé)',
+)
+
+const maxRows = computed(() => (sum100.value ? 6 : 7))
+const derivedBaseline = computed(() =>
+  Math.max(0, 100 - rows.value.reduce((sum, r) => sum + (r.baseline ?? 0), 0)),
+)
+
+function build(): ParamSpec {
+  const params: ParamDef[] = rows.value.map((row, i) => ({
+    key: `p${i + 1}`,
+    label: row.label.trim() || `Curseur ${i + 1}`,
+    kind: sum100.value ? 'share' : 'slider',
+    min: sum100.value ? 0 : row.min,
+    max: sum100.value ? 100 : row.max,
+    step: row.step > 0 ? row.step : 1,
+    ...(sum100.value ? { unit: '%' } : row.unit.trim() ? { unit: row.unit.trim() } : {}),
+    ...(row.baseline !== null ? { baseline: row.baseline } : {}),
+  }))
+  if (sum100.value) {
+    params.push({
+      key: 'derived',
+      label: derivedName.value.trim() || 'Réserve (calculé)',
+      kind: 'share',
+      min: 0,
+      max: 100,
+      step: 1,
+      unit: '%',
+      baseline: derivedBaseline.value,
+      derived: true,
+    })
+  }
+  return { params, constraint: sum100.value ? 'sum100' : 'none' }
+}
+
+function sync() {
+  emit('update:modelValue', build())
+}
+
+function addRow() {
+  if (rows.value.length >= maxRows.value) return
+  rows.value.push(blankRow())
+  sync()
+}
+
+function removeRow(index: number) {
+  rows.value.splice(index, 1)
+  if (rows.value.length === 0) rows.value.push(blankRow())
+  sync()
+}
+
+onMounted(sync)
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <div class="pe">
+    <div v-for="(row, i) in rows" :key="i" class="pe__row">
+      <input
+        v-model="row.label"
+        class="pe__label"
+        type="text"
+        :placeholder="`Curseur ${i + 1} — libellé métier`"
+        @input="sync"
+      >
+      <div class="pe__nums">
+        <template v-if="!sum100">
+          <label class="pe__num"><span>min</span>
+            <input v-model.number="row.min" type="number" @input="sync">
+          </label>
+          <label class="pe__num"><span>max</span>
+            <input v-model.number="row.max" type="number" @input="sync">
+          </label>
+          <label class="pe__num"><span>pas</span>
+            <input v-model.number="row.step" type="number" min="0" @input="sync">
+          </label>
+          <label class="pe__num"><span>unité</span>
+            <input v-model="row.unit" type="text" placeholder="€, h…" @input="sync">
+          </label>
+        </template>
+        <label class="pe__num"><span>aujourd'hui</span>
+          <input v-model.number="row.baseline" type="number" @input="sync">
+        </label>
+        <button
+          v-if="rows.length > 1"
+          class="pe__remove"
+          type="button"
+          aria-label="Retirer ce curseur"
+          @click="removeRow(i)"
+        >
+          <UIcon name="i-lucide-x" />
+        </button>
+      </div>
+    </div>
+
+    <button v-if="rows.length < maxRows" class="ld-btn ld-btn--quiet pe__add" type="button" @click="addRow">
+      <UIcon name="i-lucide-plus" /> Ajouter un curseur
+    </button>
+
+    <label class="pe__sum">
+      <input v-model="sum100" type="checkbox" @change="sync">
+      <span>Répartition 100 % — une part est calculée, jamais votée</span>
+    </label>
+    <div v-if="sum100" class="pe__derived">
+      <input v-model="derivedName" class="pe__label" type="text" @input="sync">
+      <span class="pe__derived-value">calculé — {{ derivedBaseline }} % aujourd'hui</span>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pe { display: flex; flex-direction: column; gap: 0.625rem; }
+.pe__row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.625rem;
+  border-radius: var(--r-input);
+  background: color-mix(in srgb, var(--mood-accent) 5%, transparent);
+}
+.pe__label { padding: 0.5rem 0.75rem; font-size: 0.9375rem; font-weight: 600; width: 100%; }
+.pe__nums { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
+.pe__num { display: flex; flex-direction: column; gap: 2px; }
+.pe__num span {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: var(--mood-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.pe__num input { width: 5.25rem; padding: 0.375rem 0.5rem; font-size: 0.875rem; }
+.pe__remove {
+  background: none;
+  color: var(--mood-text-muted);
+  cursor: pointer;
+  padding: 0.375rem;
+  border-radius: var(--r-input);
+  min-height: 2.25rem;
+}
+.pe__remove:hover { color: var(--mood-error); background: var(--mood-accent-soft); }
+.pe__add { align-self: flex-start; font-size: 0.875rem; }
+.pe__sum {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.pe__sum input { accent-color: var(--mood-accent); width: 1rem; height: 1rem; }
+.pe__derived { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
+.pe__derived .pe__label { max-width: 16rem; }
+.pe__derived-value {
+  font-size: 0.8125rem;
+  font-style: italic;
+  color: var(--mood-text-muted);
+}
+</style>

frontend/app/components/chemin/CheminPathCard.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+// « Le chemin » — the live card. Big route icon, first-person route name,
+// the ONE French explanation sentence (never a rule code), the perimeter /
+// duration / threshold strip, the pre-checked follow-ups, ONE main button.
+import type { DecisionRoute, Person, Verdict } from '~/types/domain'
+import { PATH_CARD_TITLE, ROUTE_ICONS, ROUTE_LABELS, URGENT_BADGE } from '~/lexicon'
+
+const props = defineProps<{
+  path: Verdict
+  routeShown: DecisionRoute
+  overridden: boolean
+  overrideLabel?: string
+  stack: { person: Person; origin?: 'computed' | 'declared'; reason?: string }[]
+  selfOnly: boolean
+  durationLabel: string
+  thresholdLabel: string
+  mainLabel: string
+  reviewChecked: boolean
+  engraveChecked: boolean
+  reviewLocked: boolean
+  disabled: boolean
+  blockReason: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'validate'): void
+  (e: 'update:reviewChecked' | 'update:engraveChecked', value: boolean): void
+}>()
+
+const tint = computed(() => `var(--route-${props.routeShown})`)
+const showUrgentBadge = computed(
+  () => props.path.conservatoryChain === true,
+)
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <section class="ld-card pc" :style="{ '--pc-tint': tint }">
+    <h2 class="pc__caption">{{ PATH_CARD_TITLE }}</h2>
+
+    <div class="pc__head">
+      <span class="pc__icon"><UIcon :name="ROUTE_ICONS[routeShown]" /></span>
+      <div class="pc__names">
+        <span class="pc__route">{{ ROUTE_LABELS[routeShown] }}</span>
+        <span v-if="overridden" class="pc__override">
+          Tu choisis autrement{{ overrideLabel ? ` — ${overrideLabel}` : '' }}
+        </span>
+      </div>
+    </div>
+
+    <p class="pc__explanation">{{ path.explanation }}</p>
+    <span v-if="showUrgentBadge" class="status-pill status-advice pc__urgent">
+      <UIcon name="i-lucide-siren" /> {{ URGENT_BADGE }}
+    </span>
+
+    <div class="pc__strip">
+      <div class="pc__cell">
+        <span class="pc__cell-label">Périmètre</span>
+        <span v-if="selfOnly" class="pc__cell-value">moi seul</span>
+        <LdAvatarStack v-else-if="stack.length > 0" :people="stack" :max="5" :size="24" />
+        <span v-else class="pc__cell-value">à préciser</span>
+      </div>
+      <div class="pc__cell">
+        <span class="pc__cell-label">Durée</span>
+        <span class="pc__cell-value">{{ durationLabel || 'aucune attente' }}</span>
+      </div>
+      <div v-if="thresholdLabel" class="pc__cell">
+        <span class="pc__cell-label">Seuil</span>
+        <span class="pc__cell-value">{{ thresholdLabel }}</span>
+      </div>
+    </div>
+
+    <div v-if="path.reviewRequired || path.engravingSuggested" class="pc__checks">
+      <label v-if="path.reviewRequired" class="pc__check">
+        <input
+          type="checkbox"
+          :checked="reviewChecked"
+          :disabled="reviewLocked"
+          @change="emit('update:reviewChecked', ($event.target as HTMLInputElement).checked)"
+        >
+        <span>Revoyure — l'épreuve du réel sera posée</span>
+      </label>
+      <label v-if="path.engravingSuggested" class="pc__check">
+        <input
+          type="checkbox"
+          :checked="engraveChecked"
+          @change="emit('update:engraveChecked', ($event.target as HTMLInputElement).checked)"
+        >
+        <span>Gravure — empreinte locale à l'adoption</span>
+      </label>
+    </div>
+
+    <p v-if="blockReason" class="pc__block">{{ blockReason }}</p>
+
+    <button class="ld-btn pc__main" type="button" :disabled="disabled" @click="emit('validate')">
+      {{ mainLabel }}
+    </button>
+  </section>
+</template>
+
+<style scoped>
+.pc {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  padding: 1.25rem;
+}
+.pc__caption {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--mood-text-muted);
+}
+.pc__head { display: flex; align-items: center; gap: 0.875rem; }
+.pc__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.25rem;
+  height: 3.25rem;
+  border-radius: var(--r-icon);
+  font-size: 1.625rem;
+  color: var(--pc-tint);
+  background: color-mix(in srgb, var(--pc-tint) 14%, transparent);
+  flex-shrink: 0;
+}
+.pc__names { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
+.pc__route { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
+.pc__override { font-size: 0.8125rem; font-weight: 600; color: var(--mood-accent); }
+.pc__explanation { margin: 0; font-size: 1rem; line-height: 1.5; }
+.pc__urgent { align-self: flex-start; }
+.pc__strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.25rem;
+  padding: 0.75rem 0.875rem;
+  border-radius: var(--r-input);
+  background: color-mix(in srgb, var(--pc-tint) 6%, transparent);
+}
+.pc__cell { display: flex; flex-direction: column; gap: 0.25rem; }
+.pc__cell-label {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--mood-text-muted);
+}
+.pc__cell-value { font-size: 0.875rem; font-weight: 600; }
+.pc__checks { display: flex; flex-direction: column; gap: 0.4rem; }
+.pc__check {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.pc__check input { accent-color: var(--mood-accent); width: 1rem; height: 1rem; }
+.pc__block { margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--mood-error); }
+.pc__main { align-self: stretch; font-size: 1.0625rem; min-height: 2.75rem; }
+@media (min-width: 480px) {
+  .pc__main { align-self: flex-start; padding: 0.5rem 2rem; }
+}
+</style>

frontend/app/components/chemin/CheminQ0.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+// Q0 « déjà décidé ? » — inline results while typing, from the ONE search
+// index (same as Cmd+K). Max 3: standing clauses first, then close decisions.
+import type { Id } from '~/types/domain'
+import { useCollectiveStore } from '~/stores/collective'
+import { useSearch } from '~/composables/useSearch'
+
+const props = defineProps<{ title: string; linkedClauseId?: Id }>()
+const emit = defineEmits<{ (e: 'contest', clauseId: Id): void }>()
+
+const col = useCollectiveStore()
+const { search } = useSearch()
+
+interface Q0Hit {
+  kind: 'clause' | 'decision'
+  id: Id
+  label: string
+  to: string
+}
+
+const hits = computed<Q0Hit[]>(() => {
+  const needle = props.title.trim()
+  if (needle.length < 3) return []
+  const out: Q0Hit[] = []
+  for (const hit of search(needle)) {
+    if (out.length >= 3) break
+    if (hit.kind === 'clause') {
+      const clause = col.clauses.find(c => c.id === hit.id)
+      const doc = col.docs.find(d => d.id === clause?.docId)
+      out.push({
+        kind: 'clause',
+        id: hit.id,
+        label: hit.label,
+        to: doc ? `/textes/${doc.slug}` : '/textes',
+      })
+    } else if (hit.kind === 'decision') {
+      out.push({ kind: 'decision', id: hit.id, label: hit.label, to: `/decisions/${hit.id}` })
+    }
+  }
+  return out
+})
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <div v-if="hits.length > 0" class="q0">
+    <div v-for="hit in hits" :key="hit.id" class="q0__row">
+      <template v-if="hit.kind === 'clause'">
+        <UIcon name="i-lucide-book-open-check" class="q0__icon" />
+        <NuxtLink :to="hit.to" class="q0__link">
+          C'est déjà décidé ({{ hit.label }}) — agis
+        </NuxtLink>
+        <button
+          class="q0__contest"
+          type="button"
+          :class="{ 'q0__contest--active': linkedClauseId === hit.id }"
+          @click="emit('contest', hit.id)"
+        >
+          Conteste la règle
+        </button>
+      </template>
+      <template v-else>
+        <UIcon name="i-lucide-history" class="q0__icon q0__icon--decision" />
+        <NuxtLink :to="hit.to" class="q0__link">
+          Décision proche : {{ hit.label }}
+        </NuxtLink>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.q0 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.25rem 0.25rem 0;
+}
+.q0__row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+.q0__icon { color: var(--mood-accent); flex-shrink: 0; }
+.q0__icon--decision { color: var(--mood-text-muted); }
+.q0__link {
+  color: var(--mood-text);
+  font-weight: 600;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--mood-accent) 45%, transparent);
+  text-underline-offset: 3px;
+}
+.q0__link:hover { color: var(--mood-accent); }
+.q0__contest {
+  background: none;
+  padding: 2px 10px;
+  border-radius: var(--r-pill);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--mood-accent);
+  background: var(--mood-accent-soft);
+  cursor: pointer;
+}
+.q0__contest--active { box-shadow: 0 0 0 2px var(--mood-accent); }
+</style>

frontend/app/components/chemin/CheminScope.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+// « Concernés » — perimeter editor of the tunnel. The computed first-rank
+// people are a FLOOR: no individual removal, ever. Widening is free.
+import type { Decision, Person } from '~/types/domain'
+import { useCollectiveStore } from '~/stores/collective'
+
+const props = defineProps<{
+  scope: Decision['scope']
+  stack: { person: Person; origin?: 'computed' | 'declared'; reason?: string }[]
+}>()
+const emit = defineEmits<{ (e: 'update:scope', scope: Decision['scope']): void }>()
+
+const col = useCollectiveStore()
+const tappedReason = ref('')
+
+const others = computed(() => col.people.filter(p => !p.isMe))
+
+function patch(partial: Partial<Decision['scope']>) {
+  emit('update:scope', {
+    selfOnly: props.scope.selfOnly,
+    circleIds: [...props.scope.circleIds],
+    personIds: [...props.scope.personIds],
+    ...partial,
+  })
+}
+
+function setSelfOnly(value: boolean) {
+  patch(value ? { selfOnly: true, circleIds: [], personIds: [] } : { selfOnly: false })
+}
+
+function toggleCircle(id: string) {
+  const ids = props.scope.circleIds.includes(id)
+    ? props.scope.circleIds.filter(c => c !== id)
+    : [...props.scope.circleIds, id]
+  patch({ selfOnly: false, circleIds: ids })
+}
+
+function togglePerson(id: string) {
+  const ids = props.scope.personIds.includes(id)
+    ? props.scope.personIds.filter(p => p !== id)
+    : [...props.scope.personIds, id]
+  patch({ selfOnly: false, personIds: ids })
+}
+
+function showReason(entry: { person: Person; reason?: string }) {
+  tappedReason.value = entry.reason
+    ? `${entry.person.displayName} — ${entry.reason}`
+    : entry.person.displayName
+}
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <div class="cs">
+    <div class="cs__modes">
+      <button
+        class="cs__mode"
+        :class="{ 'cs__mode--active': scope.selfOnly }"
+        type="button"
+        @click="setSelfOnly(true)"
+      >
+        Moi seul
+      </button>
+      <button
+        class="cs__mode"
+        :class="{ 'cs__mode--active': !scope.selfOnly }"
+        type="button"
+        @click="setSelfOnly(false)"
+      >
+        D'autres que moi
+      </button>
+    </div>
+
+    <template v-if="!scope.selfOnly">
+      <div v-if="stack.length > 0" class="cs__stack">
+        <LdAvatarStack :people="stack" :max="8" :size="30" @tap="showReason" />
+        <span class="cs__count">{{ stack.length }} concerné·e·s</span>
+      </div>
+      <p v-if="tappedReason" class="cs__reason">{{ tappedReason }}</p>
+
+      <div v-if="col.circles.length > 0" class="cs__group">
+        <span class="cs__label">Cercles</span>
+        <div class="cs__chips">
+          <button
+            v-for="circle in col.circles"
+            :key="circle.id"
+            class="cs__chip"
+            :class="{ 'cs__chip--on': scope.circleIds.includes(circle.id) }"
+            type="button"
+            @click="toggleCircle(circle.id)"
+          >
+            <UIcon
+              :name="circle.kind === 'place' ? 'i-lucide-map-pin'
+                : circle.kind === 'theme' ? 'i-lucide-tag' : 'i-lucide-users'"
+            />
+            <span>{{ circle.name }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div v-if="others.length > 0" class="cs__group">
+        <span class="cs__label">Personnes nommées</span>
+        <div class="cs__chips">
+          <button
+            v-for="person in others"
+            :key="person.id"
+            class="cs__chip"
+            :class="{ 'cs__chip--on': scope.personIds.includes(person.id) }"
+            type="button"
+            @click="togglePerson(person.id)"
+          >
+            {{ person.displayName }}
+          </button>
+        </div>
+      </div>
+
+      <p class="cs__floor">
+        On ne retire pas un·e concerné·e en premier lieu — le périmètre s'élargit librement,
+        jamais en dessous du calcul.
+      </p>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.cs { display: flex; flex-direction: column; gap: 0.75rem; }
+.cs__modes { display: flex; gap: 0.5rem; }
+.cs__mode {
+  padding: 0.4rem 1rem;
+  border-radius: var(--r-pill);
+  font-size: 0.875rem;
+  font-weight: 700;
+  background: var(--mood-input-bg);
+  color: var(--mood-text-muted);
+  cursor: pointer;
+}
+.cs__mode--active { background: var(--mood-accent); color: var(--mood-accent-text); }
+.cs__stack { display: flex; align-items: center; gap: 0.625rem; }
+.cs__count { font-size: 0.8125rem; font-weight: 600; color: var(--mood-text-muted); }
+.cs__reason { margin: 0; font-size: 0.8125rem; color: var(--mood-accent); }
+.cs__group { display: flex; flex-direction: column; gap: 0.4rem; }
+.cs__label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--mood-text-muted);
+}
+.cs__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.cs__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.35rem 0.75rem;
+  border-radius: var(--r-pill);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  background: var(--mood-input-bg);
+  color: var(--mood-text-muted);
+  cursor: pointer;
+  min-height: 2.25rem;
+}
+.cs__chip--on {
+  background: var(--mood-accent-soft);
+  color: var(--mood-accent);
+  box-shadow: 0 0 0 1.5px var(--mood-accent);
+}
+.cs__floor {
+  margin: 0;
+  font-size: 0.75rem;
+  font-style: italic;
+  color: var(--mood-text-muted);
+}
+</style>

frontend/app/components/chemin/CheminSuggestion.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// R6 / maturation overlay under the path card — a discreet suggestion,
+// never blocking, never re-routing.
+import type { Verdict } from '~/types/domain'
+import { MATURATION_CARD } from '~/lexicon'
+
+defineProps<{ suggestion: NonNullable<Verdict['suggestion']> }>()
+const mandateAttached = defineModel<boolean>('mandateAttached', { required: true })
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <div class="ld-card sug">
+    <template v-if="suggestion.kind === 'claim-mandate'">
+      <UIcon name="i-lucide-repeat" class="sug__icon" />
+      <span>Encore cette décision — réclame un mandat pour ne plus y revenir.</span>
+      <label class="sug__check">
+        <input v-model="mandateAttached" type="checkbox">
+        <span>Joindre la demande de mandat</span>
+      </label>
+    </template>
+    <template v-else-if="suggestion.kind === 'protocolize'">
+      <UIcon name="i-lucide-sprout" class="sug__icon" />
+      <NuxtLink to="/textes" class="sug__link">{{ MATURATION_CARD }}</NuxtLink>
+    </template>
+    <template v-else>
+      <UIcon name="i-lucide-book-open-check" class="sug__icon" />
+      <NuxtLink to="/textes" class="sug__link">
+        Cette pratique revient — crée une règle en quelques phrases.
+      </NuxtLink>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.sug {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+.sug__icon { font-size: 1.125rem; color: var(--mood-accent); flex-shrink: 0; }
+.sug__check {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  cursor: pointer;
+  color: var(--mood-accent);
+}
+.sug__check input { accent-color: var(--mood-accent); }
+.sug__link { color: var(--mood-text); }
+.sug__link:hover { color: var(--mood-accent); }
+</style>