Refonte design : 4 humeurs, onboarding, sections avec boite a outils

- Systeme de themes adaptatifs : Peps (light chaud), Zen (light calme),
  Chagrine (dark violet), Grave (dark ambre) avec CSS custom properties
- Dashboard d'accueil orienté onboarding avec cartes-portes et teaser
  boite a outils
- SectionLayout reutilisable : liste + sidebar toolbox + status pills
  cliquables (En prepa / En vote / En vigueur / Clos)
- ToolboxVignette : vignettes Contexte / Tutos / Choisir / Demarrer
- Seed : Acte engagement certification + forgeron, Runtime Upgrade
  (decision on-chain), 3 modalites de vote (majoritaire, quadratique,
  permanent)
- Backend adapte SQLite (Uuid portable, 204 fix, pool conditionnel)
- Correction noms composants (pathPrefix: false), pinia/nuxt ^0.11

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

frontend/app/components/common/ToolboxVignette.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+/**
+ * ToolboxVignette — Carte compacte pour la barre laterale "Boite a outils".
+ *
+ * Affiche un protocole ou outil avec titre, description, contexte et actions.
+ * Utilise les variables mood pour le theming.
+ */
+
+export interface ToolboxAction {
+  label: string
+  icon?: string
+  to?: string
+  emit?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    description?: string
+    contextLabel?: string
+    actions?: ToolboxAction[]
+  }>(),
+  {
+    description: undefined,
+    contextLabel: undefined,
+    actions: undefined,
+  },
+)
+
+const emit = defineEmits<{
+  action: [actionEmit: string]
+}>()
+
+const defaultActions: ToolboxAction[] = [
+  { label: 'Contexte', icon: 'i-lucide-info', emit: 'context' },
+  { label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
+  { label: 'Choisir', icon: 'i-lucide-check-circle', emit: 'choisir' },
+  { label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer' },
+]
+
+const resolvedActions = computed(() => props.actions ?? defaultActions)
+
+function handleAction(action: ToolboxAction) {
+  if (action.to) {
+    navigateTo(action.to)
+  }
+  else if (action.emit) {
+    emit('action', action.emit)
+  }
+}
+</script>
+
+<template>
+  <div class="toolbox-vignette">
+    <h4 class="toolbox-vignette__title">
+      {{ title }}
+    </h4>
+
+    <p v-if="description" class="toolbox-vignette__description">
+      {{ description }}
+    </p>
+
+    <div v-if="contextLabel" class="toolbox-vignette__context">
+      <UIcon name="i-lucide-tag" class="text-xs" />
+      <span>Contexte : {{ contextLabel }}</span>
+    </div>
+
+    <div class="toolbox-vignette__actions">
+      <UButton
+        v-for="action in resolvedActions"
+        :key="action.label"
+        :icon="action.icon"
+        :label="action.label"
+        size="xs"
+        variant="soft"
+        class="toolbox-vignette__action-btn"
+        @click="handleAction(action)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.toolbox-vignette {
+  background: var(--mood-surface);
+  border: 1px solid var(--mood-border);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.toolbox-vignette:hover {
+  border-color: var(--mood-accent);
+  box-shadow: 0 1px 4px var(--mood-shadow);
+}
+
+.toolbox-vignette__title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--mood-text);
+  line-height: 1.3;
+}
+
+.toolbox-vignette__description {
+  font-size: 0.75rem;
+  color: var(--mood-text-muted);
+  line-height: 1.4;
+}
+
+.toolbox-vignette__context {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.6875rem;
+  color: var(--mood-text-muted);
+}
+
+.toolbox-vignette__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.toolbox-vignette__action-btn {
+  --btn-bg: var(--mood-accent-soft);
+  --btn-color: var(--mood-accent);
+}
+</style>