From 199b315bc27821ec1b83aaea802c294c708413b0 Mon Sep 17 00:00:00 2001
From: Allison <allison@innova-ai.net>
Date: Wed, 29 Apr 2026 10:22:57 -0400
Subject: [PATCH] =?UTF-8?q?fix(marketing):=20phone=20container=20width=20s?=
 =?UTF-8?q?table=20+=20palette=20brand=20canonique=20(b1/b2/b3)=20sur=20Co?=
 =?UTF-8?q?mment=20=C3=A7a=20marche?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Phone shell hauteur/largeur FIXES (280×580px) — bezel ne reflow plus
  selon le mode actif. Zone TOP 96px / MIDDLE 374px overflow:hidden /
  BOTTOM 90px. Chaque mode a maintenant w-full h-full overflow-hidden.
- Modes 1/2/3/6/0 : scroll interne invisible (.dictia-mode-scroll +
  fade gradient bottom .dictia-fade-bottom) pour contenu long.
- Suppression mécanique des hex non-brand : #A78BFA, #22D3EE, #6B9FFF,
  #34D399, #F59E0B, #1E6FD9, #7C3AED, #5B21B6, #065F46, #1C3A5E,
  #D93E1E, #C4B5FD, #DDD6FE, etc. — remplacés par brand-b1 (#2563eb),
  brand-b2 (#06b6d4), brand-b3 (#c026d3) et leurs déclinaisons
  (#0891b2, #1d4ed8, #a21caf, #1e40af, #0e7490, #9333ea, #e879f9).
- FEATURES / CONVO / LANG_COLORS / USER_COLORS / FILE_TYPES réalignés
  sur palette officielle. Sophie=b2, Marc=b1, Julie=b3.
- Status sémantiques conservés : #EF4444 (REC dot), #10b981 (online
  status / 7 FORMATS PRÊTS / LOCAL badge), #dc2626 (PDF file icon).
- font-family:monospace inline → font-mono Tailwind (JetBrains Mono).
- Mobile : phone reste à 280px fixe, scale 0.92 en dessous de 320px.
- Eyebrow + connecting line gradient SVG en couleurs brand.

Tests : 9/9 fonctionnalites passent. 2 échecs préexistants sur
/conformite (SOC 2 hedge / AGPL section) sans rapport avec ce fix.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 templates/marketing/fonctionnalites.html | 373 ++++++++++++-----------
 1 file changed, 199 insertions(+), 174 deletions(-)

diff --git a/templates/marketing/fonctionnalites.html b/templates/marketing/fonctionnalites.html
index d7db458..7df6386 100644
--- a/templates/marketing/fonctionnalites.html
+++ b/templates/marketing/fonctionnalites.html
@@ -398,6 +398,20 @@
     /* Hide scrollbar mobile pills */
     .dictia-hide-scrollbar::-webkit-scrollbar { display: none; }
 
+    /* ============ INTERNAL SCROLL (modes content) — scrollbar invisible ============ */
+    .dictia-mode-scroll {
+      overflow-y: auto;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+    .dictia-mode-scroll::-webkit-scrollbar { display: none; }
+
+    /* Fade gradient bottom (suggest scroll continuation) */
+    .dictia-fade-bottom {
+      mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
+      -webkit-mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
+    }
+
     /* ============ MOBILE OPTIMIZATIONS ============ */
     @media (max-width: 767px) {
       .dictia-statusbar,
@@ -409,6 +423,12 @@
       .dictia-bg-orbs,
       .dictia-bg-grid,
       .dictia-wave-bar { display: none !important; }
+
+      /* Phone reste à largeur fixe — pas de stretch, scale léger si écran très étroit */
+      .dictia-phone-wrap { width: 280px !important; max-width: 100% !important; }
+    }
+    @media (max-width: 320px) {
+      .dictia-phone-wrap { transform: scale(0.92); transform-origin: top center; }
     }
 
     @media (prefers-reduced-motion: reduce) {
@@ -425,14 +445,14 @@
   {# Decorative background : grid + floating orbs (desktop 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(34,211,238,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(167,139,250,0.18) 0%, transparent 70%);filter:blur(70px);"></div>
+    <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>
 
   <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(34,211,238,0.10), rgba(167,139,250,0.10)); border:1px solid rgba(167,139,250,0.18);">
+         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"/>
@@ -476,8 +496,8 @@
         <svg width="160" height="2" viewBox="0 0 160 2" preserveAspectRatio="none">
           <defs>
             <linearGradient id="dictia-connecting-grad" x1="0%" y1="0%" x2="100%" y2="0%">
-              <stop offset="0%" stop-color="#22D3EE" stop-opacity="0.6"/>
-              <stop offset="100%" stop-color="#A78BFA" stop-opacity="0.6"/>
+              <stop offset="0%" stop-color="#06b6d4" stop-opacity="0.6"/>
+              <stop offset="100%" stop-color="#c026d3" stop-opacity="0.6"/>
             </linearGradient>
           </defs>
           <line x1="0" y1="1" x2="160" y2="1" stroke="url(#dictia-connecting-grad)"
@@ -486,18 +506,19 @@
       </div>
 
       {# ─────────── ZONE CENTER : Phone container ─────────── #}
-      <div class="flex flex-col items-center gap-3 lg:w-[290px] flex-shrink-0 relative z-10">
+      <div class="flex flex-col items-center gap-3 lg:w-[280px] flex-shrink-0 relative z-10">
 
-        {# Phone shell (bezel, glow ring, drop shadow) #}
-        <div class="relative w-full max-w-[290px] mx-auto">
+        {# Phone shell (bezel, glow ring, drop shadow) — LARGEUR/HAUTEUR FIXES pour stabilité du cadre #}
+        <div class="relative mx-auto dictia-phone-wrap" style="width: 280px; max-width: 100%;">
 
           {# External glow ring (pulse) #}
           <div class="absolute -inset-2 pointer-events-none dictia-phone-glow-ring"
                :style="`border-radius: 52px; background: radial-gradient(ellipse 80% 90% at 50% 50%, ${activeColor}28 0%, transparent 60%); transition: background 0.4s;`"
                aria-hidden="true"></div>
 
-          <div class="dictia-phone-shell w-full flex flex-col overflow-hidden relative"
-               :style="`border: 1.5px solid ${activeColor}40; background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px ${activeColor}30, inset 0 0 32px ${activeColor}10; min-height: 540px; transition: border-color 0.4s, box-shadow 0.4s;`">
+          <div class="dictia-phone-shell flex flex-col overflow-hidden relative"
+               style="width: 280px; height: 580px;"
+               :style="`border: 1.5px solid ${activeColor}40; background: rgba(8,12,24,0.88); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 12px 32px -8px ${activeColor}30, inset 0 0 32px ${activeColor}10; transition: border-color 0.4s, box-shadow 0.4s;`">
 
             {# Ambient color tint overlay #}
             <div class="absolute inset-0 pointer-events-none"
@@ -510,8 +531,8 @@
                  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"
-                 style="height:20px;font-family:ui-monospace,monospace;color:rgba(255,255,255,0.55);font-size:9px;font-weight:600;"
+            <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;"
                  aria-hidden="true">
               <span>9:41</span>
               <div class="flex items-center gap-1">
@@ -545,9 +566,9 @@
               <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) #}
-            <div class="flex flex-col items-center justify-center gap-2 relative z-10"
-                 style="height: 100px; padding-top: 24px; border-bottom: 1px solid rgba(255,255,255,0.06);">
+            {# 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);">
               <img src="/static/images/dictia-logo-nom.png" alt="DictIA"
                    style="width: 80px; height: 24px; object-fit: contain; opacity: 0.75;">
               <div class="relative" style="width:36px;height:36px;">
@@ -566,72 +587,73 @@
               </div>
             </div>
 
-          {# MIDDLE : 6 modes (1=Transcription, 2=Diarisation, 3=Langues, 4=Exports, 5=Users, 6=Share, 0=IA chat) #}
-          <div class="flex-1 relative z-10" style="min-height: 260px;"
+          {# MIDDLE : 6 modes — hauteur fixe 374px, overflow hidden strict #}
+          <div class="dictia-phone-middle relative z-10 flex-shrink-0" style="height: 374px; overflow: hidden;"
                role="status" aria-live="polite" aria-atomic="true">
 
             {# 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" x-data="trModeData()" x-init="init()">
+              <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"
-                     style="background:rgba(34,211,238,0.06);border-bottom:1px solid rgba(34,211,238,0.12);">
+                <div class="flex items-center justify-between px-2.5 py-1.5 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(34,211,238,0.80);" 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(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"/>
                     </svg>
-                    <span style="font-size:6.5px;font-family:monospace;color:rgba(255,255,255,0.55);">reunion-jan14.mp3</span>
+                    <span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.55);">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 style="font-size:6px;font-family:monospace;color:rgba(239,68,68,0.85);letter-spacing:0.08em;font-weight:700;">REC</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>
                 </div>
 
-                {# Waveform animée (8 bars) #}
-                <div class="flex items-end justify-center gap-0.5 px-3 py-2" style="height:24px;" aria-hidden="true">
-                  <div class="dictia-wave-bar" style="width:2px;height:14px;background:#22D3EE;animation-delay:0s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:18px;background:#22D3EE;animation-delay:0.1s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:10px;background:#22D3EE;animation-delay:0.2s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:20px;background:#22D3EE;animation-delay:0.05s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:12px;background:#22D3EE;animation-delay:0.25s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:16px;background:#22D3EE;animation-delay:0.15s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:8px;background:#22D3EE;animation-delay:0.3s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:14px;background:#22D3EE;animation-delay:0.08s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:18px;background:#22D3EE;animation-delay:0.22s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:10px;background:#22D3EE;animation-delay:0.18s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:14px;background:#22D3EE;animation-delay:0s;"></div>
-                  <div class="dictia-wave-bar" style="width:2px;height:6px;background:#22D3EE;animation-delay:0.12s;"></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>
                 </div>
 
-                <div x-show="phase === 'upload'" class="flex-1 flex flex-col items-center justify-center gap-3 px-4">
+                <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(34,211,238,0.12); border: 1.5px solid rgba(34,211,238,0.40);">
+                         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:#22D3EE;" aria-hidden="true">
+                      <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">
                         <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 style="font-size:5.5px;font-family:monospace;color:rgba(34,211,238,0.70);letter-spacing:0.06em;">MP3</span>
+                      <span class="font-mono" style="font-size:5.5px;color:rgba(6,182,212,0.70);letter-spacing:0.06em;">MP3</span>
                     </div>
                   </div>
                   <div class="w-full flex flex-col gap-1">
                     <div class="flex justify-between">
-                      <span style="font-size:6.5px;font-family:monospace;color:rgba(34,211,238,0.65);" x-text="progress < 100 ? 'Envoi en cours…' : 'Prêt ✓'"></span>
-                      <span style="font-size:6.5px;font-family:monospace;color:rgba(34,211,238,0.50);"><span x-text="progress"></span>%</span>
+                      <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>
                     {# Double progress bar (track + active with glow) #}
-                    <div class="w-full rounded-full overflow-hidden relative" style="height:4px;background-color:rgba(34,211,238,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, #22D3EE, #06B6D4); box-shadow: 0 0 6px rgba(34,211,238,0.6); transition: width 60ms linear;`"></div>
+                    <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>
                     </div>
                   </div>
                 </div>
-                <div x-show="phase === 'transcribing'" class="flex-1 p-3 overflow-y-auto flex flex-col justify-start">
-                  <p class="font-mono leading-relaxed break-words" style="font-size:9px;color:rgba(34,211,238,0.92);background:rgba(34,211,238,0.04);padding:4px 6px;border-radius:6px;border-left:2px solid rgba(34,211,238,0.4);">
-                    <span x-text="words.slice(0, n + 1).join(' ')"></span><span class="dictia-blink ml-px" style="color:#22D3EE;display:inline-block;width:3px;background:#22D3EE;height:9px;vertical-align:middle;">&nbsp;</span>
+                {# 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>
                 </div>
               </div>
@@ -639,24 +661,24 @@
 
             {# Mode 2 : Diarisation (conversation Sophie/Marc/Julie) #}
             <template x-if="displayMode === 2">
-              <div class="dictia-mode-fade w-full h-full flex flex-col" x-data="diaModeData()" x-init="init()">
+              <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"
-                     style="background:rgba(107,159,255,0.06);border-bottom:1px solid rgba(107,159,255,0.12);">
+                <div class="flex items-center justify-between px-2.5 py-1.5 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,#22D3EE,#0891B2);border:1.5px solid rgba(8,12,24,0.9);color:#fff;">S</div>
+                           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,#6B9FFF,#3B82F6);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">M</div>
+                           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,#F59E0B,#D97706);border:1.5px solid rgba(8,12,24,0.9);color:#fff;margin-left:-5px;">J</div>
+                           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>
-                    <span style="font-size:6.5px;font-family:monospace;color:rgba(255,255,255,0.65);">Réunion · 3 participants</span>
+                    <span class="font-mono" style="font-size:6.5px;color:rgba(255,255,255,0.65);">Réunion · 3 participants</span>
                   </div>
-                  <span class="dictia-rec-dot" style="width:5px;height:5px;border-radius:50%;background:#34D399;"></span>
+                  <span class="dictia-rec-dot" style="width:5px;height:5px;border-radius:50%;background:#10b981;"></span>
                 </div>
-                <div class="flex-1 flex flex-col justify-end gap-1.5 p-2 overflow-hidden">
+                <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}`">
                     <div class="dictia-msg-in flex items-start gap-1.5">
                       <div class="rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5"
@@ -689,14 +711,15 @@
 
             {# Mode 3 : 99+ langues (grille 100 codes — ripple depuis centre, highlight aléatoire) #}
             <template x-if="displayMode === 3">
-              <div class="dictia-mode-fade w-full h-full flex flex-col" x-data="langModeData()">
+              <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"
-                     style="background:rgba(34,211,238,0.06);border-bottom:1px solid rgba(34,211,238,0.12);">
-                  <span class="dictia-dot-pulse" style="width:5px;height:5px;border-radius:50%;background:#22D3EE;"></span>
-                  <span style="font-size:7px;font-family:monospace;color:rgba(34,211,238,0.85);letter-spacing:0.16em;font-weight:700;">DÉTECTION AUTOMATIQUE</span>
+                <div class="flex items-center justify-center gap-1.5 py-1.5 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>
                 </div>
-                <div class="flex-1 overflow-hidden" style="padding:6px 5px;">
+                {# 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;">
                     <template x-for="(lang, i) in LANGS" :key="lang">
                       <span class="font-mono font-bold text-center rounded dictia-spring"
@@ -707,12 +730,12 @@
                   </div>
                 </div>
                 {# Counter live en bas #}
-                <div class="flex items-center justify-between px-2.5 py-1.5 mt-auto"
-                     style="background:rgba(34,211,238,0.04);border-top:1px solid rgba(34,211,238,0.10);">
-                  <span class="font-mono dictia-fade-y" style="font-size:6.5px;color:rgba(34,211,238,0.75);letter-spacing:0.06em;animation-delay:1.4s;">
+                <div class="flex items-center justify-between px-2.5 py-1.5 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>
-                  <span class="font-mono font-bold dictia-fade-y" style="font-size:7.5px;color:#22D3EE;letter-spacing:0.1em;animation-delay:1.4s;">
+                  <span class="font-mono font-bold dictia-fade-y" style="font-size:7.5px;color:#06b6d4;letter-spacing:0.1em;animation-delay:1.4s;">
                     99+ langues détectées
                   </span>
                 </div>
@@ -721,15 +744,15 @@
 
             {# Mode 4 : Exports (grid 4x2 + files détaillés + checkmark) #}
             <template x-if="displayMode === 4">
-              <div class="dictia-mode-fade w-full h-full flex flex-col" x-data="expModeData()">
+              <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"
-                     style="background:rgba(107,159,255,0.06);border-bottom:1px solid rgba(107,159,255,0.12);">
-                  <span style="font-size:7px;font-family:monospace;color:rgba(107,159,255,0.85);letter-spacing:0.14em;font-weight:700;">EXPORTS DISPONIBLES</span>
+                <div class="flex items-center justify-between px-2.5 py-1.5 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>
                 </div>
 
                 {# Grid 4×2 #}
-                <div class="grid grid-cols-4 gap-2 p-3 flex-1 content-center justify-items-center">
+                <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"
@@ -749,38 +772,38 @@
                   </template>
                 </div>
 
-                {# Subtitle dynamique avec checkmark #}
-                <div class="flex items-center justify-center gap-1.5 px-2.5 py-1.5 mt-auto dictia-fade-y"
-                     style="background:rgba(52,211,153,0.06);border-top:1px solid rgba(52,211,153,0.14);animation-delay:0.9s;">
-                  <span style="width:11px;height:11px;border-radius:50%;background:#34D399;display:inline-flex;align-items:center;justify-content:center;">
+                {# 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"
+                     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">
                       <polyline points="20 6 9 17 4 12"/>
                     </svg>
                   </span>
-                  <span style="font-size:7px;font-family:monospace;color:#34D399;letter-spacing:0.08em;font-weight:700;">7 FORMATS PRÊTS</span>
+                  <span class="font-mono" style="font-size:7px;color:#10b981;letter-spacing:0.08em;font-weight:700;">7 FORMATS PRÊTS</span>
                 </div>
               </div>
             </template>
 
             {# 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" x-data="usersModeData()" x-init="init()">
+              <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"
-                     style="background:rgba(167,139,250,0.06);border-bottom:1px solid rgba(167,139,250,0.12);">
-                  <span style="font-size:7px;font-family:monospace;color:rgba(167,139,250,0.75);letter-spacing:0.14em;font-weight:700;">UTILISATEURS</span>
-                  <span class="font-mono font-black" style="font-size:11px;color:#A78BFA;letter-spacing:0.05em;" x-text="count.toString().padStart(2, '0')"></span>
-                  <span style="font-size:7px;font-family:monospace;color:rgba(167,139,250,0.45);">/ ∞</span>
+                <div class="flex items-center justify-center gap-1.5 py-1.5 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>
                 </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">
-                  {# SVG connecting lines (desktop only via data attr) #}
+                <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;">
-                    <line x1="20%" y1="30%" x2="50%" y2="50%" stroke="#A78BFA" stroke-width="0.5" stroke-dasharray="2 2"/>
-                    <line x1="80%" y1="30%" x2="50%" y2="50%" stroke="#22D3EE" stroke-width="0.5" stroke-dasharray="2 2"/>
-                    <line x1="20%" y1="70%" x2="50%" y2="50%" stroke="#34D399" stroke-width="0.5" stroke-dasharray="2 2"/>
-                    <line x1="80%" y1="70%" x2="50%" y2="50%" stroke="#6B9FFF" stroke-width="0.5" stroke-dasharray="2 2"/>
+                    <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="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"
@@ -798,16 +821,16 @@
 
             {# 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">
+              <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"
-                     style="background:rgba(52,211,153,0.06);border-bottom:1px solid rgba(52,211,153,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:#34D399;" aria-hidden="true">
+                <div class="flex items-center gap-1 px-2.5 py-1.5 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">
                     <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 style="font-size:6.5px;font-family:monospace;color:rgba(255,255,255,0.55);">Mes&nbsp;dossiers</span>
+                  <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 style="font-size:6.5px;font-family:monospace;color:#34D399;font-weight:700;">Réunions</span>
+                  <span class="font-mono" style="font-size:6.5px;color:#06b6d4;font-weight:700;">Réunions</span>
                   {# Toolbar mini #}
                   <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);">
@@ -822,32 +845,32 @@
                   </div>
                 </div>
 
-                <div class="flex-1 flex flex-col gap-1.5" style="padding:6px 7px;">
+                <div class="flex-1 flex flex-col gap-1.5 dictia-mode-scroll dictia-fade-bottom" style="padding:6px 7px;">
                   {# Folders #}
                   <div class="flex gap-1 flex-wrap">
-                    <template x-for="(f, fi) in [{name:'Réunions',color:'#22D3EE',count:12},{name:'Entretiens',color:'#6B9FFF',count:7},{name:'Formations',color:'#34D399',count:24}]" :key="f.name">
+                    <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"
                            :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">
                           <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 style="font-size:6.5px;font-family:monospace;" :style="`color:${f.color};`" x-text="f.name"></span>
-                        <span style="font-size:6px;font-family:monospace;" :style="`color:${f.color}88;`" x-text="f.count"></span>
+                        <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>
                       </div>
                     </template>
                   </div>
                   {# Tags #}
                   <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"
-                            style="font-size:5.5px;padding:2px 4px;background-color:rgba(52,211,153,0.10);border:1px solid rgba(52,211,153,0.25);color:#34D399;font-family:monospace;"
+                      <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;"
                             :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">
-                    <template x-for="(file, fi2) in [{name:'CR-Réunion-Jan14',folder:'Réunions',color:'#22D3EE'},{name:'Entretien-Sophie',folder:'Entretiens',color:'#6B9FFF'},{name:'Formation-RGPD',folder:'Formations',color:'#34D399'}]" :key="file.name">
+                    <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">
@@ -855,7 +878,7 @@
                           <polyline points="14 2 14 8 20 8"/>
                         </svg>
                         <div class="flex-1 min-w-0">
-                          <p class="truncate" style="font-size:7px;font-family:monospace;color:rgba(255,255,255,0.78);" x-text="file.name"></p>
+                          <p class="truncate font-mono" style="font-size:7px;color:rgba(255,255,255,0.78);" x-text="file.name"></p>
                         </div>
                         <span class="rounded font-mono shrink-0"
                               style="font-size:5.5px;padding:1px 4px;"
@@ -870,8 +893,8 @@
                     </template>
                   </div>
                 </div>
-                <p class="text-center font-mono mt-auto dictia-fade-y px-2 py-1"
-                   style="font-size:6.5px;color:rgba(52,211,153,0.65);letter-spacing:0.08em;background:rgba(52,211,153,0.04);border-top:1px solid rgba(52,211,153,0.10);animation-delay:1.2s;">
+                <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;">
                   partage sécurisé · recherche plein texte
                 </p>
               </div>
@@ -880,34 +903,34 @@
             {# 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"
-                     style="border-bottom: 1px solid rgba(167,139,250,0.14); background-color: rgba(167,139,250,0.05);">
-                  <div class="rounded-full flex-shrink-0 dictia-dot-pulse" style="width:6px;height:6px;background-color:#34D399;"></div>
-                  <span style="font-size:6px;font-family:monospace;color:rgba(52,211,153,0.85);letter-spacing:0.14em;">MISTRAL 7B · LOCAL</span>
+                <div class="flex items-center justify-center gap-1.5 py-1.5 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>
                 </div>
-                <div class="flex-1 flex flex-col justify-end gap-1.5 p-2 overflow-hidden">
+                <div class="flex-1 flex flex-col justify-end gap-1.5 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%;"
-                           :style="msg.role === 'user' ? 'background-color:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);' : 'background-color:rgba(167,139,250,0.12);border:1px solid rgba(167,139,250,0.30);'">
+                           :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:#C4B5FD;'">
-                          <span x-text="msg.text"></span><span x-show="msg.role === 'bot' && mi === msgs.length - 1" class="dictia-blink ml-px" style="color:#A78BFA;">▌</span>
+                           :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>
                       </div>
                     </div>
                   </template>
                 </div>
-                <div class="flex items-center justify-center gap-1 py-1.5" style="border-top:1px solid rgba(167,139,250,0.08);">
-                  <span style="font-size:5.5px;font-family:monospace;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 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>
               </div>
             </template>
           </div>
 
-          {# BOTTOM : 6 feature icons agrandis (28×28) + label + tab indicator + Auto pill #}
-          <div class="relative flex flex-col items-center justify-center gap-2 z-10"
-               style="height: 110px; border-top: 1px solid rgba(255,255,255,0.06); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.30));">
+          {# 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">
               <template x-for="i in [1,2,3,4,5,6]" :key="i">
                 <button type="button" @click="handleManualSelect(i)"
@@ -918,7 +941,7 @@
                   <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;`">
                     <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-medium mt-0.5 leading-none uppercase tracking-wide"
+                  <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)'};`"
                         x-text="featureShortLabel(i)"></span>
                   {# Tab indicator bottom border #}
@@ -932,16 +955,16 @@
             <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(52,211,153,0.10);border:1px solid rgba(52,211,153,0.25);">
-                  <span class="dictia-auto-pulse" style="width:5px;height:5px;border-radius:50%;background:#34D399;"></span>
-                  <span style="font-size:7px;font-family:monospace;color:#34D399;letter-spacing:0.12em;font-weight:700;">AUTO</span>
+                      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>
               </template>
               <template x-if="isManual">
                 <span class="inline-flex flex-col items-center gap-0.5">
-                  <span style="font-size:7.5px;font-family:monospace;color:rgba(255,255,255,0.55);" x-text="'Auto reprend bientôt'"></span>
+                  <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="block dictia-countdown-fill h-full" :key="selectedFeature" style="background:linear-gradient(90deg,#22D3EE,#A78BFA);"></span>
+                    <span class="block dictia-countdown-fill h-full" :key="selectedFeature" style="background:linear-gradient(90deg,#06b6d4,#c026d3);"></span>
                   </span>
                 </span>
               </template>
@@ -951,7 +974,7 @@
         </div>{# /phone wrapper (glow ring) #}
 
         {# Feature info card sous le phone — premium look avec icon container + hover lift #}
-        <div style="min-height:64px;" class="w-full max-w-[290px] mt-3">
+        <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;`">
             {# Badge top-right #}
@@ -1002,30 +1025,30 @@
       <div class="flex flex-col gap-3 w-full lg:w-[320px] flex-shrink-0 relative z-10">
 
         <div class="mb-1 flex items-center gap-2">
-          <span class="block w-1 h-5 rounded-full" style="background:linear-gradient(180deg,#22D3EE,#A78BFA);" aria-hidden="true"></span>
+          <span class="block w-1 h-5 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(167,139,250,0.95);">Fonctions clés</p>
+            <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>
           </div>
         </div>
 
-        {# IA Mistral 7B premium card #}
+        {# IA Mistral 7B premium card — couleurs brand-b3 (fuchsia officiel) #}
         <div class="relative rounded-xl overflow-hidden"
-             style="border:1.5px solid rgba(167,139,250,0.32);background-color:rgba(8,12,24,0.92);box-shadow:0 0 32px rgba(167,139,250,0.18), 0 12px 40px -10px rgba(0,0,0,0.5);">
-          {# Ambient purple glow #}
+             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);">
+          {# 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(167,139,250,0.22) 0%, transparent 70%);"
+               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">
             <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(167,139,250,0.55) 0%, transparent 70%);"
+                   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(167,139,250,0.30), rgba(167,139,250,0.12));border:1.5px solid rgba(167,139,250,0.50);box-shadow:0 4px 12px rgba(167,139,250,0.20);">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:20px;height:20px;color:#C4B5FD;position:relative;z-index:1;" aria-hidden="true">
+                   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">
                   <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>
@@ -1037,10 +1060,10 @@
               </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(167,139,250,0.22);color:#C4B5FD;border:1px solid rgba(167,139,250,0.45);letter-spacing:0.08em;">MISTRAL 7B</span>
+                      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(52,211,153,0.14);color:#34D399;border:1px solid rgba(52,211,153,0.40);letter-spacing:0.12em;">
-                  <span class="dictia-dot-pulse" style="width:4px;height:4px;border-radius:50%;background:#34D399;"></span>
+                      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>
                   LOCAL
                 </span>
               </div>
@@ -1049,34 +1072,34 @@
           </div>
 
           {# Divider #}
-          <div style="height:1px;background:linear-gradient(90deg, transparent, rgba(167,139,250,0.30), transparent);" aria-hidden="true"></div>
+          <div style="height:1px;background:linear-gradient(90deg, transparent, rgba(192,38,211,0.30), transparent);" aria-hidden="true"></div>
 
           {# Performance metrics 3 cells #}
           <div class="relative grid grid-cols-3 gap-0">
-            <div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(167,139,250,0.10);">
+            <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(167,139,250,0.65);">latence</p>
+              <p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(192,38,211,0.65);">latence</p>
             </div>
-            <div class="text-center py-2.5 px-1" style="border-right:1px solid rgba(167,139,250,0.10);">
-              <p class="font-mono font-black text-base leading-none" style="color:#34D399;">100&thinsp;%</p>
-              <p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(167,139,250,0.65);">privé</p>
+            <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>
             <div class="text-center py-2.5 px-1">
-              <p class="font-mono font-black text-base leading-none" style="color:#C4B5FD;">24/7</p>
-              <p class="text-[8px] mt-1 uppercase tracking-wider" style="color:rgba(167,139,250,0.65);">dispo</p>
+              <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>
           </div>
 
           {# Divider #}
-          <div style="height:1px;background:linear-gradient(90deg, transparent, rgba(167,139,250,0.22), transparent);" aria-hidden="true"></div>
+          <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">
             <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(167,139,250,0.14);border:1px solid rgba(167,139,250,0.30);"
+                    style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
                     aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px;color:#C4B5FD;">
+                <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;">
                   <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>
@@ -1085,9 +1108,9 @@
             </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(167,139,250,0.14);border:1px solid rgba(167,139,250,0.30);"
+                    style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
                     aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:10px;height:10px;color:#C4B5FD;">
+                <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;">
                   <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>
@@ -1095,9 +1118,9 @@
             </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(167,139,250,0.14);border:1px solid rgba(167,139,250,0.30);"
+                    style="width:18px;height:18px;background:rgba(192,38,211,0.14);border:1px solid rgba(192,38,211,0.30);"
                     aria-hidden="true">
-                <svg viewBox="0 0 24 24" fill="currentColor" stroke="none" style="width:10px;height:10px;color:#C4B5FD;"><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:10px;height:10px;opacity:0.85;"><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>
             </div>
@@ -1132,13 +1155,13 @@
     function dictiaDashboard() {
       return {
         FEATURES: [
-          { idx: 0, title: 'IA intégrée', subtitle: "Résumé, actions, Q&R", color: '#A78BFA', badge: 'Mistral 7B' },
-          { idx: 1, title: 'Transcription', subtitle: 'Parole → texte en temps réel', color: '#22D3EE', badge: 'Whisper AI' },
-          { idx: 2, title: 'Diarisation', subtitle: 'Identification des locuteurs', color: '#6B9FFF', badge: null },
-          { idx: 3, title: '99+ langues', subtitle: 'Détection automatique', color: '#22D3EE', badge: null },
-          { idx: 4, title: 'Exports', subtitle: 'DOCX, SRT, JSON, PDF', color: '#6B9FFF', badge: null },
-          { idx: 5, title: 'Utilisateurs illimités', subtitle: 'Toute votre équipe', color: '#A78BFA', badge: 'Illimité' },
-          { idx: 6, title: 'Partage & Classement', subtitle: 'Dossiers, tags, recherche', color: '#34D399', badge: null }
+          { idx: 0, title: 'IA intégrée', subtitle: "Résumé, actions, Q&R", color: '#c026d3', badge: 'Mistral 7B' },        /* brand-b3 */
+          { idx: 1, title: 'Transcription', subtitle: 'Parole → texte en temps réel', color: '#06b6d4', badge: 'Whisper AI' }, /* brand-b2 */
+          { idx: 2, title: 'Diarisation', subtitle: 'Identification des locuteurs', color: '#2563eb', badge: null },          /* brand-b1 */
+          { idx: 3, title: '99+ langues', subtitle: 'Détection automatique', color: '#06b6d4', badge: null },                  /* brand-b2 */
+          { idx: 4, title: 'Exports', subtitle: 'DOCX, SRT, JSON, PDF', color: '#2563eb', badge: null },                       /* brand-b1 */
+          { idx: 5, title: 'Utilisateurs illimités', subtitle: 'Toute votre équipe', color: '#c026d3', badge: 'Illimité' },    /* brand-b3 */
+          { idx: 6, title: 'Partage & Classement', subtitle: 'Dossiers, tags, recherche', color: '#06b6d4', badge: null }      /* brand-b2 */
         ],
         selectedFeature: 1,
         isManual: false,
@@ -1222,12 +1245,12 @@
     function diaModeData() {
       return {
         CONVO: [
-          { s: "Sophie", c: "#22D3EE", t: "La réunion commence à 9h." },
-          { s: "Marc",   c: "#6B9FFF", t: "J'ai les chiffres du Q4 ici." },
-          { s: "Julie",  c: "#F59E0B", t: "Je propose reporter la démo." },
-          { s: "Sophie", c: "#22D3EE", t: "Accord — on vote là-dessus ?" },
-          { s: "Marc",   c: "#6B9FFF", t: "Approuvé à l'unanimité." },
-          { s: "Julie",  c: "#F59E0B", t: "Action : CR envoyé ce soir." }
+          { s: "Sophie", c: "#06b6d4", t: "La réunion commence à 9h." },              /* brand-b2 cyan */
+          { s: "Marc",   c: "#2563eb", t: "J'ai les chiffres du Q4 ici." },           /* brand-b1 blue */
+          { s: "Julie",  c: "#c026d3", t: "Je propose reporter la démo." },           /* brand-b3 fuchsia */
+          { s: "Sophie", c: "#06b6d4", t: "Accord — on vote là-dessus ?" },
+          { s: "Marc",   c: "#2563eb", t: "Approuvé à l'unanimité." },
+          { s: "Julie",  c: "#c026d3", t: "Action : CR envoyé ce soir." }
         ],
         shownCount: 1, cycle: 0, _iv: null,
         get startIdx() { return Math.max(0, this.shownCount - 4); },
@@ -1248,7 +1271,8 @@
     /* Mode 3 — Langues : grille 100 codes (ripple depuis centre + highlight aléatoire) */
     function langModeData() {
       return {
-        LANG_COLORS: ['#22D3EE','#6B9FFF','#A78BFA','#34D399','#F59E0B','#22D3EE','#6B9FFF','#A78BFA'],
+        /* Cycle uniquement entre brand-b1 / brand-b2 / brand-b3 + déclinaisons */
+        LANG_COLORS: ['#06b6d4','#2563eb','#c026d3','#0891b2','#1d4ed8','#a21caf','#06b6d4','#2563eb'],
         LANGS: [
           'FR','EN','ES','DE','PT','IT','NL','PL','ZH','JA',
           'KO','AR','RU','HI','TR','VI','TH','SV','DA','NO',
@@ -1281,13 +1305,13 @@
     function expModeData() {
       return {
         FILE_TYPES: [
-          { ext: 'DOCX', bg: '#1E6FD9', fg: '#fff',    sym: 'W'   },
-          { ext: 'PDF',  bg: '#D93E1E', fg: '#fff',    sym: 'PDF' },
-          { ext: 'SRT',  bg: '#7C3AED', fg: '#fff',    sym: 'CC'  },
-          { ext: 'VTT',  bg: '#5B21B6', fg: '#DDD6FE', sym: 'CC'  },
-          { ext: 'TXT',  bg: '#374151', fg: '#9CA3AF', sym: '≡'   },
-          { ext: 'JSON', bg: '#065F46', fg: '#34D399', sym: '{}'  },
-          { ext: 'MD',   bg: '#1C3A5E', fg: '#6B9FFF', sym: '#'   }
+          { 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) */
         ]
       };
     }
@@ -1296,7 +1320,8 @@
     function usersModeData() {
       return {
         MAX: 20, count: 1, cycle: 0, _iv: null,
-        USER_COLORS: ['#A78BFA', '#22D3EE', '#34D399', '#6B9FFF', '#F59E0B'],
+        /* Uniquement brand-b1 / brand-b2 / brand-b3 + déclinaisons */
+        USER_COLORS: ['#c026d3', '#06b6d4', '#2563eb', '#a21caf', '#0891b2'],
         init() {
           if (this._iv) clearInterval(this._iv);
           this.count = 1;