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>

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>

frontend/app/pages/documents/index.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import type { DocumentCreate } from '~/stores/documents'
+
 const documents = useDocumentsStore()
+const auth = useAuthStore()
 
 const filterType = ref<string | undefined>(undefined)
 const filterStatus = ref<string | undefined>(undefined)
@@ -19,13 +22,22 @@ const statusOptions = [
   { label: 'Archive', value: 'archived' },
 ]
 
-const columns = [
-  { key: 'title', label: 'Titre' },
-  { key: 'doc_type', label: 'Type' },
-  { key: 'version', label: 'Version' },
-  { key: 'status', label: 'Statut' },
-  { key: 'items_count', label: 'Items' },
-  { key: 'updated_at', label: 'Mis a jour' },
+// New document modal state
+const showNewDocModal = ref(false)
+const newDoc = ref<DocumentCreate>({
+  slug: '',
+  title: '',
+  doc_type: 'licence',
+  description: null,
+  version: '1.0.0',
+})
+const creating = ref(false)
+
+const newDocTypeOptions = [
+  { label: 'Licence', value: 'licence' },
+  { label: 'Engagement', value: 'engagement' },
+  { label: 'Reglement', value: 'reglement' },
+  { label: 'Constitution', value: 'constitution' },
 ]
 
 async function loadDocuments() {
@@ -43,40 +55,47 @@ watch([filterType, filterStatus], () => {
   loadDocuments()
 })
 
-const statusColor = (status: string) => {
-  switch (status) {
-    case 'active': return 'success'
-    case 'draft': return 'warning'
-    case 'archived': return 'neutral'
-    default: return 'neutral'
+function openNewDocModal() {
+  newDoc.value = {
+    slug: '',
+    title: '',
+    doc_type: 'licence',
+    description: null,
+    version: '1.0.0',
   }
+  showNewDocModal.value = true
 }
 
-const statusLabel = (status: string) => {
-  switch (status) {
-    case 'active': return 'Actif'
-    case 'draft': return 'Brouillon'
-    case 'archived': return 'Archive'
-    default: return status
-  }
+function generateSlug(title: string): string {
+  return title
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-z0-9\s-]/g, '')
+    .replace(/\s+/g, '-')
+    .replace(/-+/g, '-')
+    .slice(0, 64)
 }
 
-const typeLabel = (docType: string) => {
-  switch (docType) {
-    case 'licence': return 'Licence'
-    case 'engagement': return 'Engagement'
-    case 'reglement': return 'Reglement'
-    case 'constitution': return 'Constitution'
-    default: return docType
+watch(() => newDoc.value.title, (title) => {
+  if (title) {
+    newDoc.value.slug = generateSlug(title)
   }
-}
+})
 
-function formatDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString('fr-FR', {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  })
+async function createDocument() {
+  creating.value = true
+  try {
+    const doc = await documents.createDocument(newDoc.value)
+    showNewDocModal.value = false
+    if (doc) {
+      navigateTo(`/documents/${doc.slug}`)
+    }
+  } catch {
+    // Error handled in store
+  } finally {
+    creating.value = false
+  }
 }
 </script>
 
@@ -92,6 +111,15 @@ function formatDate(dateStr: string): string {
           Documents fondateurs de la communaute Duniter/G1 sous vote permanent
         </p>
       </div>
+
+      <!-- New document button for authenticated users -->
+      <UButton
+        v-if="auth.isAuthenticated"
+        label="Nouveau document"
+        icon="i-lucide-plus"
+        color="primary"
+        @click="openNewDocModal"
+      />
     </div>
 
     <!-- Filters -->
@@ -110,15 +138,8 @@ function formatDate(dateStr: string): string {
       />
     </div>
 
-    <!-- Loading state -->
-    <template v-if="documents.loading">
-      <div class="space-y-3">
-        <USkeleton v-for="i in 5" :key="i" class="h-12 w-full" />
-      </div>
-    </template>
-
     <!-- Error state -->
-    <template v-else-if="documents.error">
+    <template v-if="documents.error">
       <UCard>
         <div class="flex items-center gap-3 text-red-500">
           <UIcon name="i-lucide-alert-circle" class="text-xl" />
@@ -127,65 +148,96 @@ function formatDate(dateStr: string): string {
       </UCard>
     </template>
 
-    <!-- Empty state -->
-    <template v-else-if="documents.list.length === 0">
-      <UCard>
-        <div class="text-center py-8">
-          <UIcon name="i-lucide-book-open" class="text-4xl text-gray-400 mb-3" />
-          <p class="text-gray-500">Aucun document de reference pour le moment</p>
-        </div>
-      </UCard>
-    </template>
+    <!-- Document list component -->
+    <DocumentsDocumentList
+      :documents="documents.list"
+      :loading="documents.loading"
+    />
 
-    <!-- Documents table -->
-    <template v-else>
-      <UCard>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead>
-              <tr class="border-b border-gray-200 dark:border-gray-700">
-                <th v-for="col in columns" :key="col.key" class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">
-                  {{ col.label }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="doc in documents.list"
-                :key="doc.id"
-                class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
-                @click="navigateTo(`/documents/${doc.slug}`)"
-              >
-                <td class="px-4 py-3">
-                  <div class="flex items-center gap-2">
-                    <UIcon name="i-lucide-file-text" class="text-gray-400" />
-                    <span class="font-medium text-gray-900 dark:text-white">{{ doc.title }}</span>
-                  </div>
-                </td>
-                <td class="px-4 py-3">
-                  <UBadge variant="subtle" color="primary">
-                    {{ typeLabel(doc.doc_type) }}
-                  </UBadge>
-                </td>
-                <td class="px-4 py-3 text-gray-600 dark:text-gray-400 font-mono text-xs">
-                  v{{ doc.version }}
-                </td>
-                <td class="px-4 py-3">
-                  <UBadge :color="statusColor(doc.status)" variant="subtle">
-                    {{ statusLabel(doc.status) }}
-                  </UBadge>
-                </td>
-                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
-                  {{ doc.items_count }}
-                </td>
-                <td class="px-4 py-3 text-gray-500 text-xs">
-                  {{ formatDate(doc.updated_at) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
+    <!-- New document modal -->
+    <UModal v-model:open="showNewDocModal">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Nouveau document de reference
+          </h3>
+
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Titre
+              </label>
+              <UInput
+                v-model="newDoc.title"
+                placeholder="Ex: Licence G1"
+                class="w-full"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Slug (identifiant URL)
+              </label>
+              <UInput
+                v-model="newDoc.slug"
+                placeholder="Ex: licence-g1"
+                class="w-full font-mono text-sm"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Type de document
+              </label>
+              <USelect
+                v-model="newDoc.doc_type"
+                :items="newDocTypeOptions"
+                class="w-full"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Version
+              </label>
+              <UInput
+                v-model="newDoc.version"
+                placeholder="1.0.0"
+                class="w-full font-mono text-sm"
+              />
+            </div>
+
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Description (optionnelle)
+              </label>
+              <UTextarea
+                v-model="newDoc.description"
+                :rows="3"
+                placeholder="Decrivez brievement ce document..."
+                class="w-full"
+              />
+            </div>
+          </div>
+
+          <div class="flex items-center justify-end gap-3 pt-2">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showNewDocModal = false"
+            />
+            <UButton
+              label="Creer le document"
+              icon="i-lucide-plus"
+              color="primary"
+              :loading="creating"
+              :disabled="!newDoc.title.trim() || !newDoc.slug.trim()"
+              @click="createDocument"
+            />
+          </div>
         </div>
-      </UCard>
-    </template>
+      </template>
+    </UModal>
   </div>
 </template>

frontend/app/pages/sanctuary/[id].vue

@@ -0,0 +1,445 @@
+<script setup lang="ts">
+const route = useRoute()
+const { $api } = useApi()
+
+interface SanctuaryEntryDetail {
+  id: string
+  entry_type: string
+  reference_id: string
+  title: string | null
+  content_hash: string
+  ipfs_cid: string | null
+  chain_tx_hash: string | null
+  chain_block: number | null
+  metadata_json: string | null
+  created_at: string
+}
+
+interface VerifyResult {
+  match: boolean
+  message: string
+}
+
+const entryId = computed(() => route.params.id as string)
+
+const entry = ref<SanctuaryEntryDetail | null>(null)
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+const verifying = ref(false)
+const verifyResult = ref<VerifyResult | null>(null)
+
+const copied = ref<string | null>(null)
+
+async function loadEntry() {
+  loading.value = true
+  error.value = null
+
+  try {
+    entry.value = await $api<SanctuaryEntryDetail>(`/sanctuary/${entryId.value}`)
+  } catch (err: any) {
+    error.value = err?.data?.detail || err?.message || 'Entree introuvable'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function verifyIntegrity() {
+  verifying.value = true
+  verifyResult.value = null
+
+  try {
+    verifyResult.value = await $api<VerifyResult>(
+      `/sanctuary/${entryId.value}/verify`,
+    )
+  } catch (err: any) {
+    verifyResult.value = {
+      match: false,
+      message: err?.data?.detail || err?.message || 'Erreur lors de la verification',
+    }
+  } finally {
+    verifying.value = false
+  }
+}
+
+async function copyToClipboard(text: string, field: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+    copied.value = field
+    setTimeout(() => { copied.value = null }, 2000)
+  } catch {
+    // Clipboard API not available
+  }
+}
+
+onMounted(() => {
+  loadEntry()
+})
+
+watch(entryId, () => {
+  loadEntry()
+})
+
+const typeLabel = (entryType: string): string => {
+  switch (entryType) {
+    case 'document': return 'Document'
+    case 'decision': return 'Decision'
+    case 'vote_result': return 'Resultat de vote'
+    default: return entryType
+  }
+}
+
+const typeColor = (entryType: string): string => {
+  switch (entryType) {
+    case 'document': return 'primary'
+    case 'decision': return 'success'
+    case 'vote_result': return 'info'
+    default: return 'neutral'
+  }
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+const parsedMetadata = computed(() => {
+  if (!entry.value?.metadata_json) return null
+  try {
+    return JSON.parse(entry.value.metadata_json)
+  } catch {
+    return null
+  }
+})
+
+const formattedMetadata = computed(() => {
+  if (!parsedMetadata.value) return null
+  return JSON.stringify(parsedMetadata.value, null, 2)
+})
+
+const IPFS_GATEWAY = 'https://ipfs.io/ipfs/'
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Back link -->
+    <div>
+      <UButton
+        to="/sanctuary"
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-arrow-left"
+        label="Retour au sanctuaire"
+        size="sm"
+      />
+    </div>
+
+    <!-- Loading state -->
+    <template v-if="loading">
+      <div class="space-y-4">
+        <USkeleton class="h-8 w-96" />
+        <USkeleton class="h-4 w-64" />
+        <USkeleton class="h-48 w-full" />
+        <USkeleton class="h-32 w-full" />
+      </div>
+    </template>
+
+    <!-- Error state -->
+    <template v-else-if="error">
+      <UCard>
+        <div class="flex items-center gap-3 text-red-500">
+          <UIcon name="i-lucide-alert-circle" class="text-xl" />
+          <p>{{ error }}</p>
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Entry detail -->
+    <template v-else-if="entry">
+      <!-- Header -->
+      <div class="flex items-start justify-between">
+        <div>
+          <div class="flex items-center gap-3 mb-2">
+            <UIcon name="i-lucide-shield-check" class="text-2xl text-primary" />
+            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+              {{ entry.title || 'Entree sans titre' }}
+            </h1>
+          </div>
+          <div class="flex items-center gap-3">
+            <UBadge :color="(typeColor(entry.entry_type) as any)" variant="subtle">
+              {{ typeLabel(entry.entry_type) }}
+            </UBadge>
+            <span class="text-sm text-gray-500">
+              {{ formatDate(entry.created_at) }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Verify button -->
+        <UButton
+          label="Verifier l'integrite"
+          icon="i-lucide-shield-check"
+          color="primary"
+          :loading="verifying"
+          @click="verifyIntegrity"
+        />
+      </div>
+
+      <!-- Verification result -->
+      <UCard v-if="verifyResult">
+        <div class="flex items-center gap-3">
+          <UIcon
+            :name="verifyResult.match ? 'i-lucide-check-circle' : 'i-lucide-alert-triangle'"
+            :class="verifyResult.match ? 'text-green-500 text-2xl' : 'text-red-500 text-2xl'"
+          />
+          <div>
+            <p
+              :class="verifyResult.match
+                ? 'text-green-700 dark:text-green-400 font-semibold'
+                : 'text-red-700 dark:text-red-400 font-semibold'"
+            >
+              {{ verifyResult.match ? 'Integrite verifiee avec succes' : 'Verification echouee' }}
+            </p>
+            <p class="text-sm text-gray-500 mt-1">{{ verifyResult.message }}</p>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- SHA-256 Hash -->
+      <UCard>
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <UIcon name="i-lucide-hash" class="text-gray-400" />
+              <h2 class="text-sm font-semibold text-gray-500 uppercase">Hash SHA-256</h2>
+            </div>
+            <UButton
+              :icon="copied === 'hash' ? 'i-lucide-check' : 'i-lucide-copy'"
+              :label="copied === 'hash' ? 'Copie' : 'Copier'"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              @click="copyToClipboard(entry.content_hash, 'hash')"
+            />
+          </div>
+          <div class="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4">
+            <p class="font-mono text-sm text-gray-700 dark:text-gray-300 break-all select-all">
+              {{ entry.content_hash }}
+            </p>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- IPFS CID -->
+      <UCard>
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <UIcon name="i-lucide-hard-drive" class="text-gray-400" />
+              <h2 class="text-sm font-semibold text-gray-500 uppercase">IPFS CID</h2>
+            </div>
+            <UButton
+              v-if="entry.ipfs_cid"
+              :icon="copied === 'ipfs' ? 'i-lucide-check' : 'i-lucide-copy'"
+              :label="copied === 'ipfs' ? 'Copie' : 'Copier'"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              @click="copyToClipboard(entry.ipfs_cid!, 'ipfs')"
+            />
+          </div>
+          <template v-if="entry.ipfs_cid">
+            <div class="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4">
+              <p class="font-mono text-sm text-gray-700 dark:text-gray-300 break-all select-all">
+                {{ entry.ipfs_cid }}
+              </p>
+            </div>
+            <a
+              :href="`${IPFS_GATEWAY}${entry.ipfs_cid}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-2 text-sm text-primary hover:underline"
+            >
+              <UIcon name="i-lucide-external-link" />
+              <span>Ouvrir sur la passerelle IPFS</span>
+            </a>
+          </template>
+          <template v-else>
+            <div class="bg-yellow-50 dark:bg-yellow-900/10 rounded-lg p-4">
+              <div class="flex items-center gap-2">
+                <UIcon name="i-lucide-clock" class="text-yellow-500" />
+                <p class="text-sm text-yellow-700 dark:text-yellow-400">
+                  En attente d'epinglage IPFS
+                </p>
+              </div>
+            </div>
+          </template>
+        </div>
+      </UCard>
+
+      <!-- Chain Anchor -->
+      <UCard>
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <UIcon name="i-lucide-link" class="text-gray-400" />
+              <h2 class="text-sm font-semibold text-gray-500 uppercase">Ancrage On-chain</h2>
+            </div>
+            <UButton
+              v-if="entry.chain_tx_hash"
+              :icon="copied === 'chain' ? 'i-lucide-check' : 'i-lucide-copy'"
+              :label="copied === 'chain' ? 'Copie' : 'Copier'"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              @click="copyToClipboard(entry.chain_tx_hash!, 'chain')"
+            />
+          </div>
+          <template v-if="entry.chain_tx_hash">
+            <div class="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 space-y-2">
+              <div>
+                <p class="text-xs text-gray-500 mb-1">TX Hash</p>
+                <p class="font-mono text-sm text-gray-700 dark:text-gray-300 break-all select-all">
+                  {{ entry.chain_tx_hash }}
+                </p>
+              </div>
+              <div v-if="entry.chain_block">
+                <p class="text-xs text-gray-500 mb-1">Numero de bloc</p>
+                <p class="font-mono text-sm text-gray-700 dark:text-gray-300">
+                  #{{ entry.chain_block.toLocaleString('fr-FR') }}
+                </p>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="bg-yellow-50 dark:bg-yellow-900/10 rounded-lg p-4">
+              <div class="flex items-center gap-2">
+                <UIcon name="i-lucide-clock" class="text-yellow-500" />
+                <p class="text-sm text-yellow-700 dark:text-yellow-400">
+                  En attente d'ancrage on-chain via system.remark
+                </p>
+              </div>
+            </div>
+          </template>
+        </div>
+      </UCard>
+
+      <!-- Verification status -->
+      <UCard>
+        <div class="space-y-3">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-check-circle" class="text-gray-400" />
+            <h2 class="text-sm font-semibold text-gray-500 uppercase">Statut de verification</h2>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="flex items-center gap-3 p-3 rounded-lg"
+              :class="entry.content_hash
+                ? 'bg-green-50 dark:bg-green-900/10'
+                : 'bg-gray-50 dark:bg-gray-800/50'"
+            >
+              <UIcon
+                :name="entry.content_hash ? 'i-lucide-check-circle' : 'i-lucide-clock'"
+                :class="entry.content_hash ? 'text-green-500' : 'text-gray-400'"
+              />
+              <div>
+                <p class="text-sm font-medium" :class="entry.content_hash ? 'text-green-700 dark:text-green-400' : 'text-gray-500'">
+                  Hash SHA-256
+                </p>
+                <p class="text-xs text-gray-500">
+                  {{ entry.content_hash ? 'Calcule' : 'En attente' }}
+                </p>
+              </div>
+            </div>
+
+            <div class="flex items-center gap-3 p-3 rounded-lg"
+              :class="entry.ipfs_cid
+                ? 'bg-green-50 dark:bg-green-900/10'
+                : 'bg-yellow-50 dark:bg-yellow-900/10'"
+            >
+              <UIcon
+                :name="entry.ipfs_cid ? 'i-lucide-check-circle' : 'i-lucide-clock'"
+                :class="entry.ipfs_cid ? 'text-green-500' : 'text-yellow-500'"
+              />
+              <div>
+                <p class="text-sm font-medium" :class="entry.ipfs_cid ? 'text-green-700 dark:text-green-400' : 'text-yellow-700 dark:text-yellow-400'">
+                  IPFS
+                </p>
+                <p class="text-xs text-gray-500">
+                  {{ entry.ipfs_cid ? 'Epingle' : 'En attente' }}
+                </p>
+              </div>
+            </div>
+
+            <div class="flex items-center gap-3 p-3 rounded-lg"
+              :class="entry.chain_tx_hash
+                ? 'bg-green-50 dark:bg-green-900/10'
+                : 'bg-yellow-50 dark:bg-yellow-900/10'"
+            >
+              <UIcon
+                :name="entry.chain_tx_hash ? 'i-lucide-check-circle' : 'i-lucide-clock'"
+                :class="entry.chain_tx_hash ? 'text-green-500' : 'text-yellow-500'"
+              />
+              <div>
+                <p class="text-sm font-medium" :class="entry.chain_tx_hash ? 'text-green-700 dark:text-green-400' : 'text-yellow-700 dark:text-yellow-400'">
+                  On-chain
+                </p>
+                <p class="text-xs text-gray-500">
+                  {{ entry.chain_tx_hash ? 'Ancre' : 'En attente' }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Metadata JSON -->
+      <UCard v-if="entry.metadata_json">
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <UIcon name="i-lucide-braces" class="text-gray-400" />
+              <h2 class="text-sm font-semibold text-gray-500 uppercase">Metadonnees</h2>
+            </div>
+            <UButton
+              v-if="entry.metadata_json"
+              :icon="copied === 'metadata' ? 'i-lucide-check' : 'i-lucide-copy'"
+              :label="copied === 'metadata' ? 'Copie' : 'Copier'"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              @click="copyToClipboard(entry.metadata_json!, 'metadata')"
+            />
+          </div>
+          <div class="bg-gray-50 dark:bg-gray-800/50 rounded-lg p-4 overflow-x-auto">
+            <pre class="font-mono text-xs text-gray-700 dark:text-gray-300">{{ formattedMetadata || entry.metadata_json }}</pre>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Reference info -->
+      <UCard>
+        <div class="space-y-3">
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-info" class="text-gray-400" />
+            <h2 class="text-sm font-semibold text-gray-500 uppercase">Reference</h2>
+          </div>
+          <div class="grid grid-cols-2 gap-4 text-sm">
+            <div>
+              <p class="text-gray-500">Identifiant</p>
+              <p class="font-mono text-xs text-gray-700 dark:text-gray-300">{{ entry.id }}</p>
+            </div>
+            <div>
+              <p class="text-gray-500">Reference (document/decision)</p>
+              <p class="font-mono text-xs text-gray-700 dark:text-gray-300">{{ entry.reference_id }}</p>
+            </div>
+          </div>
+        </div>
+      </UCard>
+    </template>
+  </div>
+</template>

frontend/app/pages/sanctuary/index.vue

@@ -1,20 +1,9 @@
 <script setup lang="ts">
+import type { SanctuaryEntryOut } from '~/components/sanctuary/SanctuaryEntry.vue'
+
 const { $api } = useApi()
 
-interface SanctuaryEntry {
-  id: string
-  entry_type: string
-  reference_id: string
-  title: string | null
-  content_hash: string
-  ipfs_cid: string | null
-  chain_tx_hash: string | null
-  chain_block: number | null
-  metadata_json: string | null
-  created_at: string
-}
-
-const entries = ref<SanctuaryEntry[]>([])
+const entries = ref<SanctuaryEntryOut[]>([])
 const loading = ref(true)
 const error = ref<string | null>(null)
 
@@ -27,6 +16,10 @@ const typeOptions = [
   { label: 'Resultat de vote', value: 'vote_result' },
 ]
 
+// Verification state
+const verifying = ref<string | null>(null)
+const verifyResult = ref<{ id: string; match: boolean; message: string } | null>(null)
+
 async function loadEntries() {
   loading.value = true
   error.value = null
@@ -35,7 +28,7 @@ async function loadEntries() {
     const query: Record<string, string> = {}
     if (filterType.value) query.entry_type = filterType.value
 
-    entries.value = await $api<SanctuaryEntry[]>('/sanctuary/', { query })
+    entries.value = await $api<SanctuaryEntryOut[]>('/sanctuary/', { query })
   } catch (err: any) {
     error.value = err?.data?.detail || err?.message || 'Erreur lors du chargement des entrees'
   } finally {
@@ -43,6 +36,26 @@ async function loadEntries() {
   }
 }
 
+async function handleVerify(id: string) {
+  verifying.value = id
+  verifyResult.value = null
+
+  try {
+    const result = await $api<{ match: boolean; message: string }>(
+      `/sanctuary/${id}/verify`,
+    )
+    verifyResult.value = { id, ...result }
+  } catch (err: any) {
+    verifyResult.value = {
+      id,
+      match: false,
+      message: err?.data?.detail || err?.message || 'Erreur lors de la verification',
+    }
+  } finally {
+    verifying.value = null
+  }
+}
+
 onMounted(() => {
   loadEntries()
 })
@@ -50,40 +63,6 @@ onMounted(() => {
 watch(filterType, () => {
   loadEntries()
 })
-
-const typeLabel = (entryType: string) => {
-  switch (entryType) {
-    case 'document': return 'Document'
-    case 'decision': return 'Decision'
-    case 'vote_result': return 'Resultat de vote'
-    default: return entryType
-  }
-}
-
-const typeColor = (entryType: string) => {
-  switch (entryType) {
-    case 'document': return 'primary'
-    case 'decision': return 'success'
-    case 'vote_result': return 'info'
-    default: return 'neutral'
-  }
-}
-
-function formatDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString('fr-FR', {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
-function truncateHash(hash: string | null, length: number = 16): string {
-  if (!hash) return '-'
-  if (hash.length <= length * 2) return hash
-  return hash.slice(0, length) + '...' + hash.slice(-8)
-}
 </script>
 
 <template>
@@ -108,10 +87,35 @@ function truncateHash(hash: string | null, length: number = 16): string {
       />
     </div>
 
+    <!-- Verification result banner -->
+    <UCard v-if="verifyResult">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <UIcon
+            :name="verifyResult.match ? 'i-lucide-check-circle' : 'i-lucide-alert-triangle'"
+            :class="verifyResult.match ? 'text-green-500 text-xl' : 'text-red-500 text-xl'"
+          />
+          <div>
+            <p :class="verifyResult.match ? 'text-green-700 dark:text-green-400 font-medium' : 'text-red-700 dark:text-red-400 font-medium'">
+              {{ verifyResult.match ? 'Integrite verifiee' : 'Verification echouee' }}
+            </p>
+            <p class="text-sm text-gray-500">{{ verifyResult.message }}</p>
+          </div>
+        </div>
+        <UButton
+          icon="i-lucide-x"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          @click="verifyResult = null"
+        />
+      </div>
+    </UCard>
+
     <!-- Loading state -->
     <template v-if="loading">
       <div class="space-y-3">
-        <USkeleton v-for="i in 4" :key="i" class="h-24 w-full" />
+        <USkeleton v-for="i in 4" :key="i" class="h-48 w-full" />
       </div>
     </template>
 
@@ -138,104 +142,25 @@ function truncateHash(hash: string | null, length: number = 16): string {
       </UCard>
     </template>
 
-    <!-- Entries list -->
+    <!-- Entries list using SanctuaryEntry component -->
     <template v-else>
       <div class="space-y-4">
-        <UCard
-          v-for="entry in entries"
-          :key="entry.id"
-        >
-          <div class="space-y-4">
-            <!-- Entry header -->
-            <div class="flex items-start justify-between">
-              <div class="flex items-center gap-3">
-                <UIcon name="i-lucide-shield-check" class="text-xl text-primary" />
-                <div>
-                  <h3 class="font-semibold text-gray-900 dark:text-white">
-                    {{ entry.title || 'Entree sans titre' }}
-                  </h3>
-                  <p class="text-xs text-gray-500">
-                    {{ formatDate(entry.created_at) }}
-                  </p>
-                </div>
-              </div>
-              <UBadge :color="typeColor(entry.entry_type)" variant="subtle" size="xs">
-                {{ typeLabel(entry.entry_type) }}
-              </UBadge>
-            </div>
-
-            <!-- Hashes and anchors -->
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <!-- Content hash -->
-              <div class="p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-                <div class="flex items-center gap-2 mb-1">
-                  <UIcon name="i-lucide-hash" class="text-gray-400 text-sm" />
-                  <span class="text-xs font-semibold text-gray-500 uppercase">SHA-256</span>
-                </div>
-                <p class="font-mono text-xs text-gray-700 dark:text-gray-300 break-all">
-                  {{ truncateHash(entry.content_hash) }}
-                </p>
-              </div>
-
-              <!-- IPFS CID -->
-              <div class="p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-                <div class="flex items-center gap-2 mb-1">
-                  <UIcon name="i-lucide-hard-drive" class="text-gray-400 text-sm" />
-                  <span class="text-xs font-semibold text-gray-500 uppercase">IPFS CID</span>
-                </div>
-                <template v-if="entry.ipfs_cid">
-                  <p class="font-mono text-xs text-gray-700 dark:text-gray-300 break-all">
-                    {{ truncateHash(entry.ipfs_cid) }}
-                  </p>
-                </template>
-                <template v-else>
-                  <p class="text-xs text-gray-400 italic">En attente d'epinglage</p>
-                </template>
-              </div>
-
-              <!-- Chain anchor -->
-              <div class="p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
-                <div class="flex items-center gap-2 mb-1">
-                  <UIcon name="i-lucide-link" class="text-gray-400 text-sm" />
-                  <span class="text-xs font-semibold text-gray-500 uppercase">On-chain</span>
-                </div>
-                <template v-if="entry.chain_tx_hash">
-                  <p class="font-mono text-xs text-gray-700 dark:text-gray-300 break-all">
-                    {{ truncateHash(entry.chain_tx_hash) }}
-                  </p>
-                  <p v-if="entry.chain_block" class="text-xs text-gray-400 mt-0.5">
-                    Bloc #{{ entry.chain_block.toLocaleString('fr-FR') }}
-                  </p>
-                </template>
-                <template v-else>
-                  <p class="text-xs text-gray-400 italic">En attente d'ancrage</p>
-                </template>
-              </div>
-            </div>
-
-            <!-- Verification status -->
-            <div class="flex items-center gap-4 text-xs">
-              <div class="flex items-center gap-1">
-                <UIcon
-                  :name="entry.ipfs_cid ? 'i-lucide-check-circle' : 'i-lucide-clock'"
-                  :class="entry.ipfs_cid ? 'text-green-500' : 'text-gray-400'"
-                />
-                <span :class="entry.ipfs_cid ? 'text-green-600' : 'text-gray-400'">
-                  IPFS {{ entry.ipfs_cid ? 'epingle' : 'en attente' }}
-                </span>
-              </div>
-              <div class="flex items-center gap-1">
-                <UIcon
-                  :name="entry.chain_tx_hash ? 'i-lucide-check-circle' : 'i-lucide-clock'"
-                  :class="entry.chain_tx_hash ? 'text-green-500' : 'text-gray-400'"
-                />
-                <span :class="entry.chain_tx_hash ? 'text-green-600' : 'text-gray-400'">
-                  Chain {{ entry.chain_tx_hash ? 'ancre' : 'en attente' }}
-                </span>
-              </div>
+        <div v-for="entry in entries" :key="entry.id" class="relative">
+          <SanctuarySanctuaryEntry
+            :entry="entry"
+            @verify="handleVerify"
+          />
+          <!-- Loading overlay for verification -->
+          <div
+            v-if="verifying === entry.id"
+            class="absolute inset-0 bg-white/50 dark:bg-gray-900/50 flex items-center justify-center rounded-lg"
+          >
+            <div class="flex items-center gap-2 text-sm text-gray-500">
+              <UIcon name="i-lucide-loader-2" class="animate-spin" />
+              <span>Verification en cours...</span>
             </div>
           </div>
-        </UCard>
+        </div>
       </div>
     </template>