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].vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
+import type { DocumentItem } from '~/stores/documents'
+
 const route = useRoute()
 const documents = useDocumentsStore()
+const auth = useAuthStore()
 
 const slug = computed(() => route.params.slug as string)
 
+const archiving = ref(false)
+
 onMounted(async () => {
   await documents.fetchBySlug(slug.value)
 })
@@ -18,24 +23,6 @@ watch(slug, async (newSlug) => {
   }
 })
 
-const statusColor = (status: string) => {
-  switch (status) {
-    case 'active': return 'success'
-    case 'draft': return 'warning'
-    case 'archived': return 'neutral'
-    default: return 'neutral'
-  }
-}
-
-const statusLabel = (status: string) => {
-  switch (status) {
-    case 'active': return 'Actif'
-    case 'draft': return 'Brouillon'
-    case 'archived': return 'Archive'
-    default: return status
-  }
-}
-
 const typeLabel = (docType: string) => {
   switch (docType) {
     case 'licence': return 'Licence'
@@ -46,17 +33,6 @@ const typeLabel = (docType: string) => {
   }
 }
 
-const itemTypeLabel = (itemType: 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',
@@ -64,6 +40,21 @@ function formatDate(dateStr: string): string {
     year: 'numeric',
   })
 }
+
+function handlePropose(item: DocumentItem) {
+  navigateTo(`/documents/${slug.value}/items/${item.id}`)
+}
+
+async function archiveToSanctuary() {
+  archiving.value = true
+  try {
+    await documents.archiveDocument(slug.value)
+  } catch {
+    // Error handled in store
+  } finally {
+    archiving.value = false
+  }
+}
 </script>
 
 <template>
@@ -114,14 +105,24 @@ function formatDate(dateStr: string): string {
               <UBadge variant="subtle" color="primary">
                 {{ typeLabel(documents.current.doc_type) }}
               </UBadge>
-              <UBadge :color="statusColor(documents.current.status)" variant="subtle">
-                {{ statusLabel(documents.current.status) }}
-              </UBadge>
+              <CommonStatusBadge :status="documents.current.status" type="document" />
               <span class="text-sm text-gray-500 font-mono">
                 v{{ documents.current.version }}
               </span>
             </div>
           </div>
+
+          <!-- Archive button for authenticated users with active documents -->
+          <div v-if="auth.isAuthenticated && documents.current.status === 'active'" class="flex items-center gap-2">
+            <UButton
+              label="Archiver dans le Sanctuaire"
+              icon="i-lucide-archive"
+              color="primary"
+              variant="soft"
+              :loading="archiving"
+              @click="archiveToSanctuary"
+            />
+          </div>
         </div>
 
         <!-- Description -->
@@ -153,14 +154,17 @@ function formatDate(dateStr: string): string {
           </div>
           <div>
             <p class="text-gray-500">Ancrage IPFS</p>
-            <p class="font-medium text-gray-900 dark:text-white">
-              <template v-if="documents.current.ipfs_cid">
-                <span class="font-mono text-xs">{{ documents.current.ipfs_cid.slice(0, 16) }}...</span>
-              </template>
-              <template v-else>
-                <span class="text-gray-400">Non ancre</span>
-              </template>
-            </p>
+            <div class="mt-1">
+              <SanctuaryIPFSLink :cid="documents.current.ipfs_cid" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Chain anchor info -->
+        <div v-if="documents.current.chain_anchor" class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
+          <div class="flex items-center gap-2">
+            <p class="text-sm text-gray-500">Ancrage on-chain :</p>
+            <SanctuaryChainAnchor :tx-hash="documents.current.chain_anchor" :block="null" />
           </div>
         </div>
       </UCard>
@@ -177,52 +181,14 @@ function formatDate(dateStr: string): string {
         </div>
 
         <div v-else class="space-y-4">
-          <UCard
+          <DocumentsItemCard
             v-for="item in documents.items"
             :key="item.id"
-          >
-            <div class="space-y-3">
-              <!-- Item header -->
-              <div class="flex items-center justify-between">
-                <div class="flex items-center gap-3">
-                  <span class="text-sm font-mono font-bold text-primary">
-                    {{ item.position }}
-                  </span>
-                  <UBadge variant="subtle" color="neutral" size="xs">
-                    {{ itemTypeLabel(item.item_type) }}
-                  </UBadge>
-                  <span v-if="item.title" class="text-sm font-semibold text-gray-900 dark:text-white">
-                    {{ item.title }}
-                  </span>
-                </div>
-                <div class="flex items-center gap-2">
-                  <UBadge
-                    v-if="item.voting_protocol_id"
-                    color="info"
-                    variant="subtle"
-                    size="xs"
-                  >
-                    Sous vote
-                  </UBadge>
-                  <UBadge
-                    v-else
-                    color="neutral"
-                    variant="subtle"
-                    size="xs"
-                  >
-                    Pas de vote
-                  </UBadge>
-                </div>
-              </div>
-
-              <!-- Item text -->
-              <div class="pl-8">
-                <p class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap leading-relaxed">
-                  {{ item.current_text }}
-                </p>
-              </div>
-            </div>
-          </UCard>
+            :item="item"
+            :document-slug="slug"
+            :show-actions="auth.isAuthenticated"
+            @propose="handlePropose"
+          />
         </div>
       </div>
     </template>