Sprint 5 : integration et production -- securite, performance, API publique, documentation

Backend: rate limiter, security headers, blockchain cache service avec RPC,
public API (7 endpoints read-only), WebSocket auth + heartbeat, DB connection
pooling, structured logging, health check DB. Frontend: API retry/timeout,
WebSocket auth + heartbeat + typed events, notifications toast, mobile hamburger
+ drawer, error boundary, offline banner, loading skeletons, dashboard enrichi.
Documentation: guides utilisateur complets (demarrage, vote, sanctuaire, FAQ 30+),
guide deploiement, politique securite. 123 tests, 155 fichiers.

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

frontend/app/components/common/LoadingSkeleton.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * Reusable skeleton loader component.
+ *
+ * Provides multiple skeleton variants for loading states:
+ * - Card: card layout with title and content lines
+ * - List: multiple rows with optional avatar
+ * - Detail: detailed view with mixed content
+ *
+ * Uses Nuxt UI USkeleton components.
+ */
+
+const props = withDefaults(
+  defineProps<{
+    /** Number of skeleton lines to display (default: 3). */
+    lines?: number
+    /** Show an avatar circle placeholder. */
+    avatar?: boolean
+    /** Render as a card skeleton with border and padding. */
+    card?: boolean
+  }>(),
+  {
+    lines: 3,
+    avatar: false,
+    card: false,
+  },
+)
+
+/** Generate varying line widths for a natural appearance. */
+const lineWidths = computed(() => {
+  const widths = ['w-full', 'w-3/4', 'w-5/6', 'w-2/3', 'w-4/5']
+  return Array.from({ length: props.lines }, (_, i) => widths[i % widths.length])
+})
+</script>
+
+<template>
+  <!-- Card variant -->
+  <UCard v-if="card" class="animate-pulse">
+    <div class="space-y-4">
+      <!-- Optional avatar row -->
+      <div v-if="avatar" class="flex items-center gap-3">
+        <USkeleton class="h-10 w-10 rounded-full" />
+        <div class="flex-1 space-y-2">
+          <USkeleton class="h-4 w-1/3" />
+          <USkeleton class="h-3 w-1/4" />
+        </div>
+      </div>
+
+      <!-- Title line -->
+      <USkeleton class="h-5 w-2/3" />
+
+      <!-- Content lines -->
+      <div class="space-y-2">
+        <USkeleton
+          v-for="(width, i) in lineWidths"
+          :key="i"
+          class="h-3"
+          :class="width"
+        />
+      </div>
+    </div>
+  </UCard>
+
+  <!-- List / default variant -->
+  <div v-else class="space-y-3 animate-pulse">
+    <div
+      v-for="(width, i) in lineWidths"
+      :key="i"
+      class="flex items-center gap-3"
+    >
+      <!-- Optional avatar per line -->
+      <USkeleton v-if="avatar" class="h-8 w-8 rounded-full flex-shrink-0" />
+
+      <!-- Line content -->
+      <div class="flex-1 space-y-1">
+        <USkeleton class="h-3" :class="width" />
+        <USkeleton v-if="i === 0" class="h-2 w-1/4" />
+      </div>
+    </div>
+  </div>
+</template>