Composants engagement: GenesisBlock, InertiaSlider, MiniVoteBoard, EngagementCard, DocumentTuto

Backend: genesis_json sur Document, section_tag/inertia_preset/is_permanent_vote sur DocumentItem
Frontend: 5 nouveaux composants pour vue detail document enrichie
- GenesisBlock: sources, outils, synthese forum, contributeurs (depliable)
- InertiaSlider: visualisation inertie 4 niveaux avec params formule G/M
- MiniVoteBoard: tableau vote compact (barre seuil, pour/contre, participation)
- EngagementCard: carte item enrichie integrant vote + inertie + actions
- DocumentTuto: modal pedagogique vote permanent/inertie/seuils
Seed et page [slug] enrichis pour exploiter les nouveaux champs

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/app/components/documents/DocumentTuto.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+/**
+ * DocumentTuto — Quick tutorial overlay explaining how the document works.
+ * Shows how permanent voting, inertia, counter-proposals, and thresholds work.
+ */
+const open = ref(false)
+
+const steps = [
+  {
+    icon: 'i-lucide-infinity',
+    title: 'Vote permanent',
+    text: 'Chaque engagement est sous vote permanent. A tout moment, vous pouvez proposer une alternative ou voter pour/contre le texte en vigueur.',
+  },
+  {
+    icon: 'i-lucide-sliders-horizontal',
+    title: 'Inertie variable',
+    text: 'Les engagements fondamentaux ont une inertie standard (difficulte de remplacement moderee). Les annexes sont plus faciles a modifier. La formule et ses reglages sont tres proteges.',
+  },
+  {
+    icon: 'i-lucide-scale',
+    title: 'Seuil adaptatif',
+    text: 'La formule WoT adapte le seuil a la participation : peu de votants = quasi-unanimite requise ; beaucoup de votants = majorite simple suffit.',
+  },
+  {
+    icon: 'i-lucide-pen-line',
+    title: 'Contre-propositions',
+    text: 'Cliquez sur "Proposer une alternative" pour soumettre un texte de remplacement. Il sera soumis au vote et devra atteindre le seuil d\'adoption pour remplacer le texte en vigueur.',
+  },
+  {
+    icon: 'i-lucide-git-branch',
+    title: 'Depot automatique',
+    text: 'Quand une alternative est adoptee, le document officiel est mis a jour, ancre sur IPFS et on-chain, puis deploye dans les applications (Cesium, Gecko).',
+  },
+]
+</script>
+
+<template>
+  <div>
+    <UButton
+      label="Comment ca marche ?"
+      icon="i-lucide-circle-help"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      @click="open = true"
+    />
+
+    <UModal v-model:open="open" :ui="{ content: 'max-w-lg' }">
+      <template #content>
+        <div class="p-6">
+          <div class="flex items-center justify-between mb-5">
+            <h2 class="text-lg font-bold" style="color: var(--mood-text)">
+              Comment ca marche ?
+            </h2>
+            <UButton
+              icon="i-lucide-x"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              @click="open = false"
+            />
+          </div>
+
+          <div class="flex flex-col gap-4">
+            <div
+              v-for="(step, idx) in steps"
+              :key="idx"
+              class="tuto-step"
+            >
+              <div class="tuto-step__icon">
+                <UIcon :name="step.icon" class="text-base" />
+              </div>
+              <div class="tuto-step__content">
+                <h4 class="text-sm font-bold" style="color: var(--mood-text)">
+                  {{ step.title }}
+                </h4>
+                <p class="text-xs leading-relaxed" style="color: var(--mood-text-muted)">
+                  {{ step.text }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-5 pt-4 border-t" style="border-color: color-mix(in srgb, var(--mood-text) 8%, transparent)">
+            <p class="text-xs text-center" style="color: var(--mood-text-muted)">
+              Reference : formule g1vote —
+              <a
+                href="https://g1vote-view-237903.pages.duniter.org/"
+                target="_blank"
+                rel="noopener"
+                style="color: var(--mood-accent)"
+              >
+                g1vote-view
+              </a>
+            </p>
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<style scoped>
+.tuto-step {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.tuto-step__icon {
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--mood-accent) 10%, transparent);
+  color: var(--mood-accent);
+  flex-shrink: 0;
+}
+
+.tuto-step__content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+</style>