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/onboarding/OnboardingMembers.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+/** Étape 3 — toi (Person isMe) + les premiers membres, ajout rapide au clavier. */
+const meName = defineModel<string>('meName', { required: true })
+const members = defineModel<string[]>('members', { required: true })
+
+const newMember = ref('')
+const meInput = ref<HTMLInputElement | null>(null)
+const memberInput = ref<HTMLInputElement | null>(null)
+
+onMounted(() => meInput.value?.focus())
+
+function addMember() {
+  const value = newMember.value.trim()
+  if (!value) return
+  if (!members.value.includes(value)) members.value = [...members.value, value]
+  newMember.value = ''
+}
+
+function removeMember(index: number) {
+  members.value = members.value.filter((_, i) => i !== index)
+}
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <section class="memstep">
+    <label class="field">
+      <span class="field__label">Toi — ton prénom</span>
+      <input
+        ref="meInput"
+        v-model="meName"
+        class="field__input"
+        type="text"
+        placeholder="Camille"
+        autocomplete="given-name"
+        enterkeyhint="next"
+        @keydown.enter.prevent="memberInput?.focus()"
+      >
+    </label>
+
+    <div class="field">
+      <span class="field__label">Les premières personnes autour de la table</span>
+      <div class="member-add">
+        <input
+          ref="memberInput"
+          v-model="newMember"
+          class="field__input member-add__input"
+          type="text"
+          placeholder="Un prénom, puis Entrée"
+          autocomplete="off"
+          enterkeyhint="enter"
+          @keydown.enter.prevent="addMember"
+        >
+        <button
+          type="button"
+          class="ld-btn ld-btn--ghost"
+          :disabled="!newMember.trim()"
+          @click="addMember"
+        >
+          <UIcon name="i-lucide-plus" /> Ajouter
+        </button>
+      </div>
+
+      <ul v-if="members.length" class="member-chips">
+        <li v-for="(m, i) in members" :key="m" class="member-chip">
+          {{ m }}
+          <button
+            type="button"
+            class="member-chip__x"
+            :aria-label="`Retirer ${m}`"
+            @click="removeMember(i)"
+          >
+            <UIcon name="i-lucide-x" />
+          </button>
+        </li>
+      </ul>
+      <p class="field__hint">Tu pourras en ajouter à tout moment — les cercles se dessinent à l'usage.</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.memstep {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(1.25rem, 3vw, 1.75rem);
+  width: min(100%, 26rem);
+  margin-inline: auto;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.field__label {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--mood-text-muted);
+}
+
+.field__input {
+  min-height: 2.75rem;
+  padding: 0.6rem 0.9rem;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  box-shadow: inset 0 0 0 1.5px var(--mood-input-border);
+  border-radius: var(--r-input);
+}
+.field__input:focus-visible {
+  box-shadow: inset 0 0 0 1.5px var(--mood-input-focus), 0 0 0 2.5px var(--mood-accent-soft);
+}
+
+.field__hint {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--mood-text-muted);
+}
+
+.member-add {
+  display: flex;
+  gap: 0.5rem;
+}
+.member-add__input { flex: 1; min-width: 0; }
+
+.member-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin: 0.25rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.member-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 2.25rem;
+  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
+  border-radius: var(--r-pill);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  background: var(--mood-accent-soft);
+  color: var(--mood-text);
+}
+
+.member-chip__x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+  cursor: pointer;
+  background: none;
+  color: var(--mood-text-muted);
+  transition: background 0.1s ease, color 0.1s ease;
+}
+.member-chip__x:hover {
+  background: var(--mood-surface);
+  color: var(--mood-error);
+}
+</style>