Design moderne + seed reel engagements forgeron avec votes

- CSS: couleurs saturees sans pastels, border-radius 4-6px, inputs mood-aware
- Header: allege (3.25rem), logo typographique, bouton connexion fin
- Login: redesign complet avec steps dots et input natif style
- Dashboard: entry cards epurees, tags toolbox compacts
- Seed: 34 vraies clauses forgeron v2.0.0 (forum topic 33165)
- Seed: 9 clauses certification (licence G1)
- Seed: 11 votants simules + 3 sessions de vote (10 pour / 1 contre)
- MoodSwitcher: dots colores au lieu d'icones

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

frontend/app/components/common/ToolboxVignette.vue

@@ -1,9 +1,6 @@
 <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.
+ * ToolboxVignette — Carte compacte pour la boite a outils.
  */
 
 export interface ToolboxAction {
@@ -51,82 +48,87 @@ function handleAction(action: ToolboxAction) {
 </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">
+  <div class="vignette">
+    <h4 class="vignette__title">{{ title }}</h4>
+    <p v-if="description" class="vignette__desc">{{ description }}</p>
+    <div v-if="contextLabel" class="vignette__ctx">
       <UIcon name="i-lucide-tag" class="text-xs" />
-      <span>Contexte : {{ contextLabel }}</span>
+      <span>{{ contextLabel }}</span>
     </div>
-
-    <div class="toolbox-vignette__actions">
-      <UButton
+    <div class="vignette__actions">
+      <button
         v-for="action in resolvedActions"
         :key="action.label"
-        :icon="action.icon"
-        :label="action.label"
-        size="xs"
-        variant="soft"
-        class="toolbox-vignette__action-btn"
+        class="vignette__btn"
         @click="handleAction(action)"
-      />
+      >
+        <UIcon v-if="action.icon" :name="action.icon" class="text-xs" />
+        <span>{{ action.label }}</span>
+      </button>
     </div>
   </div>
 </template>
 
 <style scoped>
-.toolbox-vignette {
+.vignette {
   background: var(--mood-surface);
   border: 1px solid var(--mood-border);
-  border-radius: 0.5rem;
-  padding: 0.75rem;
+  border-radius: 4px;
+  padding: 0.625rem;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  gap: 0.375rem;
+  transition: border-color 0.15s ease;
 }
-
-.toolbox-vignette:hover {
+.vignette:hover {
   border-color: var(--mood-accent);
-  box-shadow: 0 1px 4px var(--mood-shadow);
 }
 
-.toolbox-vignette__title {
-  font-size: 0.8125rem;
+.vignette__title {
+  font-size: 0.75rem;
   font-weight: 600;
   color: var(--mood-text);
-  line-height: 1.3;
+  margin: 0;
 }
 
-.toolbox-vignette__description {
-  font-size: 0.75rem;
+.vignette__desc {
+  font-size: 0.6875rem;
   color: var(--mood-text-muted);
-  line-height: 1.4;
+  line-height: 1.35;
+  margin: 0;
 }
 
-.toolbox-vignette__context {
+.vignette__ctx {
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  font-size: 0.6875rem;
+  font-size: 0.625rem;
   color: var(--mood-text-muted);
 }
 
-.toolbox-vignette__actions {
+.vignette__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
-  margin-top: 0.25rem;
+  margin-top: 0.125rem;
 }
 
-.toolbox-vignette__action-btn {
-  --btn-bg: var(--mood-accent-soft);
-  --btn-color: var(--mood-accent);
+.vignette__btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.1875rem 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--mood-accent);
+  background: var(--mood-accent-soft);
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: opacity 0.12s ease;
+  letter-spacing: 0.01em;
+}
+.vignette__btn:hover {
+  opacity: 0.8;
 }
 </style>