From 3b339b643c5ed211501a7e53bb175008224e8e7c Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Fri, 24 Apr 2026 20:33:16 +0200
Subject: [PATCH] Mandats : refonte wizard nomination-first + types
 statutory/functional
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Réordonnancement étapes : nomination → infos → résumé (au lieu de infos → nomination → toolbox → résumé)
- Cas nomination renommé : 'election' → 'collective' ; auto-désignation scindée en mode période/réunion
- Types mandat ajoutés : statutory, functional (labels + filtres index)
- Légères corrections texte modalities (ortho, reformulation)
- Fix TS : assertions non-null sur statusGroupMap et paramValues

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/app/pages/mandates/index.vue |   4 +-
 frontend/app/pages/mandates/new.vue   | 902 +++++++++++++++-----------
 frontend/app/stores/groups.ts         |   1 -
 frontend/nuxt.config.ts               |   2 +-
 4 files changed, 543 insertions(+), 366 deletions(-)

diff --git a/frontend/app/pages/mandates/index.vue b/frontend/app/pages/mandates/index.vue
index affb139..dbc748c 100644
--- a/frontend/app/pages/mandates/index.vue
+++ b/frontend/app/pages/mandates/index.vue
@@ -66,7 +66,7 @@ const filteredMandates = computed(() => {
 
   // Filter by status group
   if (activeStatus.value && statusGroupMap[activeStatus.value]) {
-    const allowedStatuses = statusGroupMap[activeStatus.value]
+    const allowedStatuses = statusGroupMap[activeStatus.value]!
     list = list.filter(m => allowedStatuses.includes(m.status))
   }
 
@@ -95,6 +95,8 @@ const filteredMandates = computed(() => {
 
 const typeLabel = (mandateType: string) => {
   switch (mandateType) {
+    case 'statutory': return 'Statutaire'
+    case 'functional': return 'Fonctionnel'
     case 'techcomm': return 'Comité technique'
     case 'smith': return 'Forgeron'
     case 'custom': return 'Personnalisé'
diff --git a/frontend/app/pages/mandates/new.vue b/frontend/app/pages/mandates/new.vue
index 062977d..e2f46ed 100644
--- a/frontend/app/pages/mandates/new.vue
+++ b/frontend/app/pages/mandates/new.vue
@@ -1,71 +1,27 @@
 <script setup lang="ts">
-import type { MandateCreate, MandateStepCreate } from '~/stores/mandates'
+import type { MandateCreate } from '~/stores/mandates'
 
 const mandates = useMandatesStore()
 const { $api } = useApi()
 
-// ── Wizard steps ──────────────────────────────────────────────────────────────
-type WizardStep = 'info' | 'nomination' | 'toolbox' | 'summary'
-const wizardStep = ref<WizardStep>('info')
+// ── Wizard ────────────────────────────────────────────────────────────────────
+type WizardStep = 'nomination' | 'info' | 'summary'
+const wizardStep = ref<WizardStep>('nomination')
 
-// ── Step 1 : Infos de base ────────────────────────────────────────────────────
-const title = ref('')
-const origin = ref('')
-const description = ref('')
-const mandateType = ref<'techcomm' | 'smith' | 'custom'>('custom')
-
-// Durée
-type DurationMode = 'relative' | 'dates'
-const durationMode = ref<DurationMode>('relative')
-const durationValue = ref(3)
-const durationUnit = ref<'days' | 'weeks' | 'months'>('months')
-const startsAt = ref('')
-const endsAt = ref('')
-
-function computedDates(): { starts_at: string | null; ends_at: string | null } {
-  if (durationMode.value === 'dates') {
-    return {
-      starts_at: startsAt.value || null,
-      ends_at: endsAt.value || null,
-    }
-  }
-  const now = new Date()
-  const end = new Date(now)
-  if (durationUnit.value === 'days') end.setDate(end.getDate() + durationValue.value)
-  else if (durationUnit.value === 'weeks') end.setDate(end.getDate() + durationValue.value * 7)
-  else end.setMonth(end.getMonth() + durationValue.value)
-  return {
-    starts_at: now.toISOString(),
-    ends_at: end.toISOString(),
-  }
-}
-
-const durationLabel = computed(() => {
-  if (durationMode.value === 'dates') {
-    if (!startsAt.value && !endsAt.value) return 'Dates non définies'
-    return `${startsAt.value ? new Date(startsAt.value).toLocaleDateString('fr-FR') : '?'} → ${endsAt.value ? new Date(endsAt.value).toLocaleDateString('fr-FR') : '?'}`
-  }
-  const u = durationUnit.value === 'days' ? 'jour' : durationUnit.value === 'weeks' ? 'semaine' : 'mois'
-  return `${durationValue.value} ${u}${durationValue.value > 1 && durationUnit.value !== 'months' ? 's' : ''}`
-})
-
-const canGoToNomination = computed(() =>
-  title.value.trim().length > 0 && (
-    durationMode.value === 'relative' ||
-    (startsAt.value !== '' && endsAt.value !== '')
-  )
-)
-
-// ── Step 2 : Nomination ───────────────────────────────────────────────────────
-type NominationCase = 'self' | 'election'
+// ── Étape 1 : Processus de nomination ────────────────────────────────────────
+type NominationCase = 'self' | 'collective'
 const nominationCase = ref<NominationCase | null>(null)
 
-// Case 1 — self : ratification vote params
-const selfParams = reactive({ duration_days: 7, quorum_pct: 30, majority_pct: 51 })
+// Cas 1 — Auto-désignation
+type SelfMode = 'period' | 'meeting'
+const selfMode = ref<SelfMode>('period')
+const selfPeriodParams = reactive({ duration_days: 14, quorum_pct: 30, majority_pct: 51 })
+const selfMeetingName = ref('')
+const selfMeetingMajority = ref(51)
 
-// ── Step 3 : Boîte à outils élection ─────────────────────────────────────────
-type ElectionMode = 'direct' | 'candidacy'
-const electionMode = ref<ElectionMode>('direct')
+// Cas 2 — Désignation collective
+type CandidacyMode = 'direct' | 'candidacy'
+const candidacyMode = ref<CandidacyMode>('direct')
 const selectedModalityId = ref<string | null>(null)
 
 interface ModalityParam {
@@ -88,14 +44,12 @@ interface Modality {
 }
 
 const MODALITIES: Modality[] = [
-  // ── Sans candidature ──
   {
     id: 'vote_simple',
     icon: 'i-lucide-check-square',
     title: 'Vote de désignation',
-    desc: 'Vote direct parmi les membres du cercle concerné. Simple et rapide pour les petits groupes.',
-    recommended: mandateType.value !== 'smith',
-    recommendedReason: 'Adapté aux petits collectifs et décisions peu contestées.',
+    desc: 'Vote direct parmi les membres. Simple et rapide pour les petits groupes.',
+    recommended: false,
     params: [
       { id: 'duration_days', label: 'Durée du vote', unit: 'jours', min: 1, max: 30, default: 7 },
       { id: 'quorum_pct', label: 'Quorum', unit: '%', min: 10, max: 100, default: 30 },
@@ -109,7 +63,7 @@ const MODALITIES: Modality[] = [
     title: 'Vote WoT',
     desc: 'Vote pondéré par la Toile de Confiance. Le poids de chaque voix dépend de la distance certificationnelle.',
     recommended: true,
-    recommendedReason: 'Recommandé pour les mandats impliquant la communauté G1 au-delà des 10 personnes.',
+    recommendedReason: 'Recommandé pour les mandats impliquant la communauté G1 au-delà de 10 personnes.',
     params: [
       { id: 'duration_days', label: 'Durée du vote', unit: 'jours', min: 1, max: 60, default: 14 },
       { id: 'quorum_pct', label: 'Quorum WoT', unit: '% de la WoT', min: 5, max: 100, default: 20 },
@@ -121,21 +75,19 @@ const MODALITIES: Modality[] = [
     id: 'vote_smith',
     icon: 'i-lucide-hammer',
     title: 'Vote Smith',
-    desc: 'Réservé aux Forgerons (critère de Smith). Utilisé pour les décisions techniques du réseau.',
-    recommended: mandateType.value === 'smith' || mandateType.value === 'techcomm',
-    recommendedReason: 'Standard pour les mandats Forgeron et Comité Technique.',
+    desc: 'Réservé aux Forgerons (critère de Smith). Pour les décisions techniques du réseau.',
+    recommended: false,
     params: [
       { id: 'duration_days', label: 'Durée du vote', unit: 'jours', min: 1, max: 30, default: 14 },
       { id: 'smith_min', label: 'Forgerons minimum', unit: 'forgerons', min: 1, max: 20, default: 3 },
     ],
     requiresCandidacy: false,
   },
-  // ── Avec candidature ──
   {
     id: 'candidacy_vote_majoritaire',
     icon: 'i-lucide-user-check',
     title: 'Candidature + Vote majoritaire',
-    desc: 'Appel à candidature ouvert, suivi d\'un vote binaire (Pour/Contre) pour chaque candidat.',
+    desc: 'Appel à candidature ouvert, puis vote binaire (Pour/Contre) pour chaque candidat.',
     recommended: false,
     params: [
       { id: 'candidacy_days', label: 'Fenêtre de candidature', unit: 'jours', min: 1, max: 30, default: 7 },
@@ -149,7 +101,7 @@ const MODALITIES: Modality[] = [
     id: 'candidacy_vote_preferentiel',
     icon: 'i-lucide-list-ordered',
     title: 'Candidature + Vote préférentiel',
-    desc: 'Candidature ouverte, puis classement des candidats par les votants (méthode Condorcet ou Borda).',
+    desc: 'Candidature ouverte, puis classement des candidats par les votants (Condorcet ou Borda).',
     recommended: true,
     recommendedReason: 'Recommandé dès 3 candidats pour éviter les effets de vote utile.',
     params: [
@@ -174,10 +126,9 @@ const MODALITIES: Modality[] = [
 ]
 
 const visibleModalities = computed(() =>
-  MODALITIES.filter(m => m.requiresCandidacy === (electionMode.value === 'candidacy'))
+  MODALITIES.filter(m => m.requiresCandidacy === (candidacyMode.value === 'candidacy'))
 )
 
-// Paramètres par modalité (valeurs mutable)
 const paramValues = reactive<Record<string, Record<string, number>>>({})
 function getParam(modalityId: string, paramId: string): number {
   if (!paramValues[modalityId]) {
@@ -188,31 +139,110 @@ function getParam(modalityId: string, paramId: string): number {
 }
 function setParam(modalityId: string, paramId: string, value: number) {
   if (!paramValues[modalityId]) getParam(modalityId, paramId)
-  paramValues[modalityId][paramId] = value
+  paramValues[modalityId]![paramId] = value
 }
 
-// ── Génération des steps à créer ──────────────────────────────────────────────
+const canGoToInfo = computed(() => {
+  if (!nominationCase.value) return false
+  if (nominationCase.value === 'collective') return selectedModalityId.value !== null
+  return true
+})
+
+// ── Étape 2 : Infos du mandat ────────────────────────────────────────────────
+type MandateType = 'statutory' | 'functional'
+const mandateType = ref<MandateType>('functional')
+const title = ref('')
+const origin = ref('')
+const description = ref('')
+
+type DurationMode = 'relative' | 'dates'
+const durationMode = ref<DurationMode>('relative')
+const durationValue = ref(3)
+const durationUnit = ref<'days' | 'weeks' | 'months'>('months')
+const startsAt = ref('')
+const endsAt = ref('')
+
+function computedDates(): { starts_at: string | null; ends_at: string | null } {
+  if (durationMode.value === 'dates') {
+    return { starts_at: startsAt.value || null, ends_at: endsAt.value || null }
+  }
+  const now = new Date()
+  const end = new Date(now)
+  if (durationUnit.value === 'days') end.setDate(end.getDate() + durationValue.value)
+  else if (durationUnit.value === 'weeks') end.setDate(end.getDate() + durationValue.value * 7)
+  else end.setMonth(end.getMonth() + durationValue.value)
+  return { starts_at: now.toISOString(), ends_at: end.toISOString() }
+}
+
+const durationLabel = computed(() => {
+  if (durationMode.value === 'dates') {
+    if (!startsAt.value && !endsAt.value) return 'Dates non définies'
+    return `${startsAt.value ? new Date(startsAt.value).toLocaleDateString('fr-FR') : '?'} → ${endsAt.value ? new Date(endsAt.value).toLocaleDateString('fr-FR') : '?'}`
+  }
+  const u = durationUnit.value === 'days' ? 'jour' : durationUnit.value === 'weeks' ? 'semaine' : 'mois'
+  return `${durationValue.value} ${u}${durationValue.value > 1 && durationUnit.value !== 'months' ? 's' : ''}`
+})
+
+const canGoToSummary = computed(() =>
+  title.value.trim().length > 0 && (
+    durationMode.value === 'relative' || (startsAt.value !== '' && endsAt.value !== '')
+  )
+)
+
+const MANDATE_TYPE_OPTIONS = [
+  {
+    value: 'statutory',
+    label: 'Statutaire',
+    desc: 'Lié aux statuts de l\'organisation (Président, Trésorier, Secrétaire…)',
+    icon: 'i-lucide-landmark',
+  },
+  {
+    value: 'functional',
+    label: 'Fonctionnel',
+    desc: 'Mission ou rôle opérationnel lié au fonctionnement de l\'organisation',
+    icon: 'i-lucide-settings-2',
+  },
+]
+
+// ── Génération des étapes ─────────────────────────────────────────────────────
 interface StepDef { step_type: string; title: string; description: string }
 
 const stepsToCreate = computed<StepDef[]>(() => {
   const steps: StepDef[] = []
-  steps.push({ step_type: 'formulation', title: 'Rédaction du mandat', description: 'Définition du périmètre, des objectifs et des attendus.' })
+  steps.push({
+    step_type: 'formulation',
+    title: 'Rédaction du mandat',
+    description: 'Définition du périmètre, des objectifs et des attendus.',
+  })
 
   if (nominationCase.value === 'self') {
-    steps.push({ step_type: 'vote', title: 'Ratification', description: `Vote de ratification — durée ${selfParams.duration_days}j, quorum ${selfParams.quorum_pct}%, seuil ${selfParams.majority_pct}%.` })
-    steps.push({ step_type: 'assignment', title: 'Prise de mandat', description: 'La personne entre en mandat après ratification.' })
-  } else if (nominationCase.value === 'election' && selectedModalityId.value) {
+    if (selfMode.value === 'period') {
+      steps.push({
+        step_type: 'vote',
+        title: 'Ratification sur période',
+        description: `Vote de ratification ouvert à tous les adhérents — ${selfPeriodParams.duration_days}j, quorum ${selfPeriodParams.quorum_pct}%, seuil ${selfPeriodParams.majority_pct}%.`,
+      })
+    } else {
+      const mn = selfMeetingName.value.trim() || 'réunion'
+      steps.push({
+        step_type: 'vote',
+        title: `Ratification en réunion`,
+        description: `Ratification ponctuelle lors de "${mn}" — présents votants, seuil ${selfMeetingMajority.value}%.`,
+      })
+    }
+    steps.push({ step_type: 'assignment', title: 'Prise de mandat', description: 'Entrée en mandat après ratification.' })
+  } else if (nominationCase.value === 'collective' && selectedModalityId.value) {
     const m = MODALITIES.find(x => x.id === selectedModalityId.value)
     if (m?.requiresCandidacy) {
-      const cdays = getParam(m.id, 'candidacy_days')
-      steps.push({ step_type: 'candidacy', title: 'Appel à candidature', description: `Fenêtre de candidature : ${cdays} jour${cdays > 1 ? 's' : ''}.` })
+      const cd = getParam(m.id, 'candidacy_days')
+      steps.push({ step_type: 'candidacy', title: 'Appel à candidature', description: `Fenêtre de candidature : ${cd} jour${cd > 1 ? 's' : ''}.` })
     }
     if (m) {
       const pv = paramValues[m.id] ?? {}
-      const paramStr = Object.entries(pv).filter(([k]) => k !== 'candidacy_days').map(([k, v]) => {
-        const p = m.params.find(x => x.id === k)
-        return p ? `${p.label} : ${v} ${p.unit}` : ''
-      }).filter(Boolean).join(', ')
+      const paramStr = Object.entries(pv)
+        .filter(([k]) => k !== 'candidacy_days')
+        .map(([k, v]) => { const p = m.params.find(x => x.id === k); return p ? `${p.label} : ${v} ${p.unit}` : '' })
+        .filter(Boolean).join(', ')
       steps.push({ step_type: 'vote', title: `Élection — ${m.title}`, description: paramStr })
     }
     steps.push({ step_type: 'assignment', title: 'Désignation du mandataire', description: 'Le candidat élu entre en mandat.' })
@@ -223,10 +253,15 @@ const stepsToCreate = computed<StepDef[]>(() => {
   return steps
 })
 
-const canGoToSummary = computed(() => {
-  if (nominationCase.value === 'self') return true
-  if (nominationCase.value === 'election') return selectedModalityId.value !== null
-  return false
+// ── Récap helpers ─────────────────────────────────────────────────────────────
+const nominationSummary = computed(() => {
+  if (nominationCase.value === 'self') {
+    if (selfMode.value === 'period') return `Auto-désignation — ratification sur ${selfPeriodParams.duration_days}j (quorum ${selfPeriodParams.quorum_pct}%)`
+    const mn = selfMeetingName.value.trim() || 'réunion'
+    return `Auto-désignation — ratification ponctuelle en "${mn}"`
+  }
+  const m = MODALITIES.find(x => x.id === selectedModalityId.value)
+  return `Désignation collective — ${m?.title ?? ''}`
 })
 
 // ── Création ──────────────────────────────────────────────────────────────────
@@ -248,15 +283,13 @@ async function createMandate() {
     })
     if (!mandate) throw new Error('Erreur création mandat')
 
-    // Create steps
     for (let i = 0; i < stepsToCreate.value.length; i++) {
-      const s = stepsToCreate.value[i]
+      const s = stepsToCreate.value[i]!
       await $api(`/mandates/${mandate.id}/steps`, {
         method: 'POST',
         body: { step_order: i, step_type: s.step_type, title: s.title, description: s.description },
       })
     }
-
     navigateTo(`/mandates/${mandate.id}`)
   } catch (e: any) {
     submitError.value = e?.message ?? 'Erreur lors de la création'
@@ -267,28 +300,21 @@ async function createMandate() {
 
 // ── Navigation ────────────────────────────────────────────────────────────────
 function goBack() {
-  if (wizardStep.value === 'summary') wizardStep.value = nominationCase.value === 'election' ? 'toolbox' : 'nomination'
-  else if (wizardStep.value === 'toolbox') wizardStep.value = 'nomination'
-  else if (wizardStep.value === 'nomination') wizardStep.value = 'info'
+  if (wizardStep.value === 'summary') wizardStep.value = 'info'
+  else if (wizardStep.value === 'info') wizardStep.value = 'nomination'
 }
 
-function goToNomination() { if (canGoToNomination.value) wizardStep.value = 'nomination' }
-function goToToolbox() { wizardStep.value = 'toolbox' }
-function goToSummary() { if (canGoToSummary.value) wizardStep.value = 'summary' }
-
-// Typage
-const MANDATE_TYPE_OPTIONS = [
-  { value: 'custom', label: 'Mandat libre', icon: 'i-lucide-circle' },
-  { value: 'techcomm', label: 'Comité Technique', icon: 'i-lucide-cpu' },
-  { value: 'smith', label: 'Forgeron', icon: 'i-lucide-hammer' },
-]
+function selectNomination(c: NominationCase) {
+  nominationCase.value = c
+}
 </script>
 
 <template>
   <div class="mwiz">
+
     <!-- Nav -->
     <div class="mwiz__nav">
-      <button v-if="wizardStep !== 'info'" class="mwiz__back" @click="goBack">
+      <button v-if="wizardStep !== 'nomination'" class="mwiz__back" @click="goBack">
         <UIcon name="i-lucide-arrow-left" class="text-sm" />
         <span>Retour</span>
       </button>
@@ -297,24 +323,265 @@ const MANDATE_TYPE_OPTIONS = [
         <span>Mandats</span>
       </NuxtLink>
 
-      <!-- Progress pills -->
       <div class="mwiz__progress">
-        <span class="mwiz__pill" :class="{ 'mwiz__pill--active': wizardStep === 'info', 'mwiz__pill--done': wizardStep !== 'info' }">1 Infos</span>
+        <span class="mwiz__pill" :class="{ 'mwiz__pill--active': wizardStep === 'nomination', 'mwiz__pill--done': wizardStep !== 'nomination' }">
+          1 Nomination
+        </span>
         <span class="mwiz__sep">›</span>
-        <span class="mwiz__pill" :class="{ 'mwiz__pill--active': wizardStep === 'nomination', 'mwiz__pill--done': ['toolbox','summary'].includes(wizardStep) }">2 Nomination</span>
+        <span class="mwiz__pill" :class="{ 'mwiz__pill--active': wizardStep === 'info', 'mwiz__pill--done': wizardStep === 'summary' }">
+          2 Mandat
+        </span>
         <span class="mwiz__sep">›</span>
-        <span v-if="nominationCase === 'election'" class="mwiz__pill" :class="{ 'mwiz__pill--active': wizardStep === 'toolbox', 'mwiz__pill--done': wizardStep === 'summary' }">3 Modalités</span>
-        <span v-if="nominationCase === 'election'" class="mwiz__sep">›</span>
-        <span class="mwiz__pill" :class="{ 'mwiz__pill--active': wizardStep === 'summary' }">{{ nominationCase === 'election' ? '4' : '3' }} Récap</span>
+        <span class="mwiz__pill" :class="{ 'mwiz__pill--active': wizardStep === 'summary' }">
+          3 Récap
+        </span>
       </div>
     </div>
 
     <Transition name="slide-fade" mode="out-in">
 
-      <!-- ─── ÉTAPE 1 : Infos de base ──────────────────────────────────── -->
-      <div v-if="wizardStep === 'info'" key="info" class="mwiz__step">
+      <!-- ─── ÉTAPE 1 : Nomination ────────────────────────────────────────── -->
+      <div v-if="wizardStep === 'nomination'" key="nomination" class="mwiz__step">
         <div class="mwiz__header">
-          <h1 class="mwiz__title">Nouveau mandat</h1>
+          <h1 class="mwiz__title">Processus de nomination</h1>
+          <p class="mwiz__subtitle">Choisissez comment le mandataire sera désigné</p>
+        </div>
+
+        <!-- Deux grandes cartes -->
+        <div class="mwiz__nom-grid">
+
+          <!-- Cas 1 : Auto-désignation -->
+          <div
+            class="mwiz__nom-card"
+            :class="{ 'mwiz__nom-card--active': nominationCase === 'self' }"
+            @click="selectNomination('self')"
+          >
+            <div class="mwiz__nom-head">
+              <div class="mwiz__nom-icon">
+                <UIcon name="i-lucide-user-check" class="text-2xl" />
+              </div>
+              <div class="mwiz__nom-body">
+                <p class="mwiz__nom-title">Auto-désignation</p>
+                <p class="mwiz__nom-desc">
+                  Une personne demande un mandat pour elle-même afin de mener sa mission de façon légitime.
+                  Un vote de ratification valide la prise de mandat.
+                </p>
+              </div>
+              <div class="mwiz__nom-check">
+                <UIcon v-if="nominationCase === 'self'" name="i-lucide-circle-check" class="text-lg" />
+                <UIcon v-else name="i-lucide-circle" class="text-lg" />
+              </div>
+            </div>
+
+            <!-- Sous-options ratification -->
+            <Transition name="slide-down">
+              <div v-if="nominationCase === 'self'" class="mwiz__ratif" @click.stop>
+
+                <div class="mwiz__ratif-toggle">
+                  <button
+                    class="mwiz__ratif-btn"
+                    :class="{ 'mwiz__ratif-btn--active': selfMode === 'period' }"
+                    @click="selfMode = 'period'"
+                  >
+                    <UIcon name="i-lucide-calendar-range" class="text-sm" />
+                    Sur période
+                  </button>
+                  <button
+                    class="mwiz__ratif-btn"
+                    :class="{ 'mwiz__ratif-btn--active': selfMode === 'meeting' }"
+                    @click="selfMode = 'meeting'"
+                  >
+                    <UIcon name="i-lucide-users" class="text-sm" />
+                    Ponctuelle (réunion)
+                  </button>
+                </div>
+
+                <!-- Params : sur période -->
+                <Transition name="slide-down">
+                  <div v-if="selfMode === 'period'" class="mwiz__param-row">
+                    <div class="mwiz__param-field">
+                      <label class="mwiz__label-sm">Durée du vote</label>
+                      <div class="mwiz__param-input-row">
+                        <input v-model.number="selfPeriodParams.duration_days" type="number" class="mwiz__param-input" min="1" max="60" />
+                        <span class="mwiz__param-unit">jours</span>
+                      </div>
+                    </div>
+                    <div class="mwiz__param-field">
+                      <label class="mwiz__label-sm">Quorum</label>
+                      <div class="mwiz__param-input-row">
+                        <input v-model.number="selfPeriodParams.quorum_pct" type="number" class="mwiz__param-input" min="10" max="100" />
+                        <span class="mwiz__param-unit">%</span>
+                      </div>
+                    </div>
+                    <div class="mwiz__param-field">
+                      <label class="mwiz__label-sm">Seuil de majorité</label>
+                      <div class="mwiz__param-input-row">
+                        <input v-model.number="selfPeriodParams.majority_pct" type="number" class="mwiz__param-input" min="51" max="100" />
+                        <span class="mwiz__param-unit">%</span>
+                      </div>
+                    </div>
+                  </div>
+                </Transition>
+
+                <!-- Params : ponctuelle réunion -->
+                <Transition name="slide-down">
+                  <div v-if="selfMode === 'meeting'" class="mwiz__meeting-params">
+                    <div class="mwiz__param-field" style="flex: 1; min-width: 200px;">
+                      <label class="mwiz__label-sm">Nom de la réunion</label>
+                      <input
+                        v-model="selfMeetingName"
+                        type="text"
+                        class="mwiz__input"
+                        lang="fr"
+                        spellcheck="true"
+                        placeholder="ex : Visio du lundi, AG 2025…"
+                      />
+                    </div>
+                    <div class="mwiz__param-field">
+                      <label class="mwiz__label-sm">Seuil de majorité</label>
+                      <div class="mwiz__param-input-row">
+                        <input v-model.number="selfMeetingMajority" type="number" class="mwiz__param-input" min="51" max="100" />
+                        <span class="mwiz__param-unit">% des présents</span>
+                      </div>
+                    </div>
+                  </div>
+                </Transition>
+
+                <p class="mwiz__ratif-note">
+                  <UIcon name="i-lucide-info" class="text-xs" />
+                  <span v-if="selfMode === 'period'">Vote ouvert à tous les adhérents de l'organisation.</span>
+                  <span v-else>Vote restreint aux personnes présentes lors de la réunion.</span>
+                </p>
+              </div>
+            </Transition>
+          </div>
+
+          <!-- Cas 2 : Désignation collective -->
+          <div
+            class="mwiz__nom-card"
+            :class="{ 'mwiz__nom-card--active': nominationCase === 'collective' }"
+            @click="selectNomination('collective')"
+          >
+            <div class="mwiz__nom-head">
+              <div class="mwiz__nom-icon">
+                <UIcon name="i-lucide-users-round" class="text-2xl" />
+              </div>
+              <div class="mwiz__nom-body">
+                <p class="mwiz__nom-title">Désignation par le collectif</p>
+                <p class="mwiz__nom-desc">
+                  L'organisation identifie un besoin ou une mission, et procède à une nomination collective.
+                  Avec ou sans appel à candidature.
+                </p>
+              </div>
+              <div class="mwiz__nom-check">
+                <UIcon v-if="nominationCase === 'collective'" name="i-lucide-circle-check" class="text-lg" />
+                <UIcon v-else name="i-lucide-circle" class="text-lg" />
+              </div>
+            </div>
+
+            <!-- Boîte à outils contextuelle -->
+            <Transition name="slide-down">
+              <div v-if="nominationCase === 'collective'" class="mwiz__toolbox" @click.stop>
+
+                <p class="mwiz__toolbox-title">
+                  <UIcon name="i-lucide-wrench" class="text-sm" />
+                  Boîte à outils — Modalités d'élection
+                </p>
+
+                <!-- Toggle candidature -->
+                <div class="mwiz__mode-toggle">
+                  <button
+                    class="mwiz__mode-btn"
+                    :class="{ 'mwiz__mode-btn--active': candidacyMode === 'direct' }"
+                    @click="candidacyMode = 'direct'; selectedModalityId = null"
+                  >
+                    <UIcon name="i-lucide-vote" class="text-sm" />
+                    Sans candidature
+                  </button>
+                  <button
+                    class="mwiz__mode-btn"
+                    :class="{ 'mwiz__mode-btn--active': candidacyMode === 'candidacy' }"
+                    @click="candidacyMode = 'candidacy'; selectedModalityId = null"
+                  >
+                    <UIcon name="i-lucide-user-plus" class="text-sm" />
+                    Avec candidature
+                  </button>
+                </div>
+
+                <!-- Modalités -->
+                <div class="mwiz__modalities">
+                  <div
+                    v-for="m in visibleModalities"
+                    :key="m.id"
+                    class="mwiz__modality"
+                    :class="{
+                      'mwiz__modality--selected': selectedModalityId === m.id,
+                      'mwiz__modality--recommended': m.recommended,
+                    }"
+                    @click.stop="selectedModalityId = m.id"
+                  >
+                    <div class="mwiz__modality-head">
+                      <div class="mwiz__modality-icon">
+                        <UIcon :name="m.icon" class="text-lg" />
+                      </div>
+                      <div class="mwiz__modality-info">
+                        <p class="mwiz__modality-title">{{ m.title }}</p>
+                        <p class="mwiz__modality-desc">{{ m.desc }}</p>
+                      </div>
+                      <div class="mwiz__modality-check">
+                        <UIcon v-if="selectedModalityId === m.id" name="i-lucide-circle-check" class="text-lg" />
+                        <UIcon v-else name="i-lucide-circle" class="text-lg" />
+                      </div>
+                    </div>
+
+                    <span v-if="m.recommended" class="mwiz__modality-badge">
+                      <UIcon name="i-lucide-sparkles" class="text-xs" />
+                      Recommandé
+                    </span>
+                    <p v-if="m.recommended && m.recommendedReason" class="mwiz__modality-reason">{{ m.recommendedReason }}</p>
+
+                    <Transition name="slide-down">
+                      <div v-if="selectedModalityId === m.id" class="mwiz__modality-params">
+                        <div v-for="p in m.params" :key="p.id" class="mwiz__param-field">
+                          <label class="mwiz__label-sm">{{ p.label }}</label>
+                          <div class="mwiz__param-input-row">
+                            <input
+                              :value="getParam(m.id, p.id)"
+                              type="number"
+                              class="mwiz__param-input"
+                              :min="p.min" :max="p.max"
+                              @input="setParam(m.id, p.id, +($event.target as HTMLInputElement).value)"
+                            />
+                            <span class="mwiz__param-unit">{{ p.unit }}</span>
+                            <input
+                              :value="getParam(m.id, p.id)"
+                              type="range"
+                              class="mwiz__param-slider"
+                              :min="p.min" :max="p.max"
+                              @input="setParam(m.id, p.id, +($event.target as HTMLInputElement).value)"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </Transition>
+                  </div>
+                </div>
+
+              </div>
+            </Transition>
+          </div>
+        </div>
+
+        <button class="mwiz__submit" :disabled="!canGoToInfo" @click="wizardStep = 'info'">
+          Continuer — Infos du mandat
+          <UIcon name="i-lucide-arrow-right" class="text-sm" />
+        </button>
+      </div>
+
+      <!-- ─── ÉTAPE 2 : Infos du mandat ──────────────────────────────────── -->
+      <div v-else-if="wizardStep === 'info'" key="info" class="mwiz__step">
+        <div class="mwiz__header">
+          <h1 class="mwiz__title">Infos du mandat</h1>
           <p class="mwiz__subtitle">Définissez le périmètre et la durée du mandat</p>
         </div>
 
@@ -327,12 +594,15 @@ const MANDATE_TYPE_OPTIONS = [
               <button
                 v-for="opt in MANDATE_TYPE_OPTIONS"
                 :key="opt.value"
-                class="mwiz__type-btn"
-                :class="{ 'mwiz__type-btn--active': mandateType === opt.value }"
-                @click="mandateType = opt.value as any"
+                class="mwiz__type-card"
+                :class="{ 'mwiz__type-card--active': mandateType === opt.value }"
+                @click="mandateType = opt.value as MandateType"
               >
-                <UIcon :name="opt.icon" class="text-base" />
-                <span>{{ opt.label }}</span>
+                <UIcon :name="opt.icon" class="text-xl" />
+                <div>
+                  <p class="mwiz__type-card-label">{{ opt.label }}</p>
+                  <p class="mwiz__type-card-desc">{{ opt.desc }}</p>
+                </div>
               </button>
             </div>
           </div>
@@ -346,7 +616,7 @@ const MANDATE_TYPE_OPTIONS = [
               class="mwiz__input"
               lang="fr"
               spellcheck="true"
-              placeholder="Ex : Responsable communication, Délégué technique G1..."
+              placeholder="ex : Responsable communication, Délégué technique G1…"
             />
           </div>
 
@@ -365,14 +635,14 @@ const MANDATE_TYPE_OPTIONS = [
 
           <!-- Description -->
           <div class="mwiz__section">
-            <label class="mwiz__label">Description du mandat <span class="mwiz__optional">(optionnel)</span></label>
+            <label class="mwiz__label">Description <span class="mwiz__optional">(optionnel)</span></label>
             <textarea
               v-model="description"
               class="mwiz__textarea"
               rows="3"
               lang="fr"
               spellcheck="true"
-              placeholder="Périmètre, responsabilités, attendus du mandataire..."
+              placeholder="Périmètre, responsabilités, attendus du mandataire…"
             />
           </div>
 
@@ -396,7 +666,6 @@ const MANDATE_TYPE_OPTIONS = [
                 <button class="mwiz__type-btn" :class="{ 'mwiz__type-btn--active': durationUnit === 'months' }" @click="durationUnit = 'months'">Mois</button>
               </div>
             </div>
-
             <div v-else class="mwiz__dur-dates">
               <div class="mwiz__dur-date-field">
                 <label class="mwiz__label-sm">Début</label>
@@ -410,184 +679,14 @@ const MANDATE_TYPE_OPTIONS = [
             </div>
           </div>
 
-          <button class="mwiz__submit" :disabled="!canGoToNomination" @click="goToNomination">
-            Étape suivante — Nomination
+          <button class="mwiz__submit" :disabled="!canGoToSummary" @click="wizardStep = 'summary'">
+            Récapitulatif
             <UIcon name="i-lucide-arrow-right" class="text-sm" />
           </button>
         </div>
       </div>
 
-      <!-- ─── ÉTAPE 2 : Nomination ─────────────────────────────────────── -->
-      <div v-else-if="wizardStep === 'nomination'" key="nomination" class="mwiz__step">
-        <div class="mwiz__header">
-          <h1 class="mwiz__title">Processus de nomination</h1>
-          <p class="mwiz__subtitle">Ce mandat est-il demandé par son futur titulaire, ou faut-il désigner quelqu'un ?</p>
-        </div>
-
-        <div class="mwiz__nom-grid">
-          <!-- Cas 1 : soi-même -->
-          <button
-            class="mwiz__nom-card"
-            :class="{ 'mwiz__nom-card--active': nominationCase === 'self' }"
-            @click="nominationCase = 'self'"
-          >
-            <div class="mwiz__nom-icon">
-              <UIcon name="i-lucide-user-check" class="text-2xl" />
-            </div>
-            <div class="mwiz__nom-body">
-              <p class="mwiz__nom-title">Auto-désignation</p>
-              <p class="mwiz__nom-desc">La personne à l'origine du mandat le demande pour elle-même. Un vote de ratification valide la prise de mandat.</p>
-            </div>
-          </button>
-
-          <!-- Cas 2 : élection -->
-          <button
-            class="mwiz__nom-card"
-            :class="{ 'mwiz__nom-card--active': nominationCase === 'election' }"
-            @click="nominationCase = 'election'"
-          >
-            <div class="mwiz__nom-icon">
-              <UIcon name="i-lucide-users" class="text-2xl" />
-            </div>
-            <div class="mwiz__nom-body">
-              <p class="mwiz__nom-title">Désignation par le collectif</p>
-              <p class="mwiz__nom-desc">Le mandataire est élu ou désigné par le groupe. La boîte à outils propose les modalités d'élection adaptées.</p>
-            </div>
-          </button>
-        </div>
-
-        <!-- Cas 1 : paramètres ratification -->
-        <Transition name="slide-down">
-          <div v-if="nominationCase === 'self'" class="mwiz__self-params">
-            <p class="mwiz__label">Paramètres du vote de ratification</p>
-            <div class="mwiz__param-row">
-              <div class="mwiz__param-field">
-                <label class="mwiz__label-sm">Durée du vote</label>
-                <div class="mwiz__param-input-row">
-                  <input v-model.number="selfParams.duration_days" type="number" class="mwiz__param-input" min="1" max="30" />
-                  <span class="mwiz__param-unit">jours</span>
-                </div>
-              </div>
-              <div class="mwiz__param-field">
-                <label class="mwiz__label-sm">Quorum</label>
-                <div class="mwiz__param-input-row">
-                  <input v-model.number="selfParams.quorum_pct" type="number" class="mwiz__param-input" min="10" max="100" />
-                  <span class="mwiz__param-unit">%</span>
-                </div>
-              </div>
-              <div class="mwiz__param-field">
-                <label class="mwiz__label-sm">Seuil de majorité</label>
-                <div class="mwiz__param-input-row">
-                  <input v-model.number="selfParams.majority_pct" type="number" class="mwiz__param-input" min="51" max="100" />
-                  <span class="mwiz__param-unit">%</span>
-                </div>
-              </div>
-            </div>
-            <button class="mwiz__submit" @click="goToSummary">
-              Récapitulatif
-              <UIcon name="i-lucide-arrow-right" class="text-sm" />
-            </button>
-          </div>
-        </Transition>
-
-        <Transition name="slide-down">
-          <div v-if="nominationCase === 'election'" class="mwiz__election-cta">
-            <button class="mwiz__submit" @click="goToToolbox">
-              Choisir les modalités d'élection
-              <UIcon name="i-lucide-arrow-right" class="text-sm" />
-            </button>
-          </div>
-        </Transition>
-      </div>
-
-      <!-- ─── ÉTAPE 3 : Boîte à outils élection ───────────────────────── -->
-      <div v-else-if="wizardStep === 'toolbox'" key="toolbox" class="mwiz__step">
-        <div class="mwiz__header">
-          <h1 class="mwiz__title">Modalités d'élection</h1>
-          <p class="mwiz__subtitle">Choisissez le mode de désignation et configurez les paramètres</p>
-        </div>
-
-        <!-- Mode toggle -->
-        <div class="mwiz__mode-toggle">
-          <button class="mwiz__mode-btn" :class="{ 'mwiz__mode-btn--active': electionMode === 'direct' }" @click="electionMode = 'direct'">
-            <UIcon name="i-lucide-vote" class="text-sm" />
-            Sans candidature
-          </button>
-          <button class="mwiz__mode-btn" :class="{ 'mwiz__mode-btn--active': electionMode === 'candidacy' }" @click="electionMode = 'candidacy'">
-            <UIcon name="i-lucide-user-plus" class="text-sm" />
-            Avec candidature
-          </button>
-        </div>
-
-        <!-- Modalités -->
-        <div class="mwiz__modalities">
-          <div
-            v-for="m in visibleModalities"
-            :key="m.id"
-            class="mwiz__modality"
-            :class="{
-              'mwiz__modality--selected': selectedModalityId === m.id,
-              'mwiz__modality--recommended': m.recommended,
-            }"
-            @click="selectedModalityId = m.id"
-          >
-            <div class="mwiz__modality-head">
-              <div class="mwiz__modality-icon">
-                <UIcon :name="m.icon" class="text-lg" />
-              </div>
-              <div class="mwiz__modality-info">
-                <p class="mwiz__modality-title">{{ m.title }}</p>
-                <p class="mwiz__modality-desc">{{ m.desc }}</p>
-              </div>
-              <div class="mwiz__modality-check">
-                <UIcon v-if="selectedModalityId === m.id" name="i-lucide-circle-check" class="text-lg" />
-                <UIcon v-else name="i-lucide-circle" class="text-lg" />
-              </div>
-            </div>
-
-            <span v-if="m.recommended" class="mwiz__modality-badge">
-              <UIcon name="i-lucide-sparkles" class="text-xs" />
-              Recommandé
-            </span>
-            <p v-if="m.recommended && m.recommendedReason" class="mwiz__modality-reason">{{ m.recommendedReason }}</p>
-
-            <!-- Paramètres (visibles si sélectionné) -->
-            <Transition name="slide-down">
-              <div v-if="selectedModalityId === m.id" class="mwiz__modality-params">
-                <div v-for="p in m.params" :key="p.id" class="mwiz__param-field">
-                  <label class="mwiz__label-sm">{{ p.label }}</label>
-                  <div class="mwiz__param-input-row">
-                    <input
-                      :value="getParam(m.id, p.id)"
-                      type="number"
-                      class="mwiz__param-input"
-                      :min="p.min"
-                      :max="p.max"
-                      @input="setParam(m.id, p.id, +($event.target as HTMLInputElement).value)"
-                    />
-                    <span class="mwiz__param-unit">{{ p.unit }}</span>
-                    <input
-                      :value="getParam(m.id, p.id)"
-                      type="range"
-                      class="mwiz__param-slider"
-                      :min="p.min"
-                      :max="p.max"
-                      @input="setParam(m.id, p.id, +($event.target as HTMLInputElement).value)"
-                    />
-                  </div>
-                </div>
-              </div>
-            </Transition>
-          </div>
-        </div>
-
-        <button class="mwiz__submit" :disabled="!canGoToSummary" @click="goToSummary">
-          Récapitulatif
-          <UIcon name="i-lucide-arrow-right" class="text-sm" />
-        </button>
-      </div>
-
-      <!-- ─── ÉTAPE 4 : Récapitulatif ──────────────────────────────────── -->
+      <!-- ─── ÉTAPE 3 : Récapitulatif ───────────────────────────────────── -->
       <div v-else-if="wizardStep === 'summary'" key="summary" class="mwiz__step">
         <div class="mwiz__header">
           <h1 class="mwiz__title">Récapitulatif</h1>
@@ -595,34 +694,30 @@ const MANDATE_TYPE_OPTIONS = [
         </div>
 
         <div class="mwiz__recap">
-          <!-- Infos -->
+
+          <!-- Nomination -->
+          <div class="mwiz__recap-block">
+            <p class="mwiz__recap-label">Nomination</p>
+            <p class="mwiz__recap-value">{{ nominationSummary }}</p>
+          </div>
+
+          <!-- Mandat -->
           <div class="mwiz__recap-block">
             <p class="mwiz__recap-label">Mandat</p>
             <p class="mwiz__recap-title">{{ title }}</p>
+            <p class="mwiz__recap-meta">
+              <UIcon :name="MANDATE_TYPE_OPTIONS.find(o => o.value === mandateType)?.icon ?? 'i-lucide-circle'" class="text-xs" />
+              {{ MANDATE_TYPE_OPTIONS.find(o => o.value === mandateType)?.label }}
+            </p>
             <p v-if="origin" class="mwiz__recap-meta">Origine : {{ origin }}</p>
             <p v-if="description" class="mwiz__recap-meta">{{ description }}</p>
             <p class="mwiz__recap-meta">
               <UIcon name="i-lucide-clock" class="text-xs" />
               {{ durationLabel }}
             </p>
-            <p class="mwiz__recap-meta">
-              <UIcon :name="MANDATE_TYPE_OPTIONS.find(o => o.value === mandateType)?.icon ?? 'i-lucide-circle'" class="text-xs" />
-              {{ MANDATE_TYPE_OPTIONS.find(o => o.value === mandateType)?.label }}
-            </p>
           </div>
 
-          <!-- Nomination -->
-          <div class="mwiz__recap-block">
-            <p class="mwiz__recap-label">Nomination</p>
-            <p class="mwiz__recap-value">
-              {{ nominationCase === 'self' ? 'Auto-désignation avec ratification' : `Élection — ${MODALITIES.find(m => m.id === selectedModalityId)?.title ?? ''}` }}
-            </p>
-            <p v-if="nominationCase === 'self'" class="mwiz__recap-meta">
-              Durée : {{ selfParams.duration_days }}j · Quorum : {{ selfParams.quorum_pct }}% · Seuil : {{ selfParams.majority_pct }}%
-            </p>
-          </div>
-
-          <!-- Steps -->
+          <!-- Étapes générées -->
           <div class="mwiz__recap-block">
             <p class="mwiz__recap-label">Étapes générées ({{ stepsToCreate.length }})</p>
             <ol class="mwiz__steps-list">
@@ -657,7 +752,7 @@ const MANDATE_TYPE_OPTIONS = [
 
 <style scoped>
 .mwiz {
-  max-width: 720px;
+  max-width: 760px;
   margin: 0 auto;
   padding: 1.5rem 1rem 4rem;
 }
@@ -696,14 +791,8 @@ const MANDATE_TYPE_OPTIONS = [
   color: var(--mood-muted);
   background: var(--mood-surface);
 }
-.mwiz__pill--active {
-  background: var(--mood-accent);
-  color: var(--mood-accent-text);
-}
-.mwiz__pill--done {
-  background: var(--mood-accent-soft);
-  color: var(--mood-accent);
-}
+.mwiz__pill--active { background: var(--mood-accent); color: var(--mood-accent-text); }
+.mwiz__pill--done { background: var(--mood-accent-soft); color: var(--mood-accent); }
 
 /* Header */
 .mwiz__header { margin-bottom: 2rem; }
@@ -738,12 +827,8 @@ const MANDATE_TYPE_OPTIONS = [
   font-family: inherit;
 }
 
-/* Type grid */
-.mwiz__type-grid {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
+/* Type grid (buttons) */
+.mwiz__type-grid { display: flex; gap: 0.5rem; flex-wrap: wrap; }
 .mwiz__type-grid--sm .mwiz__type-btn { padding: 0.375rem 0.75rem; font-size: 0.875rem; }
 .mwiz__type-btn {
   display: inline-flex;
@@ -761,6 +846,30 @@ const MANDATE_TYPE_OPTIONS = [
 .mwiz__type-btn:hover { transform: translateY(-1px); }
 .mwiz__type-btn--active { background: var(--mood-accent); color: var(--mood-accent-text); }
 
+/* Mandate type cards (Statutaire / Fonctionnel) */
+.mwiz__type-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  padding: 1rem 1.25rem;
+  background: var(--mood-surface);
+  border-radius: 14px;
+  cursor: pointer;
+  text-align: left;
+  flex: 1;
+  min-width: 200px;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  color: var(--mood-muted);
+}
+.mwiz__type-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px var(--mood-shadow); }
+.mwiz__type-card--active {
+  box-shadow: 0 0 0 2px var(--mood-accent), 0 4px 14px var(--mood-shadow);
+  background: var(--mood-accent-soft);
+  color: var(--mood-accent);
+}
+.mwiz__type-card-label { font-weight: 700; font-size: 0.9375rem; color: var(--mood-text); margin-bottom: 0.125rem; }
+.mwiz__type-card-desc { font-size: 0.8125rem; color: var(--mood-muted); line-height: 1.45; }
+
 /* Duration */
 .mwiz__dur-toggle {
   display: inline-flex;
@@ -813,35 +922,86 @@ const MANDATE_TYPE_OPTIONS = [
   cursor: pointer;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   align-self: flex-start;
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
 }
 .mwiz__submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 16px var(--mood-shadow); }
 .mwiz__submit:disabled { opacity: 0.4; cursor: not-allowed; }
 
 /* Nomination cards */
-.mwiz__nom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
-@media (max-width: 480px) { .mwiz__nom-grid { grid-template-columns: 1fr; } }
-.mwiz__nom-card {
+.mwiz__nom-grid {
   display: flex;
   flex-direction: column;
-  gap: 0.875rem;
-  padding: 1.25rem;
+  gap: 1rem;
+  margin-bottom: 0;
+}
+.mwiz__nom-card {
   background: var(--mood-surface);
   border-radius: 16px;
+  overflow: hidden;
   cursor: pointer;
-  text-align: left;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
+  border: 2px solid transparent;
 }
-.mwiz__nom-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px var(--mood-shadow); }
-.mwiz__nom-card--active { box-shadow: 0 0 0 2px var(--mood-accent), 0 6px 20px var(--mood-shadow); background: var(--mood-accent-soft); }
-.mwiz__nom-icon { color: var(--mood-accent); }
+.mwiz__nom-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px var(--mood-shadow); }
+.mwiz__nom-card--active { border-color: var(--mood-accent); background: var(--mood-accent-soft); }
+.mwiz__nom-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.875rem;
+  padding: 1.25rem;
+}
+.mwiz__nom-icon { color: var(--mood-accent); flex-shrink: 0; }
+.mwiz__nom-body { flex: 1; }
 .mwiz__nom-title { font-weight: 700; font-size: 1rem; color: var(--mood-text); margin-bottom: 0.25rem; }
 .mwiz__nom-desc { font-size: 0.875rem; color: var(--mood-muted); line-height: 1.5; }
+.mwiz__nom-check { color: var(--mood-accent); margin-top: 0.125rem; flex-shrink: 0; }
+
+/* Ratification sub-panel */
+.mwiz__ratif {
+  padding: 1.25rem;
+  padding-top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.mwiz__ratif-toggle {
+  display: inline-flex;
+  background: color-mix(in srgb, var(--mood-accent) 10%, transparent);
+  border-radius: 12px;
+  padding: 0.25rem;
+  gap: 0.25rem;
+}
+.mwiz__ratif-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--mood-muted);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+.mwiz__ratif-btn--active { background: var(--mood-accent); color: var(--mood-accent-text); }
+.mwiz__ratif-note {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  color: var(--mood-muted);
+  font-style: italic;
+}
+.mwiz__meeting-params {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+  align-items: flex-end;
+}
 
 /* Params */
-.mwiz__self-params, .mwiz__election-cta { display: flex; flex-direction: column; gap: 1rem; }
 .mwiz__param-row { display: flex; gap: 1rem; flex-wrap: wrap; }
-.mwiz__param-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 120px; }
+.mwiz__param-field { display: flex; flex-direction: column; gap: 0.375rem; min-width: 100px; }
 .mwiz__param-input-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
 .mwiz__param-input {
   width: 5rem;
@@ -849,7 +1009,7 @@ const MANDATE_TYPE_OPTIONS = [
   font-size: 0.9375rem;
   font-weight: 700;
   text-align: center;
-  background: var(--mood-accent-soft);
+  background: color-mix(in srgb, var(--mood-accent) 15%, transparent);
   border-radius: 8px;
   outline: none;
   color: var(--mood-text);
@@ -857,14 +1017,30 @@ const MANDATE_TYPE_OPTIONS = [
 .mwiz__param-unit { font-size: 0.8125rem; color: var(--mood-muted); white-space: nowrap; }
 .mwiz__param-slider { flex: 1; min-width: 80px; accent-color: var(--mood-accent); }
 
-/* Mode toggle (toolbox) */
+/* Toolbox (collective) */
+.mwiz__toolbox {
+  padding: 1.25rem;
+  padding-top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.mwiz__toolbox-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--mood-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
 .mwiz__mode-toggle {
   display: inline-flex;
-  background: var(--mood-surface);
+  background: color-mix(in srgb, var(--mood-accent) 10%, transparent);
   border-radius: 14px;
   padding: 0.3125rem;
   gap: 0.25rem;
-  margin-bottom: 1.5rem;
 }
 .mwiz__mode-btn {
   display: inline-flex;
@@ -881,40 +1057,40 @@ const MANDATE_TYPE_OPTIONS = [
 .mwiz__mode-btn--active { background: var(--mood-accent); color: var(--mood-accent-text); }
 
 /* Modalities */
-.mwiz__modalities { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
+.mwiz__modalities { display: flex; flex-direction: column; gap: 0.625rem; }
 .mwiz__modality {
-  background: var(--mood-surface);
-  border-radius: 16px;
-  padding: 1.125rem 1.25rem;
+  background: color-mix(in srgb, var(--mood-bg) 60%, transparent);
+  border-radius: 14px;
+  padding: 1rem 1.125rem;
   cursor: pointer;
   transition: transform 0.12s ease, box-shadow 0.12s ease;
   border-left: 3px solid transparent;
 }
-.mwiz__modality:hover { transform: translateY(-2px); box-shadow: 0 4px 14px var(--mood-shadow); }
-.mwiz__modality--selected { border-left-color: var(--mood-accent); box-shadow: 0 4px 14px var(--mood-shadow); }
+.mwiz__modality:hover { transform: translateY(-1px); box-shadow: 0 3px 10px var(--mood-shadow); }
+.mwiz__modality--selected { border-left-color: var(--mood-accent); box-shadow: 0 3px 10px var(--mood-shadow); }
 .mwiz__modality--recommended { border-left-color: var(--mood-success, var(--mood-accent)); }
 .mwiz__modality--selected.mwiz__modality--recommended { border-left-color: var(--mood-accent); }
-.mwiz__modality-head { display: flex; align-items: flex-start; gap: 0.875rem; }
+.mwiz__modality-head { display: flex; align-items: flex-start; gap: 0.75rem; }
 .mwiz__modality-icon {
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2.25rem;
+  height: 2.25rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--mood-accent-soft);
   color: var(--mood-accent);
-  border-radius: 12px;
+  border-radius: 10px;
   flex-shrink: 0;
 }
 .mwiz__modality-info { flex: 1; }
-.mwiz__modality-title { font-weight: 700; font-size: 0.9375rem; color: var(--mood-text); margin-bottom: 0.25rem; }
-.mwiz__modality-desc { font-size: 0.8125rem; color: var(--mood-muted); line-height: 1.5; }
-.mwiz__modality-check { color: var(--mood-accent); margin-top: 0.125rem; }
+.mwiz__modality-title { font-weight: 700; font-size: 0.9rem; color: var(--mood-text); margin-bottom: 0.125rem; }
+.mwiz__modality-desc { font-size: 0.8rem; color: var(--mood-muted); line-height: 1.4; }
+.mwiz__modality-check { color: var(--mood-accent); margin-top: 0.125rem; flex-shrink: 0; }
 .mwiz__modality-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  margin-top: 0.625rem;
+  margin-top: 0.5rem;
   font-size: 0.75rem;
   font-weight: 700;
   color: var(--mood-success, var(--mood-accent));
@@ -922,10 +1098,10 @@ const MANDATE_TYPE_OPTIONS = [
   border-radius: 12px;
   padding: 0.1875rem 0.625rem;
 }
-.mwiz__modality-reason { font-size: 0.8125rem; color: var(--mood-muted); margin-top: 0.25rem; font-style: italic; }
+.mwiz__modality-reason { font-size: 0.8rem; color: var(--mood-muted); margin-top: 0.25rem; font-style: italic; }
 .mwiz__modality-params {
-  margin-top: 1rem;
-  padding-top: 1rem;
+  margin-top: 0.875rem;
+  padding-top: 0.875rem;
   border-top: 1px solid var(--mood-border, rgba(0,0,0,0.06));
   display: flex;
   flex-wrap: wrap;
@@ -1001,7 +1177,7 @@ const MANDATE_TYPE_OPTIONS = [
 .slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.2s ease; }
 .slide-fade-enter-from { opacity: 0; transform: translateX(20px); }
 .slide-fade-leave-to { opacity: 0; transform: translateX(-20px); }
-.slide-down-enter-active, .slide-down-leave-active { transition: all 0.2s ease; overflow: hidden; }
+.slide-down-enter-active, .slide-down-leave-active { transition: all 0.22s ease; overflow: hidden; }
 .slide-down-enter-from, .slide-down-leave-to { opacity: 0; max-height: 0; }
-.slide-down-enter-to, .slide-down-leave-from { max-height: 600px; }
+.slide-down-enter-to, .slide-down-leave-from { max-height: 800px; }
 </style>
diff --git a/frontend/app/stores/groups.ts b/frontend/app/stores/groups.ts
index 0fc848c..12255b1 100644
--- a/frontend/app/stores/groups.ts
+++ b/frontend/app/stores/groups.ts
@@ -34,7 +34,6 @@ export interface GroupMemberCreate {
 
 export const useGroupsStore = defineStore('groups', () => {
   const { $api } = useApi()
-  const orgs = useOrgsStore()
 
   const list = ref<GroupSummary[]>([])
   const loading = ref(false)
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index a4db6e6..a4cfe84 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -1,7 +1,7 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   ssr: false,
-  devtools: { enabled: true },
+  devtools: { enabled: false },
   devServer: { port: 3002, host: '0.0.0.0' },
   components: [{ path: '~/components', pathPrefix: false }],
   css: ['~/assets/css/moods.css'],