From 7d3348c3fd00ac01b1344f2eb472ebe5aba0e402 Mon Sep 17 00:00:00 2001
From: Allison <allison@innova-ai.net>
Date: Wed, 29 Apr 2026 10:49:47 -0400
Subject: [PATCH] =?UTF-8?q?polish(marketing):=20refonte=20HYPER=20PRO=20'C?=
 =?UTF-8?q?omment=20=C3=A7a=20marche'=20=E2=80=94=20purge=20non-brand=20he?=
 =?UTF-8?q?x=20+=20uniformization=20typo/spacing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor mécanique strict :
- Purge 100% des hex non-brand (#0891b2, #a21caf, #e879f9, #1d4ed8, #9333ea, #f5d0fe, #67e8f9, #1e40af, #93c5fd, #9CA3AF, #0e7490, #EF4444 capital) → mapping vers brand-b1/b2/b3
- Standardisation tailles : 0 inline font-size, text-[9px/10px/11px] uniquement (purge 5.5/6/6.5/7/7.5/8/8.5 arbitraires)
- 0 font-family inline (utilise font-sans/font-mono Tailwind)

Polish device :
- Inner screen seam (effet "écran encastré dans bezel")
- Notch : intègre speaker grille 3 dots + camera dot dans la dynamic island
- Status bar : vraie batterie 80% fill, vrai WiFi 3 arcs concentriques + dot, signal 4 bars croissantes
- Logo DictIA 92×28 plus grand (opacité 85%)

Polish modes :
- Mode 1 : header compact mic+filename+REC, waveform 16 bars symétriques, file card MP3 redesign avec corner fold
- Mode 2 : avatars empilés 18×18 avec bordure white/15, bubbles max-width 80%, timestamps text-[9px]
- Mode 3 : grille langues text-[10px] line-height 18px, padding 8px, palette stricte b1/b2/b3
- Mode 4 : grid 4×2 cards 42×50, drop staggered 90ms, palette stricte b1/b2/b3 + dc2626 PDF + 374151 TXT
- Mode 5 : header counter Inter font-black text-base, connecting lines opacité 0.18
- Mode 6 : breadcrumb compact, toolbar 4 icons, hover row highlight, palette b1/b2/b3
- Mode 0 : chat bubbles uniformisés text-[10px], footer shield emerald (sécurité)

Polish right panel IA :
- Brain 40×40 cercle gradient brand-b3 (déjà OK)
- Badges Mistral 7B (b3 bg) + LOCAL (emerald bg)
- 3 metrics : 0ms grad-text · 100% emerald · 24/7 grad-text font-black text-lg
- Sovereignty bullets : icon dans cercle 20×20 rounded-full bg-brand-b3/[0.15]
- Padding p-5 généreux

Polish feature info card sous phone :
- Background uniforme bg-white/[0.06] + border-white/[0.10]
- Border-left 3px accent activeColor (style tab indicator)
- Icon container 32×32 rounded-md
- Badge top-right text-[10px] tracking-wider

Polish bottom tab bar :
- Buttons 34×42, gap-1 serré
- Active : bottom border 2px + scale icon 1.15 + drop-shadow color
- Labels text-[9px] uppercase tracking-wider
- AUTO pill : px-2.5 py-0.5 rounded-full bg-emerald/12

Tests :
- +6 assertions polish (forbidden hex purge, screen seam, white/0.06, brand-b3/[0.15], grad-text)
- 9/9 fonctionnalites tests pass
- 29/29 marketing tests pass (2 conformite failures pré-existantes baseline)

Build : npm run build:css → static/css/marketing.css régénéré pour les nouvelles classes arbitraires

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 static/css/marketing.css                 | 133 +++++-
 templates/marketing/fonctionnalites.html | 570 ++++++++++++-----------
 tests/test_marketing_secondary_pages.py  |  19 +
 3 files changed, 426 insertions(+), 296 deletions(-)

diff --git a/static/css/marketing.css b/static/css/marketing.css
index 5d7c00c..f4fe078 100644
--- a/static/css/marketing.css
+++ b/static/css/marketing.css
@@ -363,6 +363,12 @@
   .-inset-1 {
     inset: calc(var(--spacing) * -1);
   }
+  .-inset-2 {
+    inset: calc(var(--spacing) * -2);
+  }
+  .-inset-3 {
+    inset: calc(var(--spacing) * -3);
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -525,6 +531,9 @@
   .left-0\.5 {
     left: calc(var(--spacing) * 0.5);
   }
+  .left-1\.5 {
+    left: calc(var(--spacing) * 1.5);
+  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
@@ -771,6 +780,9 @@
   .ml-auto {
     margin-left: auto;
   }
+  .ml-px {
+    margin-left: 1px;
+  }
   .block {
     display: block;
   }
@@ -984,9 +996,6 @@
   .min-h-\[110px\] {
     min-height: 110px;
   }
-  .min-h-\[480px\] {
-    min-height: 480px;
-  }
   .min-h-\[calc\(100vh-62px\)\] {
     min-height: calc(100vh - 62px);
   }
@@ -1143,9 +1152,6 @@
   .max-w-\[300px\] {
     max-width: 300px;
   }
-  .max-w-\[320px\] {
-    max-width: 320px;
-  }
   .max-w-\[820px\] {
     max-width: 820px;
   }
@@ -1248,10 +1254,6 @@
     --tw-translate-y: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * 1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .translate-y-2 {
     --tw-translate-y: calc(var(--spacing) * 2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1376,6 +1378,12 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .content-center {
+    align-content: center;
+  }
+  .content-start {
+    align-content: flex-start;
+  }
   .items-baseline {
     align-items: baseline;
   }
@@ -1403,6 +1411,12 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .justify-items-center {
+    justify-items: center;
+  }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -1514,6 +1528,10 @@
     -moz-column-gap: calc(var(--spacing) * 6);
          column-gap: calc(var(--spacing) * 6);
   }
+  .gap-x-8 {
+    -moz-column-gap: calc(var(--spacing) * 8);
+         column-gap: calc(var(--spacing) * 8);
+  }
   .space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1555,6 +1573,9 @@
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
+  .gap-y-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -1655,6 +1676,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
   .border-\[3px\] {
     border-style: var(--tw-border-style);
     border-width: 3px;
@@ -1797,6 +1822,9 @@
   .border-brand-b3\/20 {
     border-color: color-mix(in oklab, #c026d3 20%, transparent);
   }
+  .border-brand-b3\/30 {
+    border-color: color-mix(in oklab, #c026d3 30%, transparent);
+  }
   .border-brand-b3\/60 {
     border-color: color-mix(in oklab, #c026d3 60%, transparent);
   }
@@ -2127,6 +2155,9 @@
   .bg-brand-b3\/\[0\.08\] {
     background-color: color-mix(in oklab, #c026d3 8%, transparent);
   }
+  .bg-brand-b3\/\[0\.15\] {
+    background-color: color-mix(in oklab, #c026d3 15%, transparent);
+  }
   .bg-brand-bg {
     background-color: #f7f9fc;
   }
@@ -2753,6 +2784,9 @@
   .pb-0 {
     padding-bottom: calc(var(--spacing) * 0);
   }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2859,12 +2893,21 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[6\.5px\] {
+    font-size: 6.5px;
+  }
   .text-\[6px\] {
     font-size: 6px;
   }
+  .text-\[7\.5px\] {
+    font-size: 7.5px;
+  }
   .text-\[7px\] {
     font-size: 7px;
   }
+  .text-\[8\.5px\] {
+    font-size: 8.5px;
+  }
   .text-\[8px\] {
     font-size: 8px;
   }
@@ -2966,10 +3009,6 @@
     --tw-tracking: 0.10em;
     letter-spacing: 0.10em;
   }
-  .tracking-\[0\.14em\] {
-    --tw-tracking: 0.14em;
-    letter-spacing: 0.14em;
-  }
   .tracking-\[0\.16em\] {
     --tw-tracking: 0.16em;
     letter-spacing: 0.16em;
@@ -3019,6 +3058,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre-line {
+    white-space: pre-line;
+  }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
@@ -3118,6 +3160,9 @@
   .text-brand-b1 {
     color: #2563eb;
   }
+  .text-brand-b1\/60 {
+    color: color-mix(in oklab, #2563eb 60%, transparent);
+  }
   .text-brand-b1\/65 {
     color: color-mix(in oklab, #2563eb 65%, transparent);
   }
@@ -3373,6 +3418,12 @@
       color: color-mix(in oklab, var(--color-white) 85%, transparent);
     }
   }
+  .text-white\/90 {
+    color: color-mix(in srgb, #fff 90%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-white) 90%, transparent);
+    }
+  }
   .text-yellow-400 {
     color: var(--color-yellow-400);
   }
@@ -3641,6 +3692,10 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .select-all {
     -webkit-user-select: all;
     -moz-user-select: all;
@@ -4696,6 +4751,25 @@
       outline-style: none;
     }
   }
+  .focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-visible\:ring-brand-b1 {
+    &:focus-visible {
+      --tw-ring-color: #2563eb;
+    }
+  }
+  .focus-visible\:ring-white\/40 {
+    &:focus-visible {
+      --tw-ring-color: color-mix(in srgb, #fff 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-white) 40%, transparent);
+      }
+    }
+  }
   .focus-visible\:outline {
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -5084,12 +5158,6 @@
       text-align: right;
     }
   }
-  .sm\:text-6xl {
-    @media (width >= 40rem) {
-      font-size: var(--text-6xl);
-      line-height: var(--tw-leading, var(--text-6xl--line-height));
-    }
-  }
   .sm\:text-base {
     @media (width >= 40rem) {
       font-size: var(--text-base);
@@ -5442,6 +5510,16 @@
       width: calc(2 / 3 * 100%);
     }
   }
+  .lg\:w-\[280px\] {
+    @media (width >= 64rem) {
+      width: 280px;
+    }
+  }
+  .lg\:w-\[320px\] {
+    @media (width >= 64rem) {
+      width: 320px;
+    }
+  }
   .lg\:w-auto {
     @media (width >= 64rem) {
       width: auto;
@@ -5483,11 +5561,6 @@
       grid-template-columns: 1fr 240px;
     }
   }
-  .lg\:grid-cols-\[1fr_minmax\(0\,360px\)\] {
-    @media (width >= 64rem) {
-      grid-template-columns: 1fr minmax(0,360px);
-    }
-  }
   .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,420px\)\] {
     @media (width >= 64rem) {
       grid-template-columns: minmax(0,1fr) minmax(0,420px);
@@ -5498,6 +5571,16 @@
       flex-direction: row;
     }
   }
+  .lg\:items-start {
+    @media (width >= 64rem) {
+      align-items: flex-start;
+    }
+  }
+  .lg\:justify-center {
+    @media (width >= 64rem) {
+      justify-content: center;
+    }
+  }
   .lg\:gap-10 {
     @media (width >= 64rem) {
       gap: calc(var(--spacing) * 10);
diff --git a/templates/marketing/fonctionnalites.html b/templates/marketing/fonctionnalites.html
index 8ae0f6f..b02ff4e 100644
--- a/templates/marketing/fonctionnalites.html
+++ b/templates/marketing/fonctionnalites.html
@@ -260,11 +260,11 @@
     /* ============ DECORATIVE BACKGROUND ============ */
     .dictia-section-grid {
       background-image:
-        linear-gradient(to right, rgba(15,23,42,0.04) 1px, transparent 1px),
-        linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
-      background-size: 60px 60px;
-      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 70%);
-      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 70%);
+        linear-gradient(to right, rgba(15,23,42,0.05) 1px, transparent 1px),
+        linear-gradient(to bottom, rgba(15,23,42,0.05) 1px, transparent 1px);
+      background-size: 56px 56px;
+      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 75%);
+      -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 75%);
     }
     .dictia-orb-float-1 { animation: dictia-orb-1 14s ease-in-out infinite; will-change: transform; }
     .dictia-orb-float-2 { animation: dictia-orb-2 18s ease-in-out infinite; will-change: transform; }
@@ -277,16 +277,26 @@
       position: relative;
       will-change: box-shadow, border-color;
     }
+    /* Inner screen border : effet "écran encastré" subtle entre bezel et écran */
     .dictia-phone-shell::before {
       content: '';
       position: absolute;
       inset: 2px;
       border-radius: 42px;
-      border: 1px solid rgba(255,255,255,0.04);
+      border: 1px solid rgba(255,255,255,0.05);
       pointer-events: none;
-      background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 30%);
+      background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 28%);
       z-index: 0;
     }
+    /* Inner screen seam : ligne 1px entre bezel + écran (look device authentique) */
+    .dictia-phone-screen-seam {
+      position: absolute;
+      inset: 6px;
+      border-radius: 38px;
+      pointer-events: none;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 1px 0 0 rgba(255,255,255,0.06);
+      z-index: 1;
+    }
     .dictia-phone-glow-ring { animation: dictia-glow-ring 3.6s ease-in-out infinite; will-change: opacity; }
     @keyframes dictia-glow-ring { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
 
@@ -442,21 +452,19 @@
     }
   </style>
 
-  {# Decorative background : grid + floating orbs (desktop only) #}
+  {# Decorative background : grid + floating orbs (desktop only) — brand-b1/b3 only #}
   <div class="dictia-bg-grid absolute inset-0 dictia-section-grid pointer-events-none" aria-hidden="true"></div>
   <div class="dictia-bg-orbs absolute inset-0 pointer-events-none overflow-hidden" aria-hidden="true">
-    <div class="dictia-orb-float-1 absolute" style="top:15%;left:8%;width:200px;height:200px;background:radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 70%);filter:blur(60px);"></div>
-    <div class="dictia-orb-float-2 absolute" style="bottom:10%;right:10%;width:240px;height:240px;background:radial-gradient(circle, rgba(192,38,211,0.18) 0%, transparent 70%);filter:blur(70px);"></div>
+    <div class="dictia-orb-float-1 absolute" style="top:12%;left:6%;width:240px;height:240px;background:radial-gradient(circle, rgba(37,99,235,0.10) 0%, transparent 70%);filter:blur(80px);"></div>
+    <div class="dictia-orb-float-2 absolute" style="bottom:8%;right:8%;width:280px;height:280px;background:radial-gradient(circle, rgba(192,38,211,0.10) 0%, transparent 70%);filter:blur(90px);"></div>
   </div>
 
   <div class="max-w-[1200px] mx-auto px-6 relative">
     <div class="text-center max-w-2xl mx-auto mb-10">
-      <p class="eyebrow grad-text mb-4 inline-flex items-center gap-2 justify-center px-3 py-1 rounded-full"
-         style="background:linear-gradient(135deg, rgba(6,182,212,0.10), rgba(192,38,211,0.10)); border:1px solid rgba(192,38,211,0.18);">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4" aria-hidden="true">
-          <circle cx="12" cy="12" r="3"/>
-          <path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.9.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/>
-        </svg>
+      {# Eyebrow : grad-text uppercase tracking-widest text-xs avec dot pulse brand-b3 #}
+      <p class="eyebrow grad-text mb-4 inline-flex items-center gap-2 justify-center px-3 py-1 rounded-full font-mono uppercase tracking-widest text-xs font-bold"
+         style="background:linear-gradient(135deg, rgba(6,182,212,0.10), rgba(192,38,211,0.10)); border:1px solid rgba(192,38,211,0.20);">
+        <span class="dictia-dot-pulse inline-block w-1.5 h-1.5 rounded-full bg-brand-b3" aria-hidden="true"></span>
         COMMENT ÇA MARCHE
       </p>
       <h2 id="how-it-works-title" class="text-[clamp(2rem,3vw,2.75rem)] font-black text-brand-navy mb-4 leading-tight">
@@ -520,57 +528,60 @@
           <div class="dictia-phone-shell flex flex-col overflow-hidden relative"
                style="width: 280px; height: 580px; border: 1.5px solid rgba(255,255,255,0.10); background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px rgba(37,99,235,0.20), inset 0 0 32px rgba(255,255,255,0.04);">
 
+            {# Inner screen seam — effet "écran encastré dans le bezel" #}
+            <div class="dictia-phone-screen-seam" aria-hidden="true"></div>
+
             {# Ambient overlay — STATIC subtle (pas de tint par mode) #}
             <div class="absolute inset-0 pointer-events-none"
                  style="border-radius: 44px; background-color: rgba(255,255,255,0.015);"
                  aria-hidden="true"></div>
 
-            {# Notch / Dynamic Island (desktop only via mobile media) #}
-            <div class="dictia-notch absolute left-1/2 -translate-x-1/2 z-30"
-                 style="top:8px;width:62px;height:6px;border-radius:6px;background:rgba(0,0,0,0.7);"
-                 aria-hidden="true"></div>
-
-            {# Status bar mobile-style (9:41 + signals) #}
-            <div class="dictia-statusbar relative z-20 flex items-center justify-between px-5 pt-1 font-mono"
-                 style="height:20px;color:rgba(255,255,255,0.55);font-size:9px;font-weight:600;"
+            {# Notch / Dynamic Island avec mini speaker grille (3 dots) #}
+            <div class="dictia-notch absolute left-1/2 -translate-x-1/2 z-30 flex items-center justify-center gap-1"
+                 style="top:8px;width:78px;height:18px;border-radius:12px;background:rgba(0,0,0,0.85);box-shadow:inset 0 1px 2px rgba(0,0,0,0.5);"
                  aria-hidden="true">
-              <span>9:41</span>
-              <div class="flex items-center gap-1">
-                {# Signal #}
-                <svg viewBox="0 0 14 10" width="11" height="8" fill="currentColor">
-                  <rect x="0" y="7" width="2" height="3" rx="0.5"/>
-                  <rect x="3" y="5" width="2" height="5" rx="0.5"/>
-                  <rect x="6" y="3" width="2" height="7" rx="0.5"/>
-                  <rect x="9" y="0" width="2" height="10" rx="0.5"/>
+              {# Speaker grille (3 dots) #}
+              <span class="block rounded-full" style="width:3px;height:3px;background:rgba(255,255,255,0.10);"></span>
+              <span class="block rounded-full" style="width:3px;height:3px;background:rgba(255,255,255,0.12);"></span>
+              <span class="block rounded-full" style="width:3px;height:3px;background:rgba(255,255,255,0.10);"></span>
+              {# Camera dot #}
+              <span class="block rounded-full ml-1" style="width:5px;height:5px;background:rgba(255,255,255,0.18);box-shadow:inset 0 0 1px rgba(0,0,0,0.5);"></span>
+            </div>
+
+            {# Status bar mobile-style (9:41 + signals) — vraies icônes SVG device-like #}
+            <div class="dictia-statusbar relative z-20 flex items-center justify-between px-6 font-mono text-[10px] font-semibold"
+                 style="height:34px;padding-top:12px;color:rgba(255,255,255,0.65);"
+                 aria-hidden="true">
+              <span class="font-bold">9:41</span>
+              <div class="flex items-center gap-1.5">
+                {# Signal — 4 bars croissantes, look device authentique #}
+                <svg viewBox="0 0 16 10" width="13" height="9" fill="currentColor">
+                  <rect x="0" y="7" width="2.5" height="3" rx="0.5"/>
+                  <rect x="3.5" y="5" width="2.5" height="5" rx="0.5"/>
+                  <rect x="7" y="2.5" width="2.5" height="7.5" rx="0.5"/>
+                  <rect x="10.5" y="0" width="2.5" height="10" rx="0.5"/>
                 </svg>
-                {# Wifi #}
-                <svg viewBox="0 0 14 10" width="11" height="8" fill="none" stroke="currentColor" stroke-width="1.4">
-                  <path d="M1 4 Q7 -1 13 4"/>
-                  <path d="M3 6 Q7 3 11 6"/>
-                  <circle cx="7" cy="9" r="0.8" fill="currentColor"/>
+                {# Wifi — 3 arcs concentriques + dot, look iOS authentique #}
+                <svg viewBox="0 0 16 12" width="14" height="10" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round">
+                  <path d="M1 4.5 Q8 -1.5 15 4.5"/>
+                  <path d="M3.2 7 Q8 3.2 12.8 7"/>
+                  <path d="M5.4 9.5 Q8 7.5 10.6 9.5"/>
+                  <circle cx="8" cy="11" r="0.9" fill="currentColor"/>
                 </svg>
-                {# Battery #}
-                <svg viewBox="0 0 18 8" width="14" height="7" fill="none" stroke="currentColor" stroke-width="0.8">
-                  <rect x="0" y="0" width="14" height="8" rx="1.5"/>
-                  <rect x="14.5" y="3" width="1" height="2" rx="0.4" fill="currentColor"/>
-                  <rect x="1.5" y="1.5" width="9" height="5" rx="0.5" fill="currentColor"/>
+                {# Battery 80% — fill réel à 80% pour authenticité #}
+                <svg viewBox="0 0 22 10" width="18" height="9" fill="none">
+                  <rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke="currentColor" stroke-opacity="0.6" stroke-width="0.8" fill="none"/>
+                  <rect x="19.5" y="3.5" width="1.5" height="3" rx="0.5" fill="currentColor" fill-opacity="0.6"/>
+                  <rect x="2" y="2" width="14" height="6" rx="1" fill="currentColor"/>
                 </svg>
               </div>
             </div>
 
-            {# Speaker grille + camera (top of screen, below notch) #}
-            <div class="dictia-speaker-grille absolute z-10 flex items-center justify-center gap-2"
-                 style="top:32px;left:50%;transform:translateX(-50%);width:80px;height:8px;"
-                 aria-hidden="true">
-              <div style="width:24px;height:2px;background:rgba(255,255,255,0.10);border-radius:2px;"></div>
-              <div class="dictia-camera-dot" style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.18);box-shadow:inset 0 0 1px rgba(0,0,0,0.5);"></div>
-            </div>
-
             {# TOP : Logo + Mic pulsing (with sound waves) — hauteur fixe 96px #}
             <div class="flex flex-col items-center justify-center gap-2 relative z-10 flex-shrink-0"
-                 style="height: 96px; padding-top: 24px; border-bottom: 1px solid rgba(255,255,255,0.06);">
+                 style="height: 96px; padding-top: 12px; border-bottom: 1px solid rgba(255,255,255,0.06);">
               <img src="/static/images/dictia-logo-nom.png" alt="DictIA"
-                   style="width: 80px; height: 24px; object-fit: contain; opacity: 0.75;">
+                   style="width: 92px; height: 28px; object-fit: contain; opacity: 0.85;">
               <div class="relative" style="width:36px;height:36px;">
                 {# 3 sound rings emanating #}
                 <span class="dictia-sound-ring r1" :style="`color: ${activeColor}; width:24px; height:24px;`" aria-hidden="true"></span>
@@ -594,66 +605,73 @@
             {# Mode 1 : Transcription (header REC + waveform + upload bar + words) #}
             <template x-if="displayMode === 1">
               <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="trModeData()" x-init="init()">
-                {# Header bar (file + REC) #}
-                <div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
+                {# Header bar (file + REC) — compact mic icon + filename + REC dot #}
+                <div class="flex items-center justify-between px-3 py-2 flex-shrink-0"
                      style="background:rgba(6,182,212,0.06);border-bottom:1px solid rgba(6,182,212,0.12);">
-                  <div class="flex items-center gap-1.5">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(6,182,212,0.80);" aria-hidden="true">
-                      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                      <polyline points="14 2 14 8 20 8"/>
+                  <div class="flex items-center gap-1.5 min-w-0">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-2.5 h-2.5 text-brand-b2 shrink-0" aria-hidden="true">
+                      <rect x="9" y="2" width="6" height="12" rx="3"/>
+                      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                      <line x1="12" y1="19" x2="12" y2="23"/>
                     </svg>
-                    <span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.55);">reunion-jan14.mp3</span>
+                    <span class="font-mono text-[10px] text-white/60 truncate">reunion-jan14.mp3</span>
                   </div>
-                  <div class="flex items-center gap-1">
-                    <span class="dictia-rec-dot" style="width:5px;height:5px;border-radius:50%;background:#EF4444;"></span>
-                    <span class="font-mono" style="font-size:6px;color:rgba(239,68,68,0.85);letter-spacing:0.08em;font-weight:700;">REC</span>
+                  <div class="flex items-center gap-1 shrink-0">
+                    <span class="dictia-rec-dot block rounded-full" style="width:5px;height:5px;background:#ef4444;"></span>
+                    <span class="font-mono text-[9px] font-bold tracking-widest" style="color:rgba(239,68,68,0.90);">REC</span>
                   </div>
                 </div>
 
-                {# Waveform animée (12 bars) #}
-                <div class="flex items-end justify-center gap-0.5 px-3 py-2 flex-shrink-0" style="height:24px;" aria-hidden="true">
-                  <div class="dictia-wave-bar" style="width:2px;height:14px;background:#06b6d4;animation-delay:0s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:18px;background:#06b6d4;animation-delay:0.1s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:10px;background:#06b6d4;animation-delay:0.2s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:20px;background:#06b6d4;animation-delay:0.05s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:12px;background:#06b6d4;animation-delay:0.25s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:16px;background:#06b6d4;animation-delay:0.15s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:8px;background:#06b6d4;animation-delay:0.3s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:14px;background:#06b6d4;animation-delay:0.08s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:18px;background:#06b6d4;animation-delay:0.22s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:10px;background:#06b6d4;animation-delay:0.18s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:14px;background:#06b6d4;animation-delay:0s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:6px;background:#06b6d4;animation-delay:0.12s;"></div>
+                {# Waveform animée (16 bars régulières — pattern symétrique) #}
+                <div class="flex items-end justify-center gap-0.5 px-3 py-2 flex-shrink-0" style="height:28px;" aria-hidden="true">
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:8px;animation-delay:0s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:12px;animation-delay:0.08s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:18px;animation-delay:0.16s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:14px;animation-delay:0.24s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:20px;animation-delay:0.32s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:16px;animation-delay:0.4s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:22px;animation-delay:0.48s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:18px;animation-delay:0.56s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:22px;animation-delay:0.48s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:16px;animation-delay:0.4s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:20px;animation-delay:0.32s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:14px;animation-delay:0.24s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:18px;animation-delay:0.16s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:12px;animation-delay:0.08s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:8px;animation-delay:0s;"></div>
+                  <div class="dictia-wave-bar bg-brand-b2" style="width:2px;height:6px;animation-delay:0.04s;"></div>
                 </div>
 
                 <div x-show="phase === 'upload'" class="flex-1 flex flex-col items-center justify-center gap-3 px-4 overflow-hidden">
-                  <div class="flex flex-col items-center gap-1.5">
-                    <div class="w-10 h-12 rounded-md flex flex-col items-center justify-center relative"
-                         style="background-color: rgba(6,182,212,0.12); border: 1.5px solid rgba(6,182,212,0.40);">
-                      <div class="absolute top-0 right-0" style="width:0;height:0;border-style:solid;border-width:0 7px 7px 0;border-color:transparent rgba(0,0,0,0.40) transparent transparent;"></div>
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;color:#06b6d4;" aria-hidden="true">
+                  <div class="flex flex-col items-center gap-2">
+                    {# File card MP3 — design device pro avec corner fold #}
+                    <div class="flex flex-col items-center justify-center relative"
+                         style="width:44px;height:54px;background-color:rgba(6,182,212,0.12);border:1.5px solid rgba(6,182,212,0.45);border-radius:6px;">
+                      <div class="absolute top-0 right-0" style="width:0;height:0;border-style:solid;border-width:0 8px 8px 0;border-color:transparent rgba(0,0,0,0.45) transparent transparent;"></div>
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b2" style="width:14px;height:14px;" aria-hidden="true">
                         <rect x="9" y="2" width="6" height="12" rx="3"/>
                         <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
                         <line x1="12" y1="19" x2="12" y2="23"/>
                       </svg>
-                      <span class="font-mono" style="font-size:5.5px;color:rgba(6,182,212,0.70);letter-spacing:0.06em;">MP3</span>
+                      <span class="font-mono text-[9px] font-bold tracking-wider mt-1" style="color:rgba(6,182,212,0.80);">MP3</span>
                     </div>
                   </div>
-                  <div class="w-full flex flex-col gap-1">
-                    <div class="flex justify-between">
-                      <span class="font-mono" style="font-size:6.5px;color:rgba(6,182,212,0.65);" x-text="progress < 100 ? 'Envoi en cours…' : 'Prêt ✓'"></span>
-                      <span class="font-mono" style="font-size:6.5px;color:rgba(6,182,212,0.50);"><span x-text="progress"></span>%</span>
+                  <div class="w-full flex flex-col gap-1.5">
+                    <div class="flex justify-between items-center">
+                      <span class="font-mono text-[10px]" style="color:rgba(6,182,212,0.75);" x-text="progress < 100 ? 'Envoi en cours…' : 'Prêt ✓'"></span>
+                      <span class="font-mono text-[10px] font-semibold" style="color:rgba(6,182,212,0.65);"><span x-text="progress"></span>%</span>
                     </div>
-                    {# Double progress bar (track + active with glow) #}
-                    <div class="w-full rounded-full overflow-hidden relative" style="height:4px;background-color:rgba(6,182,212,0.10);box-shadow:inset 0 0 2px rgba(0,0,0,0.4);">
-                      <div class="h-full rounded-full" :style="`width: ${progress}%; background: linear-gradient(90deg, #06b6d4, #0891b2); box-shadow: 0 0 6px rgba(6,182,212,0.6); transition: width 60ms linear;`"></div>
+                    {# Track gris fin + fill brand-b2 glow #}
+                    <div class="w-full rounded-full overflow-hidden relative" style="height:4px;background-color:rgba(255,255,255,0.06);box-shadow:inset 0 0 2px rgba(0,0,0,0.4);">
+                      <div class="h-full rounded-full bg-brand-b2" :style="`width: ${progress}%; box-shadow: 0 0 8px rgba(6,182,212,0.7); transition: width 60ms linear;`"></div>
                     </div>
                   </div>
                 </div>
                 {# Transcript zone — scroll interne avec fade bottom #}
                 <div x-show="phase === 'transcribing'" class="flex-1 p-3 dictia-mode-scroll dictia-fade-bottom flex flex-col justify-start" x-ref="transcriptBox">
-                  <p class="font-mono leading-relaxed break-words" style="font-size:9px;color:rgba(6,182,212,0.92);background:rgba(6,182,212,0.04);padding:4px 6px;border-radius:6px;border-left:2px solid rgba(6,182,212,0.4);">
-                    <span x-text="words.slice(0, n + 1).join(' ')"></span><span class="dictia-blink ml-px" style="color:#06b6d4;display:inline-block;width:3px;background:#06b6d4;height:9px;vertical-align:middle;">&nbsp;</span>
+                  <p class="font-mono leading-relaxed break-words text-[10px] rounded"
+                     style="color:rgba(6,182,212,0.92);background:rgba(6,182,212,0.04);padding:6px 8px;border-left:2px solid rgba(6,182,212,0.4);">
+                    <span x-text="words.slice(0, n + 1).join(' ')"></span><span class="dictia-blink ml-px inline-block align-middle bg-brand-b2" style="width:3px;height:10px;">&nbsp;</span>
                   </p>
                 </div>
               </div>
@@ -662,21 +680,21 @@
             {# Mode 2 : Diarisation (conversation Sophie/Marc/Julie) #}
             <template x-if="displayMode === 2">
               <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="diaModeData()" x-init="init()">
-                {# Conversation header with stacked avatars #}
-                <div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
+                {# Conversation header — 3 avatars empilés 24×24 avec bordure white/15 #}
+                <div class="flex items-center justify-between px-3 py-2 flex-shrink-0"
                      style="background:rgba(37,99,235,0.06);border-bottom:1px solid rgba(37,99,235,0.12);">
-                  <div class="flex items-center gap-1.5">
-                    <div class="flex" style="margin-right:2px;">
-                      <div class="rounded-full flex items-center justify-center text-[7px] font-bold"
-                           style="width:14px;height:14px;background:linear-gradient(135deg,#06b6d4,#0891b2);border:1.5px solid rgba(8,12,24,0.9);color:#fff;">S</div>
-                      <div class="rounded-full flex items-center justify-center text-[7px] font-bold"
-                           style="width:14px;height:14px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">M</div>
-                      <div class="rounded-full flex items-center justify-center text-[7px] font-bold"
-                           style="width:14px;height:14px;background:linear-gradient(135deg,#c026d3,#a21caf);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">J</div>
+                  <div class="flex items-center gap-2">
+                    <div class="flex">
+                      <div class="rounded-full flex items-center justify-center text-[10px] font-bold text-white"
+                           style="width:18px;height:18px;background:linear-gradient(135deg,#06b6d4,#2563eb);border:1.5px solid rgba(8,12,24,0.9);">S</div>
+                      <div class="rounded-full flex items-center justify-center text-[10px] font-bold text-white"
+                           style="width:18px;height:18px;background:linear-gradient(135deg,#2563eb,#06b6d4);border:1.5px solid rgba(8,12,24,0.9);margin-left:-6px;">M</div>
+                      <div class="rounded-full flex items-center justify-center text-[10px] font-bold text-white"
+                           style="width:18px;height:18px;background:linear-gradient(135deg,#c026d3,#2563eb);border:1.5px solid rgba(8,12,24,0.9);margin-left:-6px;">J</div>
                     </div>
-                    <span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.65);">Réunion · 3 participants</span>
+                    <span class="font-mono text-[10px] text-white/65">Réunion · 3 participants</span>
                   </div>
-                  <span class="dictia-rec-dot" style="width:5px;height:5px;border-radius:50%;background:#10b981;"></span>
+                  <span class="dictia-rec-dot block rounded-full" style="width:5px;height:5px;background:#10b981;"></span>
                 </div>
                 <div class="flex-1 flex flex-col justify-end gap-1.5 p-2 dictia-mode-scroll dictia-fade-bottom">
                   <template x-for="(msg, i) in visible" :key="`${cycle}-${startIdx + i}`">
@@ -685,24 +703,25 @@
                            style="width:24px;height:24px;"
                            :style="`background:linear-gradient(135deg, ${msg.c}33, ${msg.c}22); border: 1.5px solid ${msg.c}66; color: ${msg.c};`"
                            x-text="msg.s.charAt(0)"></div>
-                      <div class="rounded-lg px-2 py-1.5 flex-1 relative"
+                      <div class="rounded px-2 py-1.5 flex-1 relative"
+                           style="max-width:80%;"
                            :style="`background-color: ${msg.c}10; border: 1px solid ${msg.c}28; box-shadow: 0 1px 4px rgba(0,0,0,0.15);`">
                         <div class="flex items-baseline justify-between gap-2 mb-0.5">
-                          <p class="text-[8.5px] font-bold leading-none" :style="`color: ${msg.c};`" x-text="msg.s"></p>
-                          <span class="text-[6.5px] font-mono" style="color:rgba(255,255,255,0.30);" x-text="`09:0${i+1}`"></span>
+                          <p class="text-[10px] font-bold leading-none" :style="`color: ${msg.c};`" x-text="msg.s"></p>
+                          <span class="text-[9px] font-mono" style="color:rgba(255,255,255,0.30);" x-text="`09:0${i+1}`"></span>
                         </div>
-                        <p class="text-[8.5px] font-mono leading-snug" style="color:rgba(255,255,255,0.78);" x-text="msg.t"></p>
+                        <p class="text-[10px] font-mono leading-snug" style="color:rgba(255,255,255,0.80);" x-text="msg.t"></p>
                       </div>
                     </div>
                   </template>
-                  {# Typing indicator #}
+                  {# Typing indicator (3 dots pulse en boucle) #}
                   <div class="flex items-center gap-1.5 px-1" x-show="shownCount < CONVO.length" aria-hidden="true">
                     <div class="rounded-full" style="width:24px;height:24px;background:rgba(255,255,255,0.05);border:1px dashed rgba(255,255,255,0.15);"></div>
-                    <div class="flex items-center gap-1 rounded-lg px-2 py-1.5"
+                    <div class="flex items-center gap-1 rounded px-2 py-1.5"
                          style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);">
-                      <span class="dictia-typing-dot" style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.5);animation-delay:0s;"></span>
-                      <span class="dictia-typing-dot" style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.5);animation-delay:0.2s;"></span>
-                      <span class="dictia-typing-dot" style="width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.5);animation-delay:0.4s;"></span>
+                      <span class="dictia-typing-dot block rounded-full" style="width:4px;height:4px;background:rgba(255,255,255,0.5);animation-delay:0s;"></span>
+                      <span class="dictia-typing-dot block rounded-full" style="width:4px;height:4px;background:rgba(255,255,255,0.5);animation-delay:0.2s;"></span>
+                      <span class="dictia-typing-dot block rounded-full" style="width:4px;height:4px;background:rgba(255,255,255,0.5);animation-delay:0.4s;"></span>
                     </div>
                   </div>
                 </div>
@@ -713,29 +732,29 @@
             <template x-if="displayMode === 3">
               <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="langModeData()">
                 {# Header DÉTECTION AUTOMATIQUE #}
-                <div class="flex items-center justify-center gap-1.5 py-1.5 flex-shrink-0"
+                <div class="flex items-center justify-center gap-2 py-2 flex-shrink-0"
                      style="background:rgba(6,182,212,0.06);border-bottom:1px solid rgba(6,182,212,0.12);">
-                  <span class="dictia-dot-pulse" style="width:5px;height:5px;border-radius:50%;background:#06b6d4;"></span>
-                  <span class="font-mono" style="font-size:7px;color:rgba(6,182,212,0.85);letter-spacing:0.16em;font-weight:700;">DÉTECTION AUTOMATIQUE</span>
+                  <span class="dictia-dot-pulse block rounded-full bg-brand-b2" style="width:5px;height:5px;"></span>
+                  <span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(6,182,212,0.90);">DÉTECTION AUTOMATIQUE</span>
                 </div>
                 {# Scroll interne pour les 100 codes — fade bottom suggère continuation #}
-                <div class="flex-1 dictia-mode-scroll dictia-fade-bottom" style="padding:6px 5px;">
-                  <div class="grid content-start" style="grid-template-columns: repeat(7, 1fr); gap: 3px;">
+                <div class="flex-1 dictia-mode-scroll dictia-fade-bottom" style="padding:8px 6px;">
+                  <div class="grid content-start" style="grid-template-columns: repeat(7, 1fr); gap: 4px;">
                     <template x-for="(lang, i) in LANGS" :key="lang">
-                      <span class="font-mono font-bold text-center rounded dictia-spring"
+                      <span class="font-mono font-bold text-center rounded dictia-spring text-[10px]"
                             :class="HIGHLIGHTS.includes(i) ? 'dictia-lang-highlight' : ''"
-                            :style="`font-size:6.5px;line-height:16px;background-color:${LANG_COLORS[i % LANG_COLORS.length]}14;border:1px solid ${LANG_COLORS[i % LANG_COLORS.length]}30;color:${LANG_COLORS[i % LANG_COLORS.length]};animation-delay:${rippleDelay(i)}ms;`"
+                            :style="`line-height:18px;background-color:${LANG_COLORS[i % LANG_COLORS.length]}14;border:1px solid ${LANG_COLORS[i % LANG_COLORS.length]}30;color:${LANG_COLORS[i % LANG_COLORS.length]};animation-delay:${rippleDelay(i)}ms;`"
                             x-text="lang"></span>
                     </template>
                   </div>
                 </div>
                 {# Counter live en bas #}
-                <div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
+                <div class="flex items-center justify-between px-3 py-2 flex-shrink-0"
                      style="background:rgba(6,182,212,0.04);border-top:1px solid rgba(6,182,212,0.10);">
-                  <span class="font-mono dictia-fade-y" style="font-size:6.5px;color:rgba(6,182,212,0.75);letter-spacing:0.06em;animation-delay:1.4s;">
-                    FR · EN · ES · DE · ZH · JA · AR · ...
+                  <span class="font-mono dictia-fade-y text-[9px] tracking-wide" style="color:rgba(6,182,212,0.75);animation-delay:1.4s;">
+                    FR · EN · ES · DE · ZH · JA · AR
                   </span>
-                  <span class="font-mono font-bold dictia-fade-y" style="font-size:7.5px;color:#06b6d4;letter-spacing:0.1em;animation-delay:1.4s;">
+                  <span class="font-mono font-bold dictia-fade-y text-[10px] tracking-wider text-brand-b2" style="animation-delay:1.4s;">
                     99+ langues détectées
                   </span>
                 </div>
@@ -746,41 +765,42 @@
             <template x-if="displayMode === 4">
               <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="expModeData()">
                 {# Header subtle #}
-                <div class="flex items-center justify-between px-2.5 py-1.5 flex-shrink-0"
+                <div class="flex items-center justify-between px-3 py-2 flex-shrink-0"
                      style="background:rgba(37,99,235,0.06);border-bottom:1px solid rgba(37,99,235,0.12);">
-                  <span class="font-mono" style="font-size:7px;color:rgba(37,99,235,0.85);letter-spacing:0.14em;font-weight:700;">EXPORTS DISPONIBLES</span>
+                  <span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(37,99,235,0.90);">EXPORTS DISPONIBLES</span>
+                  <span class="font-mono text-[9px] text-brand-b1/60">7 formats</span>
                 </div>
 
-                {# Grid 4×2 #}
+                {# Grid 4×2 — staggered drop animation #}
                 <div class="grid grid-cols-4 gap-2 p-3 flex-1 content-center justify-items-center overflow-hidden">
                   <template x-for="(f, i) in FILE_TYPES" :key="f.ext">
-                    <div class="dictia-spring-y" :style="`animation-delay:${i * 110}ms;`">
-                      <div class="rounded-md flex flex-col items-center justify-end gap-0.5 relative"
-                           style="width:38px;height:46px;"
+                    <div class="dictia-spring-y" :style="`animation-delay:${i * 90}ms;`">
+                      <div class="flex flex-col items-center justify-end gap-0.5 relative"
+                           style="width:42px;height:50px;border-radius:4px;"
                            :style="`background-color:${f.bg}CC;border:1.5px solid ${f.bg};box-shadow:0 4px 12px ${f.bg}40;`">
-                        <div class="absolute top-0 right-0" style="width:0;height:0;border-style:solid;border-width:0 8px 8px 0;border-color:transparent rgba(0,0,0,0.40) transparent transparent;"></div>
+                        <div class="absolute top-0 right-0" style="width:0;height:0;border-style:solid;border-width:0 9px 9px 0;border-color:transparent rgba(0,0,0,0.45) transparent transparent;"></div>
                         {# Mini "page" lines #}
                         <div class="absolute top-2 left-1.5 right-3 flex flex-col gap-0.5" aria-hidden="true">
                           <div :style="`height:1px;background:${f.fg}55;width:80%;`"></div>
                           <div :style="`height:1px;background:${f.fg}40;width:65%;`"></div>
                           <div :style="`height:1px;background:${f.fg}40;width:75%;`"></div>
                         </div>
-                        <span class="text-[10px] font-black leading-none mb-0.5" :style="`color:${f.fg};margin-bottom:8px;`" x-text="f.sym"></span>
-                        <span class="text-[7px] font-mono font-bold leading-none mb-1" :style="`color:${f.fg}BB;`" x-text="f.ext"></span>
+                        <span class="text-[11px] font-black leading-none" :style="`color:${f.fg};margin-bottom:6px;`" x-text="f.sym"></span>
+                        <span class="text-[9px] font-mono font-bold leading-none mb-1.5" :style="`color:${f.fg}BB;`" x-text="f.ext"></span>
                       </div>
                     </div>
                   </template>
                 </div>
 
                 {# Subtitle dynamique avec checkmark — vert sémantique conservé pour status "ready" #}
-                <div class="flex items-center justify-center gap-1.5 px-2.5 py-1.5 dictia-fade-y flex-shrink-0"
+                <div class="flex items-center justify-center gap-2 px-3 py-2 dictia-fade-y flex-shrink-0"
                      style="background:rgba(16,185,129,0.06);border-top:1px solid rgba(16,185,129,0.14);animation-delay:0.9s;">
-                  <span style="width:11px;height:11px;border-radius:50%;background:#10b981;display:inline-flex;align-items:center;justify-content:center;">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="rgba(8,12,24,0.9)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;" aria-hidden="true">
+                  <span class="inline-flex items-center justify-center rounded-full" style="width:13px;height:13px;background:#10b981;">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="rgba(8,12,24,0.9)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;" aria-hidden="true">
                       <polyline points="20 6 9 17 4 12"/>
                     </svg>
                   </span>
-                  <span class="font-mono" style="font-size:7px;color:#10b981;letter-spacing:0.08em;font-weight:700;">7 FORMATS PRÊTS</span>
+                  <span class="font-mono text-[10px] font-bold tracking-widest" style="color:#10b981;">7 FORMATS PRÊTS</span>
                 </div>
               </div>
             </template>
@@ -788,28 +808,28 @@
             {# Mode 5 : Users (counter centré + avatars colors variés + connecting lines) #}
             <template x-if="displayMode === 5">
               <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="usersModeData()" x-init="init()">
-                {# Header counter #}
-                <div class="flex items-center justify-center gap-1.5 py-1.5 flex-shrink-0"
+                {# Header counter — gros chiffre Inter font-black #}
+                <div class="flex items-center justify-center gap-2 py-2 flex-shrink-0"
                      style="background:rgba(192,38,211,0.06);border-bottom:1px solid rgba(192,38,211,0.12);">
-                  <span class="font-mono" style="font-size:7px;color:rgba(192,38,211,0.75);letter-spacing:0.14em;font-weight:700;">UTILISATEURS</span>
-                  <span class="font-mono font-black" style="font-size:11px;color:#c026d3;letter-spacing:0.05em;" x-text="count.toString().padStart(2, '0')"></span>
-                  <span class="font-mono" style="font-size:7px;color:rgba(192,38,211,0.45);">/ ∞</span>
+                  <span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(192,38,211,0.85);">UTILISATEURS</span>
+                  <span class="font-black text-base text-brand-b3 leading-none" x-text="count.toString().padStart(2, '0')"></span>
+                  <span class="font-mono text-[10px]" style="color:rgba(192,38,211,0.50);">→ ∞</span>
                 </div>
 
                 {# Avatar grid with connecting lines SVG #}
-                <div class="flex-1 relative p-2 flex flex-wrap gap-1.5 items-center justify-center content-center overflow-hidden">
-                  {# SVG connecting lines (brand declinaisons only) #}
-                  <svg class="absolute inset-0 pointer-events-none" width="100%" height="100%" aria-hidden="true" style="opacity:0.4;">
+                <div class="flex-1 relative p-3 flex flex-wrap gap-2 items-center justify-center content-center overflow-hidden">
+                  {# SVG connecting lines (brand b1/b2/b3 only) — opacité subtle #}
+                  <svg class="absolute inset-0 pointer-events-none" width="100%" height="100%" aria-hidden="true" style="opacity:0.18;">
                     <line x1="20%" y1="30%" x2="50%" y2="50%" stroke="#c026d3" stroke-width="0.5" stroke-dasharray="2 2"/>
                     <line x1="80%" y1="30%" x2="50%" y2="50%" stroke="#06b6d4" stroke-width="0.5" stroke-dasharray="2 2"/>
-                    <line x1="20%" y1="70%" x2="50%" y2="50%" stroke="#a21caf" stroke-width="0.5" stroke-dasharray="2 2"/>
+                    <line x1="20%" y1="70%" x2="50%" y2="50%" stroke="#c026d3" stroke-width="0.5" stroke-dasharray="2 2"/>
                     <line x1="80%" y1="70%" x2="50%" y2="50%" stroke="#2563eb" stroke-width="0.5" stroke-dasharray="2 2"/>
                   </svg>
                   <template x-for="i in count" :key="`${cycle}-${i}`">
                     <div class="rounded-full flex items-center justify-center relative z-10"
                          :class="i === count ? 'dictia-spring' : ''"
                          :style="`width:24px;height:24px;background-color:${USER_COLORS[(i-1) % USER_COLORS.length]}22;border:1.5px solid ${USER_COLORS[(i-1) % USER_COLORS.length]}77;`">
-                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px;" :style="`color:${USER_COLORS[(i-1) % USER_COLORS.length]};`" aria-hidden="true">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px;" :style="`color:${USER_COLORS[(i-1) % USER_COLORS.length]};`" aria-hidden="true">
                         <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                         <circle cx="12" cy="7" r="4"/>
                       </svg>
@@ -822,70 +842,73 @@
             {# Mode 6 : Share (breadcrumb + toolbar + rows structurées) #}
             <template x-if="displayMode === 6">
               <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden">
-                {# Breadcrumb #}
-                <div class="flex items-center gap-1 px-2.5 py-1.5 flex-shrink-0"
+                {# Breadcrumb compact 12px max + toolbar 4 icons #}
+                <div class="flex items-center gap-1.5 px-3 py-2 flex-shrink-0"
                      style="background:rgba(6,182,212,0.06);border-bottom:1px solid rgba(6,182,212,0.12);">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;color:#06b6d4;" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b2 shrink-0" style="width:9px;height:9px;" aria-hidden="true">
                     <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                   </svg>
-                  <span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.55);">Mes&nbsp;dossiers</span>
-                  <span style="font-size:6px;color:rgba(255,255,255,0.30);">›</span>
-                  <span class="font-mono" style="font-size:6.5px;color:#06b6d4;font-weight:700;">Réunions</span>
-                  {# Toolbar mini #}
+                  <span class="font-mono text-[10px] text-white/55">Mes&nbsp;dossiers</span>
+                  <span class="text-[9px] text-white/30">›</span>
+                  <span class="font-mono text-[10px] font-bold text-brand-b2">Réunions</span>
+                  {# Toolbar mini 4 icons #}
                   <div class="flex items-center gap-1.5 ml-auto" aria-hidden="true">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(255,255,255,0.40);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/40" style="width:10px;height:10px;">
                       <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                     </svg>
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(255,255,255,0.40);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/40" style="width:10px;height:10px;">
                       <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
                     </svg>
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;color:rgba(255,255,255,0.40);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white/40" style="width:10px;height:10px;">
                       <path d="M3 6h18M3 12h18M3 18h18"/>
                     </svg>
+                    <svg viewBox="0 0 24 24" fill="currentColor" class="text-white/40" style="width:10px;height:10px;">
+                      <circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
+                    </svg>
                   </div>
                 </div>
 
-                <div class="flex-1 flex flex-col gap-1.5 dictia-mode-scroll dictia-fade-bottom" style="padding:6px 7px;">
+                <div class="flex-1 flex flex-col gap-2 dictia-mode-scroll dictia-fade-bottom" style="padding:8px;">
                   {# Folders #}
                   <div class="flex gap-1 flex-wrap">
                     <template x-for="(f, fi) in [{name:'Réunions',color:'#06b6d4',count:12},{name:'Entretiens',color:'#2563eb',count:7},{name:'Formations',color:'#c026d3',count:24}]" :key="f.name">
-                      <div class="flex items-center gap-1 rounded-md dictia-fade-y"
+                      <div class="flex items-center gap-1 rounded dictia-fade-y"
                            :style="`background-color:${f.color}18;border:1px solid ${f.color}35;padding:3px 6px;animation-delay:${fi * 100}ms;`">
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;" :style="`color:${f.color};`" aria-hidden="true">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:9px;height:9px;" :style="`color:${f.color};`" aria-hidden="true">
                           <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                         </svg>
-                        <span class="font-mono" style="font-size:6.5px;" :style="`color:${f.color};`" x-text="f.name"></span>
-                        <span class="font-mono" style="font-size:6px;" :style="`color:${f.color}88;`" x-text="f.count"></span>
+                        <span class="font-mono text-[9px] font-semibold" :style="`color:${f.color};`" x-text="f.name"></span>
+                        <span class="font-mono text-[9px]" :style="`color:${f.color}88;`" x-text="f.count"></span>
                       </div>
                     </template>
                   </div>
-                  {# Tags #}
+                  {# Tags pills #}
                   <div class="flex flex-wrap gap-1">
                     <template x-for="(tag, ti) in ['#RH','#Direction','#Urgent','#Archivé','#Suivi','#Confidentiel','#2024']" :key="tag">
-                      <span class="rounded dictia-spring font-mono"
-                            style="font-size:5.5px;padding:2px 4px;background-color:rgba(6,182,212,0.10);border:1px solid rgba(6,182,212,0.25);color:#06b6d4;"
+                      <span class="rounded-full dictia-spring font-mono text-[9px] text-brand-b2"
+                            style="padding:2px 6px;background-color:rgba(6,182,212,0.10);border:1px solid rgba(6,182,212,0.25);"
                             :style="`animation-delay:${350 + ti * 70}ms;`"
                             x-text="tag"></span>
                     </template>
                   </div>
-                  {# File rows structurées #}
-                  <div class="flex flex-col gap-1 mt-0.5">
+                  {# File rows structurées — hover highlight #}
+                  <div class="flex flex-col gap-1">
                     <template x-for="(file, fi2) in [{name:'CR-Réunion-Jan14',folder:'Réunions',color:'#06b6d4'},{name:'Entretien-Sophie',folder:'Entretiens',color:'#2563eb'},{name:'Formation-RGPD',folder:'Formations',color:'#c026d3'}]" :key="file.name">
-                      <div class="dictia-share-row group flex items-center gap-1.5 rounded-lg dictia-fade-x cursor-pointer"
-                           :style="`background-color:${file.color}0C;border:1px solid ${file.color}22;padding:4px 6px;animation-delay:${650 + fi2 * 120}ms;transition:background-color 0.2s;`">
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:8px;height:8px;flex-shrink:0;" :style="`color:${file.color};`" aria-hidden="true">
+                      <div class="dictia-share-row group flex items-center gap-2 rounded dictia-fade-x cursor-pointer"
+                           :style="`background-color:${file.color}0C;border:1px solid ${file.color}22;padding:5px 8px;animation-delay:${650 + fi2 * 120}ms;transition:background-color 0.2s;`">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0" style="width:10px;height:10px;" :style="`color:${file.color};`" aria-hidden="true">
                           <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                           <polyline points="14 2 14 8 20 8"/>
                         </svg>
                         <div class="flex-1 min-w-0">
-                          <p class="truncate font-mono" style="font-size:7px;color:rgba(255,255,255,0.78);" x-text="file.name"></p>
+                          <p class="truncate font-mono text-[10px] text-white/80" x-text="file.name"></p>
                         </div>
-                        <span class="rounded font-mono shrink-0"
-                              style="font-size:5.5px;padding:1px 4px;"
+                        <span class="rounded font-mono shrink-0 text-[9px]"
+                              style="padding:2px 5px;"
                               :style="`background:${file.color}18;color:${file.color};border:1px solid ${file.color}33;`"
                               x-text="file.folder"></span>
-                        <span class="dictia-share-action shrink-0" aria-hidden="true">
-                          <svg viewBox="0 0 24 24" fill="currentColor" style="width:8px;height:8px;" :style="`color:${file.color}77;`">
+                        <span class="shrink-0" aria-hidden="true">
+                          <svg viewBox="0 0 24 24" fill="currentColor" style="width:10px;height:10px;" :style="`color:${file.color}77;`">
                             <circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>
                           </svg>
                         </span>
@@ -893,8 +916,8 @@
                     </template>
                   </div>
                 </div>
-                <p class="text-center font-mono dictia-fade-y px-2 py-1 flex-shrink-0"
-                   style="font-size:6.5px;color:rgba(6,182,212,0.65);letter-spacing:0.08em;background:rgba(6,182,212,0.04);border-top:1px solid rgba(6,182,212,0.10);animation-delay:1.2s;">
+                <p class="text-center font-mono dictia-fade-y px-3 py-2 flex-shrink-0 text-[9px] tracking-wide"
+                   style="color:rgba(6,182,212,0.70);background:rgba(6,182,212,0.04);border-top:1px solid rgba(6,182,212,0.10);animation-delay:1.2s;">
                   partage sécurisé · recherche plein texte
                 </p>
               </div>
@@ -903,67 +926,70 @@
             {# Mode 0 : IA chat (Mistral 7B local Q&R typing) — visible si user clique sur IA dans grid #}
             <template x-if="displayMode === 0">
               <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="iaModeData()" x-init="init()">
-                <div class="flex items-center justify-center gap-1.5 py-1.5 flex-shrink-0"
+                <div class="flex items-center justify-center gap-2 py-2 flex-shrink-0"
                      style="border-bottom: 1px solid rgba(192,38,211,0.14); background-color: rgba(192,38,211,0.05);">
-                  <div class="rounded-full flex-shrink-0 dictia-dot-pulse" style="width:6px;height:6px;background-color:#10b981;"></div>
-                  <span class="font-mono" style="font-size:6px;color:rgba(192,38,211,0.85);letter-spacing:0.14em;">MISTRAL 7B · LOCAL</span>
+                  <span class="rounded-full flex-shrink-0 dictia-dot-pulse block" style="width:6px;height:6px;background-color:#10b981;"></span>
+                  <span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(192,38,211,0.90);">MISTRAL 7B · LOCAL</span>
                 </div>
-                <div class="flex-1 flex flex-col justify-end gap-1.5 p-2 dictia-mode-scroll dictia-fade-bottom">
+                <div class="flex-1 flex flex-col justify-end gap-2 p-2 dictia-mode-scroll dictia-fade-bottom">
                   <template x-for="(msg, mi) in msgs" :key="mi">
                     <div class="dictia-fade-y" :class="msg.role === 'user' ? 'flex justify-end' : 'flex justify-start'">
-                      <div class="rounded-lg px-2 py-1.5" style="max-width:92%;"
+                      <div class="rounded px-2 py-1.5" style="max-width:88%;"
                            :style="msg.role === 'user' ? 'background-color:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);' : 'background-color:rgba(192,38,211,0.12);border:1px solid rgba(192,38,211,0.30);'">
-                        <p class="font-mono leading-relaxed whitespace-pre-line" style="font-size:7.5px;"
-                           :style="msg.role === 'user' ? 'color:rgba(255,255,255,0.65);' : 'color:#e879f9;'">
-                          <span x-text="msg.text"></span><span x-show="msg.role === 'bot' && mi === msgs.length - 1" class="dictia-blink ml-px" style="color:#c026d3;">▌</span>
+                        <p class="font-mono leading-relaxed whitespace-pre-line text-[10px]"
+                           :style="msg.role === 'user' ? 'color:rgba(255,255,255,0.70);' : 'color:rgba(192,38,211,0.95);'">
+                          <span x-text="msg.text"></span><span x-show="msg.role === 'bot' && mi === msgs.length - 1" class="dictia-blink ml-px text-brand-b3">▌</span>
                         </p>
                       </div>
                     </div>
                   </template>
                 </div>
-                <div class="flex items-center justify-center gap-1 py-1.5 flex-shrink-0" style="border-top:1px solid rgba(192,38,211,0.08);">
-                  <span class="font-mono" style="font-size:5.5px;color:rgba(239,68,68,0.55);letter-spacing:0.06em;">0 donnée envoyée au cloud</span>
+                <div class="flex items-center justify-center gap-1.5 py-2 flex-shrink-0" style="border-top:1px solid rgba(192,38,211,0.10);background:rgba(192,38,211,0.03);">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="shrink-0" style="width:9px;height:9px;color:rgba(16,185,129,0.85);" aria-hidden="true">
+                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                  </svg>
+                  <span class="font-mono text-[9px] tracking-wide" style="color:rgba(16,185,129,0.85);">0 donnée envoyée au cloud</span>
                 </div>
               </div>
             </template>
           </div>
 
           {# BOTTOM : 6 feature icons + label + tab indicator + Auto pill — hauteur fixe 90px (cadre stable) #}
-          <div class="relative flex flex-col items-center justify-center gap-1 z-10 flex-shrink-0"
-               style="height: 90px; border-top: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.30));">
-            <div class="flex items-end gap-1.5">
+          <div class="relative flex flex-col items-center justify-center gap-1.5 z-10 flex-shrink-0"
+               style="height: 90px; border-top: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.32));">
+            <div class="flex items-end gap-1">
               <template x-for="i in [1,2,3,4,5,6]" :key="i">
                 <button type="button" @click="handleManualSelect(i)"
-                        class="dictia-feat-btn outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-white/40 rounded-md flex flex-col items-center justify-end relative"
-                        :style="`background-color: ${selectedFeature === i ? FEATURES[i].color + '14' : 'transparent'}; border:none; padding: 4px 5px 6px; opacity: ${selectedFeature === i ? 1 : 0.55}; min-width: 30px;`"
+                        class="dictia-feat-btn outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-white/40 flex flex-col items-center justify-end relative"
+                        style="width:34px;height:42px;border:none;padding:4px 0 6px;background:transparent;"
                         :aria-pressed="selectedFeature === i ? 'true' : 'false'"
                         :aria-label="`Voir : ${FEATURES[i].title}`">
-                  <span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.42)'}; transition: color 0.2s, transform 0.15s, filter 0.2s; filter: ${selectedFeature === i ? 'drop-shadow(0 0 6px ' + FEATURES[i].color + 'CC)' : 'none'}; transform: scale(${selectedFeature === i ? 1.18 : 1}); display: inline-block;`">
+                  <span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.30)'}; transition: color 0.2s, transform 0.15s, filter 0.2s; filter: ${selectedFeature === i ? 'drop-shadow(0 0 6px ' + FEATURES[i].color + 'CC)' : 'none'}; transform: scale(${selectedFeature === i ? 1.15 : 1}); display: inline-block;`">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;" aria-hidden="true" x-html="featureIconPath(i)"></svg>
                   </span>
-                  <span class="text-[7px] font-mono font-medium mt-0.5 leading-none uppercase tracking-wide"
-                        :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.30)'};`"
+                  <span class="text-[9px] font-mono font-semibold mt-0.5 leading-none uppercase tracking-wider"
+                        :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.40)'};`"
                         x-text="featureShortLabel(i)"></span>
-                  {# Tab indicator bottom border #}
+                  {# Tab indicator bottom border 2px (style tab bar) #}
                   <span x-show="selectedFeature === i" class="absolute" aria-hidden="true"
-                        :style="`bottom: 0; left: 4px; right: 4px; height: 2px; background: ${FEATURES[i].color}; border-radius: 1px; box-shadow: 0 0 6px ${FEATURES[i].color};`"></span>
+                        :style="`bottom: 0; left: 4px; right: 4px; height: 2px; background: ${FEATURES[i].color}; border-radius: 1px; box-shadow: 0 0 8px ${FEATURES[i].color};`"></span>
                 </button>
               </template>
             </div>
 
-            {# Auto pill / Manuel countdown #}
+            {# Auto pill / Manuel countdown — style premium pill #}
             <div class="flex items-center justify-center gap-1.5" style="min-height:14px;">
               <template x-if="!isManual">
-                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full"
-                      style="background:rgba(16,185,129,0.10);border:1px solid rgba(16,185,129,0.25);">
-                  <span class="dictia-auto-pulse" style="width:5px;height:5px;border-radius:50%;background:#10b981;"></span>
-                  <span class="font-mono" style="font-size:7px;color:#10b981;letter-spacing:0.12em;font-weight:700;">AUTO</span>
+                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full"
+                      style="background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.30);">
+                  <span class="dictia-auto-pulse block rounded-full" style="width:5px;height:5px;background:#10b981;"></span>
+                  <span class="font-mono text-[9px] font-bold tracking-widest uppercase" style="color:#10b981;">Auto</span>
                 </span>
               </template>
               <template x-if="isManual">
                 <span class="inline-flex flex-col items-center gap-0.5">
-                  <span class="font-mono" style="font-size:7.5px;color:rgba(255,255,255,0.55);" x-text="'Auto reprend bientôt'"></span>
-                  <span class="rounded-full overflow-hidden" style="width:50px;height:2px;background:rgba(255,255,255,0.10);">
+                  <span class="font-mono text-[9px] text-white/60">Auto reprend bientôt</span>
+                  <span class="rounded-full overflow-hidden" style="width:56px;height:2px;background:rgba(255,255,255,0.12);">
                     <span class="block dictia-countdown-fill h-full" :key="selectedFeature" style="background:linear-gradient(90deg,#06b6d4,#c026d3);"></span>
                   </span>
                 </span>
@@ -973,22 +999,25 @@
         </div>{# /dictia-phone-shell #}
         </div>{# /phone wrapper (glow ring) #}
 
-        {# Feature info card sous le phone — premium look avec icon container + hover lift #}
+        {# Feature info card sous le phone — uniform bg-white/[0.06] + accent border-left tab indicator #}
         <div style="min-height:64px;width:280px;max-width:100%;" class="mt-3 mx-auto">
-          <div class="dictia-feature-card rounded-xl px-4 py-3 relative"
-               :style="`background-color: ${activeColor}10; border: 1px solid ${activeColor}38; box-shadow: 0 6px 24px ${activeColor}1F;`">
+          <div class="dictia-feature-card rounded-xl px-4 py-3 relative bg-white/[0.06] border border-white/[0.10] overflow-hidden"
+               :style="`box-shadow: 0 6px 24px rgba(0,0,0,0.20);`">
+            {# Border-left 3px accent — style tab indicator #}
+            <span class="absolute left-0 top-0 bottom-0" aria-hidden="true"
+                  :style="`width:3px;background:${activeColor};box-shadow:0 0 8px ${activeColor}80;`"></span>
             {# Badge top-right #}
             <template x-if="FEATURES[displayMode].badge">
-              <span class="absolute text-[7.5px] px-1.5 py-0.5 rounded font-mono font-bold"
-                    style="top:8px;right:8px;letter-spacing:0.08em;"
+              <span class="absolute text-[10px] px-1.5 py-0.5 rounded font-mono font-bold tracking-wider"
+                    style="top:8px;right:8px;"
                     :style="`background-color: ${activeColor}22; color: ${activeColor}; border: 1px solid ${activeColor}55;`"
                     x-text="FEATURES[displayMode].badge"></span>
             </template>
             <div class="flex items-start gap-2.5">
               {# Icon container 32×32 #}
-              <span class="rounded-lg flex items-center justify-center flex-shrink-0"
+              <span class="rounded flex items-center justify-center flex-shrink-0"
                     style="width:32px;height:32px;"
-                    :style="`background-color: ${activeColor}18; border: 1px solid ${activeColor}33;`"
+                    :style="`background-color: ${activeColor}26; border: 1px solid ${activeColor}40;`"
                     aria-hidden="true">
                 <span :style="`color: ${activeColor};`">
                   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;" x-html="featureIconPath(displayMode)"></svg>
@@ -996,7 +1025,7 @@
               </span>
               <div class="flex-1 min-w-0 pr-12">
                 <p class="text-sm font-bold text-white leading-tight mb-0.5" x-text="FEATURES[displayMode].title"></p>
-                <p class="text-[11px] leading-snug" style="color:rgba(255,255,255,0.62);" x-text="FEATURES[displayMode].subtitle"></p>
+                <p class="text-[11px] leading-snug text-white/65" x-text="FEATURES[displayMode].subtitle"></p>
               </div>
             </div>
           </div>
@@ -1024,105 +1053,104 @@
       {# ─────────── ZONE RIGHT : IA Mistral premium card + grid 6 features ─────────── #}
       <div class="flex flex-col gap-3 w-full lg:w-[320px] flex-shrink-0 relative z-10">
 
+        {# Eyebrow + title — alignés sur le système typo #}
         <div class="mb-1 flex items-center gap-2">
-          <span class="block w-1 h-5 rounded-full" style="background:linear-gradient(180deg,#06b6d4,#c026d3);" aria-hidden="true"></span>
+          <span class="block w-1 h-6 rounded-full" style="background:linear-gradient(180deg,#06b6d4,#c026d3);" aria-hidden="true"></span>
           <div>
-            <p class="text-[9px] font-medium uppercase tracking-[0.22em]" style="color:rgba(192,38,211,0.95);">Fonctions clés</p>
-            <p class="font-bold text-base leading-snug text-brand-navy">Le moteur IA local</p>
+            <p class="text-xs font-mono font-bold uppercase tracking-widest text-brand-b3">Fonctions clés</p>
+            <p class="font-bold text-lg leading-snug text-brand-navy">Le moteur IA local</p>
           </div>
         </div>
 
         {# IA Mistral 7B premium card — couleurs brand-b3 (fuchsia officiel) #}
-        <div class="relative rounded-xl overflow-hidden"
-             style="border:1.5px solid rgba(192,38,211,0.32);background-color:rgba(8,12,24,0.92);box-shadow:0 0 32px rgba(192,38,211,0.18), 0 12px 40px -10px rgba(0,0,0,0.5);">
+        <div class="relative rounded-xl overflow-hidden border-brand-b3/30 border-[1.5px]"
+             style="background-color:rgba(8,12,24,0.92);box-shadow:0 0 28px rgba(192,38,211,0.18), 0 12px 40px -10px rgba(0,0,0,0.5);">
           {# Ambient fuchsia glow #}
           <div class="absolute inset-0 pointer-events-none ia-ambient-glow"
                style="border-radius:inherit;background:radial-gradient(ellipse 120% 60% at 15% 50%, rgba(192,38,211,0.22) 0%, transparent 70%);"
                aria-hidden="true"></div>
 
-          {# Header — Brain in 40x40 circle #}
-          <div class="relative px-4 pt-4 pb-3 flex items-start gap-3">
+          {# Header — Brain in 40x40 circle (premium feel) #}
+          <div class="relative p-5 flex items-start gap-3">
             <div class="relative flex-shrink-0">
               <div class="absolute -inset-3 rounded-full pointer-events-none ia-brain-glow"
                    style="background:radial-gradient(circle, rgba(192,38,211,0.55) 0%, transparent 70%);"
                    aria-hidden="true"></div>
               <div class="rounded-full flex items-center justify-center relative"
                    style="width:40px;height:40px;background:linear-gradient(135deg, rgba(192,38,211,0.30), rgba(192,38,211,0.12));border:1.5px solid rgba(192,38,211,0.50);box-shadow:0 4px 12px rgba(192,38,211,0.20);">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:20px;height:20px;position:relative;z-index:1;" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3 relative" style="width:20px;height:20px;z-index:1;" aria-hidden="true">
                   <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/>
                   <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/>
                 </svg>
               </div>
             </div>
             <div class="flex-1 min-w-0">
-              <div class="flex items-center gap-1.5 flex-wrap">
-                <span class="font-bold text-base text-white">IA intégrée</span>
-              </div>
-              <div class="flex items-center gap-1.5 flex-wrap mt-1">
-                <span class="text-[9px] px-2 py-0.5 rounded-md font-mono font-bold"
-                      style="background-color:rgba(192,38,211,0.22);color:#e879f9;border:1px solid rgba(192,38,211,0.45);letter-spacing:0.08em;">MISTRAL 7B</span>
-                <span class="text-[8px] px-2 py-0.5 rounded font-mono font-bold ia-local-badge inline-flex items-center gap-1"
-                      style="background-color:rgba(16,185,129,0.14);color:#10b981;border:1px solid rgba(16,185,129,0.40);letter-spacing:0.12em;">
-                  <span class="dictia-dot-pulse" style="width:4px;height:4px;border-radius:50%;background:#10b981;"></span>
+              <span class="font-bold text-lg text-white block">IA intégrée</span>
+              <div class="flex items-center gap-1.5 flex-wrap mt-1.5">
+                <span class="text-[10px] px-2 py-0.5 rounded font-mono font-bold tracking-wider text-brand-b3"
+                      style="background-color:rgba(192,38,211,0.22);border:1px solid rgba(192,38,211,0.45);">MISTRAL 7B</span>
+                <span class="text-[10px] px-2 py-0.5 rounded font-mono font-bold ia-local-badge inline-flex items-center gap-1 tracking-widest"
+                      style="background-color:rgba(16,185,129,0.14);color:#10b981;border:1px solid rgba(16,185,129,0.40);">
+                  <span class="dictia-dot-pulse block rounded-full" style="width:4px;height:4px;background:#10b981;"></span>
                   LOCAL
                 </span>
               </div>
-              <p class="text-[11px] mt-1.5" style="color:rgba(255,255,255,0.62);">Résumé · Points d'action · Q&amp;R</p>
+              <p class="text-xs mt-2 text-white/65">Résumé · Points d'action · Q&amp;R</p>
             </div>
           </div>
 
           {# Divider #}
           <div style="height:1px;background:linear-gradient(90deg, transparent, rgba(192,38,211,0.30), transparent);" aria-hidden="true"></div>
 
-          {# Performance metrics 3 cells #}
+          {# Performance metrics 3 cells — chiffres en grad-text font-bold #}
           <div class="relative grid grid-cols-3 gap-0">
-            <div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
-              <p class="font-mono font-black text-base text-white leading-none">0&thinsp;ms</p>
-              <p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">latence</p>
+            <div class="text-center py-3 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
+              <p class="font-mono font-black text-lg leading-none grad-text">0&thinsp;ms</p>
+              <p class="text-[10px] mt-1 uppercase tracking-wider font-semibold" style="color:rgba(192,38,211,0.70);">latence</p>
             </div>
-            <div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
-              <p class="font-mono font-black text-base leading-none" style="color:#10b981;">100&thinsp;%</p>
-              <p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">privé</p>
+            <div class="text-center py-3 px-1" style="border-right:1px solid rgba(192,38,211,0.10);">
+              <p class="font-mono font-black text-lg leading-none" style="color:#10b981;">100&thinsp;%</p>
+              <p class="text-[10px] mt-1 uppercase tracking-wider font-semibold" style="color:rgba(192,38,211,0.70);">privé</p>
             </div>
-            <div class="text-center py-2.5 px-1">
-              <p class="font-mono font-black text-base leading-none" style="color:#e879f9;">24/7</p>
-              <p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">dispo</p>
+            <div class="text-center py-3 px-1">
+              <p class="font-mono font-black text-lg leading-none grad-text">24/7</p>
+              <p class="text-[10px] mt-1 uppercase tracking-wider font-semibold" style="color:rgba(192,38,211,0.70);">dispo</p>
             </div>
           </div>
 
           {# Divider #}
           <div style="height:1px;background:linear-gradient(90deg, transparent, rgba(192,38,211,0.22), transparent);" aria-hidden="true"></div>
 
-          {# Sovereignty bullets — chacun avec icon dans cercle #}
-          <div class="relative px-4 py-3 flex flex-col gap-2.5">
+          {# Sovereignty bullets — chacun avec icon dans cercle 20×20 brand-b3/[0.15] #}
+          <div class="relative p-5 flex flex-col gap-3">
             <div class="flex items-start gap-2.5">
-              <span class="rounded-md flex items-center justify-center flex-shrink-0 mt-0.5"
-                    style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
+              <span class="rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 bg-brand-b3/[0.15] border border-brand-b3/30"
+                    style="width:20px;height:20px;"
                     aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:10px;height:10px;opacity:0.85;">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:11px;height:11px;">
                   <rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/>
                   <line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/>
                 </svg>
               </span>
-              <span class="text-[11px] leading-snug" style="color:rgba(255,255,255,0.88);"><strong>Données hébergées sur VOS serveurs</strong> · jamais partagées</span>
+              <span class="text-[11px] leading-snug text-white/90"><strong class="font-bold">Données hébergées sur VOS serveurs</strong> · jamais partagées</span>
             </div>
             <div class="flex items-start gap-2.5">
-              <span class="rounded-md flex items-center justify-center flex-shrink-0 mt-0.5"
-                    style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
+              <span class="rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 bg-brand-b3/[0.15] border border-brand-b3/30"
+                    style="width:20px;height:20px;"
                     aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:10px;height:10px;opacity:0.85;">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-brand-b3" style="width:11px;height:11px;">
                   <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/>
                 </svg>
               </span>
-              <span class="text-[11px] leading-snug" style="color:rgba(255,255,255,0.72);">Zéro connexion OpenAI · Google · Microsoft</span>
+              <span class="text-[11px] leading-snug text-white/75">Zéro connexion OpenAI · Google · Microsoft</span>
             </div>
             <div class="flex items-start gap-2.5">
-              <span class="rounded-md flex items-center justify-center flex-shrink-0 mt-0.5"
-                    style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
+              <span class="rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 bg-brand-b3/[0.15] border border-brand-b3/30"
+                    style="width:20px;height:20px;"
                     aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-brand-b3" style="width:10px;height:10px;opacity:0.85;"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+                <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" class="text-brand-b3" style="width:11px;height:11px;"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
               </span>
-              <span class="text-[11px] leading-snug" style="color:rgba(255,255,255,0.72);">Inférence hors-ligne · résultats en secondes</span>
+              <span class="text-[11px] leading-snug text-white/75">Inférence hors-ligne · résultats en secondes</span>
             </div>
           </div>
         </div>
@@ -1131,15 +1159,15 @@
         <div class="grid grid-cols-3 gap-2">
           <template x-for="i in [1,2,3,4,5,6]" :key="i">
             <button type="button" @click="handleManualSelect(i)"
-                    class="flex flex-col items-center gap-1 rounded-xl py-3 px-1 outline-none transition-all focus-visible:ring-2 focus-visible:ring-white/40"
-                    :style="`border: 1px solid ${selectedFeature === i ? FEATURES[i].color + '60' : 'rgba(255,255,255,0.08)'}; background-color: ${selectedFeature === i ? FEATURES[i].color + '14' : 'rgba(8,12,24,0.85)'}; box-shadow: ${selectedFeature === i ? '0 0 16px ' + FEATURES[i].color + '30, inset 0 0 12px ' + FEATURES[i].color + '10' : 'none'}; cursor: pointer;`"
+                    class="flex flex-col items-center gap-1.5 rounded-xl py-3 px-2 outline-none transition-all focus-visible:ring-2 focus-visible:ring-white/40"
+                    :style="`border: 1px solid ${selectedFeature === i ? FEATURES[i].color + '60' : 'rgba(255,255,255,0.10)'}; background-color: ${selectedFeature === i ? FEATURES[i].color + '14' : 'rgba(8,12,24,0.85)'}; box-shadow: ${selectedFeature === i ? '0 0 16px ' + FEATURES[i].color + '30, inset 0 0 12px ' + FEATURES[i].color + '10' : 'none'}; cursor: pointer;`"
                     :aria-pressed="selectedFeature === i ? 'true' : 'false'"
                     :aria-label="`Sélectionner : ${FEATURES[i].title}`">
-              <span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.50)'}; filter: ${selectedFeature === i ? 'drop-shadow(0 0 6px ' + FEATURES[i].color + 'BB)' : 'none'}; transform: scale(${selectedFeature === i ? 1.25 : 1}) translateY(${selectedFeature === i ? -1 : 0}px); transition: all 0.2s; display:inline-block;`">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:16px;height:16px;" aria-hidden="true" x-html="featureIconPath(i)"></svg>
+              <span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(255,255,255,0.55)'}; filter: ${selectedFeature === i ? 'drop-shadow(0 0 6px ' + FEATURES[i].color + 'BB)' : 'none'}; transform: scale(${selectedFeature === i ? 1.20 : 1}) translateY(${selectedFeature === i ? -1 : 0}px); transition: all 0.2s; display:inline-block;`">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:18px;height:18px;" aria-hidden="true" x-html="featureIconPath(i)"></svg>
               </span>
-              <span class="text-[8px] font-medium text-center leading-tight"
-                    :style="`color: ${selectedFeature === i ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.60)'}; transition: color 0.2s;`"
+              <span class="text-[10px] font-semibold text-center leading-tight"
+                    :style="`color: ${selectedFeature === i ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.65)'}; transition: color 0.2s;`"
                     x-text="FEATURES[i].title"></span>
             </button>
           </template>
@@ -1271,8 +1299,8 @@
     /* Mode 3 — Langues : grille 100 codes (ripple depuis centre + highlight aléatoire) */
     function langModeData() {
       return {
-        /* Cycle uniquement entre brand-b1 / brand-b2 / brand-b3 + déclinaisons */
-        LANG_COLORS: ['#06b6d4','#2563eb','#c026d3','#0891b2','#1d4ed8','#a21caf','#06b6d4','#2563eb'],
+        /* Cycle EXCLUSIVEMENT entre brand-b1 / brand-b2 / brand-b3 (palette canonique stricte) */
+        LANG_COLORS: ['#2563eb','#06b6d4','#c026d3','#06b6d4','#2563eb','#c026d3','#2563eb','#06b6d4'],
         LANGS: [
           'FR','EN','ES','DE','PT','IT','NL','PL','ZH','JA',
           'KO','AR','RU','HI','TR','VI','TH','SV','DA','NO',
@@ -1301,17 +1329,17 @@
       };
     }
 
-    /* Mode 4 — Exports : 7 file types staggered 90ms (CSS-only) */
+    /* Mode 4 — Exports : 7 file types staggered 90ms (CSS-only) — palette brand stricte */
     function expModeData() {
       return {
         FILE_TYPES: [
-          { ext: 'DOCX', bg: '#2563eb', fg: '#fff',    sym: 'W'   },  /* brand-b1 blue */
-          { ext: 'PDF',  bg: '#dc2626', fg: '#fff',    sym: 'PDF' },  /* red sémantique conservé pour fichier PDF */
-          { ext: 'SRT',  bg: '#c026d3', fg: '#fff',    sym: 'CC'  },  /* brand-b3 fuchsia */
-          { ext: 'VTT',  bg: '#9333ea', fg: '#f5d0fe', sym: 'CC'  },  /* purple-600 (déclinaison b3) */
-          { ext: 'TXT',  bg: '#374151', fg: '#9CA3AF', sym: '≡'   },  /* gray-700 neutre */
-          { ext: 'JSON', bg: '#0e7490', fg: '#67e8f9', sym: '{}'  },  /* cyan-700 (déclinaison b2) */
-          { ext: 'MD',   bg: '#1e40af', fg: '#93c5fd', sym: '#'   }   /* blue-700 (déclinaison b1) */
+          { ext: 'DOCX', bg: '#2563eb', fg: '#ffffff', sym: 'W'   },  /* brand-b1 blue */
+          { ext: 'PDF',  bg: '#dc2626', fg: '#ffffff', sym: 'PDF' },  /* red sémantique conservé pour fichier PDF */
+          { ext: 'SRT',  bg: '#c026d3', fg: '#ffffff', sym: 'CC'  },  /* brand-b3 fuchsia */
+          { ext: 'VTT',  bg: '#c026d3', fg: '#ffffff', sym: 'CC'  },  /* brand-b3 fuchsia */
+          { ext: 'TXT',  bg: '#374151', fg: '#d1d5db', sym: '≡'   },  /* gray-700 neutre (sémantique TXT raw) */
+          { ext: 'JSON', bg: '#06b6d4', fg: '#ffffff', sym: '{}'  },  /* brand-b2 aqua */
+          { ext: 'MD',   bg: '#2563eb', fg: '#ffffff', sym: '#'   }   /* brand-b1 blue */
         ]
       };
     }
@@ -1320,8 +1348,8 @@
     function usersModeData() {
       return {
         MAX: 20, count: 1, cycle: 0, _iv: null,
-        /* Uniquement brand-b1 / brand-b2 / brand-b3 + déclinaisons */
-        USER_COLORS: ['#c026d3', '#06b6d4', '#2563eb', '#a21caf', '#0891b2'],
+        /* EXCLUSIVEMENT brand-b1 / brand-b2 / brand-b3 (palette canonique stricte) */
+        USER_COLORS: ['#c026d3', '#06b6d4', '#2563eb'],
         init() {
           if (this._iv) clearInterval(this._iv);
           this.count = 1;
diff --git a/tests/test_marketing_secondary_pages.py b/tests/test_marketing_secondary_pages.py
index 3b0d917..4c908d3 100644
--- a/tests/test_marketing_secondary_pages.py
+++ b/tests/test_marketing_secondary_pages.py
@@ -254,6 +254,25 @@ def test_fonctionnalites_how_it_works_reactor_section():
     assert 'cloud' in body, "Missing stats row 'cloud'"
     assert 'Voir une démo' in body, "Missing demo CTA link"
 
+    # ── HYPER PRO polish 2026-04-29 (audit purge non-brand hex + uniformization) ──
+    # Brand canonical palette ONLY in JS color tables (no purple-600/cyan-700/blue-700/...)
+    js_section = body[body.find("function dictiaDashboard()"):body.find("</script>", body.find("function dictiaDashboard()"))]
+    forbidden_hex = ['#9333ea', '#1d4ed8', '#a21caf', '#0e7490', '#0891b2',
+                     '#1e40af', '#67e8f9', '#93c5fd', '#f5d0fe', '#e879f9',
+                     '#A78BFA', '#22D3EE', '#6B9FFF', '#34D399', '#F59E0B',
+                     '#7C3AED', '#5B21B6', '#065F46', '#1C3A5E']
+    for hx in forbidden_hex:
+        assert hx not in body, f"Forbidden non-brand hex {hx} found in fonctionnalites — must purge"
+
+    # Inner screen seam (effet "écran encastré")
+    assert 'dictia-phone-screen-seam' in body, "Missing inner screen seam (encastré effect)"
+    # Uniform feature info card — bg-white/[0.06] + accent border-left
+    assert 'bg-white/[0.06]' in body, "Missing uniform white/0.06 bg on feature card"
+    # Sovereignty bullets : icon dans cercle 20×20 brand-b3/[0.15]
+    assert 'bg-brand-b3/[0.15]' in body, "Missing brand-b3 circle bg on sovereignty bullets"
+    # Performance metrics : 3 cells with grad-text for 0ms / 24/7
+    assert 'grad-text' in body, "Missing grad-text on metrics"
+
 
 def test_fonctionnalites_export_formats_section():
     client = app.test_client()