Sprint 2 : moteur de documents + sanctuaire

Backend:
- CRUD complet documents/items/versions (update, delete, accept, reject, reorder)
- Service IPFS (upload/retrieve/pin via kubo HTTP API)
- Service sanctuaire : pipeline SHA-256 + IPFS + on-chain (system.remark)
- Verification integrite des entrees sanctuaire
- Recherche par reference (document -> entrees sanctuaire)
- Serialisation deterministe des documents pour archivage
- 14 tests unitaires supplementaires (document service)

Frontend:
- 9 composants : StatusBadge, MarkdownRenderer, DiffView, ItemCard,
  ItemVersionDiff, DocumentList, SanctuaryEntry, IPFSLink, ChainAnchor
- Page detail item avec historique des versions et diff
- Page detail sanctuaire avec verification integrite
- Modal de creation de document + proposition de version
- Archivage document vers sanctuaire depuis la page detail

Documentation:
- API reference mise a jour (9 nouveaux endpoints)
- Guides utilisateur documents et sanctuaire enrichis

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

frontend/app/pages/documents/[slug]/items/[itemId].vue

@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import type { DocumentItem, VersionProposal } from '~/stores/documents'
+
+const route = useRoute()
+const documents = useDocumentsStore()
+const auth = useAuthStore()
+
+const slug = computed(() => route.params.slug as string)
+const itemId = computed(() => route.params.itemId as string)
+
+const currentItem = computed((): DocumentItem | undefined => {
+  return documents.items.find(i => i.id === itemId.value)
+})
+
+// Modal state for proposing a modification
+const showProposeModal = ref(false)
+const proposedText = ref('')
+const rationale = ref('')
+const proposing = ref(false)
+
+// Loading versions
+const versionsLoading = ref(false)
+
+onMounted(async () => {
+  // Fetch document + items if not already loaded
+  if (!documents.current || documents.current.slug !== slug.value) {
+    await documents.fetchBySlug(slug.value)
+  }
+  // Fetch versions for this item
+  versionsLoading.value = true
+  await documents.fetchItemVersions(slug.value, itemId.value)
+  versionsLoading.value = false
+})
+
+onUnmounted(() => {
+  documents.versions = []
+})
+
+watch([slug, itemId], async ([newSlug, newItemId]) => {
+  if (newSlug && newItemId) {
+    if (!documents.current || documents.current.slug !== newSlug) {
+      await documents.fetchBySlug(newSlug)
+    }
+    versionsLoading.value = true
+    await documents.fetchItemVersions(newSlug, newItemId)
+    versionsLoading.value = false
+  }
+})
+
+function openProposeModal() {
+  if (currentItem.value) {
+    proposedText.value = currentItem.value.current_text
+  }
+  rationale.value = ''
+  showProposeModal.value = true
+}
+
+async function submitProposal() {
+  proposing.value = true
+  try {
+    const data: VersionProposal = {
+      proposed_text: proposedText.value,
+      rationale: rationale.value || null,
+    }
+    await documents.proposeVersion(slug.value, itemId.value, data)
+    showProposeModal.value = false
+    proposedText.value = ''
+    rationale.value = ''
+  } catch {
+    // Error handled in store
+  } finally {
+    proposing.value = false
+  }
+}
+
+async function handleAcceptVersion(versionId: string) {
+  try {
+    await documents.acceptVersion(slug.value, itemId.value, versionId)
+    // Refresh item data
+    await documents.fetchBySlug(slug.value)
+  } catch {
+    // Error handled in store
+  }
+}
+
+async function handleRejectVersion(versionId: string) {
+  try {
+    await documents.rejectVersion(slug.value, itemId.value, versionId)
+  } catch {
+    // Error handled in store
+  }
+}
+
+const itemTypeLabel = (itemType: string): string => {
+  switch (itemType) {
+    case 'clause': return 'Clause'
+    case 'rule': return 'Regle'
+    case 'verification': return 'Verification'
+    case 'preamble': return 'Preambule'
+    case 'section': return 'Section'
+    default: return itemType
+  }
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Breadcrumb -->
+    <nav class="flex items-center gap-2 text-sm text-gray-500">
+      <NuxtLink to="/documents" class="hover:text-primary transition-colors">
+        Documents
+      </NuxtLink>
+      <UIcon name="i-lucide-chevron-right" class="text-xs" />
+      <NuxtLink
+        v-if="documents.current"
+        :to="`/documents/${slug}`"
+        class="hover:text-primary transition-colors"
+      >
+        {{ documents.current.title }}
+      </NuxtLink>
+      <USkeleton v-else class="h-4 w-32" />
+      <UIcon name="i-lucide-chevron-right" class="text-xs" />
+      <span v-if="currentItem" class="text-gray-900 dark:text-white font-medium">
+        Item {{ currentItem.position }}
+      </span>
+      <USkeleton v-else class="h-4 w-20" />
+    </nav>
+
+    <!-- Loading state -->
+    <template v-if="documents.loading && !currentItem">
+      <div class="space-y-4">
+        <USkeleton class="h-8 w-96" />
+        <USkeleton class="h-4 w-64" />
+        <USkeleton class="h-48 w-full" />
+      </div>
+    </template>
+
+    <!-- Error state -->
+    <template v-else-if="documents.error && !currentItem">
+      <UCard>
+        <div class="flex items-center gap-3 text-red-500">
+          <UIcon name="i-lucide-alert-circle" class="text-xl" />
+          <p>{{ documents.error }}</p>
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Item not found -->
+    <template v-else-if="!currentItem && !documents.loading">
+      <UCard>
+        <div class="text-center py-8">
+          <UIcon name="i-lucide-file-x" class="text-4xl text-gray-400 mb-3" />
+          <p class="text-gray-500">Item introuvable</p>
+          <UButton
+            :to="`/documents/${slug}`"
+            label="Retour au document"
+            variant="soft"
+            color="primary"
+            class="mt-4"
+          />
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Item detail -->
+    <template v-else-if="currentItem">
+      <!-- Item header -->
+      <div class="flex items-start justify-between">
+        <div>
+          <div class="flex items-center gap-3 mb-2">
+            <UBadge variant="solid" color="primary" size="sm">
+              {{ currentItem.position }}
+            </UBadge>
+            <UBadge variant="subtle" color="neutral" size="xs">
+              {{ itemTypeLabel(currentItem.item_type) }}
+            </UBadge>
+            <UBadge
+              v-if="currentItem.voting_protocol_id"
+              color="info"
+              variant="subtle"
+              size="xs"
+            >
+              Sous vote
+            </UBadge>
+          </div>
+          <h1
+            v-if="currentItem.title"
+            class="text-2xl font-bold text-gray-900 dark:text-white"
+          >
+            {{ currentItem.title }}
+          </h1>
+        </div>
+
+        <!-- Action buttons -->
+        <div v-if="auth.isAuthenticated" class="flex items-center gap-2">
+          <UButton
+            label="Proposer une modification"
+            icon="i-lucide-pen-line"
+            color="primary"
+            variant="soft"
+            @click="openProposeModal"
+          />
+        </div>
+      </div>
+
+      <!-- Current text -->
+      <UCard>
+        <div class="space-y-3">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-file-text" class="text-gray-400" />
+            <h2 class="text-sm font-semibold text-gray-500 uppercase">Texte en vigueur</h2>
+          </div>
+          <CommonMarkdownRenderer :content="currentItem.current_text" />
+          <div class="flex items-center gap-4 pt-3 border-t border-gray-100 dark:border-gray-800 text-xs text-gray-400">
+            <span>Cree le {{ formatDate(currentItem.created_at) }}</span>
+            <span>Mis a jour le {{ formatDate(currentItem.updated_at) }}</span>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Error banner -->
+      <UCard v-if="documents.error">
+        <div class="flex items-center gap-3 text-red-500">
+          <UIcon name="i-lucide-alert-circle" class="text-xl" />
+          <p>{{ documents.error }}</p>
+        </div>
+      </UCard>
+
+      <!-- Version history -->
+      <div>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Historique des versions ({{ documents.versions.length }})
+        </h2>
+
+        <template v-if="versionsLoading">
+          <div class="space-y-3">
+            <USkeleton v-for="i in 3" :key="i" class="h-32 w-full" />
+          </div>
+        </template>
+
+        <template v-else-if="documents.versions.length === 0">
+          <UCard>
+            <div class="text-center py-6">
+              <UIcon name="i-lucide-git-branch" class="text-3xl text-gray-400 mb-2" />
+              <p class="text-gray-500 text-sm">Aucune version proposee pour cet item</p>
+              <p class="text-xs text-gray-400 mt-1">
+                Connectez-vous pour proposer une modification
+              </p>
+            </div>
+          </UCard>
+        </template>
+
+        <div v-else class="space-y-4">
+          <DocumentsItemVersionDiff
+            v-for="version in documents.versions"
+            :key="version.id"
+            :version="version"
+            @accept="handleAcceptVersion"
+            @reject="handleRejectVersion"
+          />
+        </div>
+      </div>
+    </template>
+
+    <!-- Propose modification modal -->
+    <UModal v-model:open="showProposeModal">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Proposer une modification
+          </h3>
+          <p class="text-sm text-gray-500">
+            Modifiez le texte ci-dessous et fournissez une justification pour votre proposition.
+          </p>
+
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Texte propose
+            </label>
+            <UTextarea
+              v-model="proposedText"
+              :rows="8"
+              placeholder="Saisissez le nouveau texte..."
+              class="w-full"
+            />
+          </div>
+
+          <div class="space-y-2">
+            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Justification
+            </label>
+            <UTextarea
+              v-model="rationale"
+              :rows="3"
+              placeholder="Expliquez les raisons de cette modification..."
+              class="w-full"
+            />
+          </div>
+
+          <div class="flex items-center justify-end gap-3 pt-2">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showProposeModal = false"
+            />
+            <UButton
+              label="Soumettre la proposition"
+              icon="i-lucide-send"
+              color="primary"
+              :loading="proposing"
+              :disabled="!proposedText.trim()"
+              @click="submitProposal"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>