From 9b6388a6003df4fba1d3341d5c4732e628184f27 Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Sat, 28 Feb 2026 19:39:25 +0100
Subject: [PATCH] Palettes harmoniques, logo g breve (Decision), Protocoles
 promu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Moods: palettes multi-teintes (secondary, tertiary par mood)
  Peps: corail/ocre/bleu electrique ; Zen: sauge/lavande/terre cuite
  Chagrine: violet/cyan/magenta/or ; Grave: ambre/cuivre/bleu acier
- Logo: gavel + g(Decision) — incompletude de Godel
- Dashboard: 4 cartes d'entree (Documents, Decisions, Protocoles, Mandats)
  chacune avec sa couleur propre
- Protocoles promu au meme rang que les autres sections
  (boite a outils de vote + workflows n8n via MCP)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/app/app.vue                |  27 +++-
 frontend/app/assets/css/moods.css   | 223 ++++++++++++++--------------
 frontend/app/composables/useMood.ts |   8 +-
 frontend/app/pages/index.vue        |  38 ++++-
 frontend/app/pages/login.vue        |   6 +-
 5 files changed, 169 insertions(+), 133 deletions(-)

diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index 6c92e4e..2bc7c25 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -90,8 +90,8 @@ function isActive(to: string) {
               <UIcon name="i-lucide-menu" class="text-lg" />
             </button>
             <NuxtLink to="/" class="app-header__logo">
-              <span class="app-header__logo-mark">G</span>
-              <span class="app-header__logo-text">libredecision</span>
+              <UIcon name="i-lucide-gavel" class="app-header__logo-icon" />
+              <span class="app-header__logo-g">ğ</span><span class="app-header__logo-paren">(</span><span class="app-header__logo-word">Decision</span><span class="app-header__logo-paren">)</span>
             </NuxtLink>
           </div>
 
@@ -207,7 +207,7 @@ function isActive(to: string) {
 
       <!-- Footer -->
       <footer class="app-footer">
-        <span>Glibredecision v0.1.0</span>
+        <span>ğ(Decision) v0.1.0</span>
         <span class="app-footer__sep">·</span>
         <span>Licence libre</span>
       </footer>
@@ -268,18 +268,31 @@ function isActive(to: string) {
 .app-header__logo {
   text-decoration: none;
   display: flex;
-  align-items: baseline;
-  gap: 0;
+  align-items: center;
+  gap: 0.375rem;
 }
 
-.app-header__logo-mark {
+.app-header__logo-icon {
+  font-size: 1.125rem;
+  color: var(--mood-accent);
+}
+
+.app-header__logo-g {
   font-size: 1.25rem;
   font-weight: 800;
   color: var(--mood-accent);
   line-height: 1;
+  font-style: italic;
 }
 
-.app-header__logo-text {
+.app-header__logo-paren {
+  font-size: 0.9375rem;
+  font-weight: 300;
+  color: var(--mood-text-muted);
+  letter-spacing: -0.02em;
+}
+
+.app-header__logo-word {
   font-size: 0.9375rem;
   font-weight: 600;
   color: var(--mood-text);
diff --git a/frontend/app/assets/css/moods.css b/frontend/app/assets/css/moods.css
index 07e9a50..32337a7 100644
--- a/frontend/app/assets/css/moods.css
+++ b/frontend/app/assets/css/moods.css
@@ -1,140 +1,150 @@
 /* ==========================================================================
-   Glibredecision — Mood / Ambiance System
-   4 moods: Peps (light), Zen (light), Chagrine (dark), Grave (dark)
-
-   Design: saturated, modern, zero pastels.
+   ğ(Decision) — Mood / Ambiance System
+   Palettes harmoniques variees, colores en lite, lumineux en dark.
    ========================================================================== */
 
 /* --------------------------------------------------------------------------
-   Peps — Energique, vif, franc (Light)
+   Peps — Chaud, colore, tonique (Light)
+   Palette: corail / ocre / bleu electrique / vert vif
    -------------------------------------------------------------------------- */
 .mood-peps {
-  --mood-bg: #fafafa;
+  --mood-bg: #faf9f6;
   --mood-surface: #ffffff;
-  --mood-surface-hover: #f5f0ec;
-  --mood-text: #18120e;
-  --mood-text-muted: #6e5f52;
+  --mood-surface-hover: #fdf2ec;
+  --mood-text: #1e1410;
+  --mood-text-muted: #7a5e48;
   --mood-accent: #d44a10;
   --mood-accent-soft: rgba(212, 74, 16, 0.08);
   --mood-accent-text: #ffffff;
-  --mood-border: #e0d5cb;
-  --mood-success: #18843b;
-  --mood-warning: #c27e07;
-  --mood-error: #c42b2b;
-  --mood-gradient: linear-gradient(160deg, #faf8f5 0%, #ffffff 50%, #faf7f4 100%);
-  --mood-shadow: rgba(120, 60, 10, 0.06);
+  --mood-border: #e8d8c8;
+  --mood-secondary: #2874a6;
+  --mood-tertiary: #c4841d;
+  --mood-success: #1a8c3e;
+  --mood-warning: #c47d0a;
+  --mood-error: #c23028;
+  --mood-gradient: linear-gradient(145deg, #fdf8f0 0%, #ffffff 40%, #f0f6fb 100%);
+  --mood-shadow: rgba(180, 80, 20, 0.07);
   --mood-input-bg: #ffffff;
-  --mood-input-border: #c9bdb0;
+  --mood-input-border: #d4c0aa;
   --mood-input-focus: #d44a10;
 
-  --mood-status-prepa: #b35c0a;
-  --mood-status-prepa-bg: rgba(179, 92, 10, 0.12);
-  --mood-status-vote: #1856a8;
-  --mood-status-vote-bg: rgba(24, 86, 168, 0.10);
-  --mood-status-vigueur: #18843b;
-  --mood-status-vigueur-bg: rgba(24, 132, 59, 0.10);
-  --mood-status-clos: #5c5c5c;
-  --mood-status-clos-bg: rgba(92, 92, 92, 0.08);
+  --mood-status-prepa: #b8600e;
+  --mood-status-prepa-bg: rgba(184, 96, 14, 0.12);
+  --mood-status-vote: #2874a6;
+  --mood-status-vote-bg: rgba(40, 116, 166, 0.10);
+  --mood-status-vigueur: #1a8c3e;
+  --mood-status-vigueur-bg: rgba(26, 140, 62, 0.10);
+  --mood-status-clos: #6e5844;
+  --mood-status-clos-bg: rgba(110, 88, 68, 0.08);
 }
 
 /* --------------------------------------------------------------------------
-   Zen — Ancre, equilibre, sobre (Light)
+   Zen — Frais, vegetal, vivant (Light)
+   Palette: sauge / lavande / terre cuite / bleu ciel
    -------------------------------------------------------------------------- */
 .mood-zen {
-  --mood-bg: #f7f9f7;
+  --mood-bg: #f6f9f5;
   --mood-surface: #ffffff;
-  --mood-surface-hover: #edf3ee;
-  --mood-text: #141e14;
-  --mood-text-muted: #4a6650;
-  --mood-accent: #2d7a4a;
-  --mood-accent-soft: rgba(45, 122, 74, 0.07);
+  --mood-surface-hover: #ecf4e8;
+  --mood-text: #172014;
+  --mood-text-muted: #4e6d48;
+  --mood-accent: #2e8250;
+  --mood-accent-soft: rgba(46, 130, 80, 0.07);
   --mood-accent-text: #ffffff;
-  --mood-border: #c2d4c6;
-  --mood-success: #1d8a42;
-  --mood-warning: #b07309;
-  --mood-error: #be3232;
-  --mood-gradient: linear-gradient(160deg, #f4f8f4 0%, #ffffff 50%, #f5f8f5 100%);
-  --mood-shadow: rgba(30, 80, 50, 0.05);
+  --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: #a8c0ad;
-  --mood-input-focus: #2d7a4a;
+  --mood-input-border: #a4c4a0;
+  --mood-input-focus: #2e8250;
 
-  --mood-status-prepa: #9e6b0a;
-  --mood-status-prepa-bg: rgba(158, 107, 10, 0.10);
-  --mood-status-vote: #1565a5;
-  --mood-status-vote-bg: rgba(21, 101, 165, 0.10);
-  --mood-status-vigueur: #1d8a42;
-  --mood-status-vigueur-bg: rgba(29, 138, 66, 0.10);
-  --mood-status-clos: #606060;
-  --mood-status-clos-bg: rgba(96, 96, 96, 0.08);
+  --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);
 }
 
 /* --------------------------------------------------------------------------
-   Chagrine — Dense, veloute, introspectif (Dark)
+   Chagrine — Lumineux, electrique, profond (Dark)
+   Palette: violet vif / cyan / magenta / or
    -------------------------------------------------------------------------- */
 .mood-chagrine {
-  --mood-bg: #16121e;
-  --mood-surface: #1e1828;
-  --mood-surface-hover: #281f36;
-  --mood-text: #e0d8ec;
-  --mood-text-muted: #8e80a8;
-  --mood-accent: #8b6cc4;
-  --mood-accent-soft: rgba(139, 108, 196, 0.12);
+  --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-accent-text: #ffffff;
-  --mood-border: #2e2540;
-  --mood-success: #48c278;
-  --mood-warning: #d4a030;
-  --mood-error: #e06060;
-  --mood-gradient: linear-gradient(160deg, #16121e 0%, #1e1828 50%, #1a1524 100%);
-  --mood-shadow: rgba(100, 60, 180, 0.10);
-  --mood-input-bg: #1e1828;
-  --mood-input-border: #3a2e52;
-  --mood-input-focus: #8b6cc4;
+  --mood-border: #302448;
+  --mood-secondary: #38c8c8;
+  --mood-tertiary: #e07090;
+  --mood-success: #40d888;
+  --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-status-prepa: #c4a050;
-  --mood-status-prepa-bg: rgba(196, 160, 80, 0.14);
-  --mood-status-vote: #7090d0;
-  --mood-status-vote-bg: rgba(112, 144, 208, 0.14);
-  --mood-status-vigueur: #48c278;
-  --mood-status-vigueur-bg: rgba(72, 194, 120, 0.14);
-  --mood-status-clos: #706080;
-  --mood-status-clos-bg: rgba(112, 96, 128, 0.12);
+  --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);
 }
 
 /* --------------------------------------------------------------------------
-   Grave — Mineral, solennel, net (Dark)
+   Grave — Chaud, mineral, lumineux (Dark)
+   Palette: ambre / cuivre / bleu acier / vert oxyde
    -------------------------------------------------------------------------- */
 .mood-grave {
-  --mood-bg: #111214;
-  --mood-surface: #191a1e;
-  --mood-surface-hover: #22201c;
-  --mood-text: #e2e0d8;
-  --mood-text-muted: #8a877e;
-  --mood-accent: #c49530;
-  --mood-accent-soft: rgba(196, 149, 48, 0.10);
-  --mood-accent-text: #111214;
-  --mood-border: #2a2a2e;
-  --mood-success: #4ac070;
-  --mood-warning: #d4a530;
-  --mood-error: #d85050;
-  --mood-gradient: linear-gradient(160deg, #111214 0%, #191a1e 50%, #141518 100%);
-  --mood-shadow: rgba(160, 120, 30, 0.08);
-  --mood-input-bg: #191a1e;
-  --mood-input-border: #38362e;
-  --mood-input-focus: #c49530;
+  --mood-bg: #12110e;
+  --mood-surface: #1a1814;
+  --mood-surface-hover: #24201a;
+  --mood-text: #e8e0d0;
+  --mood-text-muted: #a09880;
+  --mood-accent: #d09828;
+  --mood-accent-soft: rgba(208, 152, 40, 0.10);
+  --mood-accent-text: #12110e;
+  --mood-border: #302c24;
+  --mood-secondary: #5898c8;
+  --mood-tertiary: #c87848;
+  --mood-success: #48c870;
+  --mood-warning: #d0a030;
+  --mood-error: #d05050;
+  --mood-gradient: linear-gradient(145deg, #12110e 0%, #1a1814 40%, #141618 100%);
+  --mood-shadow: rgba(180, 130, 40, 0.10);
+  --mood-input-bg: #1a1814;
+  --mood-input-border: #3a3428;
+  --mood-input-focus: #d09828;
 
-  --mood-status-prepa: #c49530;
-  --mood-status-prepa-bg: rgba(196, 149, 48, 0.14);
-  --mood-status-vote: #5a90c8;
-  --mood-status-vote-bg: rgba(90, 144, 200, 0.14);
-  --mood-status-vigueur: #4ac070;
-  --mood-status-vigueur-bg: rgba(74, 192, 112, 0.14);
-  --mood-status-clos: #686860;
-  --mood-status-clos-bg: rgba(104, 104, 96, 0.12);
+  --mood-status-prepa: #c87848;
+  --mood-status-prepa-bg: rgba(200, 120, 72, 0.15);
+  --mood-status-vote: #5898c8;
+  --mood-status-vote-bg: rgba(88, 152, 200, 0.14);
+  --mood-status-vigueur: #48c870;
+  --mood-status-vigueur-bg: rgba(72, 200, 112, 0.14);
+  --mood-status-clos: #787060;
+  --mood-status-clos-bg: rgba(120, 112, 96, 0.12);
 }
 
 /* ==========================================================================
-   Global design tokens — modern, refined, thin
+   Global design tokens
    ========================================================================== */
 
 body {
@@ -143,7 +153,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* --- Status pills — compact, saturated, NO pastels --- */
+/* --- Status pills --- */
 .status-pill {
   display: inline-flex;
   align-items: center;
@@ -183,25 +193,14 @@ body {
 }
 
 /* ==========================================================================
-   Global overrides — Nuxt UI refinements
+   Nuxt UI overrides
    ========================================================================== */
 
-/* Inputs: thin, clean, mood-aware */
 :root .mood-peps,
 :root .mood-zen,
 :root .mood-chagrine,
 :root .mood-grave {
-  /* UInput / UTextarea */
   --ui-border: var(--mood-input-border);
   --ui-bg: var(--mood-input-bg);
   --ui-text-highlighted: var(--mood-accent);
 }
-
-/* UButton refinements */
-:root .mood-peps button[class*="UButton"],
-:root .mood-zen button[class*="UButton"],
-:root .mood-chagrine button[class*="UButton"],
-:root .mood-grave button[class*="UButton"] {
-  font-weight: 500;
-  letter-spacing: 0.01em;
-}
diff --git a/frontend/app/composables/useMood.ts b/frontend/app/composables/useMood.ts
index 929b64e..86904dc 100644
--- a/frontend/app/composables/useMood.ts
+++ b/frontend/app/composables/useMood.ts
@@ -12,10 +12,10 @@ export interface Mood {
 const STORAGE_KEY = 'glibredecision_mood'
 
 const moods: Mood[] = [
-  { id: 'peps', label: 'Peps', description: 'Energique et franc', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
-  { id: 'zen', label: 'Zen', description: 'Ancre et sobre', icon: 'i-lucide-leaf', color: '#2d7a4a', isDark: false },
-  { id: 'chagrine', label: 'Chagrine', description: 'Dense et veloute', icon: 'i-lucide-moon', color: '#8b6cc4', isDark: true },
-  { id: 'grave', label: 'Grave', description: 'Mineral et solennel', icon: 'i-lucide-shield', color: '#c49530', isDark: true },
+  { 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: 'grave', label: 'Grave', description: 'Mineral et lumineux', icon: 'i-lucide-shield', color: '#d09828', isDark: true },
 ]
 
 const currentMood: Ref<string> = ref('peps')
diff --git a/frontend/app/pages/index.vue b/frontend/app/pages/index.vue
index fd8e2cd..8cdd1d2 100644
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -26,7 +26,7 @@ onMounted(async () => {
   }
 })
 
-/** Entry cards — the 3 main doors. */
+/** Entry cards — the 4 main doors. */
 const entryCards = computed(() => [
   {
     key: 'documents',
@@ -37,6 +37,7 @@ const entryCards = computed(() => [
     countLabel: `${documents.activeDocuments.length} actif${documents.activeDocuments.length > 1 ? 's' : ''}`,
     totalLabel: `${documents.list.length} au total`,
     description: 'Textes fondateurs sous vote permanent',
+    color: 'var(--mood-accent)',
   },
   {
     key: 'decisions',
@@ -47,6 +48,18 @@ const entryCards = computed(() => [
     countLabel: `${decisions.activeDecisions.length} en cours`,
     totalLabel: `${decisions.list.length} au total`,
     description: 'Processus de decision collectifs',
+    color: 'var(--mood-secondary, var(--mood-accent))',
+  },
+  {
+    key: 'protocoles',
+    title: 'Protocoles',
+    icon: 'i-lucide-settings',
+    to: '/protocols',
+    count: protocols.protocols.length,
+    countLabel: `${protocols.protocols.length} modalite${protocols.protocols.length > 1 ? 's' : ''}`,
+    totalLabel: 'Boite a outils de vote + workflows',
+    description: 'Modalites de vote, formules, workflows n8n',
+    color: 'var(--mood-tertiary, var(--mood-accent))',
   },
   {
     key: 'mandats',
@@ -57,6 +70,7 @@ const entryCards = computed(() => [
     countLabel: null,
     totalLabel: null,
     description: 'Un contexte, un objectif, une duree, une ou plusieurs nominations ; par defaut : nomination d\'un binome.',
+    color: 'var(--mood-success)',
   },
 ])
 
@@ -91,7 +105,7 @@ function formatDate(dateStr: string): string {
   <div class="dash">
     <!-- Welcome -->
     <div class="dash__welcome">
-      <h1 class="dash__title">Glibredecision</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>
@@ -100,7 +114,7 @@ function formatDate(dateStr: string): string {
     <!-- Entry cards -->
     <div class="dash__entries">
       <template v-if="loading">
-        <LoadingSkeleton v-for="i in 3" :key="i" :lines="3" card />
+        <LoadingSkeleton v-for="i in 4" :key="i" :lines="3" card />
       </template>
       <template v-else>
         <NuxtLink
@@ -108,6 +122,7 @@ function formatDate(dateStr: string): string {
           :key="card.key"
           :to="card.to"
           class="entry-card"
+          :style="{ '--card-color': card.color }"
         >
           <div class="entry-card__icon">
             <UIcon :name="card.icon" class="text-xl" />
@@ -253,6 +268,13 @@ function formatDate(dateStr: string): string {
   color: var(--mood-accent);
   letter-spacing: -0.02em;
 }
+.dash__title-g {
+  font-style: italic;
+}
+.dash__title-paren {
+  font-weight: 300;
+  color: var(--mood-text-muted);
+}
 .dash__subtitle {
   margin-top: 0.25rem;
   font-size: 0.875rem;
@@ -280,7 +302,7 @@ function formatDate(dateStr: string): string {
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 .entry-card:hover {
-  border-color: var(--mood-accent);
+  border-color: var(--card-color, var(--mood-accent));
   box-shadow: 0 2px 8px var(--mood-shadow);
 }
 
@@ -291,8 +313,8 @@ function formatDate(dateStr: string): string {
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background: var(--mood-accent-soft);
-  color: var(--mood-accent);
+  background: color-mix(in srgb, var(--card-color, var(--mood-accent)) 10%, transparent);
+  color: var(--card-color, var(--mood-accent));
   margin-bottom: 0.25rem;
 }
 
@@ -306,7 +328,7 @@ function formatDate(dateStr: string): string {
 .entry-card__count {
   font-size: 1.25rem;
   font-weight: 800;
-  color: var(--mood-accent);
+  color: var(--card-color, var(--mood-accent));
   line-height: 1;
 }
 
@@ -331,7 +353,7 @@ function formatDate(dateStr: string): string {
 }
 .entry-card:hover .entry-card__arrow {
   opacity: 1;
-  color: var(--mood-accent);
+  color: var(--card-color, var(--mood-accent));
 }
 
 /* --- Connect banner --- */
diff --git a/frontend/app/pages/login.vue b/frontend/app/pages/login.vue
index 5fc8648..b21c231 100644
--- a/frontend/app/pages/login.vue
+++ b/frontend/app/pages/login.vue
@@ -57,9 +57,11 @@ onMounted(() => {
     <div class="login-card">
       <!-- Logo -->
       <div class="login-card__header">
-        <span class="login-card__logo">G</span>
+        <div class="login-card__logo">
+          <UIcon name="i-lucide-gavel" class="text-xl" />
+        </div>
         <h1 class="login-card__title">Connexion</h1>
-        <p class="login-card__subtitle">Identite Duniter V2 · Ed25519</p>
+        <p class="login-card__subtitle">ğ(Decision) · Duniter V2 · Ed25519</p>
       </div>
 
       <!-- Steps indicator -->