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/MoodSwitcher.vue

@@ -3,52 +3,51 @@ const { currentMood, moods, setMood } = useMood()
 </script>
 
 <template>
-  <div class="flex items-center gap-1" role="radiogroup" aria-label="Ambiance visuelle">
+  <div class="mood-switcher" role="radiogroup" aria-label="Ambiance visuelle">
     <UTooltip
       v-for="mood in moods"
       :key="mood.id"
-      :text="`${mood.label} — ${mood.description}`"
+      :text="mood.label"
     >
       <button
         type="button"
         role="radio"
         :aria-checked="currentMood === mood.id"
         :aria-label="`Ambiance ${mood.label}`"
-        class="mood-btn"
-        :class="{ 'mood-btn--active': currentMood === mood.id }"
+        class="mood-dot"
+        :class="{ 'mood-dot--active': currentMood === mood.id }"
+        :style="{ '--dot-color': mood.color }"
         @click="setMood(mood.id)"
-      >
-        <UIcon :name="mood.icon" class="text-base" />
-      </button>
+      />
     </UTooltip>
   </div>
 </template>
 
 <style scoped>
-.mood-btn {
+.mood-switcher {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 9999px;
+  gap: 0.375rem;
+}
+
+.mood-dot {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
   border: 2px solid transparent;
-  background: var(--mood-surface, #f3f4f6);
-  color: var(--mood-text-muted, #6b7280);
+  background: var(--dot-color, var(--mood-text-muted));
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
+  padding: 0;
 }
 
-.mood-btn:hover {
-  background: var(--mood-surface-hover, #e5e7eb);
-  color: var(--mood-accent, #4b5563);
-  transform: scale(1.1);
+.mood-dot:hover {
+  transform: scale(1.25);
 }
 
-.mood-btn--active {
-  border-color: var(--mood-accent, #3b82f6);
-  color: var(--mood-accent, #3b82f6);
-  background: var(--mood-accent-soft, #eff6ff);
-  box-shadow: 0 0 0 2px var(--mood-shadow, rgba(59, 130, 246, 0.15));
+.mood-dot--active {
+  border-color: var(--mood-text);
+  box-shadow: 0 0 0 2px var(--mood-bg), 0 0 0 3px var(--mood-text-muted);
+  transform: scale(1.15);
 }
 </style>