From c7cb22f313c214d89c1b2b507ba5ece023780b7a Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Sat, 28 Feb 2026 23:09:29 +0100
Subject: [PATCH] Design ludique arrondi + mobile responsive + fix IPv6

- ToolboxVignette: prop bullets[] remplace description, touch targets agrandis
- Design arrondi: border-radius 16px cards, 20px pills, 12px inputs, no borders
- Hover animations: translateY(-3px) + shadow, active states pour touch
- SectionLayout: toolbox accordion mobile, pills scroll horizontal, responsive title/subtitle
- app.vue: MoodSwitcher dans drawer mobile, header responsive, nav touch-friendly
- Dashboard: grille 2-colonnes mobile, connect banner column layout, formula code scroll
- Documents/decisions/mandates/protocols: cards responsive (padding, font-size, gap)
- Login: touch targets 3rem min, iOS zoom prevention, responsive sizing
- Modals: padding responsive sm:p-6
- Protocols: table compact mobile, proto items responsive
- nuxt.config: host 0.0.0.0 pour fix IPv4/IPv6 binding

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 backend/seed.py                               |   32 +-
 frontend/app/app.config.ts                    |   33 +
 frontend/app/app.vue                          |  204 +--
 frontend/app/assets/css/moods.css             |  166 ++-
 .../app/components/common/SectionLayout.vue   |  229 ++--
 .../app/components/common/ToolboxVignette.vue |   98 +-
 frontend/app/composables/useMood.ts           |    4 +-
 frontend/app/pages/decisions/index.vue        |   71 +-
 frontend/app/pages/documents/index.vue        |   75 +-
 frontend/app/pages/index.vue                  |  358 +++--
 frontend/app/pages/login.vue                  |  192 ++-
 frontend/app/pages/mandates/index.vue         |  120 +-
 frontend/app/pages/protocols/index.vue        | 1162 ++++++++++-------
 frontend/app/stores/decisions.ts              |    2 +-
 frontend/nuxt.config.ts                       |    5 +-
 15 files changed, 1730 insertions(+), 1021 deletions(-)
 create mode 100644 frontend/app/app.config.ts

diff --git a/backend/seed.py b/backend/seed.py
index 856bf02..a3a2a56 100644
--- a/backend/seed.py
+++ b/backend/seed.py
@@ -119,31 +119,37 @@ async def seed_voting_protocols(
     formulas: dict[str, FormulaConfig],
 ) -> dict[str, VotingProtocol]:
     protocols: dict[str, dict] = {
-        "Vote majoritaire": {
+        "Vote WoT standard": {
             "description": (
-                "Vote binaire a majorite simple. Le seuil d'adoption "
-                "s'adapte dynamiquement au taux de participation via "
-                "la formule d'inertie WoT."
+                "Vote binaire (pour/contre) ouvert a tous les membres de la "
+                "toile de confiance. Le seuil d'adoption s'adapte au taux de "
+                "participation via l'inertie WoT : quasi-unanimite a faible "
+                "participation, majorite simple a forte mobilisation. "
+                "Utilise pour la Licence G1 et les textes fondateurs."
             ),
             "vote_type": "binary",
             "formula_config_id": formulas["Standard Licence G1"].id,
             "mode_params": "D30M50B.1G.2",
         },
-        "Vote quadratique": {
+        "Vote forgeron (Smith)": {
             "description": (
-                "Vote pondere par la racine carree des certifications. "
-                "Reduit l'influence des gros certificateurs et favorise "
-                "une participation large et diversifiee."
+                "Vote binaire avec double critere : seuil WoT standard + "
+                "seuil minimal de forgerons. Garantit que toute decision "
+                "impliquant les validateurs soit soutenue par les "
+                "operateurs du reseau. Utilise pour les engagements "
+                "forgerons et les decisions d'infrastructure."
             ),
             "vote_type": "binary",
             "formula_config_id": formulas["Forgeron avec Smith"].id,
             "mode_params": "D30M50B.1G.2S.1",
         },
-        "Vote permanent": {
+        "Vote Comite Technique": {
             "description": (
-                "Vote continu sans date de fin. Le resultat evolue en "
-                "temps reel avec chaque nouveau vote. Adapte aux documents "
-                "de reference sous revision permanente."
+                "Vote binaire avec critere TechComm obligatoire. "
+                "Reserve aux decisions techniques critiques : runtime "
+                "upgrades, modifications de parametres on-chain, "
+                "approbation de code. Le Comite Technique doit atteindre "
+                "un seuil minimal independamment du vote communautaire."
             ),
             "vote_type": "binary",
             "formula_config_id": formulas["Comite Tech"].id,
@@ -912,7 +918,7 @@ async def run_seed():
             await seed_votes_on_items(
                 session,
                 doc_forgeron,
-                protocols["Vote majoritaire"],
+                protocols["Vote WoT standard"],
                 voters,
             )
 
diff --git a/frontend/app/app.config.ts b/frontend/app/app.config.ts
new file mode 100644
index 0000000..1971fd2
--- /dev/null
+++ b/frontend/app/app.config.ts
@@ -0,0 +1,33 @@
+export default defineAppConfig({
+  ui: {
+    button: {
+      variants: {
+        variant: {
+          solid: 'border-0',
+          outline: 'border-0',
+          soft: 'border-0',
+          subtle: 'border-0',
+          ghost: 'border-0',
+          link: 'border-0',
+        },
+      },
+    },
+    badge: {
+      variants: {
+        variant: {
+          solid: 'border-0',
+          outline: 'border-0',
+          soft: 'border-0',
+          subtle: 'border-0',
+        },
+      },
+    },
+    input: {
+      variants: {
+        variant: {
+          outline: 'border-0 ring-1 ring-[var(--mood-input-border)] focus:ring-[var(--mood-input-focus)]',
+        },
+      },
+    },
+  },
+})
diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index 2bc7c25..e6f7378 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -87,7 +87,7 @@ function isActive(to: string) {
               aria-label="Ouvrir le menu"
               @click="mobileMenuOpen = true"
             >
-              <UIcon name="i-lucide-menu" class="text-lg" />
+              <UIcon name="i-lucide-menu" class="text-xl" />
             </button>
             <NuxtLink to="/" class="app-header__logo">
               <UIcon name="i-lucide-gavel" class="app-header__logo-icon" />
@@ -95,7 +95,7 @@ function isActive(to: string) {
             </NuxtLink>
           </div>
 
-          <!-- Center: Mood switcher -->
+          <!-- Center: Mood switcher (desktop) -->
           <MoodSwitcher class="hidden sm:flex" />
 
           <!-- Right: Auth -->
@@ -126,7 +126,7 @@ function isActive(to: string) {
             </template>
             <template v-else>
               <NuxtLink to="/login" class="app-header__connect-btn">
-                <UIcon name="i-lucide-log-in" class="text-sm" />
+                <UIcon name="i-lucide-log-in" />
                 <span>Connexion</span>
               </NuxtLink>
             </template>
@@ -151,15 +151,14 @@ function isActive(to: string) {
               :class="{ 'app-mobile-nav__link--active': isActive(item.to) }"
               @click="mobileMenuOpen = false"
             >
-              <UIcon :name="item.icon" class="text-base" />
+              <UIcon :name="item.icon" class="text-lg" />
               <span>{{ item.label }}</span>
             </NuxtLink>
           </nav>
-          <div
-            v-if="auth.isAuthenticated"
-            class="app-mobile-nav__user"
-          >
-            <span>{{ auth.identity?.display_name || auth.identity?.address?.slice(0, 16) + '...' }}</span>
+          <!-- Mood switcher in mobile drawer -->
+          <div class="app-mobile-mood">
+            <span class="app-mobile-mood__label">Ambiance</span>
+            <MoodSwitcher />
           </div>
         </template>
       </USlideover>
@@ -176,7 +175,7 @@ function isActive(to: string) {
               class="app-sidebar__link"
               :class="{ 'app-sidebar__link--active': isActive(item.to) }"
             >
-              <UIcon :name="item.icon" class="text-base" />
+              <UIcon :name="item.icon" class="text-lg" />
               <span>{{ item.label }}</span>
             </NuxtLink>
           </nav>
@@ -197,7 +196,7 @@ function isActive(to: string) {
           class="app-ws-banner"
           role="alert"
         >
-          <UIcon name="i-lucide-plug-zap" class="text-base" />
+          <UIcon name="i-lucide-plug-zap" class="text-lg" />
           <span>{{ ws.error.value }}</span>
           <button class="app-ws-banner__btn" @click="ws.disconnect(); ws.connect()">
             Reconnecter
@@ -229,17 +228,16 @@ function isActive(to: string) {
   top: 0;
   z-index: 30;
   background: var(--mood-surface);
-  border-bottom: 1px solid var(--mood-border);
 }
 
 .app-header__inner {
   max-width: 80rem;
   margin: 0 auto;
-  padding: 0 1rem;
+  padding: 0 1.25rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 3.25rem;
+  height: 3.5rem;
 }
 
 .app-header__left {
@@ -252,13 +250,12 @@ function isActive(to: string) {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border: none;
+  width: 2.25rem;
+  height: 2.25rem;
   background: none;
   color: var(--mood-text-muted);
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: 12px;
 }
 .app-header__menu-btn:hover {
   color: var(--mood-text);
@@ -269,16 +266,17 @@ function isActive(to: string) {
   text-decoration: none;
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: 0.5rem;
 }
 
 .app-header__logo-icon {
-  font-size: 1.125rem;
+  font-size: 1.375rem;
   color: var(--mood-accent);
+  transform: scaleX(-1);
 }
 
 .app-header__logo-g {
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   font-weight: 800;
   color: var(--mood-accent);
   line-height: 1;
@@ -286,51 +284,61 @@ function isActive(to: string) {
 }
 
 .app-header__logo-paren {
-  font-size: 0.9375rem;
+  font-size: 1.125rem;
   font-weight: 300;
   color: var(--mood-text-muted);
-  letter-spacing: -0.02em;
+  opacity: 0.5;
 }
 
 .app-header__logo-word {
-  font-size: 0.9375rem;
-  font-weight: 600;
+  font-size: 1.125rem;
+  font-weight: 700;
   color: var(--mood-text);
-  letter-spacing: -0.01em;
 }
 
 .app-header__right {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.625rem;
 }
 
 .app-header__identity {
-  font-size: 0.75rem;
-  font-weight: 500;
+  font-size: 0.875rem;
+  font-weight: 600;
   color: var(--mood-text);
-  max-width: 10rem;
+  max-width: 6rem;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+@media (min-width: 640px) {
+  .app-header__identity {
+    max-width: 12rem;
+  }
+}
+
 .app-header__role {
-  font-size: 0.625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: 2px 6px;
-  border-radius: 3px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  padding: 3px 10px;
+  border-radius: 20px;
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .app-header__role {
+    display: inline;
+  }
 }
 
 .app-header__role--smith {
-  background: rgba(24, 132, 59, 0.12);
+  background: rgba(24, 132, 59, 0.15);
   color: var(--mood-success);
 }
 
 .app-header__role--tech {
-  background: rgba(24, 86, 168, 0.12);
+  background: rgba(24, 86, 168, 0.15);
   color: var(--mood-status-vote, #1856a8);
 }
 
@@ -338,14 +346,13 @@ function isActive(to: string) {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border: none;
+  width: 2.25rem;
+  height: 2.25rem;
   background: none;
   color: var(--mood-text-muted);
   cursor: pointer;
-  border-radius: 4px;
-  font-size: 0.875rem;
+  border-radius: 12px;
+  font-size: 1rem;
 }
 .app-header__icon-btn:hover {
   color: var(--mood-text);
@@ -356,20 +363,27 @@ function isActive(to: string) {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  padding: 0.375rem 0.875rem;
-  font-size: 0.75rem;
-  font-weight: 600;
+  padding: 0.5rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
   color: var(--mood-accent-text);
   background: var(--mood-accent);
-  border: none;
-  border-radius: 4px;
+  border-radius: 24px;
   text-decoration: none;
   cursor: pointer;
-  transition: opacity 0.15s ease;
-  letter-spacing: 0.01em;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+@media (min-width: 640px) {
+  .app-header__connect-btn {
+    gap: 0.5rem;
+    padding: 0.5rem 1.25rem;
+    font-size: 0.9375rem;
+  }
 }
 .app-header__connect-btn:hover {
-  opacity: 0.88;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px var(--mood-shadow);
 }
 
 /* === Sidebar === */
@@ -379,9 +393,8 @@ function isActive(to: string) {
 }
 
 .app-sidebar {
-  width: 13rem;
+  width: 14rem;
   flex-shrink: 0;
-  border-right: 1px solid var(--mood-border);
   background: var(--mood-surface);
   display: none;
 }
@@ -394,23 +407,23 @@ function isActive(to: string) {
 
 .app-sidebar__nav {
   position: sticky;
-  top: 3.25rem;
-  padding: 0.75rem 0.5rem;
+  top: 3.5rem;
+  padding: 1rem 0.75rem;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
 }
 
 .app-sidebar__link {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.8125rem;
-  font-weight: 500;
+  gap: 0.625rem;
+  padding: 0.625rem 0.875rem;
+  font-size: 0.9375rem;
+  font-weight: 600;
   color: var(--mood-text-muted);
   text-decoration: none;
-  border-radius: 4px;
+  border-radius: 12px;
   transition: all 0.12s ease;
 }
 
@@ -422,43 +435,52 @@ function isActive(to: string) {
 .app-sidebar__link--active {
   color: var(--mood-accent);
   background: var(--mood-accent-soft);
-  font-weight: 600;
+  font-weight: 700;
 }
 
 /* === Mobile nav === */
 .app-mobile-nav {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: 0.5rem;
+  gap: 4px;
+  padding: 0.75rem;
 }
 
 .app-mobile-nav__link {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-  padding: 0.625rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
+  gap: 0.875rem;
+  padding: 1rem 1.25rem;
+  font-size: 1.0625rem;
+  font-weight: 600;
   color: var(--mood-text-muted);
   text-decoration: none;
-  border-radius: 4px;
+  border-radius: 14px;
+  min-height: 3rem;
 }
-.app-mobile-nav__link:hover {
+.app-mobile-nav__link:hover,
+.app-mobile-nav__link:active {
   background: var(--mood-accent-soft);
   color: var(--mood-text);
 }
 .app-mobile-nav__link--active {
   color: var(--mood-accent);
   background: var(--mood-accent-soft);
-  font-weight: 600;
+  font-weight: 700;
 }
 
-.app-mobile-nav__user {
-  margin-top: 1rem;
-  padding: 0.75rem;
-  border-top: 1px solid var(--mood-border);
-  font-size: 0.75rem;
+.app-mobile-mood {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  margin-top: 0.5rem;
+  border-top: 1px solid var(--mood-accent-soft);
+}
+
+.app-mobile-mood__label {
+  font-size: 0.875rem;
+  font-weight: 600;
   color: var(--mood-text-muted);
 }
 
@@ -466,18 +488,18 @@ function isActive(to: string) {
 .app-main {
   flex: 1;
   min-width: 0;
-  padding: 1.5rem 1rem;
+  padding: 1.5rem 1.25rem;
 }
 
 @media (min-width: 640px) {
   .app-main {
-    padding: 1.5rem 1.5rem;
+    padding: 2rem 1.75rem;
   }
 }
 
 @media (min-width: 1024px) {
   .app-main {
-    padding: 2rem 2rem;
+    padding: 2rem 2.5rem;
   }
 }
 
@@ -491,23 +513,22 @@ function isActive(to: string) {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
+  gap: 0.625rem;
+  padding: 0.625rem 1rem;
   background: var(--mood-error);
   color: white;
-  font-size: 0.75rem;
-  font-weight: 500;
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .app-ws-banner__btn {
   margin-left: 0.5rem;
-  padding: 0.25rem 0.5rem;
+  padding: 0.375rem 0.75rem;
   background: rgba(255,255,255,0.2);
-  border: none;
-  border-radius: 3px;
+  border-radius: 20px;
   color: white;
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.8125rem;
+  font-weight: 700;
   cursor: pointer;
 }
 .app-ws-banner__btn:hover {
@@ -520,14 +541,13 @@ function isActive(to: string) {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  font-size: 0.6875rem;
+  padding: 1rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
-  border-top: 1px solid var(--mood-border);
 }
 
 .app-footer__sep {
-  opacity: 0.4;
+  opacity: 0.3;
 }
 
 /* === Transitions === */
diff --git a/frontend/app/assets/css/moods.css b/frontend/app/assets/css/moods.css
index 32337a7..d7cb0ac 100644
--- a/frontend/app/assets/css/moods.css
+++ b/frontend/app/assets/css/moods.css
@@ -39,73 +39,73 @@
 }
 
 /* --------------------------------------------------------------------------
-   Zen — Frais, vegetal, vivant (Light)
-   Palette: sauge / lavande / terre cuite / bleu ciel
+   Zen — Foret profonde, vegetal et mineral (Light)
+   Palette: vert sombre / brun chaud / bleu ardoise / terre
    -------------------------------------------------------------------------- */
 .mood-zen {
-  --mood-bg: #f6f9f5;
-  --mood-surface: #ffffff;
-  --mood-surface-hover: #ecf4e8;
-  --mood-text: #172014;
-  --mood-text-muted: #4e6d48;
-  --mood-accent: #2e8250;
-  --mood-accent-soft: rgba(46, 130, 80, 0.07);
+  --mood-bg: #f0f4ef;
+  --mood-surface: #fafcf9;
+  --mood-surface-hover: #e4ece0;
+  --mood-text: #0e1a0c;
+  --mood-text-muted: #3a5634;
+  --mood-accent: #1a6838;
+  --mood-accent-soft: rgba(26, 104, 56, 0.08);
   --mood-accent-text: #ffffff;
-  --mood-border: #bdd4b8;
-  --mood-secondary: #7868a6;
-  --mood-tertiary: #b86830;
-  --mood-success: #1d9048;
-  --mood-warning: #a87020;
-  --mood-error: #b83838;
-  --mood-gradient: linear-gradient(145deg, #f2f8ef 0%, #ffffff 40%, #f4f0f8 100%);
-  --mood-shadow: rgba(40, 100, 60, 0.06);
-  --mood-input-bg: #ffffff;
-  --mood-input-border: #a4c4a0;
-  --mood-input-focus: #2e8250;
+  --mood-border: #a0c098;
+  --mood-secondary: #6b5838;
+  --mood-tertiary: #3a6878;
+  --mood-success: #146830;
+  --mood-warning: #8a6018;
+  --mood-error: #a03030;
+  --mood-gradient: linear-gradient(145deg, #eaf2e6 0%, #fafcf9 40%, #f0ece4 100%);
+  --mood-shadow: rgba(26, 80, 40, 0.08);
+  --mood-input-bg: #fafcf9;
+  --mood-input-border: #90b088;
+  --mood-input-focus: #1a6838;
 
-  --mood-status-prepa: #a87020;
-  --mood-status-prepa-bg: rgba(168, 112, 32, 0.10);
-  --mood-status-vote: #6858a0;
-  --mood-status-vote-bg: rgba(104, 88, 160, 0.10);
-  --mood-status-vigueur: #1d9048;
-  --mood-status-vigueur-bg: rgba(29, 144, 72, 0.10);
-  --mood-status-clos: #607858;
-  --mood-status-clos-bg: rgba(96, 120, 88, 0.08);
+  --mood-status-prepa: #8a6018;
+  --mood-status-prepa-bg: rgba(138, 96, 24, 0.10);
+  --mood-status-vote: #3a6878;
+  --mood-status-vote-bg: rgba(58, 104, 120, 0.10);
+  --mood-status-vigueur: #146830;
+  --mood-status-vigueur-bg: rgba(20, 104, 48, 0.10);
+  --mood-status-clos: #506848;
+  --mood-status-clos-bg: rgba(80, 104, 72, 0.08);
 }
 
 /* --------------------------------------------------------------------------
-   Chagrine — Lumineux, electrique, profond (Dark)
-   Palette: violet vif / cyan / magenta / or
+   Chagrine — Profond, electrique, bleu dominant (Dark)
+   Palette: bleu electrique / cyan / magenta / or
    -------------------------------------------------------------------------- */
 .mood-chagrine {
-  --mood-bg: #14101e;
-  --mood-surface: #1c1628;
-  --mood-surface-hover: #261e38;
-  --mood-text: #e4daf0;
-  --mood-text-muted: #9888b8;
-  --mood-accent: #9470d8;
-  --mood-accent-soft: rgba(148, 112, 216, 0.12);
+  --mood-bg: #0c1018;
+  --mood-surface: #121824;
+  --mood-surface-hover: #1a2438;
+  --mood-text: #d8e4f0;
+  --mood-text-muted: #7898c0;
+  --mood-accent: #4088d8;
+  --mood-accent-soft: rgba(64, 136, 216, 0.12);
   --mood-accent-text: #ffffff;
-  --mood-border: #302448;
+  --mood-border: #1e3050;
   --mood-secondary: #38c8c8;
-  --mood-tertiary: #e07090;
-  --mood-success: #40d888;
+  --mood-tertiary: #d870a0;
+  --mood-success: #38d080;
   --mood-warning: #e0b040;
-  --mood-error: #e86060;
-  --mood-gradient: linear-gradient(145deg, #14101e 0%, #1c1628 40%, #101820 100%);
-  --mood-shadow: rgba(120, 80, 200, 0.12);
-  --mood-input-bg: #1c1628;
-  --mood-input-border: #3c2c58;
-  --mood-input-focus: #9470d8;
+  --mood-error: #e06060;
+  --mood-gradient: linear-gradient(145deg, #0c1018 0%, #121824 40%, #0c1420 100%);
+  --mood-shadow: rgba(40, 100, 200, 0.15);
+  --mood-input-bg: #121824;
+  --mood-input-border: #283c58;
+  --mood-input-focus: #4088d8;
 
   --mood-status-prepa: #e0b040;
   --mood-status-prepa-bg: rgba(224, 176, 64, 0.15);
   --mood-status-vote: #38c8c8;
   --mood-status-vote-bg: rgba(56, 200, 200, 0.14);
-  --mood-status-vigueur: #40d888;
-  --mood-status-vigueur-bg: rgba(64, 216, 136, 0.14);
-  --mood-status-clos: #7868a0;
-  --mood-status-clos-bg: rgba(120, 104, 160, 0.12);
+  --mood-status-vigueur: #38d080;
+  --mood-status-vigueur-bg: rgba(56, 208, 128, 0.14);
+  --mood-status-clos: #6080a8;
+  --mood-status-clos-bg: rgba(96, 128, 168, 0.12);
 }
 
 /* --------------------------------------------------------------------------
@@ -144,35 +144,59 @@
 }
 
 /* ==========================================================================
-   Global design tokens
+   Global design tokens — Nunito, rounded, borderless
    ========================================================================== */
 
+*,
+*::before,
+*::after {
+  border-color: transparent;
+}
+
+html {
+  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
+  font-size: 16px;
+}
+
 body {
+  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
   transition: background-color 0.3s ease, color 0.3s ease;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+/* --- No borders anywhere --- */
+button, input, select, textarea {
+  border: none !important;
+  outline: none;
+  font-family: inherit;
+}
+
+input:focus, select:focus, textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 2.5px var(--mood-accent-soft);
+}
+
 /* --- Status pills --- */
 .status-pill {
   display: inline-flex;
   align-items: center;
-  padding: 3px 10px;
-  border-radius: 4px;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
+  padding: 5px 14px;
+  border-radius: 20px;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
   cursor: pointer;
   transition: all 0.15s ease;
   user-select: none;
-  border: none;
+  border: none !important;
 }
 .status-pill:hover {
-  filter: brightness(1.1);
+  filter: brightness(1.08);
+  transform: translateY(-1px);
 }
 .status-pill.active {
-  box-shadow: 0 0 0 2px var(--mood-accent);
+  box-shadow: 0 0 0 2.5px var(--mood-accent);
 }
 
 .status-prepa {
@@ -193,14 +217,32 @@ body {
 }
 
 /* ==========================================================================
-   Nuxt UI overrides
+   Nuxt UI overrides — borderless everything
    ========================================================================== */
 
 :root .mood-peps,
 :root .mood-zen,
 :root .mood-chagrine,
 :root .mood-grave {
-  --ui-border: var(--mood-input-border);
+  --ui-border: transparent;
   --ui-bg: var(--mood-input-bg);
   --ui-text-highlighted: var(--mood-accent);
 }
+
+:root button,
+:root [class*="UButton"],
+:root [class*="u-button"],
+:root [data-variant] {
+  border: none !important;
+  font-family: 'Nunito', system-ui, sans-serif !important;
+}
+
+:root input,
+:root textarea,
+:root select,
+:root [class*="UInput"],
+:root [class*="USelect"],
+:root [class*="UTextarea"] {
+  border: none !important;
+  font-family: 'Nunito', system-ui, sans-serif !important;
+}
diff --git a/frontend/app/components/common/SectionLayout.vue b/frontend/app/components/common/SectionLayout.vue
index 9835c3c..7930e02 100644
--- a/frontend/app/components/common/SectionLayout.vue
+++ b/frontend/app/components/common/SectionLayout.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 /**
- * SectionLayout — Mise en page pour sections (documents, decisions, mandats).
+ * SectionLayout — Mise en page pour sections.
  *
- * Structure : titre + status pills + grille (contenu + toolbox).
- * Responsive : toolbox passe sous le contenu sur mobile.
+ * Status pills inside the content block (not header).
+ * Toolbox sidebar with condensed content.
  */
 
 export interface StatusFilter {
@@ -42,6 +42,8 @@ const emit = defineEmits<{
   'update:activeStatus': [status: string | null]
 }>()
 
+const toolboxOpen = ref(false)
+
 const statusCssMap: Record<string, string> = {
   draft: 'status-prepa',
   qualification: 'status-prepa',
@@ -73,60 +75,63 @@ function toggleStatus(statusId: string) {
 
 <template>
   <div class="section">
-    <!-- Header -->
+    <!-- Header: just title -->
     <div class="section__header">
-      <div class="section__title-block">
-        <h1 class="section__title">{{ title }}</h1>
-        <p v-if="subtitle" class="section__subtitle">{{ subtitle }}</p>
-      </div>
-
-      <div v-if="statuses.length > 0" class="section__pills">
-        <button
-          v-for="status in statuses"
-          :key="status.id"
-          type="button"
-          class="status-pill"
-          :class="[getStatusClass(status), { active: activeStatus === status.id }]"
-          @click="toggleStatus(status.id)"
-        >
-          {{ status.label }}
-          <span v-if="status.count > 0" class="section__pill-count">{{ status.count }}</span>
-        </button>
-      </div>
+      <h1 class="section__title">{{ title }}</h1>
+      <p v-if="subtitle" class="section__subtitle">{{ subtitle }}</p>
     </div>
 
     <!-- Body: content + toolbox -->
     <div class="section__body">
       <div class="section__main">
+        <!-- Status pills INSIDE the list block -->
+        <div v-if="statuses.length > 0" class="section__pills">
+          <button
+            v-for="status in statuses"
+            :key="status.id"
+            type="button"
+            class="status-pill"
+            :class="[getStatusClass(status), { active: activeStatus === status.id }]"
+            @click="toggleStatus(status.id)"
+          >
+            {{ status.label }}
+            <span v-if="status.count > 0" class="section__pill-count">{{ status.count }}</span>
+          </button>
+        </div>
+
         <div v-if="$slots.search" class="section__search">
           <slot name="search" />
         </div>
         <div class="section__content">
           <slot />
         </div>
-        <div v-if="$slots.empty" class="section__empty">
-          <slot name="empty" />
-        </div>
       </div>
 
       <aside class="section__toolbox">
-        <div class="section__toolbox-head">
-          <UIcon name="i-lucide-wrench" class="text-xs" />
-          <span>Boite a outils</span>
-        </div>
-        <div v-if="$slots.toolbox" class="section__toolbox-body">
-          <slot name="toolbox" />
-        </div>
-        <div v-else-if="toolboxItems && toolboxItems.length > 0" class="section__toolbox-body">
-          <ToolboxVignette
-            v-for="(item, idx) in toolboxItems"
-            :key="idx"
-            :title="item.title"
-            :description="item.description"
+        <button class="section__toolbox-head" @click="toolboxOpen = !toolboxOpen">
+          <div class="section__toolbox-head-left">
+            <UIcon name="i-lucide-wrench" />
+            <span>Boite a outils</span>
+          </div>
+          <UIcon
+            :name="toolboxOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+            class="section__toolbox-toggle"
           />
-        </div>
-        <div v-else class="section__toolbox-empty">
-          Aucun outil disponible
+        </button>
+        <div class="section__toolbox-content" :class="{ 'section__toolbox-content--open': toolboxOpen }">
+          <div v-if="$slots.toolbox" class="section__toolbox-body">
+            <slot name="toolbox" />
+          </div>
+          <div v-else-if="toolboxItems && toolboxItems.length > 0" class="section__toolbox-body">
+            <ToolboxVignette
+              v-for="(item, idx) in toolboxItems"
+              :key="idx"
+              :title="item.title"
+            />
+          </div>
+          <div v-else class="section__toolbox-empty">
+            Aucun outil disponible
+          </div>
         </div>
       </aside>
     </div>
@@ -137,68 +142,93 @@ function toggleStatus(statusId: string) {
 .section {
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 1.5rem;
 }
 
 .section__header {
   display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.section__title-block {
-  flex: 1;
-  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
 }
 
 .section__title {
   font-size: 1.375rem;
-  font-weight: 700;
+  font-weight: 800;
   color: var(--mood-text);
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
+}
+
+@media (min-width: 640px) {
+  .section__title {
+    font-size: 1.75rem;
+  }
 }
 
 .section__subtitle {
-  margin-top: 0.125rem;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   color: var(--mood-text-muted);
+  font-weight: 500;
 }
 
-.section__pills {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  align-items: center;
-}
-
-.section__pill-count {
-  margin-left: 0.25rem;
-  font-size: 0.5625rem;
-  font-weight: 700;
-  opacity: 0.7;
+@media (min-width: 640px) {
+  .section__subtitle {
+    font-size: 1rem;
+  }
 }
 
 .section__body {
   display: grid;
   grid-template-columns: 1fr 16rem;
-  gap: 1.25rem;
+  gap: 1.5rem;
   align-items: start;
 }
 
 .section__main {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
   min-width: 0;
 }
 
+.section__pills {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  padding-bottom: 2px;
+}
+
+.section__pills::-webkit-scrollbar {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .section__pills {
+    flex-wrap: wrap;
+    overflow-x: visible;
+  }
+}
+
+.section__pill-count {
+  margin-left: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 800;
+  opacity: 0.7;
+}
+
 .section__search {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  align-items: center;
+  align-items: stretch;
+}
+
+@media (max-width: 639px) {
+  .section__search {
+    flex-direction: column;
+  }
 }
 
 .section__content {
@@ -207,38 +237,73 @@ function toggleStatus(statusId: string) {
 
 .section__toolbox {
   position: sticky;
-  top: 4rem;
+  top: 4.5rem;
   display: flex;
   flex-direction: column;
-  gap: 0.625rem;
   background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 6px;
-  padding: 0.875rem;
+  border-radius: 16px;
+  overflow: hidden;
 }
 
 .section__toolbox-head {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  font-size: 0.6875rem;
-  font-weight: 700;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1rem;
+  cursor: pointer;
+  background: none;
+}
+
+.section__toolbox-head-left {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 800;
   color: var(--mood-accent);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.04em;
+}
+
+.section__toolbox-toggle {
+  color: var(--mood-text-muted);
+  font-size: 0.875rem;
+}
+
+.section__toolbox-content {
+  display: none;
+  padding: 0 1rem 1rem;
+}
+
+.section__toolbox-content--open {
+  display: block;
 }
 
 .section__toolbox-body {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.625rem;
 }
 
 .section__toolbox-empty {
-  font-size: 0.6875rem;
+  font-size: 0.875rem;
   color: var(--mood-text-muted);
   text-align: center;
-  padding: 0.75rem 0;
+  padding: 1rem 0;
+}
+
+/* Desktop: toolbox always open, no toggle */
+@media (min-width: 1024px) {
+  .section__toolbox-head {
+    cursor: default;
+  }
+  .section__toolbox-toggle {
+    display: none;
+  }
+  .section__toolbox-content {
+    display: block;
+  }
 }
 
 @media (max-width: 1023px) {
diff --git a/frontend/app/components/common/ToolboxVignette.vue b/frontend/app/components/common/ToolboxVignette.vue
index 090b707..783dc5a 100644
--- a/frontend/app/components/common/ToolboxVignette.vue
+++ b/frontend/app/components/common/ToolboxVignette.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * ToolboxVignette — Carte compacte pour la boite a outils.
+ * ToolboxVignette — Carte compacte, bullet points, bouton Demarrer.
  */
 
 export interface ToolboxAction {
@@ -8,18 +8,17 @@ export interface ToolboxAction {
   icon?: string
   to?: string
   emit?: string
+  primary?: boolean
 }
 
 const props = withDefaults(
   defineProps<{
     title: string
-    description?: string
-    contextLabel?: string
+    bullets?: string[]
     actions?: ToolboxAction[]
   }>(),
   {
-    description: undefined,
-    contextLabel: undefined,
+    bullets: undefined,
     actions: undefined,
   },
 )
@@ -29,10 +28,9 @@ const emit = defineEmits<{
 }>()
 
 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' },
+  { label: 'Formules', icon: 'i-lucide-calculator', emit: 'formules' },
+  { label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer', primary: true },
 ]
 
 const resolvedActions = computed(() => props.actions ?? defaultActions)
@@ -50,19 +48,18 @@ function handleAction(action: ToolboxAction) {
 <template>
   <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>{{ contextLabel }}</span>
-    </div>
+    <ul v-if="bullets && bullets.length > 0" class="vignette__bullets">
+      <li v-for="(b, i) in bullets" :key="i">{{ b }}</li>
+    </ul>
     <div class="vignette__actions">
       <button
         v-for="action in resolvedActions"
         :key="action.label"
         class="vignette__btn"
+        :class="{ 'vignette__btn--primary': action.primary }"
         @click="handleAction(action)"
       >
-        <UIcon v-if="action.icon" :name="action.icon" class="text-xs" />
+        <UIcon v-if="action.icon" :name="action.icon" />
         <span>{{ action.label }}</span>
       </button>
     </div>
@@ -71,45 +68,37 @@ function handleAction(action: ToolboxAction) {
 
 <style scoped>
 .vignette {
-  background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 4px;
-  padding: 0.625rem;
+  background: var(--mood-accent-soft);
+  border-radius: 12px;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  transition: border-color 0.15s ease;
-}
-.vignette:hover {
-  border-color: var(--mood-accent);
+  gap: 0.5rem;
 }
 
 .vignette__title {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: 0.9375rem;
+  font-weight: 700;
   color: var(--mood-text);
   margin: 0;
 }
 
-.vignette__desc {
-  font-size: 0.6875rem;
-  color: var(--mood-text-muted);
-  line-height: 1.35;
+.vignette__bullets {
   margin: 0;
-}
-
-.vignette__ctx {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.625rem;
+  padding: 0 0 0 1rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
+  line-height: 1.5;
+  list-style-type: disc;
+}
+.vignette__bullets li::marker {
+  color: var(--mood-accent);
 }
 
 .vignette__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.25rem;
+  gap: 0.375rem;
   margin-top: 0.125rem;
 }
 
@@ -117,18 +106,35 @@ function handleAction(action: ToolboxAction) {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  padding: 0.1875rem 0.5rem;
-  font-size: 0.625rem;
-  font-weight: 600;
+  padding: 0.5rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
   color: var(--mood-accent);
-  background: var(--mood-accent-soft);
-  border: none;
-  border-radius: 3px;
+  background: var(--mood-surface);
+  border-radius: 20px;
   cursor: pointer;
-  transition: opacity 0.12s ease;
-  letter-spacing: 0.01em;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+  min-height: 2.25rem;
 }
+
+@media (min-width: 640px) {
+  .vignette__btn {
+    padding: 0.375rem 0.75rem;
+    min-height: auto;
+  }
+}
+
 .vignette__btn:hover {
-  opacity: 0.8;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px var(--mood-shadow);
+}
+
+.vignette__btn:active {
+  transform: translateY(0);
+}
+
+.vignette__btn--primary {
+  color: var(--mood-accent-text);
+  background: var(--mood-accent);
 }
 </style>
diff --git a/frontend/app/composables/useMood.ts b/frontend/app/composables/useMood.ts
index 86904dc..1528c95 100644
--- a/frontend/app/composables/useMood.ts
+++ b/frontend/app/composables/useMood.ts
@@ -13,8 +13,8 @@ const STORAGE_KEY = 'glibredecision_mood'
 
 const moods: Mood[] = [
   { id: 'peps', label: 'Peps', description: 'Chaud et tonique', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
-  { id: 'zen', label: 'Zen', description: 'Frais et vegetal', icon: 'i-lucide-leaf', color: '#2e8250', isDark: false },
-  { id: 'chagrine', label: 'Chagrine', description: 'Electrique et profond', icon: 'i-lucide-moon', color: '#9470d8', isDark: true },
+  { id: 'zen', label: 'Zen', description: 'Foret profonde', icon: 'i-lucide-leaf', color: '#1a6838', isDark: false },
+  { id: 'chagrine', label: 'Chagrine', description: 'Bleu electrique', icon: 'i-lucide-moon', color: '#4088d8', isDark: true },
   { id: 'grave', label: 'Grave', description: 'Mineral et lumineux', icon: 'i-lucide-shield', color: '#d09828', isDark: true },
 ]
 
diff --git a/frontend/app/pages/decisions/index.vue b/frontend/app/pages/decisions/index.vue
index 38298b6..f5b64d8 100644
--- a/frontend/app/pages/decisions/index.vue
+++ b/frontend/app/pages/decisions/index.vue
@@ -200,8 +200,7 @@ function formatDate(dateStr: string): string {
           v-for="protocol in protocols.protocols"
           :key="protocol.id"
           :title="protocol.name"
-          :description="protocol.description || undefined"
-          context-label="Decisions"
+          :bullets="['Applicable aux decisions', protocol.mode_params || 'Configuration standard']"
           :actions="[
             { label: 'Voir', icon: 'i-lucide-eye', to: `/protocols/${protocol.id}` },
           ]"
@@ -219,17 +218,27 @@ function formatDate(dateStr: string): string {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding: 0.875rem 1rem;
+  padding: 1rem;
   background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 0.5rem;
+  border-radius: 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+@media (min-width: 640px) {
+  .decision-card {
+    gap: 0.625rem;
+    padding: 1.25rem;
+  }
 }
 
 .decision-card:hover {
-  border-color: var(--mood-accent);
-  box-shadow: 0 2px 8px var(--mood-shadow);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px var(--mood-shadow);
+}
+
+.decision-card:active {
+  transform: translateY(0);
 }
 
 .decision-card__header {
@@ -245,47 +254,71 @@ function formatDate(dateStr: string): string {
 }
 
 .decision-card__title {
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: 0.9375rem;
+  font-weight: 700;
   color: var(--mood-text);
   line-height: 1.3;
 }
 
+@media (min-width: 640px) {
+  .decision-card__title {
+    font-size: 1.0625rem;
+  }
+}
+
 .decision-card__description {
   margin-top: 0.25rem;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
-  line-height: 1.4;
+  line-height: 1.5;
   display: -webkit-box;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
+@media (min-width: 640px) {
+  .decision-card__description {
+    font-size: 0.875rem;
+  }
+}
+
 .decision-card__meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
+}
+
+@media (min-width: 640px) {
+  .decision-card__meta {
+    gap: 0.5rem;
+  }
 }
 
 .decision-card__steps {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
 }
 
 .decision-card__date {
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   color: var(--mood-text-muted);
   margin-left: auto;
 }
 
+@media (min-width: 640px) {
+  .decision-card__date {
+    font-size: 0.8125rem;
+  }
+}
+
 .toolbox-section-title {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: 0.8125rem;
+  font-weight: 700;
   color: var(--mood-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -293,7 +326,7 @@ function formatDate(dateStr: string): string {
 }
 
 .toolbox-empty-text {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
 }
 </style>
diff --git a/frontend/app/pages/documents/index.vue b/frontend/app/pages/documents/index.vue
index 7858f4d..e328c5e 100644
--- a/frontend/app/pages/documents/index.vue
+++ b/frontend/app/pages/documents/index.vue
@@ -258,8 +258,7 @@ async function createDocument() {
           v-for="protocol in protocols.protocols"
           :key="protocol.id"
           :title="protocol.name"
-          :description="protocol.description || undefined"
-          context-label="Documents"
+          :bullets="['Applicable aux documents', protocol.mode_params || 'Configuration standard']"
           :actions="[
             { label: 'Voir', icon: 'i-lucide-eye', to: `/protocols/${protocol.id}` },
           ]"
@@ -274,8 +273,8 @@ async function createDocument() {
   <!-- New document modal -->
   <UModal v-model:open="showNewDocModal">
     <template #content>
-      <div class="p-6 space-y-4">
-        <h3 class="text-lg font-semibold" style="color: var(--mood-text);">
+      <div class="p-4 sm:p-6 space-y-4">
+        <h3 class="text-base sm:text-lg font-semibold" style="color: var(--mood-text);">
           Nouveau document de reference
         </h3>
 
@@ -363,17 +362,27 @@ async function createDocument() {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding: 0.875rem 1rem;
+  padding: 1rem;
   background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 0.5rem;
+  border-radius: 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+@media (min-width: 640px) {
+  .doc-card {
+    gap: 0.625rem;
+    padding: 1.25rem;
+  }
 }
 
 .doc-card:hover {
-  border-color: var(--mood-accent);
-  box-shadow: 0 2px 8px var(--mood-shadow);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px var(--mood-shadow);
+}
+
+.doc-card:active {
+  transform: translateY(0);
 }
 
 .doc-card__header {
@@ -384,21 +393,33 @@ async function createDocument() {
 }
 
 .doc-card__title {
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: 0.9375rem;
+  font-weight: 700;
   color: var(--mood-text);
   line-height: 1.3;
 }
 
+@media (min-width: 640px) {
+  .doc-card__title {
+    font-size: 1.0625rem;
+  }
+}
+
 .doc-card__meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
+}
+
+@media (min-width: 640px) {
+  .doc-card__meta {
+    gap: 0.5rem;
+  }
 }
 
 .doc-card__version {
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   font-family: ui-monospace, SFMono-Regular, monospace;
   color: var(--mood-text-muted);
 }
@@ -407,29 +428,41 @@ async function createDocument() {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
 }
 
 .doc-card__date {
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   color: var(--mood-text-muted);
   margin-left: auto;
 }
 
+@media (min-width: 640px) {
+  .doc-card__date {
+    font-size: 0.8125rem;
+  }
+}
+
 .doc-card__description {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
-  line-height: 1.4;
+  line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
+@media (min-width: 640px) {
+  .doc-card__description {
+    font-size: 0.875rem;
+  }
+}
+
 .toolbox-section-title {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: 0.8125rem;
+  font-weight: 700;
   color: var(--mood-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -437,7 +470,7 @@ async function createDocument() {
 }
 
 .toolbox-empty-text {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
 }
 </style>
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index 8cdd1d2..046135f 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-/**
- * Dashboard / Page d'accueil — Glibredecision.
- *
- * Accueil sobre et lisible : cartes d'entree, banniere connexion,
- * apercu boite a outils et activite recente.
- */
 const documents = useDocumentsStore()
 const decisions = useDecisionsStore()
 const protocols = useProtocolsStore()
@@ -26,7 +20,6 @@ onMounted(async () => {
   }
 })
 
-/** Entry cards — the 4 main doors. */
 const entryCards = computed(() => [
   {
     key: 'documents',
@@ -69,12 +62,11 @@ const entryCards = computed(() => [
     count: null,
     countLabel: null,
     totalLabel: null,
-    description: 'Un contexte, un objectif, une duree, une ou plusieurs nominations ; par defaut : nomination d\'un binome.',
+    description: 'Missions deleguees avec nomination en binome',
     color: 'var(--mood-success)',
   },
 ])
 
-/** Last 5 decisions sorted by most recent. */
 const recentDecisions = computed(() => {
   return [...decisions.list]
     .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
@@ -105,7 +97,9 @@ function formatDate(dateStr: string): string {
   <div class="dash">
     <!-- Welcome -->
     <div class="dash__welcome">
-      <h1 class="dash__title"><span class="dash__title-g">ğ</span><span class="dash__title-paren">(</span>Decision<span class="dash__title-paren">)</span></h1>
+      <h1 class="dash__title">
+        <span class="dash__title-g">ğ</span><span class="dash__title-paren">(</span>Decision<span class="dash__title-paren">)</span>
+      </h1>
       <p class="dash__subtitle">
         Decisions collectives pour la communaute Duniter / G1
       </p>
@@ -125,7 +119,7 @@ function formatDate(dateStr: string): string {
           :style="{ '--card-color': card.color }"
         >
           <div class="entry-card__icon">
-            <UIcon :name="card.icon" class="text-xl" />
+            <UIcon :name="card.icon" class="text-2xl" />
           </div>
           <h2 class="entry-card__title">{{ card.title }}</h2>
           <template v-if="card.count !== null">
@@ -136,7 +130,7 @@ function formatDate(dateStr: string): string {
             <span class="entry-card__desc">{{ card.description }}</span>
           </template>
           <span class="entry-card__arrow">
-            <UIcon name="i-lucide-arrow-right" class="text-sm" />
+            <UIcon name="i-lucide-arrow-right" />
           </span>
         </NuxtLink>
       </template>
@@ -145,28 +139,25 @@ function formatDate(dateStr: string): string {
     <!-- Connect banner -->
     <div v-if="!auth.isAuthenticated" class="dash__connect">
       <div class="dash__connect-left">
-        <UIcon name="i-lucide-key-round" class="text-base" />
+        <UIcon name="i-lucide-key-round" class="text-lg" />
         <div>
           <p class="dash__connect-text">Connectez-vous avec votre identite Duniter pour participer.</p>
           <p class="dash__connect-hint">Signature Ed25519 · aucun mot de passe</p>
         </div>
       </div>
       <NuxtLink to="/login" class="dash__connect-btn">
-        <UIcon name="i-lucide-log-in" class="text-sm" />
+        <UIcon name="i-lucide-log-in" />
         <span>Connexion</span>
       </NuxtLink>
     </div>
 
-    <!-- Boite a outils teaser -->
+    <!-- Toolbox teaser -->
     <div class="dash__toolbox">
       <div class="dash__toolbox-head">
-        <UIcon name="i-lucide-wrench" class="text-base" />
+        <UIcon name="i-lucide-wrench" class="text-lg" />
         <h3>Boite a outils</h3>
         <span class="dash__toolbox-count">{{ protocols.protocols.length }}</span>
       </div>
-      <p class="dash__toolbox-desc">
-        Protocoles de vote avec formule de seuil WoT adaptative.
-      </p>
       <div class="dash__toolbox-tags">
         <template v-if="protocols.protocols.length > 0">
           <NuxtLink
@@ -179,21 +170,21 @@ function formatDate(dateStr: string): string {
           </NuxtLink>
         </template>
         <template v-else>
-          <span class="dash__tag">Vote majoritaire</span>
+          <span class="dash__tag">Vote WoT</span>
           <span class="dash__tag">Vote nuance</span>
           <span class="dash__tag">Vote permanent</span>
         </template>
       </div>
       <NuxtLink to="/protocols" class="dash__toolbox-link">
         Voir la boite a outils
-        <UIcon name="i-lucide-chevron-right" class="text-xs" />
+        <UIcon name="i-lucide-chevron-right" />
       </NuxtLink>
     </div>
 
     <!-- Recent activity -->
     <div v-if="recentDecisions.length > 0" class="dash__activity">
       <div class="dash__activity-head">
-        <UIcon name="i-lucide-activity" class="text-base" />
+        <UIcon name="i-lucide-activity" class="text-lg" />
         <h3>Activite recente</h3>
       </div>
       <div class="dash__activity-list">
@@ -216,13 +207,10 @@ function formatDate(dateStr: string): string {
     <UCollapsible v-model:open="formulaOpen">
       <button class="dash__formula-trigger" @click="formulaOpen = !formulaOpen">
         <div class="dash__formula-trigger-left">
-          <UIcon name="i-lucide-calculator" class="text-sm" />
+          <UIcon name="i-lucide-calculator" />
           <span>Formule de seuil WoT</span>
         </div>
-        <UIcon
-          :name="formulaOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-          class="text-xs"
-        />
+        <UIcon :name="formulaOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'" />
       </button>
       <template #content>
         <div class="dash__formula-body">
@@ -242,7 +230,7 @@ function formatDate(dateStr: string): string {
           </div>
           <NuxtLink to="/protocols/formulas" class="dash__formula-link">
             Ouvrir le simulateur
-            <UIcon name="i-lucide-chevron-right" class="text-xs" />
+            <UIcon name="i-lucide-chevron-right" />
           </NuxtLink>
         </div>
       </template>
@@ -254,8 +242,8 @@ function formatDate(dateStr: string): string {
 .dash {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  max-width: 52rem;
+  gap: 2rem;
+  max-width: 56rem;
 }
 
 /* --- Welcome --- */
@@ -263,10 +251,16 @@ function formatDate(dateStr: string): string {
   padding: 0.5rem 0;
 }
 .dash__title {
-  font-size: 1.625rem;
+  font-size: 1.75rem;
   font-weight: 800;
   color: var(--mood-accent);
-  letter-spacing: -0.02em;
+  letter-spacing: -0.03em;
+}
+
+@media (min-width: 640px) {
+  .dash__title {
+    font-size: 2.25rem;
+  }
 }
 .dash__title-g {
   font-style: italic;
@@ -274,201 +268,260 @@ function formatDate(dateStr: string): string {
 .dash__title-paren {
   font-weight: 300;
   color: var(--mood-text-muted);
+  opacity: 0.4;
 }
 .dash__subtitle {
-  margin-top: 0.25rem;
-  font-size: 0.875rem;
+  margin-top: 0.375rem;
+  font-size: 0.9375rem;
   color: var(--mood-text-muted);
+  font-weight: 500;
+}
+
+@media (min-width: 640px) {
+  .dash__subtitle {
+    font-size: 1.0625rem;
+  }
 }
 
 /* --- Entry cards --- */
 .dash__entries {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  grid-template-columns: 1fr 1fr;
   gap: 0.75rem;
 }
 
+@media (min-width: 640px) {
+  .dash__entries {
+    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+    gap: 1rem;
+  }
+}
+
 .entry-card {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 0.375rem;
-  padding: 1.25rem 1rem;
+  padding: 1rem;
   background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 6px;
+  border-radius: 16px;
   text-decoration: none;
   cursor: pointer;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
+
+@media (min-width: 640px) {
+  .entry-card {
+    gap: 0.5rem;
+    padding: 1.5rem 1.25rem;
+  }
+}
+
 .entry-card:hover {
-  border-color: var(--card-color, var(--mood-accent));
-  box-shadow: 0 2px 8px var(--mood-shadow);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px var(--mood-shadow);
+}
+
+.entry-card:active {
+  transform: translateY(0);
 }
 
 .entry-card__icon {
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 2.75rem;
+  height: 2.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--card-color, var(--mood-accent)) 10%, transparent);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--card-color, var(--mood-accent)) 12%, transparent);
   color: var(--card-color, var(--mood-accent));
   margin-bottom: 0.25rem;
 }
 
 .entry-card__title {
-  font-size: 1rem;
-  font-weight: 700;
+  font-size: 1.25rem;
+  font-weight: 800;
   color: var(--mood-text);
   margin: 0;
 }
 
 .entry-card__count {
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   font-weight: 800;
   color: var(--card-color, var(--mood-accent));
   line-height: 1;
 }
 
 .entry-card__total {
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
 }
 
 .entry-card__desc {
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   color: var(--mood-text-muted);
   line-height: 1.4;
 }
 
 .entry-card__arrow {
   position: absolute;
-  top: 1rem;
-  right: 1rem;
+  top: 1.25rem;
+  right: 1.25rem;
   color: var(--mood-text-muted);
-  opacity: 0.4;
-  transition: opacity 0.15s;
+  opacity: 0.3;
+  transition: all 0.15s;
 }
 .entry-card:hover .entry-card__arrow {
   opacity: 1;
   color: var(--card-color, var(--mood-accent));
+  transform: translateX(3px);
 }
 
 /* --- Connect banner --- */
 .dash__connect {
   display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
   gap: 0.75rem;
-  padding: 0.875rem 1rem;
+  padding: 1rem;
   background: var(--mood-accent-soft);
-  border: 1px solid var(--mood-border);
-  border-radius: 6px;
+  border-radius: 16px;
+}
+
+@media (min-width: 640px) {
+  .dash__connect {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+  }
 }
 
 .dash__connect-left {
   display: flex;
   align-items: flex-start;
-  gap: 0.625rem;
+  gap: 0.75rem;
   color: var(--mood-accent);
 }
 
 .dash__connect-text {
-  font-size: 0.8125rem;
-  font-weight: 500;
+  font-size: 0.875rem;
+  font-weight: 600;
   color: var(--mood-text);
 }
 
+@media (min-width: 640px) {
+  .dash__connect-text {
+    font-size: 0.9375rem;
+  }
+}
+
 .dash__connect-hint {
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   color: var(--mood-text-muted);
 }
 
+@media (min-width: 640px) {
+  .dash__connect-hint {
+    font-size: 0.8125rem;
+  }
+}
+
 .dash__connect-btn {
   display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.875rem;
-  font-size: 0.75rem;
-  font-weight: 600;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 700;
   color: var(--mood-accent-text);
   background: var(--mood-accent);
-  border-radius: 4px;
+  border-radius: 24px;
   text-decoration: none;
-  transition: opacity 0.15s ease;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  min-height: 2.75rem;
 }
+
+@media (min-width: 640px) {
+  .dash__connect-btn {
+    font-size: 0.9375rem;
+    padding: 0.5rem 1.25rem;
+  }
+}
+
 .dash__connect-btn:hover {
-  opacity: 0.88;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px var(--mood-shadow);
+}
+
+.dash__connect-btn:active {
+  transform: translateY(0);
 }
 
 /* --- Toolbox teaser --- */
 .dash__toolbox {
   background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 6px;
+  border-radius: 16px;
   padding: 1rem;
 }
 
+@media (min-width: 640px) {
+  .dash__toolbox {
+    padding: 1.25rem;
+  }
+}
+
 .dash__toolbox-head {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: 0.5rem;
   color: var(--mood-accent);
-  font-weight: 700;
-  font-size: 0.875rem;
+  font-weight: 800;
+  font-size: 1.0625rem;
 }
 .dash__toolbox-head h3 { margin: 0; }
 
 .dash__toolbox-count {
-  font-size: 0.625rem;
-  font-weight: 700;
+  font-size: 0.75rem;
+  font-weight: 800;
   background: var(--mood-accent-soft);
   color: var(--mood-accent);
-  padding: 1px 5px;
-  border-radius: 3px;
-  margin-left: 0.25rem;
-}
-
-.dash__toolbox-desc {
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-  color: var(--mood-text-muted);
+  padding: 2px 8px;
+  border-radius: 20px;
 }
 
 .dash__toolbox-tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.375rem;
-  margin-top: 0.5rem;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
 }
 
 .dash__tag {
   display: inline-flex;
   align-items: center;
-  padding: 0.25rem 0.625rem;
-  font-size: 0.6875rem;
-  font-weight: 500;
+  padding: 0.375rem 0.875rem;
+  font-size: 0.8125rem;
+  font-weight: 600;
   color: var(--mood-accent);
   background: var(--mood-accent-soft);
-  border: 1px solid var(--mood-border);
-  border-radius: 4px;
+  border-radius: 20px;
   text-decoration: none;
-  transition: border-color 0.15s ease;
+  transition: transform 0.1s ease;
 }
 .dash__tag:hover {
-  border-color: var(--mood-accent);
+  transform: translateY(-1px);
 }
 
 .dash__toolbox-link {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  margin-top: 0.5rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
+  gap: 0.375rem;
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 700;
   color: var(--mood-accent);
   text-decoration: none;
 }
@@ -479,19 +532,24 @@ function formatDate(dateStr: string): string {
 /* --- Activity --- */
 .dash__activity {
   background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 6px;
+  border-radius: 16px;
   padding: 1rem;
 }
 
+@media (min-width: 640px) {
+  .dash__activity {
+    padding: 1.25rem;
+  }
+}
+
 .dash__activity-head {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: 0.5rem;
   color: var(--mood-text);
-  font-weight: 700;
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
+  font-weight: 800;
+  font-size: 1.0625rem;
+  margin-bottom: 0.75rem;
 }
 .dash__activity-head h3 { margin: 0; }
 
@@ -504,19 +562,14 @@ function formatDate(dateStr: string): string {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.5rem 0;
-  border-bottom: 1px solid var(--mood-border);
+  gap: 0.75rem;
+  padding: 0.625rem 0.5rem;
   text-decoration: none;
   transition: background 0.1s;
+  border-radius: 12px;
 }
-.dash__activity-item:last-child { border-bottom: none; }
 .dash__activity-item:hover {
   background: var(--mood-surface-hover);
-  margin: 0 -0.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  border-radius: 4px;
 }
 
 .dash__activity-main {
@@ -527,16 +580,22 @@ function formatDate(dateStr: string): string {
 }
 
 .dash__activity-title {
-  font-size: 0.8125rem;
-  font-weight: 500;
+  font-size: 0.875rem;
+  font-weight: 600;
   color: var(--mood-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+@media (min-width: 640px) {
+  .dash__activity-title {
+    font-size: 0.9375rem;
+  }
+}
+
 .dash__activity-date {
-  font-size: 0.625rem;
+  font-size: 0.75rem;
   color: var(--mood-text-muted);
 }
 
@@ -546,69 +605,82 @@ function formatDate(dateStr: string): string {
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0.75rem 1rem;
+  padding: 1rem 1.25rem;
   background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 6px;
+  border-radius: 16px;
   color: var(--mood-text-muted);
-  font-size: 0.8125rem;
-  font-weight: 500;
+  font-size: 0.9375rem;
+  font-weight: 600;
   cursor: pointer;
-  transition: border-color 0.15s;
+  transition: box-shadow 0.15s;
 }
 .dash__formula-trigger:hover {
-  border-color: var(--mood-accent);
+  box-shadow: 0 4px 12px var(--mood-shadow);
 }
 
 .dash__formula-trigger-left {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-}
-
-.dash__formula-body {
-  padding: 0 1rem 1rem;
-  background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-top: none;
-  border-radius: 0 0 6px 6px;
-  display: flex;
-  flex-direction: column;
   gap: 0.625rem;
 }
 
+.dash__formula-body {
+  padding: 0 1.25rem 1.25rem;
+  background: var(--mood-surface);
+  border-radius: 0 0 16px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
 .dash__formula-desc {
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   color: var(--mood-text-muted);
   line-height: 1.5;
 }
 
 .dash__formula-code {
   display: block;
-  padding: 0.625rem;
+  padding: 0.625rem 0.75rem;
   background: var(--mood-accent-soft);
-  border-radius: 4px;
+  border-radius: 12px;
   font-size: 0.75rem;
   font-family: ui-monospace, SFMono-Regular, monospace;
   color: var(--mood-text);
   overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  white-space: nowrap;
+}
+
+@media (min-width: 640px) {
+  .dash__formula-code {
+    padding: 0.75rem 1rem;
+    font-size: 0.875rem;
+  }
 }
 
 .dash__formula-params {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.625rem;
-  font-size: 0.625rem;
+  gap: 0.5rem;
+  font-size: 0.75rem;
   color: var(--mood-text-muted);
   font-family: ui-monospace, SFMono-Regular, monospace;
 }
 
+@media (min-width: 640px) {
+  .dash__formula-params {
+    gap: 0.75rem;
+    font-size: 0.8125rem;
+  }
+}
+
 .dash__formula-link {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
+  gap: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 700;
   color: var(--mood-accent);
   text-decoration: none;
 }
diff --git a/frontend/app/pages/login.vue b/frontend/app/pages/login.vue
index b21c231..050806f 100644
--- a/frontend/app/pages/login.vue
+++ b/frontend/app/pages/login.vue
@@ -29,10 +29,10 @@ async function handleLogin() {
 }
 
 const steps = computed(() => [
-  { label: 'Adresse SS58', icon: 'i-lucide-user', done: step.value !== 'input' },
-  { label: 'Challenge', icon: 'i-lucide-shield', done: step.value === 'signing' || step.value === 'success' },
-  { label: 'Signature', icon: 'i-lucide-key', done: step.value === 'success' },
-  { label: 'Connecte', icon: 'i-lucide-check', done: false },
+  { label: 'Adresse', done: step.value !== 'input' },
+  { label: 'Challenge', done: step.value === 'signing' || step.value === 'success' },
+  { label: 'Signature', done: step.value === 'success' },
+  { label: 'OK', done: false },
 ])
 
 const activeStepIndex = computed(() => {
@@ -58,10 +58,13 @@ onMounted(() => {
       <!-- Logo -->
       <div class="login-card__header">
         <div class="login-card__logo">
-          <UIcon name="i-lucide-gavel" class="text-xl" />
+          <UIcon name="i-lucide-gavel" class="login-card__logo-icon" />
         </div>
         <h1 class="login-card__title">Connexion</h1>
-        <p class="login-card__subtitle">ğ(Decision) · Duniter V2 · Ed25519</p>
+        <p class="login-card__subtitle">
+          <span class="login-card__g">ğ</span><span class="login-card__paren">(</span>Decision<span class="login-card__paren">)</span>
+          · Duniter V2 · Ed25519
+        </p>
       </div>
 
       <!-- Steps indicator -->
@@ -76,7 +79,7 @@ onMounted(() => {
           }"
         >
           <div class="login-step__dot">
-            <UIcon v-if="s.done" name="i-lucide-check" class="text-xs" />
+            <UIcon v-if="s.done" name="i-lucide-check" />
             <span v-else class="login-step__num">{{ i + 1 }}</span>
           </div>
           <span class="login-step__label">{{ s.label }}</span>
@@ -98,13 +101,13 @@ onMounted(() => {
 
       <!-- Error -->
       <div v-if="errorMessage || auth.error" class="login-card__error">
-        <UIcon name="i-lucide-alert-circle" class="text-sm flex-shrink-0" />
+        <UIcon name="i-lucide-alert-circle" />
         <span>{{ errorMessage || auth.error }}</span>
       </div>
 
       <!-- Success -->
       <div v-if="step === 'success'" class="login-card__success">
-        <UIcon name="i-lucide-check-circle" class="text-sm flex-shrink-0" />
+        <UIcon name="i-lucide-check-circle" />
         <span>Connecte. Redirection...</span>
       </div>
 
@@ -114,8 +117,8 @@ onMounted(() => {
         :disabled="!address.trim() || step === 'success' || auth.loading"
         @click="handleLogin"
       >
-        <UIcon v-if="auth.loading" name="i-lucide-loader-2" class="animate-spin text-sm" />
-        <UIcon v-else name="i-lucide-log-in" class="text-sm" />
+        <UIcon v-if="auth.loading" name="i-lucide-loader-2" class="animate-spin" />
+        <UIcon v-else name="i-lucide-log-in" />
         <span>{{ auth.loading ? 'Verification...' : 'Se connecter' }}</span>
       </button>
 
@@ -132,18 +135,31 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: 70vh;
-  padding: 2rem 1rem;
+  min-height: 60vh;
+  padding: 1.5rem 1rem;
+}
+
+@media (min-width: 640px) {
+  .login-page {
+    min-height: 70vh;
+    padding: 2rem 1rem;
+  }
 }
 
 .login-card {
   width: 100%;
-  max-width: 24rem;
+  max-width: 26rem;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
 }
 
+@media (min-width: 640px) {
+  .login-card {
+    gap: 1.5rem;
+  }
+}
+
 .login-card__header {
   text-align: center;
 }
@@ -152,28 +168,49 @@ onMounted(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 3rem;
-  height: 3rem;
-  font-size: 1.5rem;
-  font-weight: 800;
+  width: 3.5rem;
+  height: 3.5rem;
+  font-size: 1.75rem;
   color: var(--mood-accent-text);
   background: var(--mood-accent);
-  border-radius: 8px;
-  margin-bottom: 0.75rem;
+  border-radius: 16px;
+  margin-bottom: 1rem;
+}
+.login-card__logo-icon {
+  transform: scaleX(-1);
 }
 
 .login-card__title {
-  font-size: 1.375rem;
-  font-weight: 700;
+  font-size: 1.5rem;
+  font-weight: 800;
   color: var(--mood-text);
   margin: 0;
 }
 
+@media (min-width: 640px) {
+  .login-card__title {
+    font-size: 1.75rem;
+  }
+}
+
 .login-card__subtitle {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
-  margin-top: 0.25rem;
-  letter-spacing: 0.02em;
+  margin-top: 0.375rem;
+}
+
+@media (min-width: 640px) {
+  .login-card__subtitle {
+    font-size: 0.9375rem;
+  }
+}
+.login-card__g {
+  font-style: italic;
+  font-weight: 700;
+}
+.login-card__paren {
+  font-weight: 300;
+  opacity: 0.5;
 }
 
 /* Steps */
@@ -189,85 +226,85 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.375rem;
   flex: 1;
 }
 
 .login-step__dot {
-  width: 1.5rem;
-  height: 1.5rem;
+  width: 2rem;
+  height: 2rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.625rem;
-  font-weight: 700;
-  border: 1.5px solid var(--mood-border);
+  font-size: 0.8125rem;
+  font-weight: 800;
   color: var(--mood-text-muted);
-  background: var(--mood-surface);
+  background: var(--mood-accent-soft);
   transition: all 0.2s ease;
 }
 
 .login-step--active .login-step__dot {
-  border-color: var(--mood-accent);
   color: var(--mood-accent);
   box-shadow: 0 0 0 3px var(--mood-accent-soft);
 }
 
 .login-step--done .login-step__dot {
-  border-color: var(--mood-success);
   background: var(--mood-success);
   color: white;
 }
 
 .login-step__num {
-  font-size: 0.5625rem;
+  font-size: 0.75rem;
 }
 
 .login-step__label {
-  font-size: 0.5625rem;
-  font-weight: 500;
+  font-size: 0.75rem;
+  font-weight: 600;
   color: var(--mood-text-muted);
   text-align: center;
-  letter-spacing: 0.02em;
 }
 
 .login-step--active .login-step__label {
   color: var(--mood-accent);
-  font-weight: 600;
+  font-weight: 700;
 }
 
 /* Field */
 .login-card__field {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.5rem;
 }
 
 .login-card__label {
-  font-size: 0.6875rem;
-  font-weight: 600;
+  font-size: 0.875rem;
+  font-weight: 700;
   color: var(--mood-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
 .login-card__input {
   width: 100%;
-  padding: 0.625rem 0.75rem;
-  font-size: 0.8125rem;
+  padding: 0.875rem 1rem;
+  font-size: 0.875rem;
   font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', monospace;
   color: var(--mood-text);
-  background: var(--mood-input-bg, var(--mood-surface));
-  border: 1px solid var(--mood-input-border, var(--mood-border));
-  border-radius: 4px;
-  outline: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  background: var(--mood-accent-soft);
+  border-radius: 12px;
+  transition: box-shadow 0.15s ease;
+  /* Prevent iOS zoom on focus */
+  -webkit-text-size-adjust: 100%;
+}
+
+@media (min-width: 640px) {
+  .login-card__input {
+    padding: 0.75rem 1rem;
+    font-size: 0.9375rem;
+  }
 }
 
 .login-card__input:focus {
-  border-color: var(--mood-input-focus, var(--mood-accent));
-  box-shadow: 0 0 0 2px var(--mood-accent-soft);
+  box-shadow: 0 0 0 3px var(--mood-accent-soft);
 }
 
 .login-card__input:disabled {
@@ -277,7 +314,7 @@ onMounted(() => {
 
 .login-card__input::placeholder {
   color: var(--mood-text-muted);
-  opacity: 0.5;
+  opacity: 0.4;
 }
 
 /* Messages */
@@ -285,24 +322,24 @@ onMounted(() => {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 500;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
   color: var(--mood-error);
   background: rgba(196, 43, 43, 0.08);
-  border-radius: 4px;
+  border-radius: 12px;
 }
 
 .login-card__success {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 500;
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
   color: var(--mood-success);
   background: rgba(24, 132, 59, 0.08);
-  border-radius: 4px;
+  border-radius: 12px;
 }
 
 /* Button */
@@ -310,22 +347,33 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 0.625rem;
   width: 100%;
-  padding: 0.625rem 1rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
+  padding: 1rem 1.25rem;
+  font-size: 1rem;
+  font-weight: 700;
   color: var(--mood-accent-text);
   background: var(--mood-accent);
-  border: none;
-  border-radius: 4px;
+  border-radius: 16px;
   cursor: pointer;
-  transition: opacity 0.15s ease;
-  letter-spacing: 0.01em;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  min-height: 3rem;
+}
+
+@media (min-width: 640px) {
+  .login-card__btn {
+    padding: 0.875rem 1.25rem;
+    font-size: 1.0625rem;
+  }
 }
 
 .login-card__btn:hover:not(:disabled) {
-  opacity: 0.88;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px var(--mood-shadow);
+}
+
+.login-card__btn:active:not(:disabled) {
+  transform: translateY(0);
 }
 
 .login-card__btn:disabled {
@@ -336,7 +384,7 @@ onMounted(() => {
 /* Note */
 .login-card__note {
   text-align: center;
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
   opacity: 0.7;
 }
diff --git a/frontend/app/pages/mandates/index.vue b/frontend/app/pages/mandates/index.vue
index b0a0ec8..fa933c8 100644
--- a/frontend/app/pages/mandates/index.vue
+++ b/frontend/app/pages/mandates/index.vue
@@ -279,8 +279,7 @@ async function handleCreate() {
           v-for="protocol in protocols.protocols"
           :key="protocol.id"
           :title="protocol.name"
-          :description="protocol.description || undefined"
-          context-label="Mandats"
+          :bullets="['Applicable aux mandats', protocol.mode_params || 'Configuration standard']"
           :actions="[
             { label: 'Voir', icon: 'i-lucide-eye', to: `/protocols/${protocol.id}` },
           ]"
@@ -295,8 +294,8 @@ async function handleCreate() {
   <!-- Create mandate modal -->
   <UModal v-model:open="showCreateModal">
     <template #content>
-      <form class="p-6 space-y-4" @submit.prevent="handleCreate">
-        <h3 class="text-lg font-semibold" style="color: var(--mood-text);">
+      <form class="p-4 sm:p-6 space-y-4" @submit.prevent="handleCreate">
+        <h3 class="text-base sm:text-lg font-semibold" style="color: var(--mood-text);">
           Nouveau mandat
         </h3>
 
@@ -358,17 +357,27 @@ async function handleCreate() {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding: 0.875rem 1rem;
+  padding: 1rem;
   background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 0.5rem;
+  border-radius: 16px;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+@media (min-width: 640px) {
+  .mandate-card {
+    gap: 0.625rem;
+    padding: 1.25rem;
+  }
 }
 
 .mandate-card:hover {
-  border-color: var(--mood-accent);
-  box-shadow: 0 2px 8px var(--mood-shadow);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px var(--mood-shadow);
+}
+
+.mandate-card:active {
+  transform: translateY(0);
 }
 
 .mandate-card__header {
@@ -384,35 +393,53 @@ async function handleCreate() {
 }
 
 .mandate-card__title {
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: 0.9375rem;
+  font-weight: 700;
   color: var(--mood-text);
   line-height: 1.3;
 }
 
+@media (min-width: 640px) {
+  .mandate-card__title {
+    font-size: 1.0625rem;
+  }
+}
+
 .mandate-card__description {
   margin-top: 0.25rem;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
-  line-height: 1.4;
+  line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
+@media (min-width: 640px) {
+  .mandate-card__description {
+    font-size: 0.875rem;
+  }
+}
+
 .mandate-card__meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
+}
+
+@media (min-width: 640px) {
+  .mandate-card__meta {
+    gap: 0.5rem;
+  }
 }
 
 .mandate-card__steps {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
 }
 
@@ -420,17 +447,25 @@ async function handleCreate() {
   display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  font-size: 0.6875rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
 }
 
 .mandate-card__dates {
   display: flex;
-  gap: 1rem;
-  font-size: 0.6875rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.75rem;
   color: var(--mood-text-muted);
 }
 
+@media (min-width: 640px) {
+  .mandate-card__dates {
+    gap: 1rem;
+    font-size: 0.8125rem;
+  }
+}
+
 /* Onboarding empty state */
 .mandate-onboarding {
   display: flex;
@@ -438,10 +473,16 @@ async function handleCreate() {
   align-items: center;
   text-align: center;
   gap: 0.75rem;
-  padding: 2.5rem 1.5rem;
+  padding: 2rem 1.25rem;
   background: var(--mood-surface);
-  border: 1px dashed var(--mood-border);
-  border-radius: 0.75rem;
+  border-radius: 20px;
+}
+
+@media (min-width: 640px) {
+  .mandate-onboarding {
+    gap: 1rem;
+    padding: 3rem 2rem;
+  }
 }
 
 .mandate-onboarding__icon {
@@ -453,31 +494,52 @@ async function handleCreate() {
   border-radius: 50%;
   background: var(--mood-accent-soft);
   color: var(--mood-accent);
+  font-size: 1.5rem;
+}
+
+@media (min-width: 640px) {
+  .mandate-onboarding__icon {
+    width: 4rem;
+    height: 4rem;
+    font-size: 1.75rem;
+  }
 }
 
 .mandate-onboarding__title {
   font-size: 1.125rem;
-  font-weight: 700;
+  font-weight: 800;
   color: var(--mood-text);
 }
 
+@media (min-width: 640px) {
+  .mandate-onboarding__title {
+    font-size: 1.375rem;
+  }
+}
+
 .mandate-onboarding__text {
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   color: var(--mood-text-muted);
-  line-height: 1.5;
+  line-height: 1.6;
   max-width: 32rem;
 }
 
+@media (min-width: 640px) {
+  .mandate-onboarding__text {
+    font-size: 0.9375rem;
+  }
+}
+
 .mandate-onboarding__actions {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.75rem;
   margin-top: 0.5rem;
 }
 
 .toolbox-section-title {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: 0.8125rem;
+  font-weight: 700;
   color: var(--mood-text-muted);
   text-transform: uppercase;
   letter-spacing: 0.04em;
@@ -485,7 +547,7 @@ async function handleCreate() {
 }
 
 .toolbox-empty-text {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: var(--mood-text-muted);
 }
 </style>
diff --git a/frontend/app/pages/protocols/index.vue b/frontend/app/pages/protocols/index.vue
index 05a0280..c349466 100644
--- a/frontend/app/pages/protocols/index.vue
+++ b/frontend/app/pages/protocols/index.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
 /**
- * Boite a outils — page principale des protocoles de vote.
+ * Protocoles & Fonctionnement — Boite a outils de vote.
  *
- * Liste les protocoles avec leurs details complets,
- * les configurations de formule, et le simulateur / explainer.
+ * Liste les protocoles de vote avec SectionLayout,
+ * sidebar n8n workflow + simulateur de formules.
  */
 const protocols = useProtocolsStore()
 const auth = useAuthStore()
 
+const activeStatus = ref<string | null>(null)
+const searchQuery = ref('')
 const showCreateModal = ref(false)
 const creating = ref(false)
-const formulaOpen = ref(false)
 
-/** Creation form state. */
 const newProtocol = reactive({
   name: '',
   description: '',
@@ -35,14 +35,6 @@ const voteTypeLabel = (voteType: string) => {
   }
 }
 
-const voteTypeColor = (voteType: string) => {
-  switch (voteType) {
-    case 'binary': return 'primary'
-    case 'nuanced': return 'info'
-    default: return 'neutral'
-  }
-}
-
 const voteTypeOptions = [
   { label: 'Binaire (Pour/Contre)', value: 'binary' },
   { label: 'Nuance (6 niveaux)', value: 'nuanced' },
@@ -55,13 +47,40 @@ const formulaOptions = computed(() => {
   }))
 })
 
-function formatDate(dateStr: string): string {
-  return new Date(dateStr).toLocaleDateString('fr-FR', {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  })
-}
+/** Status pills. */
+const statuses = computed(() => [
+  {
+    id: 'binary',
+    label: 'Binaire',
+    count: protocols.protocols.filter(p => p.vote_type === 'binary').length,
+    cssClass: 'status-vote',
+  },
+  {
+    id: 'nuanced',
+    label: 'Nuance',
+    count: protocols.protocols.filter(p => p.vote_type === 'nuanced').length,
+    cssClass: 'status-prepa',
+  },
+])
+
+/** Filtered protocols. */
+const filteredProtocols = computed(() => {
+  let list = [...protocols.protocols]
+
+  if (activeStatus.value) {
+    list = list.filter(p => p.vote_type === activeStatus.value)
+  }
+
+  if (searchQuery.value.trim()) {
+    const q = searchQuery.value.toLowerCase()
+    list = list.filter(p =>
+      p.name.toLowerCase().includes(q)
+      || (p.description && p.description.toLowerCase().includes(q)),
+    )
+  }
+
+  return list
+})
 
 function openCreateModal() {
   newProtocol.name = ''
@@ -89,151 +108,136 @@ async function createProtocol() {
     creating.value = false
   }
 }
+
+/** n8n workflow demo items. */
+const n8nWorkflows = [
+  {
+    name: 'Vote -> Notification',
+    description: 'Notifie les membres lorsqu\'un nouveau vote demarre ou se termine.',
+    icon: 'i-lucide-bell',
+    status: 'actif',
+  },
+  {
+    name: 'Seuil atteint -> Sanctuaire',
+    description: 'Archive automatiquement le document valide sur IPFS quand le seuil est atteint.',
+    icon: 'i-lucide-archive',
+    status: 'actif',
+  },
+  {
+    name: 'Decision -> Etape suivante',
+    description: 'Avance automatiquement une decision a l\'etape suivante apres validation.',
+    icon: 'i-lucide-git-branch',
+    status: 'demo',
+  },
+  {
+    name: 'Mandat expire -> Alerte',
+    description: 'Envoie une alerte 7 jours avant l\'expiration d\'un mandat.',
+    icon: 'i-lucide-alarm-clock',
+    status: 'demo',
+  },
+]
 </script>
 
 <template>
-  <div class="toolbox-page">
-    <!-- Header -->
-    <div class="toolbox-page__header">
-      <div>
-        <h1 class="toolbox-page__title">
-          <UIcon name="i-lucide-wrench" class="toolbox-page__title-icon" />
-          Boite a outils
-        </h1>
-        <p class="toolbox-page__subtitle">
-          Modalites de vote et formules configurables
-        </p>
-      </div>
-      <div class="toolbox-page__actions">
-        <NuxtLink to="/protocols/formulas">
-          <UButton variant="outline" icon="i-lucide-calculator" size="sm">
-            Simulateur de formules
-          </UButton>
-        </NuxtLink>
-        <UButton
-          v-if="auth.isAuthenticated"
-          icon="i-lucide-plus"
-          size="sm"
-          @click="openCreateModal"
-        >
-          Nouveau protocole
-        </UButton>
-      </div>
-    </div>
+  <SectionLayout
+    title="Protocoles & Fonctionnement"
+    subtitle="Boite a outils de vote, formules de seuil, workflows automatises"
+    :statuses="statuses"
+    :active-status="activeStatus"
+    @update:active-status="activeStatus = $event"
+  >
+    <!-- Search slot -->
+    <template #search>
+      <input
+        v-model="searchQuery"
+        type="text"
+        class="proto-search"
+        placeholder="Rechercher un protocole..."
+      />
+      <button
+        v-if="auth.isAuthenticated"
+        class="proto-add-btn"
+        @click="openCreateModal"
+      >
+        <UIcon name="i-lucide-plus" class="text-xs" />
+        <span>Nouveau</span>
+      </button>
+    </template>
 
-    <!-- Loading state -->
+    <!-- Loading -->
     <template v-if="protocols.loading">
-      <div class="space-y-3">
-        <LoadingSkeleton v-for="i in 4" :key="i" :lines="4" card />
+      <div class="proto-loading">
+        <LoadingSkeleton v-for="i in 3" :key="i" :lines="4" card />
       </div>
     </template>
 
-    <!-- Error state -->
+    <!-- Error -->
     <template v-else-if="protocols.error">
-      <div class="flex items-center gap-3 p-4 rounded-lg" style="background: var(--mood-surface); border: 1px solid var(--mood-border);">
-        <UIcon name="i-lucide-alert-circle" class="text-xl" style="color: var(--mood-error);" />
-        <p style="color: var(--mood-text);">{{ protocols.error }}</p>
+      <div class="proto-error">
+        <UIcon name="i-lucide-alert-circle" class="text-lg" />
+        <span>{{ protocols.error }}</span>
       </div>
     </template>
 
+    <!-- Protocol list -->
     <template v-else>
-      <!-- Protocols section -->
-      <div class="toolbox-section">
-        <h2 class="toolbox-section__title">
-          Protocoles de vote
-          <UBadge variant="subtle" size="xs">
-            {{ protocols.protocols.length }}
-          </UBadge>
-        </h2>
+      <div v-if="filteredProtocols.length === 0" class="proto-empty">
+        <UIcon name="i-lucide-settings" class="text-2xl" />
+        <p>Aucun protocole trouve</p>
+      </div>
 
-        <div v-if="protocols.protocols.length === 0" class="toolbox-empty">
-          <UIcon name="i-lucide-settings" class="text-3xl" />
-          <p>Aucun protocole de vote configure</p>
-        </div>
-
-        <div v-else class="toolbox-protocol-grid">
-          <NuxtLink
-            v-for="protocol in protocols.protocols"
-            :key="protocol.id"
-            :to="`/protocols/${protocol.id}`"
-            class="protocol-card"
-          >
-            <!-- Protocol header -->
-            <div class="protocol-card__header">
-              <h3 class="protocol-card__name">
-                {{ protocol.name }}
-              </h3>
-              <div class="protocol-card__badges">
-                <UBadge :color="(voteTypeColor(protocol.vote_type) as any)" variant="subtle" size="xs">
-                  {{ voteTypeLabel(protocol.vote_type) }}
-                </UBadge>
-                <UBadge v-if="protocol.is_meta_governed" color="warning" variant="subtle" size="xs">
-                  Meta-gouverne
-                </UBadge>
-              </div>
+      <div v-else class="proto-list">
+        <NuxtLink
+          v-for="protocol in filteredProtocols"
+          :key="protocol.id"
+          :to="`/protocols/${protocol.id}`"
+          class="proto-item"
+        >
+          <div class="proto-item__left">
+            <div class="proto-item__icon">
+              <UIcon
+                :name="protocol.vote_type === 'nuanced' ? 'i-lucide-bar-chart-3' : 'i-lucide-check-circle'"
+                class="text-lg"
+              />
             </div>
-
-            <p v-if="protocol.description" class="protocol-card__description">
+          </div>
+          <div class="proto-item__body">
+            <div class="proto-item__head">
+              <h3 class="proto-item__name">{{ protocol.name }}</h3>
+              <span class="proto-item__type" :class="protocol.vote_type === 'nuanced' ? 'proto-item__type--nuanced' : ''">
+                {{ voteTypeLabel(protocol.vote_type) }}
+              </span>
+            </div>
+            <p v-if="protocol.description" class="proto-item__desc">
               {{ protocol.description }}
             </p>
-
-            <!-- Mode params -->
-            <div v-if="protocol.mode_params" class="protocol-card__mode-params">
-              <ModeParamsDisplay :mode-params="protocol.mode_params" />
+            <div class="proto-item__meta">
+              <span v-if="protocol.mode_params" class="proto-item__params">
+                {{ protocol.mode_params }}
+              </span>
+              <span class="proto-item__formula">
+                {{ protocol.formula_config.name }}
+              </span>
+              <span class="proto-item__detail">
+                {{ protocol.formula_config.duration_days }}j · {{ protocol.formula_config.majority_pct }}%
+              </span>
             </div>
-
-            <!-- Formula config summary -->
-            <div class="protocol-card__formula">
-              <h4 class="protocol-card__formula-title">
-                Formule : {{ protocol.formula_config.name }}
-              </h4>
-              <div class="protocol-card__formula-grid">
-                <div>
-                  <span class="protocol-card__formula-label">Duree</span>
-                  <span class="protocol-card__formula-value">{{ protocol.formula_config.duration_days }}j</span>
-                </div>
-                <div>
-                  <span class="protocol-card__formula-label">Majorite</span>
-                  <span class="protocol-card__formula-value">{{ protocol.formula_config.majority_pct }}%</span>
-                </div>
-                <div>
-                  <span class="protocol-card__formula-label">Base</span>
-                  <span class="protocol-card__formula-value">{{ protocol.formula_config.base_exponent }}</span>
-                </div>
-                <div>
-                  <span class="protocol-card__formula-label">Gradient</span>
-                  <span class="protocol-card__formula-value">{{ protocol.formula_config.gradient_exponent }}</span>
-                </div>
-                <div v-if="protocol.formula_config.smith_exponent !== null">
-                  <span class="protocol-card__formula-label">Smith</span>
-                  <span class="protocol-card__formula-value">{{ protocol.formula_config.smith_exponent }}</span>
-                </div>
-                <div v-if="protocol.formula_config.techcomm_exponent !== null">
-                  <span class="protocol-card__formula-label">TechComm</span>
-                  <span class="protocol-card__formula-value">{{ protocol.formula_config.techcomm_exponent }}</span>
-                </div>
-              </div>
-            </div>
-          </NuxtLink>
-        </div>
+          </div>
+          <div class="proto-item__arrow">
+            <UIcon name="i-lucide-chevron-right" class="text-sm" />
+          </div>
+        </NuxtLink>
       </div>
 
-      <!-- Formula configurations section -->
-      <div class="toolbox-section">
-        <h2 class="toolbox-section__title">
+      <!-- Formulas table -->
+      <div class="proto-formulas">
+        <h3 class="proto-formulas__title">
+          <UIcon name="i-lucide-calculator" class="text-sm" />
           Configurations de formule
-          <UBadge variant="subtle" size="xs">
-            {{ protocols.formulas.length }}
-          </UBadge>
-        </h2>
-
-        <div v-if="protocols.formulas.length === 0" class="toolbox-empty">
-          <UIcon name="i-lucide-calculator" class="text-3xl" />
-          <p>Aucune configuration de formule</p>
-        </div>
-
-        <div v-else class="formula-table-wrapper">
-          <table class="formula-table">
+          <span class="proto-formulas__count">{{ protocols.formulas.length }}</span>
+        </h3>
+        <div class="proto-formulas__table-wrap">
+          <table class="proto-formulas__table">
             <thead>
               <tr>
                 <th>Nom</th>
@@ -241,380 +245,662 @@ async function createProtocol() {
                 <th>Majorite</th>
                 <th>B</th>
                 <th>G</th>
-                <th>C</th>
                 <th>Smith</th>
                 <th>TechComm</th>
-                <th>Date</th>
               </tr>
             </thead>
             <tbody>
               <tr v-for="formula in protocols.formulas" :key="formula.id">
-                <td class="formula-table__name">{{ formula.name }}</td>
+                <td class="proto-formulas__name">{{ formula.name }}</td>
                 <td>{{ formula.duration_days }}j</td>
                 <td>{{ formula.majority_pct }}%</td>
-                <td class="font-mono">{{ formula.base_exponent }}</td>
-                <td class="font-mono">{{ formula.gradient_exponent }}</td>
-                <td class="font-mono">{{ formula.constant_base }}</td>
-                <td class="font-mono">{{ formula.smith_exponent ?? '-' }}</td>
-                <td class="font-mono">{{ formula.techcomm_exponent ?? '-' }}</td>
-                <td class="formula-table__date">{{ formatDate(formula.created_at) }}</td>
+                <td>{{ formula.base_exponent }}</td>
+                <td>{{ formula.gradient_exponent }}</td>
+                <td>{{ formula.smith_exponent ?? '-' }}</td>
+                <td>{{ formula.techcomm_exponent ?? '-' }}</td>
               </tr>
             </tbody>
           </table>
         </div>
       </div>
-
-      <!-- Formula explainer — collapsible -->
-      <UCollapsible v-model:open="formulaOpen">
-        <UButton
-          variant="ghost"
-          size="sm"
-          :icon="formulaOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
-          class="formula-explainer-trigger"
-        >
-          <div class="flex items-center gap-2">
-            <UIcon name="i-lucide-book-open" />
-            <span>Reference : Formule de seuil WoT</span>
-          </div>
-        </UButton>
-        <template #content>
-          <div class="formula-explainer-content">
-            <code class="formula-explainer-code">
-              Seuil = C + B^W + (M + (1-M) * (1 - (T/W)^G)) * max(0, T-C)
-            </code>
-            <div class="formula-explainer-params">
-              <div><strong>C</strong> = constante de base (plancher fixe)</div>
-              <div><strong>B</strong> = exposant de base (B^W tend vers 0 si B &lt; 1)</div>
-              <div><strong>W</strong> = taille du corpus WoT</div>
-              <div><strong>T</strong> = nombre total de votes</div>
-              <div><strong>M</strong> = ratio de majorite (M = majorite_pct / 100)</div>
-              <div><strong>G</strong> = exposant du gradient d'inertie</div>
-            </div>
-            <USeparator />
-            <p class="formula-explainer-note">
-              L'inertie fonctionne ainsi : faible participation implique quasi-unanimite requise ;
-              forte participation permet une majorite simple suffisante.
-              Cela protege contre les votes precipites tout en permettant l'efficacite
-              lorsque la communaute est mobilisee.
-            </p>
-            <UButton
-              to="/protocols/formulas"
-              label="Ouvrir le simulateur"
-              variant="outline"
-              size="xs"
-              icon="i-lucide-calculator"
-            />
-          </div>
-        </template>
-      </UCollapsible>
     </template>
 
-    <!-- Create protocol modal -->
-    <UModal v-model:open="showCreateModal">
-      <template #content>
-        <div class="p-6 space-y-6">
-          <h3 class="text-lg font-semibold" style="color: var(--mood-text);">
-            Nouveau protocole de vote
-          </h3>
+    <!-- Toolbox sidebar -->
+    <template #toolbox>
+      <!-- Simulateur -->
+      <ToolboxVignette
+        title="Simulateur de formules"
+        :bullets="['Testez WoT, Smith, TechComm', 'Ajustez les parametres en temps reel', 'Visualisez les seuils']"
+        :actions="[
+          { label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
+          { label: 'Ouvrir', icon: 'i-lucide-calculator', to: '/protocols/formulas', primary: true },
+        ]"
+      />
 
-          <div class="space-y-4">
-            <div class="space-y-2">
-              <label class="text-sm font-medium" style="color: var(--mood-text-muted);">
-                Nom du protocole
-              </label>
-              <UInput v-model="newProtocol.name" placeholder="Ex: Vote standard G1" />
+      <!-- n8n Workflows -->
+      <div class="n8n-section">
+        <div class="n8n-section__head">
+          <UIcon name="i-lucide-workflow" class="text-xs" />
+          <span>Workflows n8n</span>
+        </div>
+        <p class="n8n-section__desc">
+          Automatisations reliees via MCP
+        </p>
+
+        <div class="n8n-workflows">
+          <div
+            v-for="wf in n8nWorkflows"
+            :key="wf.name"
+            class="n8n-wf"
+          >
+            <div class="n8n-wf__icon">
+              <UIcon :name="wf.icon" class="text-xs" />
             </div>
-
-            <div class="space-y-2">
-              <label class="text-sm font-medium" style="color: var(--mood-text-muted);">
-                Description (optionnel)
-              </label>
-              <UTextarea v-model="newProtocol.description" placeholder="Description du protocole..." :rows="2" />
+            <div class="n8n-wf__body">
+              <div class="n8n-wf__head">
+                <span class="n8n-wf__name">{{ wf.name }}</span>
+                <span
+                  class="n8n-wf__status"
+                  :class="wf.status === 'actif' ? 'n8n-wf__status--active' : 'n8n-wf__status--demo'"
+                >
+                  {{ wf.status }}
+                </span>
+              </div>
+              <p class="n8n-wf__desc">{{ wf.description }}</p>
             </div>
-
-            <div class="space-y-2">
-              <label class="text-sm font-medium" style="color: var(--mood-text-muted);">
-                Type de vote
-              </label>
-              <USelect
-                v-model="newProtocol.vote_type"
-                :items="voteTypeOptions"
-                value-key="value"
-              />
-            </div>
-
-            <div class="space-y-2">
-              <label class="text-sm font-medium" style="color: var(--mood-text-muted);">
-                Configuration de formule
-              </label>
-              <USelect
-                v-model="newProtocol.formula_config_id"
-                :items="formulaOptions"
-                placeholder="Selectionnez une formule..."
-                value-key="value"
-              />
-            </div>
-          </div>
-
-          <div class="flex justify-end gap-3">
-            <UButton variant="ghost" color="neutral" @click="showCreateModal = false">
-              Annuler
-            </UButton>
-            <UButton
-              :loading="creating"
-              :disabled="!newProtocol.name.trim() || !newProtocol.formula_config_id"
-              @click="createProtocol"
-            >
-              Creer le protocole
-            </UButton>
           </div>
         </div>
-      </template>
-    </UModal>
-  </div>
+      </div>
+
+      <!-- Meta-gouvernance -->
+      <ToolboxVignette
+        title="Meta-gouvernance"
+        :bullets="['Les formules sont soumises au vote', 'Modifier les seuils collectivement', 'Transparence totale']"
+        :actions="[
+          { label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
+          { label: 'Formules', icon: 'i-lucide-calculator', emit: 'formules' },
+          { label: 'Demarrer', icon: 'i-lucide-play', emit: 'meta', primary: true },
+        ]"
+      />
+    </template>
+  </SectionLayout>
+
+  <!-- Create protocol modal -->
+  <UModal v-model:open="showCreateModal">
+    <template #content>
+      <div class="proto-modal">
+        <h3 class="proto-modal__title">Nouveau protocole de vote</h3>
+
+        <div class="proto-modal__fields">
+          <div class="proto-modal__field">
+            <label class="proto-modal__label">Nom du protocole</label>
+            <input
+              v-model="newProtocol.name"
+              type="text"
+              class="proto-modal__input"
+              placeholder="Ex: Vote standard G1"
+            />
+          </div>
+
+          <div class="proto-modal__field">
+            <label class="proto-modal__label">Description</label>
+            <textarea
+              v-model="newProtocol.description"
+              class="proto-modal__textarea"
+              placeholder="Description du protocole..."
+              rows="2"
+            />
+          </div>
+
+          <div class="proto-modal__field">
+            <label class="proto-modal__label">Type de vote</label>
+            <USelect
+              v-model="newProtocol.vote_type"
+              :items="voteTypeOptions"
+              value-key="value"
+            />
+          </div>
+
+          <div class="proto-modal__field">
+            <label class="proto-modal__label">Configuration de formule</label>
+            <USelect
+              v-model="newProtocol.formula_config_id"
+              :items="formulaOptions"
+              placeholder="Selectionnez une formule..."
+              value-key="value"
+            />
+          </div>
+        </div>
+
+        <div class="proto-modal__actions">
+          <button class="proto-modal__cancel" @click="showCreateModal = false">
+            Annuler
+          </button>
+          <button
+            class="proto-modal__submit"
+            :disabled="!newProtocol.name.trim() || !newProtocol.formula_config_id || creating"
+            @click="createProtocol"
+          >
+            <UIcon v-if="creating" name="i-lucide-loader-2" class="animate-spin text-xs" />
+            <span>Creer</span>
+          </button>
+        </div>
+      </div>
+    </template>
+  </UModal>
 </template>
 
 <style scoped>
-.toolbox-page {
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-/* --- Header --- */
-.toolbox-page__header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.toolbox-page__title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1.5rem;
-  font-weight: 800;
+/* --- Search --- */
+.proto-search {
+  flex: 1;
+  min-width: 10rem;
+  padding: 0.625rem 1rem;
+  font-size: 0.9375rem;
   color: var(--mood-text);
+  background: var(--mood-accent-soft);
+  border-radius: 12px;
+  outline: none;
+  transition: box-shadow 0.15s ease;
+}
+.proto-search:focus {
+  box-shadow: 0 0 0 3px var(--mood-accent-soft);
+}
+.proto-search::placeholder {
+  color: var(--mood-text-muted);
+  opacity: 0.4;
 }
 
-.toolbox-page__title-icon {
-  color: var(--mood-accent);
-}
-
-.toolbox-page__subtitle {
-  margin-top: 0.25rem;
+.proto-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.625rem 1.25rem;
   font-size: 0.875rem;
-  color: var(--mood-text-muted);
-}
-
-.toolbox-page__actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-/* --- Section --- */
-.toolbox-section {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.toolbox-section__title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--mood-text);
-}
-
-.toolbox-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 2rem;
-  text-align: center;
-  color: var(--mood-text-muted);
-  background: var(--mood-surface);
-  border: 1px dashed var(--mood-border);
-  border-radius: 0.75rem;
-}
-
-/* --- Protocol cards --- */
-.toolbox-protocol-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-  gap: 1rem;
-}
-
-.protocol-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem 1.25rem;
-  background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 0.75rem;
-  text-decoration: none;
-  transition: all 0.2s ease;
+  font-weight: 700;
+  color: var(--mood-accent-text);
+  background: var(--mood-accent);
+  border-radius: 20px;
   cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
 }
-
-.protocol-card:hover {
-  border-color: var(--mood-accent);
+.proto-add-btn:hover {
+  transform: translateY(-1px);
   box-shadow: 0 4px 12px var(--mood-shadow);
 }
 
-.protocol-card__header {
+/* --- States --- */
+.proto-loading { display: flex; flex-direction: column; gap: 0.75rem; }
+.proto-error {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+  align-items: center;
   gap: 0.5rem;
-}
-
-.protocol-card__name {
+  padding: 1rem 1.25rem;
   font-size: 0.9375rem;
   font-weight: 600;
-  color: var(--mood-text);
+  color: var(--mood-error);
+  background: rgba(196, 43, 43, 0.08);
+  border-radius: 16px;
 }
-
-.protocol-card__badges {
+.proto-empty {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 3rem;
+  text-align: center;
+  color: var(--mood-text-muted);
+  font-size: 1rem;
+}
+
+/* --- Protocol list --- */
+.proto-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.proto-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  background: var(--mood-surface);
+  border-radius: 16px;
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+
+@media (min-width: 640px) {
+  .proto-item {
+    gap: 1rem;
+    padding: 1.25rem;
+  }
+}
+
+.proto-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 8px 24px var(--mood-shadow);
+}
+
+.proto-item:active {
+  transform: translateY(0);
+}
+
+.proto-item__left { flex-shrink: 0; }
+
+.proto-item__icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background: var(--mood-accent-soft);
+  color: var(--mood-accent);
+  font-size: 1rem;
+}
+
+@media (min-width: 640px) {
+  .proto-item__icon {
+    width: 2.75rem;
+    height: 2.75rem;
+    font-size: 1.25rem;
+  }
+}
+
+.proto-item__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+@media (min-width: 640px) {
+  .proto-item__body {
+    gap: 0.375rem;
+  }
+}
+
+.proto-item__head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
   gap: 0.375rem;
-  flex-shrink: 0;
 }
 
-.protocol-card__description {
-  font-size: 0.8125rem;
-  color: var(--mood-text-muted);
-  line-height: 1.4;
+@media (min-width: 640px) {
+  .proto-item__head {
+    gap: 0.625rem;
+  }
 }
 
-.protocol-card__mode-params {
-  padding-top: 0.25rem;
+.proto-item__name {
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--mood-text);
+  margin: 0;
 }
 
-.protocol-card__formula {
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--mood-border);
+@media (min-width: 640px) {
+  .proto-item__name {
+    font-size: 1.0625rem;
+  }
 }
 
-.protocol-card__formula-title {
+.proto-item__type {
   font-size: 0.6875rem;
-  font-weight: 600;
-  color: var(--mood-text-muted);
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  margin-bottom: 0.5rem;
+  padding: 3px 10px;
+  border-radius: 20px;
+  background: var(--mood-status-vote-bg);
+  color: var(--mood-status-vote);
+}
+.proto-item__type--nuanced {
+  background: var(--mood-status-prepa-bg);
+  color: var(--mood-status-prepa);
 }
 
-.protocol-card__formula-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.5rem;
+.proto-item__desc {
+  font-size: 0.875rem;
+  color: var(--mood-text-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.proto-item__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  color: var(--mood-text-muted);
+}
+
+@media (min-width: 640px) {
+  .proto-item__meta {
+    gap: 0.5rem;
+    margin-top: 0.25rem;
+    font-size: 0.8125rem;
+  }
+}
+
+.proto-item__params {
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-weight: 700;
+  color: var(--mood-accent);
+  background: var(--mood-accent-soft);
+  padding: 2px 8px;
+  border-radius: 20px;
   font-size: 0.75rem;
 }
 
-.protocol-card__formula-label {
-  display: block;
-  color: var(--mood-text-muted);
-  font-size: 0.625rem;
-}
-
-.protocol-card__formula-value {
+.proto-item__formula {
   font-weight: 600;
-  color: var(--mood-text);
 }
 
-/* --- Formula table --- */
-.formula-table-wrapper {
+.proto-item__detail {
+  opacity: 0.7;
+}
+
+.proto-item__arrow {
+  flex-shrink: 0;
+  color: var(--mood-text-muted);
+  opacity: 0.3;
+  margin-top: 0.375rem;
+  transition: opacity 0.12s;
+}
+.proto-item:hover .proto-item__arrow {
+  opacity: 1;
+  color: var(--mood-accent);
+}
+
+/* --- Formulas --- */
+.proto-formulas {
+  margin-top: 0.75rem;
+}
+
+@media (min-width: 640px) {
+  .proto-formulas {
+    margin-top: 1rem;
+  }
+}
+
+.proto-formulas__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--mood-text);
+  margin: 0 0 0.5rem;
+}
+
+@media (min-width: 640px) {
+  .proto-formulas__title {
+    font-size: 1rem;
+    margin: 0 0 0.75rem;
+  }
+}
+
+.proto-formulas__count {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  background: var(--mood-accent-soft);
+  color: var(--mood-accent);
+  padding: 2px 8px;
+  border-radius: 20px;
+}
+
+.proto-formulas__table-wrap {
   background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 0.75rem;
+  border-radius: 16px;
   overflow-x: auto;
 }
 
-.formula-table {
+.proto-formulas__table {
   width: 100%;
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   border-collapse: collapse;
 }
 
-.formula-table th {
+.proto-formulas__table th {
   text-align: left;
-  padding: 0.75rem 1rem;
-  font-weight: 600;
-  font-size: 0.75rem;
-  color: var(--mood-text-muted);
-  border-bottom: 1px solid var(--mood-border);
-}
-
-.formula-table td {
-  padding: 0.625rem 1rem;
-  color: var(--mood-text-muted);
-  border-bottom: 1px solid var(--mood-border);
-}
-
-.formula-table tr:last-child td {
-  border-bottom: none;
-}
-
-.formula-table__name {
-  font-weight: 600;
-  color: var(--mood-text) !important;
-}
-
-.formula-table__date {
+  padding: 0.5rem 0.625rem;
+  font-weight: 700;
   font-size: 0.6875rem;
+  color: var(--mood-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
 }
 
-/* --- Formula explainer --- */
-.formula-explainer-trigger {
-  width: 100%;
-  justify-content: space-between;
-  background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-radius: 0.75rem;
+@media (min-width: 640px) {
+  .proto-formulas__table th {
+    padding: 0.75rem 1rem;
+    font-size: 0.75rem;
+  }
 }
 
-.formula-explainer-content {
+.proto-formulas__table td {
+  padding: 0.5rem 0.625rem;
+  color: var(--mood-text-muted);
+  font-family: ui-monospace, SFMono-Regular, monospace;
+  font-size: 0.75rem;
+}
+
+@media (min-width: 640px) {
+  .proto-formulas__table td {
+    padding: 0.75rem 1rem;
+    font-size: 0.8125rem;
+  }
+}
+
+.proto-formulas__name {
+  font-weight: 700;
+  color: var(--mood-text) !important;
+  font-family: inherit !important;
+}
+
+/* --- n8n Section --- */
+.n8n-section {
+  background: var(--mood-accent-soft);
+  border-radius: 12px;
+  padding: 0.75rem;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  padding: 0 1.25rem 1.25rem;
-  background: var(--mood-surface);
-  border: 1px solid var(--mood-border);
-  border-top: none;
-  border-radius: 0 0 0.75rem 0.75rem;
+  gap: 0.5rem;
 }
 
-.formula-explainer-code {
-  display: block;
-  padding: 0.75rem;
-  background: var(--mood-accent-soft);
-  border-radius: 0.375rem;
-  font-size: 0.8125rem;
-  font-family: ui-monospace, SFMono-Regular, monospace;
-  color: var(--mood-text);
-  overflow-x: auto;
-}
-
-.formula-explainer-params {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+.n8n-section__head {
+  display: flex;
+  align-items: center;
   gap: 0.375rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--mood-tertiary, var(--mood-accent));
+}
+
+.n8n-section__desc {
   font-size: 0.75rem;
   color: var(--mood-text-muted);
+  margin: 0;
 }
 
-.formula-explainer-note {
-  font-size: 0.8125rem;
-  color: var(--mood-text-muted);
-  line-height: 1.5;
-  font-style: italic;
+.n8n-workflows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
 }
+
+.n8n-wf {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 10px;
+  transition: background 0.1s;
+}
+.n8n-wf:hover {
+  background: var(--mood-surface);
+}
+
+.n8n-wf__icon {
+  width: 1.75rem;
+  height: 1.75rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: var(--mood-surface);
+  color: var(--mood-tertiary, var(--mood-accent));
+}
+
+.n8n-wf__body {
+  min-width: 0;
+  flex: 1;
+}
+
+.n8n-wf__head {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.n8n-wf__name {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--mood-text);
+}
+
+.n8n-wf__status {
+  font-size: 0.5625rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 6px;
+  border-radius: 20px;
+}
+.n8n-wf__status--active {
+  background: var(--mood-status-vigueur-bg);
+  color: var(--mood-success);
+}
+.n8n-wf__status--demo {
+  background: var(--mood-surface);
+  color: var(--mood-text-muted);
+}
+
+.n8n-wf__desc {
+  font-size: 0.6875rem;
+  color: var(--mood-text-muted);
+  line-height: 1.4;
+  margin: 0;
+}
+
+/* --- Modal --- */
+.proto-modal {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+@media (min-width: 640px) {
+  .proto-modal {
+    padding: 2rem;
+    gap: 1.5rem;
+  }
+}
+
+.proto-modal__title {
+  font-size: 1.125rem;
+  font-weight: 800;
+  color: var(--mood-text);
+  margin: 0;
+}
+
+@media (min-width: 640px) {
+  .proto-modal__title {
+    font-size: 1.375rem;
+  }
+}
+
+.proto-modal__fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.proto-modal__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.proto-modal__label {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--mood-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.proto-modal__input,
+.proto-modal__textarea {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 0.9375rem;
+  color: var(--mood-text);
+  background: var(--mood-accent-soft);
+  border-radius: 12px;
+  outline: none;
+  transition: box-shadow 0.15s ease;
+  font-family: inherit;
+  resize: vertical;
+}
+.proto-modal__input:focus,
+.proto-modal__textarea:focus {
+  box-shadow: 0 0 0 3px var(--mood-accent-soft);
+}
+
+.proto-modal__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.proto-modal__cancel {
+  padding: 0.625rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--mood-text-muted);
+  background: none;
+  border-radius: 12px;
+  cursor: pointer;
+}
+.proto-modal__cancel:hover { color: var(--mood-text); background: var(--mood-accent-soft); }
+
+.proto-modal__submit {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.625rem 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--mood-accent-text);
+  background: var(--mood-accent);
+  border-radius: 16px;
+  cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+}
+.proto-modal__submit:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px var(--mood-shadow);
+}
+.proto-modal__submit:disabled { opacity: 0.4; cursor: not-allowed; }
 </style>
diff --git a/frontend/app/stores/decisions.ts b/frontend/app/stores/decisions.ts
index 1750a7b..5af4a00 100644
--- a/frontend/app/stores/decisions.ts
+++ b/frontend/app/stores/decisions.ts
@@ -74,7 +74,7 @@ export const useDecisionsStore = defineStore('decisions', {
     },
     activeDecisions: (state): Decision[] => {
       return state.list.filter(d =>
-        d.status === 'qualification' || d.status === 'review' || d.status === 'voting',
+        d.status === 'draft' || d.status === 'qualification' || d.status === 'review' || d.status === 'voting',
       )
     },
     completedDecisions: (state): Decision[] => {
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 45beb2a..9dde034 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -2,7 +2,7 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   ssr: false,
   devtools: { enabled: true },
-  devServer: { port: 3002 },
+  devServer: { port: 3002, host: '0.0.0.0' },
   components: [{ path: '~/components', pathPrefix: false }],
   css: ['~/assets/css/moods.css'],
   modules: [
@@ -27,6 +27,9 @@ export default defineNuxtConfig({
       ],
       title: 'Glibredecision',
       link: [
+        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
+        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800&display=swap' },
         { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css' },
       ],
       script: [