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

@@ -34,9 +34,12 @@ const STATUS_MAP: Record<string, { label: string; cssClass: string }> = {
   // Mandate specific
   formulation: { label: 'En prepa', cssClass: 'status-prepa' },
   candidature: { label: 'En prepa', cssClass: 'status-prepa' },
+  candidacy: { label: 'En prepa', cssClass: 'status-prepa' },
   investiture: { label: 'En vote', cssClass: 'status-vote' },
   revoked: { label: 'Clos', cssClass: 'status-clos' },
   completed: { label: 'Clos', cssClass: 'status-clos' },
+  archived: { label: 'Clos', cssClass: 'status-clos' },
+  reporting: { label: 'En vote', cssClass: 'status-vote' },
 }
 
 const resolved = computed(() => {
@@ -55,7 +58,7 @@ function handleClick() {
     v-if="clickable"
     type="button"
     class="status-pill"
-    :class="[resolved.cssClass, { 'status-pill--active': active }]"
+    :class="[resolved.cssClass, { active: active }]"
     @click="handleClick"
   >
     {{ resolved.label }}
@@ -68,83 +71,3 @@ function handleClick() {
     {{ resolved.label }}
   </span>
 </template>
-
-<style scoped>
-.status-pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 10px;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.5;
-  border: 1px solid transparent;
-  cursor: default;
-  transition: box-shadow 0.15s ease, border-color 0.15s ease;
-}
-
-button.status-pill {
-  cursor: pointer;
-}
-
-button.status-pill:hover {
-  opacity: 0.85;
-}
-
-.status-pill--active {
-  box-shadow: 0 0 0 2px currentColor;
-}
-
-/* --- En prepa (amber/warning) --- */
-.status-prepa {
-  background-color: var(--ui-color-amber-50, #fffbeb);
-  color: var(--ui-color-amber-700, #b45309);
-  border-color: var(--ui-color-amber-200, #fde68a);
-}
-
-/* --- En vigueur (green/success) --- */
-.status-vigueur {
-  background-color: var(--ui-color-green-50, #f0fdf4);
-  color: var(--ui-color-green-700, #15803d);
-  border-color: var(--ui-color-green-200, #bbf7d0);
-}
-
-/* --- En vote (blue/primary) --- */
-.status-vote {
-  background-color: var(--ui-color-blue-50, #eff6ff);
-  color: var(--ui-color-blue-700, #1d4ed8);
-  border-color: var(--ui-color-blue-200, #bfdbfe);
-}
-
-/* --- Clos (gray/neutral) --- */
-.status-clos {
-  background-color: var(--ui-color-gray-50, #f9fafb);
-  color: var(--ui-color-gray-500, #6b7280);
-  border-color: var(--ui-color-gray-200, #e5e7eb);
-}
-
-/* Dark mode overrides */
-.dark .status-prepa {
-  background-color: var(--ui-color-amber-950, #451a03);
-  color: var(--ui-color-amber-300, #fcd34d);
-  border-color: var(--ui-color-amber-800, #92400e);
-}
-
-.dark .status-vigueur {
-  background-color: var(--ui-color-green-950, #052e16);
-  color: var(--ui-color-green-300, #86efac);
-  border-color: var(--ui-color-green-800, #166534);
-}
-
-.dark .status-vote {
-  background-color: var(--ui-color-blue-950, #172554);
-  color: var(--ui-color-blue-300, #93c5fd);
-  border-color: var(--ui-color-blue-800, #1e40af);
-}
-
-.dark .status-clos {
-  background-color: var(--ui-color-gray-900, #111827);
-  color: var(--ui-color-gray-400, #9ca3af);
-  border-color: var(--ui-color-gray-700, #374151);
-}
-</style>