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

@@ -0,0 +1,187 @@
+<script lang="ts">
+/** The six accent swatches offered at creation — well-water field, shared with /creer. */
+export interface ColorChoice {
+  hex: string
+  label: string
+}
+
+export const COLOR_CHOICES: ColorChoice[] = [
+  { hex: '#0f7fa8', label: 'Eau vive' },
+  { hex: '#2e8a72', label: 'Eau végétale' },
+  { hex: '#4f7a3c', label: 'Mousse' },
+  { hex: '#96682a', label: 'Bronze' },
+  { hex: '#b0563c', label: 'Terre cuite' },
+  { hex: '#5c68b8', label: 'Iris' },
+]
+</script>
+
+<script setup lang="ts">
+/** Étape 1 — nom du collectif, couleur, ambiance. Entrée valide l'étape. */
+const name = defineModel<string>('name', { required: true })
+const color = defineModel<string>('color', { required: true })
+
+const emit = defineEmits<{ next: [] }>()
+
+const { moods, currentMood, setMood } = useLibreMood()
+
+const nameInput = ref<HTMLInputElement | null>(null)
+onMounted(() => nameInput.value?.focus())
+</script>
+
+<template>
+  <!-- ld-v2 -->
+  <section class="idstep">
+    <label class="field">
+      <span class="field__label">Le nom de votre collectif</span>
+      <input
+        ref="nameInput"
+        v-model="name"
+        class="field__input"
+        type="text"
+        placeholder="Les Jardins du Canal…"
+        autocomplete="off"
+        enterkeyhint="next"
+        @keydown.enter.prevent="emit('next')"
+      >
+    </label>
+
+    <div class="field">
+      <span class="field__label">Sa couleur</span>
+      <div class="swatches" role="group" aria-label="Couleur du collectif">
+        <button
+          v-for="c in COLOR_CHOICES"
+          :key="c.hex"
+          type="button"
+          class="swatch"
+          :class="{ 'swatch--active': color === c.hex }"
+          :style="{ background: c.hex }"
+          :aria-label="c.label"
+          :aria-pressed="color === c.hex"
+          :title="c.label"
+          @click="color = c.hex"
+        />
+      </div>
+    </div>
+
+    <div class="field">
+      <span class="field__label">L'ambiance de tes écrans</span>
+      <div class="moods" role="group" aria-label="Ambiance">
+        <button
+          v-for="m in moods"
+          :key="m.id"
+          type="button"
+          class="mood-pill"
+          :class="{ 'mood-pill--active': currentMood === m.id }"
+          :aria-pressed="currentMood === m.id"
+          @click="setMood(m.id)"
+        >
+          <span class="mood-pill__dot" :style="{ background: m.color }" />
+          {{ m.label }}
+        </button>
+      </div>
+      <p class="field__hint">L'ambiance ne vaut que pour toi, sur cette machine.</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.idstep {
+  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);
+}
+
+.swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.swatch {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  cursor: pointer;
+  padding: 0;
+  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), 0 1px 3px var(--mood-shadow);
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+.swatch:hover { transform: translateY(-1px) scale(1.08); }
+.swatch:active { transform: translateY(0); }
+.swatch--active {
+  box-shadow:
+    inset 0 0 0 1.5px rgba(255, 255, 255, 0.35),
+    0 0 0 2.5px var(--mood-bg),
+    0 0 0 5px var(--mood-accent);
+}
+
+.moods {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.mood-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-height: 2.25rem;
+  padding: 0.35rem 0.9rem;
+  border-radius: var(--r-pill);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  background: var(--mood-surface);
+  color: var(--mood-text);
+  box-shadow: var(--shadow-card);
+  transition: transform 0.1s ease, box-shadow 0.12s ease;
+}
+.mood-pill:hover { transform: translateY(-1px); }
+.mood-pill:active { transform: translateY(0); }
+.mood-pill--active {
+  box-shadow: var(--shadow-card), 0 0 0 2px var(--mood-accent);
+  color: var(--mood-accent);
+}
+
+.mood-pill__dot {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  flex-shrink: 0;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+}
+</style>