diff --git a/templates/marketing/fonctionnalites.html b/templates/marketing/fonctionnalites.html
index 457e006..118bcc8 100644
--- a/templates/marketing/fonctionnalites.html
+++ b/templates/marketing/fonctionnalites.html
@@ -249,11 +249,14 @@
   </div>
 </section>
 
-{# ===== COMMENT ÇA MARCHE — DASHBOARD HOLOGRAPHIQUE =====
-   Reproduction fidèle de DashboardHolographique (Website-Sanity/dictai-narrative.tsx).
-   Phone container central + 6 modes uniques (Transcription, Diarisation, Langues,
-   Exports, Users, Share) + IA Mistral 7B premium card + grid 6 features.
-   Auto-cycle 900ms (1→6→1, skip IA index 0). Click manuel → 4500ms isManual.
+{# ===== COMMENT ÇA MARCHE — DASHBOARD HOLOGRAPHIQUE (4 CATÉGORIES × 12 SOUS-MODES) =====
+   Reproduction fidèle de DashboardHolographique (Website-Sanity/dictai-narrative.tsx),
+   refonte stratégique 2026-04-29 : 4 catégories (Capture · IA · Distribution · Gouvernance)
+   regroupant 12 sous-modes (6 historiques + 6 nouveaux : Recording, Recherche, Résumé,
+   Intégrations, Audit, Loi 25, AGPL).
+   Phone container central + 12 sous-modes + IA Mistral 7B premium card + grid 4 catégories.
+   Auto-cycle : sous-mode toutes les 1100ms ; passage à catégorie suivante quand fin atteinte.
+   Click manuel → 4500ms isManual. Catégorie 4 (Gouvernance) inclut audit trail / Loi 25 / AGPL.
 #}
 <section class="bg-brand-bg py-20 relative overflow-hidden" aria-labelledby="how-it-works-title">
   <style>
@@ -461,8 +464,8 @@
 
   <div class="max-w-[1200px] mx-auto px-6 relative">
     <div class="text-center max-w-2xl mx-auto mb-10">
-      {# 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"
+      {# Eyebrow : typo NOIRE sur fond clair, dot pulse brand-b3 pour accent #}
+      <p class="eyebrow text-brand-navy 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
@@ -477,8 +480,8 @@
       {# Stats row #}
       <div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-3 text-brand-navy">
         <div class="flex items-center gap-2">
-          <span class="text-2xl font-black grad-text">6</span>
-          <span class="text-xs font-medium text-brand-navy/60 uppercase tracking-wider">modules</span>
+          <span class="text-2xl font-black grad-text">4</span>
+          <span class="text-xs font-medium text-brand-navy/60 uppercase tracking-wider">catégories · 6 modules</span>
         </div>
         <div class="w-px h-6 bg-brand-navy/15 hidden sm:block" aria-hidden="true"></div>
         <div class="flex items-center gap-2">
@@ -952,27 +955,279 @@
                 </div>
               </div>
             </template>
+
+            {# Mode 7 : Recording live (waveform live + minuteur + 3 boutons mic/syst/combiné) — Catégorie Capture #}
+            <template x-if="displayMode === 7">
+              <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="recModeData()" x-init="init()">
+                <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);">
+                  <span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(6,182,212,0.90);">ENREGISTREMENT LIVE</span>
+                  <div class="flex items-center gap-1">
+                    <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>
+                {# Minuteur central + waveform live #}
+                <div class="flex flex-col items-center justify-center gap-2 flex-1 px-3">
+                  <p class="font-mono font-black text-2xl text-white tabular-nums leading-none" x-text="time"></p>
+                  <p class="font-mono text-[9px] uppercase tracking-widest" style="color:rgba(6,182,212,0.65);">Microphone + Système</p>
+                  {# Waveform 24 barres dynamiques (pattern live aléatoire CSS-only) #}
+                  <div class="flex items-center justify-center gap-0.5 mt-1" style="height:36px;" aria-hidden="true">
+                    <template x-for="(h, bi) in BARS" :key="bi">
+                      <div class="dictia-wave-bar bg-brand-b2"
+                           :style="`width:2px;height:${h}px;animation-delay:${bi * 30}ms;`"></div>
+                    </template>
+                  </div>
+                  {# Estimation taille fichier #}
+                  <p class="font-mono text-[9px] mt-2" style="color:rgba(6,182,212,0.55);">~<span x-text="size"></span> Mo · auto-save 5 s</p>
+                </div>
+                {# 3 boutons sources (rouge mic / bleu système / violet combiné) — selon manuel #}
+                <div class="flex items-center justify-center gap-2 px-3 py-2 flex-shrink-0"
+                     style="background:rgba(8,12,24,0.5);border-top:1px solid rgba(255,255,255,0.06);">
+                  <span class="rounded-full flex items-center justify-center" style="width:18px;height:18px;background:rgba(239,68,68,0.30);border:1px solid rgba(239,68,68,0.55);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:9px;height:9px;" 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"/>
+                    </svg>
+                  </span>
+                  <span class="rounded-full flex items-center justify-center" style="width:18px;height:18px;background:rgba(37,99,235,0.30);border:1px solid rgba(37,99,235,0.55);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:9px;height:9px;" aria-hidden="true">
+                      <rect x="3" y="4" width="18" height="14" rx="2"/><line x1="9" y1="22" x2="15" y2="22"/>
+                    </svg>
+                  </span>
+                  <span class="rounded-full flex items-center justify-center dictia-spring" style="width:22px;height:22px;background:rgba(192,38,211,0.30);border:1.5px solid rgba(192,38,211,0.65);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="#c026d3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px;" aria-hidden="true">
+                      <path d="M12 2v8M5 7l7 7 7-7"/>
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            </template>
+
+            {# Mode 8 : Recherche sémantique (search bar + résultats highlight) — Catégorie Capture #}
+            <template x-if="displayMode === 8">
+              <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="searchModeData()" x-init="init()">
+                <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);">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px;color:rgba(6,182,212,0.90);" aria-hidden="true">
+                    <circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                  </svg>
+                  <span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(6,182,212,0.90);">RECHERCHE IA SÉMANTIQUE</span>
+                </div>
+                {# Search bar simulée (typing query) #}
+                <div class="px-3 py-2 flex-shrink-0">
+                  <div class="rounded flex items-center gap-2 px-2 py-1.5"
+                       style="background:rgba(255,255,255,0.06);border:1px solid rgba(6,182,212,0.30);">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:9px;height:9px;color:rgba(6,182,212,0.70);" aria-hidden="true">
+                      <circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+                    </svg>
+                    <p class="font-mono text-[10px] flex-1 truncate" style="color:rgba(255,255,255,0.85);">
+                      <span x-text="query"></span><span class="dictia-blink ml-px inline-block align-middle bg-brand-b2" style="width:2px;height:9px;">&nbsp;</span>
+                    </p>
+                  </div>
+                </div>
+                {# Résultats : 3 transcriptions matchées avec phrase highlight #}
+                <div class="flex-1 dictia-mode-scroll dictia-fade-bottom flex flex-col gap-1.5 px-3 pb-2">
+                  <template x-for="(r, ri) in results" :key="ri">
+                    <div class="rounded dictia-fade-y"
+                         :style="`background-color:${r.c}10;border:1px solid ${r.c}30;padding:6px 8px;animation-delay:${ri * 280 + 600}ms;`">
+                      <div class="flex items-center gap-1.5 mb-1">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="`color:${r.c};width:9px;height:9px;`" 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 class="font-mono text-[9px] font-bold" :style="`color:${r.c};`" x-text="r.title"></span>
+                        <span class="font-mono text-[9px] ml-auto" style="color:rgba(255,255,255,0.40);" x-text="r.score + ' %'"></span>
+                      </div>
+                      <p class="font-mono text-[9px] leading-snug" style="color:rgba(255,255,255,0.75);">
+                        … <span :style="`background:${r.c}28;color:${r.c};padding:0 2px;border-radius:2px;`" x-text="r.match"></span> …
+                      </p>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </template>
+
+            {# Mode 9 : Résumé + extraction d'événements (panel structuré décisions/actions/ICS) — Catégorie IA #}
+            <template x-if="displayMode === 9">
+              <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="summaryModeData()" x-init="init()">
+                <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 text-[10px] font-bold tracking-widest" style="color:rgba(37,99,235,0.90);">RÉSUMÉ EXÉCUTIF</span>
+                  <span class="font-mono text-[9px] text-brand-b1/60">Mistral Nemo 12B</span>
+                </div>
+                <div class="flex-1 dictia-mode-scroll dictia-fade-bottom flex flex-col gap-2 px-3 py-2">
+                  {# Décisions #}
+                  <div class="dictia-fade-y" style="animation-delay:200ms;">
+                    <p class="font-mono text-[9px] font-bold uppercase tracking-wider mb-1" style="color:rgba(37,99,235,0.85);">Décisions</p>
+                    <template x-for="(d, di) in decisions.slice(0, dShown)" :key="di">
+                      <div class="flex items-start gap-1.5 mb-0.5 dictia-fade-x">
+                        <span class="text-brand-b1 leading-none mt-0.5" aria-hidden="true">•</span>
+                        <p class="text-[10px] font-mono leading-snug" style="color:rgba(255,255,255,0.85);" x-text="d"></p>
+                      </div>
+                    </template>
+                  </div>
+                  {# Actions à suivre #}
+                  <div class="dictia-fade-y" style="animation-delay:900ms;" x-show="dShown >= decisions.length">
+                    <p class="font-mono text-[9px] font-bold uppercase tracking-wider mb-1" style="color:rgba(192,38,211,0.85);">Actions à suivre</p>
+                    <template x-for="(a, ai) in actions.slice(0, aShown)" :key="ai">
+                      <div class="flex items-start gap-1.5 mb-0.5 dictia-fade-x">
+                        <span class="rounded flex items-center justify-center mt-0.5 flex-shrink-0" style="width:9px;height:9px;background:rgba(192,38,211,0.30);border:1px solid rgba(192,38,211,0.55);" aria-hidden="true">
+                          <svg viewBox="0 0 24 24" fill="none" stroke="#c026d3" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="width:5px;height:5px;"><polyline points="20 6 9 17 4 12"/></svg>
+                        </span>
+                        <p class="text-[10px] font-mono leading-snug" style="color:rgba(255,255,255,0.85);" x-text="a"></p>
+                      </div>
+                    </template>
+                  </div>
+                  {# Événement ICS détecté (extraction calendrier) #}
+                  <div class="dictia-fade-y rounded mt-1 flex-shrink-0" x-show="aShown >= actions.length"
+                       style="background:rgba(6,182,212,0.10);border:1px solid rgba(6,182,212,0.30);padding:5px 8px;animation-delay:1800ms;">
+                    <div class="flex items-center gap-1.5 mb-0.5">
+                      <svg viewBox="0 0 24 24" fill="none" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:9px;height:9px;" aria-hidden="true">
+                        <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
+                      </svg>
+                      <span class="font-mono text-[9px] font-bold tracking-widest" style="color:rgba(6,182,212,0.95);">ÉVÉNEMENT DÉTECTÉ → ICS</span>
+                    </div>
+                    <p class="font-mono text-[9px]" style="color:rgba(255,255,255,0.70);">Comité de suivi · 21 janv. 14h00</p>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+            {# Mode 10 : Intégrations animées (logos hub Word, Outlook, Teams, Notion, Obsidian, Zapier...) — Catégorie Distribution #}
+            <template x-if="displayMode === 10">
+              <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="integModeData()" x-init="init()">
+                <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="dictia-dot-pulse block rounded-full" style="width:5px;height:5px;background:#c026d3;"></span>
+                  <span class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(192,38,211,0.90);">INTÉGRATIONS HUB</span>
+                </div>
+                {# Hub central + 8 logos en orbite (grille pour mobile, ring pour desktop) #}
+                <div class="flex-1 relative flex items-center justify-center px-3 py-2 overflow-hidden">
+                  {# Cercle central DictIA #}
+                  <div class="rounded-full flex items-center justify-center relative z-10"
+                       style="width:42px;height:42px;background:linear-gradient(135deg,rgba(6,182,212,0.25),rgba(192,38,211,0.25));border:1.5px solid rgba(192,38,211,0.50);box-shadow:0 0 20px rgba(192,38,211,0.30);">
+                    <span class="font-black text-[10px] grad-text">Dict</span>
+                  </div>
+                  {# 8 logos animés en cercle autour du hub (positions absolutes) #}
+                  <template x-for="(l, li) in LOGOS" :key="l.name">
+                    <div class="absolute dictia-spring rounded flex items-center justify-center"
+                         :style="`width:28px;height:28px;left:${l.x}%;top:${l.y}%;transform:translate(-50%,-50%);background:${l.c}18;border:1px solid ${l.c}45;animation-delay:${li * 90 + 200}ms;`">
+                      <span class="font-mono font-black text-[9px]" :style="`color:${l.c};`" x-text="l.short"></span>
+                    </div>
+                  </template>
+                  {# Lignes de connexion SVG hub→logos #}
+                  <svg class="absolute inset-0 pointer-events-none" width="100%" height="100%" aria-hidden="true" style="opacity:0.20;">
+                    <line x1="50%" y1="50%" x2="20%" y2="20%" stroke="#c026d3" stroke-width="0.5" stroke-dasharray="2 2"/>
+                    <line x1="50%" y1="50%" x2="80%" y2="20%" stroke="#06b6d4" stroke-width="0.5" stroke-dasharray="2 2"/>
+                    <line x1="50%" y1="50%" x2="20%" y2="80%" stroke="#2563eb" stroke-width="0.5" stroke-dasharray="2 2"/>
+                    <line x1="50%" y1="50%" x2="80%" y2="80%" stroke="#c026d3" stroke-width="0.5" stroke-dasharray="2 2"/>
+                  </svg>
+                </div>
+                <div class="flex items-center justify-center gap-3 px-3 py-2 flex-shrink-0"
+                     style="background:rgba(192,38,211,0.04);border-top:1px solid rgba(192,38,211,0.10);">
+                  <span class="font-mono text-[9px] tracking-wide" style="color:rgba(192,38,211,0.75);">REST · Webhook · OAuth2</span>
+                </div>
+              </div>
+            </template>
+
+            {# Mode 11 : Audit trail (event log horodaté qui a fait quoi) — Catégorie Gouvernance #}
+            <template x-if="displayMode === 11">
+              <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="auditModeData()" x-init="init()">
+                <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 text-[10px] font-bold tracking-widest" style="color:rgba(37,99,235,0.90);">AUDIT TRAIL</span>
+                  <span class="font-mono text-[9px]" style="color:rgba(37,99,235,0.55);">Loi 25 art. 8</span>
+                </div>
+                <div class="flex-1 dictia-mode-scroll dictia-fade-bottom flex flex-col gap-1 px-2 py-2">
+                  <template x-for="(e, ei) in events.slice(0, shown)" :key="ei">
+                    <div class="rounded flex items-start gap-1.5 dictia-fade-x"
+                         :style="`background-color:${e.c}0C;border-left:2px solid ${e.c};padding:3px 6px;animation-delay:${ei * 100}ms;`">
+                      <span class="font-mono text-[9px] font-bold mt-px" :style="`color:${e.c};`" x-text="e.t"></span>
+                      <span class="rounded font-mono text-[8px] font-bold tracking-widest mt-px"
+                            style="padding:0 4px;"
+                            :style="`background:${e.c}22;color:${e.c};`" x-text="e.lvl"></span>
+                      <p class="font-mono text-[9px] leading-snug flex-1" style="color:rgba(255,255,255,0.78);" x-text="e.msg"></p>
+                    </div>
+                  </template>
+                </div>
+                <div class="flex items-center justify-center gap-2 px-3 py-2 flex-shrink-0"
+                     style="background:rgba(16,185,129,0.06);border-top:1px solid rgba(16,185,129,0.14);">
+                  <span class="dictia-dot-pulse block rounded-full" style="width:5px;height:5px;background:#10b981;"></span>
+                  <span class="font-mono text-[9px] font-bold tracking-widest" style="color:rgba(16,185,129,0.90);">CONSENTEMENT TRACÉ · IMMUTABLE</span>
+                </div>
+              </div>
+            </template>
+
+            {# Mode 12 : Conformité Loi 25 + 9 ordres pros (badges défilants + EFVP CAI) — Catégorie Gouvernance #}
+            <template x-if="displayMode === 12">
+              <div class="dictia-mode-fade w-full h-full flex flex-col overflow-hidden" x-data="loi25ModeData()" x-init="init()">
+                <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);">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px;color:rgba(192,38,211,0.90);" aria-hidden="true">
+                    <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 class="font-mono text-[10px] font-bold tracking-widest" style="color:rgba(192,38,211,0.90);">CONFORMITÉ QUÉBEC</span>
+                </div>
+                <div class="flex-1 dictia-mode-scroll dictia-fade-bottom flex flex-col gap-1.5 px-3 py-2">
+                  {# Badges Loi 25 / Loi 96 / EFVP CAI / Cadre IA MCN #}
+                  <div class="flex flex-wrap gap-1.5">
+                    <template x-for="(b, bi) in BADGES" :key="b.t">
+                      <span class="rounded font-mono dictia-spring inline-flex items-center gap-1"
+                            :style="`background:${b.c}18;border:1px solid ${b.c}45;color:${b.c};padding:2px 6px;animation-delay:${bi * 110}ms;font-size:9px;font-weight:bold;`">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" style="width:7px;height:7px;" aria-hidden="true">
+                          <polyline points="20 6 9 17 4 12"/>
+                        </svg>
+                        <span x-text="b.t"></span>
+                      </span>
+                    </template>
+                  </div>
+                  {# 9 ordres pros mappés #}
+                  <p class="font-mono text-[9px] font-bold uppercase tracking-wider mt-1" style="color:rgba(192,38,211,0.75);">9 ordres professionnels</p>
+                  <div class="grid grid-cols-3 gap-1">
+                    <template x-for="(o, oi) in ORDERS" :key="o">
+                      <span class="rounded font-mono dictia-fade-y text-center text-[9px]"
+                            style="padding:2px;background:rgba(192,38,211,0.10);border:1px solid rgba(192,38,211,0.25);color:rgba(255,255,255,0.85);"
+                            :style="`animation-delay:${oi * 60 + 800}ms;`"
+                            x-text="o"></span>
+                    </template>
+                  </div>
+                </div>
+                <div class="flex items-center justify-center gap-2 px-3 py-2 flex-shrink-0"
+                     style="background:rgba(16,185,129,0.06);border-top:1px solid rgba(16,185,129,0.14);">
+                  <span class="font-mono text-[9px] font-bold tracking-widest" style="color:rgba(16,185,129,0.90);">EFVP CAI · CADRE IA MCN</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.5 z-10 flex-shrink-0"
+          {# BOTTOM : 4 catégories tabs (Capture / IA / Distribution / Gouvernance) + sub-mode dots + Auto pill — hauteur fixe 90px #}
+          <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.32));">
+            {# Sub-mode dots indicator (shows position within active category) #}
+            <div class="flex items-center gap-1" style="height:6px;" aria-hidden="true">
+              <template x-for="(sm, di) in CATEGORIES[activeCategory].submodes" :key="di">
+                <span class="block rounded-full"
+                      :style="`width:${sm === selectedFeature ? '10px' : '4px'};height:4px;background:${sm === selectedFeature ? CATEGORIES[activeCategory].color : 'rgba(255,255,255,0.20)'};transition:width 0.2s, background 0.2s;`"></span>
+              </template>
+            </div>
+
+            {# 4 catégories tabs #}
             <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 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.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>
+              <template x-for="(cat, ci) in CATEGORIES" :key="ci">
+                <button type="button" @click="handleCategorySelect(ci)"
+                        class="dictia-feat-btn dictia-cat-btn outline-none cursor-pointer focus-visible:ring-2 focus-visible:ring-white/40 flex flex-col items-center justify-end relative"
+                        style="width:54px;height:42px;border:none;padding:4px 0 6px;background:transparent;"
+                        :aria-pressed="activeCategory === ci ? 'true' : 'false'"
+                        :aria-label="`Catégorie : ${cat.title}`">
+                  <span :style="`color: ${activeCategory === ci ? cat.color : 'rgba(255,255,255,0.30)'}; transition: color 0.2s, transform 0.15s, filter 0.2s; filter: ${activeCategory === ci ? 'drop-shadow(0 0 6px ' + cat.color + 'CC)' : 'none'}; transform: scale(${activeCategory === ci ? 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:18px;height:18px;" aria-hidden="true" x-html="cat.iconPath"></svg>
                   </span>
-                  <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 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 8px ${FEATURES[i].color};`"></span>
+                  <span class="text-[9px] font-mono font-bold mt-0.5 leading-none uppercase tracking-wider"
+                        :style="`color: ${activeCategory === ci ? cat.color : 'rgba(255,255,255,0.40)'};`"
+                        x-text="cat.short"></span>
+                  {# Tab indicator bottom border 2px #}
+                  <span x-show="activeCategory === ci" class="absolute" aria-hidden="true"
+                        :style="`bottom: 0; left: 6px; right: 6px; height: 2px; background: ${cat.color}; border-radius: 1px; box-shadow: 0 0 8px ${cat.color};`"></span>
                 </button>
               </template>
             </div>
@@ -1031,19 +1286,19 @@
           </div>
         </div>
 
-        {# Mobile : pills horizontales scrollables #}
+        {# Mobile : pills catégories horizontales scrollables #}
         <div class="lg:hidden w-full overflow-x-auto dictia-hide-scrollbar" style="scrollbar-width:none;">
           <div class="flex gap-2 px-1 pb-1" style="width:max-content;">
-            <template x-for="i in [1,2,3,4,5,6]" :key="i">
-              <button type="button" @click="handleManualSelect(i)"
+            <template x-for="(cat, ci) in CATEGORIES" :key="ci">
+              <button type="button" @click="handleCategorySelect(ci)"
                       class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-full shrink-0 transition-all focus-visible:ring-2 focus-visible:ring-brand-b1"
-                      :style="`border: 1px solid ${selectedFeature === i ? FEATURES[i].color + '70' : 'rgba(0,0,0,0.10)'}; background-color: ${selectedFeature === i ? FEATURES[i].color + '18' : 'rgba(0,0,0,0.04)'}; outline: none;`">
-                <span :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(0,0,0,0.40)'}; transition: color 0.2s;`">
-                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:11px;height:11px;" aria-hidden="true" x-html="featureIconPath(i)"></svg>
+                      :style="`border: 1px solid ${activeCategory === ci ? cat.color + '70' : 'rgba(0,0,0,0.10)'}; background-color: ${activeCategory === ci ? cat.color + '18' : 'rgba(0,0,0,0.04)'}; outline: none;`">
+                <span :style="`color: ${activeCategory === ci ? cat.color : 'rgba(0,0,0,0.40)'}; transition: color 0.2s;`">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px;" aria-hidden="true" x-html="cat.iconPath"></svg>
                 </span>
-                <span class="text-[11px] font-medium whitespace-nowrap"
-                      :style="`color: ${selectedFeature === i ? FEATURES[i].color : 'rgba(0,0,0,0.50)'};`"
-                      x-text="FEATURES[i].title"></span>
+                <span class="text-[11px] font-bold whitespace-nowrap"
+                      :style="`color: ${activeCategory === ci ? cat.color : 'rgba(0,0,0,0.50)'};`"
+                      x-text="cat.title"></span>
               </button>
             </template>
           </div>
@@ -1057,7 +1312,7 @@
         <div class="mb-1 flex items-center gap-2">
           <span class="block w-1 h-6 rounded-full" style="background:linear-gradient(180deg,#06b6d4,#c026d3);" aria-hidden="true"></span>
           <div>
-            <p class="text-xs font-mono font-bold uppercase tracking-widest text-brand-b3">Fonctions clés</p>
+            <p class="text-xs font-mono font-bold uppercase tracking-widest text-brand-b3">4 catégories · 12 sous-modes</p>
             <p class="font-bold text-lg leading-snug text-brand-navy">Le moteur IA local</p>
           </div>
         </div>
@@ -1155,20 +1410,32 @@
           </div>
         </div>
 
-        {# Feature grid 3 cols × 6 buttons — fond TOUJOURS dark navy (actif/inactif) pour garantir contraste WCAG AA blanc-sur-dark sur section claire #}
-        <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.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 + '70' : 'rgba(255,255,255,0.10)'}; background-color: ${selectedFeature === i ? 'rgba(8,12,24,0.95)' : 'rgba(8,12,24,0.85)'}; box-shadow: ${selectedFeature === i ? '0 0 16px ' + FEATURES[i].color + '40, inset 0 0 16px ' + FEATURES[i].color + '20' : '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.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-[10px] font-semibold text-center leading-tight"
-                    :style="`color: ${selectedFeature === i ? 'rgba(255,255,255,0.98)' : 'rgba(255,255,255,0.70)'}; transition: color 0.2s;`"
-                    x-text="FEATURES[i].title"></span>
+        {# Category grid 2×2 — 4 catégories avec sous-modes affichés dessous (architecture lisible) #}
+        <div class="grid grid-cols-2 gap-2">
+          <template x-for="(cat, ci) in CATEGORIES" :key="ci">
+            <button type="button" @click="handleCategorySelect(ci)"
+                    class="flex flex-col items-start gap-2 rounded-xl py-3 px-3 outline-none transition-all focus-visible:ring-2 focus-visible:ring-white/40 text-left"
+                    :style="`border: 1px solid ${activeCategory === ci ? cat.color + '70' : 'rgba(255,255,255,0.10)'}; background-color: ${activeCategory === ci ? 'rgba(8,12,24,0.95)' : 'rgba(8,12,24,0.85)'}; box-shadow: ${activeCategory === ci ? '0 0 16px ' + cat.color + '40, inset 0 0 16px ' + cat.color + '20' : 'none'}; cursor: pointer;`"
+                    :aria-pressed="activeCategory === ci ? 'true' : 'false'"
+                    :aria-label="`Catégorie : ${cat.title}`">
+              <div class="flex items-center gap-2 w-full">
+                <span :style="`color: ${activeCategory === ci ? cat.color : 'rgba(255,255,255,0.55)'}; filter: ${activeCategory === ci ? 'drop-shadow(0 0 6px ' + cat.color + 'BB)' : 'none'}; 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="cat.iconPath"></svg>
+                </span>
+                <span class="text-[11px] font-bold leading-tight flex-1"
+                      :style="`color: ${activeCategory === ci ? 'rgba(255,255,255,0.98)' : 'rgba(255,255,255,0.85)'};`"
+                      x-text="cat.title"></span>
+              </div>
+              <p class="text-[10px] font-mono leading-snug w-full"
+                 :style="`color: ${activeCategory === ci ? cat.color + 'EE' : 'rgba(255,255,255,0.55)'};`"
+                 x-text="cat.subtitle"></p>
+              {# Mini sous-modes dots dans la card #}
+              <div class="flex items-center gap-0.5 mt-auto" aria-hidden="true">
+                <template x-for="(sm, si) in cat.submodes" :key="si">
+                  <span class="block rounded-full"
+                        :style="`width:${activeCategory === ci && sm === selectedFeature ? '8px' : '3px'};height:3px;background:${activeCategory === ci ? (sm === selectedFeature ? cat.color : cat.color + '55') : 'rgba(255,255,255,0.15)'};transition:all 0.2s;`"></span>
+                </template>
+              </div>
             </button>
           </template>
         </div>
@@ -1178,20 +1445,64 @@
 
   </div>
 
-  {# Alpine logic — dictiaDashboard + sub-data functions pour les 6 modes #}
+  {# Alpine logic — dictiaDashboard + 4 catégories × 12 sous-modes (refonte stratégique 2026-04-29) #}
   <script>
     function dictiaDashboard() {
       return {
+        /* FEATURES indexes (0-12) — même structure que v1 (0=IA, 1-6=existants), nouveaux 7-12 ajoutés */
         FEATURES: [
-          { idx: 0, title: 'IA intégrée', subtitle: "Résumé, actions, Q&R", color: '#c026d3', badge: 'Mistral 7B' },        /* brand-b3 */
+          { 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 */
+          { 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 */
+          /* === Nouveaux modes 2026-04-29 === */
+          { idx: 7, title: 'Enregistrement live', subtitle: 'Mic + système + minuteur', color: '#06b6d4', badge: 'PWA' },        /* brand-b2 */
+          { idx: 8, title: 'Recherche IA', subtitle: 'Sémantique sur toute la bibliothèque', color: '#06b6d4', badge: 'RAG' },   /* brand-b2 */
+          { idx: 9, title: 'Résumé + actions', subtitle: 'Décisions, ICS, événements', color: '#2563eb', badge: 'Nemo 12B' },    /* brand-b1 */
+          { idx: 10, title: 'Intégrations', subtitle: 'Word, Notion, Teams, Zapier...', color: '#c026d3', badge: '8 hubs' },     /* brand-b3 */
+          { idx: 11, title: 'Audit trail', subtitle: 'Traçabilité Loi 25 immutable', color: '#2563eb', badge: 'Loi 25' },        /* brand-b1 */
+          { idx: 12, title: 'Conformité', subtitle: '9 ordres pros · EFVP CAI', color: '#c026d3', badge: 'MCN' }                 /* brand-b3 */
+        ],
+        /* CATEGORIES : 4 regroupements logiques. Chaque catégorie a ses sous-modes (ids des FEATURES). */
+        CATEGORIES: [
+          {
+            title: 'Capture',
+            short: 'Capture',
+            subtitle: 'Audio in : upload, recording, recherche',
+            color: '#06b6d4',  /* brand-b2 cyan */
+            submodes: [1, 7, 8],  /* Transcription (upload), Recording live, Recherche sémantique */
+            iconPath: '<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"/>'
+          },
+          {
+            title: 'Transformation IA',
+            short: 'IA',
+            subtitle: 'Diarisation, langues, résumés, Q&R',
+            color: '#2563eb',  /* brand-b1 blue */
+            submodes: [2, 3, 9, 0],  /* Diarisation, Langues, Résumé+actions, Chat IA */
+            iconPath: '<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"/>'
+          },
+          {
+            title: 'Distribution',
+            short: 'Distrib',
+            subtitle: 'Exports, intégrations, partage',
+            color: '#c026d3',  /* brand-b3 fuchsia */
+            submodes: [4, 10, 6, 5],  /* Exports, Intégrations, Partage, Users */
+            iconPath: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>'
+          },
+          {
+            title: 'Gouvernance',
+            short: 'Gouv',
+            subtitle: 'Audit, Loi 25, AGPL, ordres pros',
+            color: '#2563eb',  /* brand-b1 blue (sobre, institutionnel) */
+            submodes: [11, 12],  /* Audit trail, Conformité Loi 25 */
+            iconPath: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/>'
+          }
         ],
         selectedFeature: 1,
+        activeCategory: 0,
         isManual: false,
         autoCycleTimer: null,
         manualResetTimer: null,
@@ -1201,14 +1512,42 @@
           if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
           this.startAutoCycle();
         },
+        /* Auto-cycle logic : avance dans les sous-modes de la catégorie active toutes les 1100ms.
+           Quand on atteint le dernier sous-mode → switch catégorie suivante (boucle 0→1→2→3→0). */
         startAutoCycle() {
           if (this.autoCycleTimer) clearInterval(this.autoCycleTimer);
           this.autoCycleTimer = setInterval(() => {
-            this.selectedFeature = this.selectedFeature < this.FEATURES.length - 1 ? this.selectedFeature + 1 : 1;
-          }, 900);
+            const cat = this.CATEGORIES[this.activeCategory];
+            const currentIdx = cat.submodes.indexOf(this.selectedFeature);
+            if (currentIdx < cat.submodes.length - 1) {
+              /* Avance dans la catégorie courante */
+              this.selectedFeature = cat.submodes[currentIdx + 1];
+            } else {
+              /* Fin de catégorie → passe à la suivante */
+              this.activeCategory = (this.activeCategory + 1) % this.CATEGORIES.length;
+              this.selectedFeature = this.CATEGORIES[this.activeCategory].submodes[0];
+            }
+          }, 1100);
         },
+        /* Click manuel sur un sous-mode (compatibilité 6 boutons originaux) */
         handleManualSelect(i) {
           this.selectedFeature = i;
+          /* Trouve la catégorie qui contient ce sous-mode */
+          for (let ci = 0; ci < this.CATEGORIES.length; ci++) {
+            if (this.CATEGORIES[ci].submodes.includes(i)) { this.activeCategory = ci; break; }
+          }
+          this.isManual = true;
+          if (this.autoCycleTimer) { clearInterval(this.autoCycleTimer); this.autoCycleTimer = null; }
+          if (this.manualResetTimer) clearTimeout(this.manualResetTimer);
+          this.manualResetTimer = setTimeout(() => {
+            this.isManual = false;
+            this.startAutoCycle();
+          }, 4500);
+        },
+        /* Click manuel sur une catégorie : sélectionne son premier sous-mode */
+        handleCategorySelect(ci) {
+          this.activeCategory = ci;
+          this.selectedFeature = this.CATEGORIES[ci].submodes[0];
           this.isManual = true;
           if (this.autoCycleTimer) { clearInterval(this.autoCycleTimer); this.autoCycleTimer = null; }
           if (this.manualResetTimer) clearTimeout(this.manualResetTimer);
@@ -1225,12 +1564,19 @@
             3: '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>',
             4: '<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"/><line x1="12" y1="18" x2="12" y2="12"/><polyline points="9 15 12 18 15 15"/>',
             5: '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/>',
-            6: '<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"/>'
+            6: '<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"/>',
+            7: '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/>',
+            8: '<circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
+            9: '<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"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="15" y2="17"/>',
+            10: '<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>',
+            11: '<path d="M12 2v6"/><path d="M12 22v-6"/><path d="M4.93 4.93l4.24 4.24"/><path d="M14.83 14.83l4.24 4.24"/><circle cx="12" cy="12" r="4"/>',
+            12: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/>'
           };
           return paths[i] || '';
         },
         featureShortLabel(i) {
-          const labels = { 1: 'Trans', 2: 'Diari', 3: 'Lang', 4: 'Exp', 5: 'Users', 6: 'Part' };
+          const labels = { 1: 'Trans', 2: 'Diari', 3: 'Lang', 4: 'Exp', 5: 'Users', 6: 'Part',
+                            7: 'Rec', 8: 'Search', 9: 'Résu', 10: 'Hub', 11: 'Audit', 12: 'Conf' };
           return labels[i] || '';
         }
       };
@@ -1424,6 +1770,167 @@
         _cleanup() { this._timers.forEach(t => { clearInterval(t); clearTimeout(t); }); this._timers = []; }
       };
     }
+
+    /* === MODES AJOUTÉS 2026-04-29 === */
+
+    /* Mode 7 — Recording live : minuteur incrémentiel + waveform random pattern */
+    function recModeData() {
+      return {
+        sec: 0, BARS: [], _iv: null, _ivBars: null,
+        get time() {
+          const m = String(Math.floor(this.sec / 60)).padStart(2, '0');
+          const s = String(this.sec % 60).padStart(2, '0');
+          return `${m}:${s}`;
+        },
+        get size() { return Math.round(this.sec * 0.16 * 10) / 10; },
+        init() {
+          if (this._iv) clearInterval(this._iv);
+          if (this._ivBars) clearInterval(this._ivBars);
+          this.sec = 0;
+          /* 24 bars hauteur initiale random 6-26px */
+          this.BARS = Array.from({ length: 24 }, () => Math.floor(Math.random() * 20) + 6);
+          this._iv = setInterval(() => {
+            this.sec++;
+            if (this.sec >= 99) { clearInterval(this._iv); setTimeout(() => this.init(), 800); }
+          }, 1000);
+          /* Update bars heights chaque 250ms pour effet "live" */
+          this._ivBars = setInterval(() => {
+            this.BARS = this.BARS.map(() => Math.floor(Math.random() * 20) + 6);
+          }, 250);
+        }
+      };
+    }
+
+    /* Mode 8 — Recherche sémantique : query typed + résultats matched */
+    function searchModeData() {
+      return {
+        QUERY: 'préoccupations budgétaires',
+        query: '', results: [], _timers: [],
+        RESULTS_DATA: [
+          { title: 'CR-Réunion-Jan14', match: 'contraintes budgétaires Q4',  score: 94, c: '#06b6d4' },
+          { title: 'Comité-Direction',  match: 'compressions à anticiper',    score: 87, c: '#2563eb' },
+          { title: 'Entretien-Sophie',  match: 'inquiétudes financières',     score: 82, c: '#c026d3' }
+        ],
+        init() {
+          this._cleanup();
+          this.query = ''; this.results = [];
+          let i = 0;
+          const ivType = setInterval(() => {
+            i++; this.query = this.QUERY.slice(0, i);
+            if (i >= this.QUERY.length) {
+              clearInterval(ivType);
+              const t1 = setTimeout(() => { this.results = this.RESULTS_DATA; }, 500);
+              this._timers.push(t1);
+              const t2 = setTimeout(() => this.init(), 5500);
+              this._timers.push(t2);
+            }
+          }, 60);
+          this._timers.push(ivType);
+        },
+        _cleanup() { this._timers.forEach(t => { clearInterval(t); clearTimeout(t); }); this._timers = []; }
+      };
+    }
+
+    /* Mode 9 — Résumé + extraction d'événements : décisions/actions stagger */
+    function summaryModeData() {
+      return {
+        decisions: [
+          'Approuvé budget Q4 à l\'unanimité',
+          'Reporter démo à février',
+          'Validation finale 25 janv.'
+        ],
+        actions: [
+          'Marc : envoyer CR avant 17h',
+          'Sophie : contacter client vendredi',
+          'Julie : réviser budget avec Luc'
+        ],
+        dShown: 0, aShown: 0, _timers: [],
+        init() {
+          this._cleanup();
+          this.dShown = 0; this.aShown = 0;
+          let di = 0;
+          const ivD = setInterval(() => {
+            di++; this.dShown = di;
+            if (di >= this.decisions.length) {
+              clearInterval(ivD);
+              let ai = 0;
+              const t1 = setTimeout(() => {
+                const ivA = setInterval(() => {
+                  ai++; this.aShown = ai;
+                  if (ai >= this.actions.length) {
+                    clearInterval(ivA);
+                    const t2 = setTimeout(() => this.init(), 3500);
+                    this._timers.push(t2);
+                  }
+                }, 600);
+                this._timers.push(ivA);
+              }, 700);
+              this._timers.push(t1);
+            }
+          }, 600);
+          this._timers.push(ivD);
+        },
+        _cleanup() { this._timers.forEach(t => { clearInterval(t); clearTimeout(t); }); this._timers = []; }
+      };
+    }
+
+    /* Mode 10 — Intégrations Hub : 8 logos en orbite */
+    function integModeData() {
+      return {
+        LOGOS: [
+          { name: 'Word',     short: 'W',  c: '#2563eb', x: 20, y: 30 },
+          { name: 'Outlook',  short: 'O',  c: '#06b6d4', x: 80, y: 30 },
+          { name: 'Teams',    short: 'T',  c: '#c026d3', x: 15, y: 55 },
+          { name: 'Notion',   short: 'N',  c: '#2563eb', x: 85, y: 55 },
+          { name: 'Obsidian', short: 'Ob', c: '#c026d3', x: 25, y: 80 },
+          { name: 'Zapier',   short: 'Z',  c: '#06b6d4', x: 75, y: 80 },
+          { name: 'Make',     short: 'Mk', c: '#2563eb', x: 50, y: 18 },
+          { name: 'n8n',      short: 'n8', c: '#06b6d4', x: 50, y: 88 }
+        ],
+        init() {}
+      };
+    }
+
+    /* Mode 11 — Audit trail : event log staggered */
+    function auditModeData() {
+      return {
+        events: [
+          { t: '09:01', lvl: 'INFO',  c: '#06b6d4', msg: 'Sophie a uploadé reunion-jan14.mp3' },
+          { t: '09:02', lvl: 'AUTH',  c: '#2563eb', msg: 'Consentement explicite enregistré' },
+          { t: '09:04', lvl: 'PROC',  c: '#c026d3', msg: 'WhisperX terminé · diarisation 3 loc.' },
+          { t: '09:08', lvl: 'READ',  c: '#06b6d4', msg: 'Marc a écouté le segment 02:14-04:30' },
+          { t: '09:12', lvl: 'EXP',   c: '#2563eb', msg: 'Export DOCX par Julie · IP 198.x.x.42' },
+          { t: '09:15', lvl: 'SHARE', c: '#c026d3', msg: 'Partage interne accordé : Luc (édition)' }
+        ],
+        shown: 0, _iv: null,
+        init() {
+          if (this._iv) clearInterval(this._iv);
+          this.shown = 0;
+          this._iv = setInterval(() => {
+            if (this.shown >= this.events.length) {
+              clearInterval(this._iv);
+              setTimeout(() => this.init(), 2400);
+            } else this.shown++;
+          }, 700);
+        }
+      };
+    }
+
+    /* Mode 12 — Conformité Loi 25 + 9 ordres pros */
+    function loi25ModeData() {
+      return {
+        BADGES: [
+          { t: 'Loi 25',         c: '#06b6d4' },
+          { t: 'Loi 96',         c: '#2563eb' },
+          { t: 'EFVP CAI',       c: '#c026d3' },
+          { t: 'Cadre IA MCN',   c: '#06b6d4' },
+          { t: 'AGPL v3',        c: '#2563eb' },
+          { t: '0 Cloud Act US', c: '#c026d3' }
+        ],
+        ORDERS: ['Barreau', 'CNQ', 'CPA', 'ChAD', 'OACIQ', 'CMQ', 'OIIQ', 'OPQ', 'OEQ'],
+        init() {}
+      };
+    }
   </script>
 </section>
 
diff --git a/tests/test_marketing_secondary_pages.py b/tests/test_marketing_secondary_pages.py
index a81eafa..021cb34 100644
--- a/tests/test_marketing_secondary_pages.py
+++ b/tests/test_marketing_secondary_pages.py
@@ -190,8 +190,32 @@ def test_fonctionnalites_how_it_works_reactor_section():
     # Auto-cycle + manual select logic
     assert 'startAutoCycle' in body, "Missing auto-cycle function"
     assert 'handleManualSelect' in body, "Missing manual select handler"
-    assert '900' in body, "Missing 900ms cycle interval"
+    assert '1100' in body, "Missing 1100ms sub-mode cycle interval (refonte 2026-04-29)"
     assert '4500' in body, "Missing 4500ms manual reset timer"
+    # Refonte 2026-04-29 : 4 catégories × 12 sous-modes
+    assert 'CATEGORIES' in body, "Missing CATEGORIES array (refonte 4 catégories)"
+    assert 'activeCategory' in body, "Missing activeCategory state"
+    assert 'handleCategorySelect' in body, "Missing category click handler"
+    for cat_title in ['Capture', 'Transformation IA', 'Distribution', 'Gouvernance']:
+        assert cat_title in body, f"Missing category : {cat_title}"
+    # Nouveaux modes 7-12
+    assert 'recModeData' in body, "Missing Mode 7 (Recording live)"
+    assert 'searchModeData' in body, "Missing Mode 8 (Recherche sémantique)"
+    assert 'summaryModeData' in body, "Missing Mode 9 (Résumé + actions)"
+    assert 'integModeData' in body, "Missing Mode 10 (Intégrations Hub)"
+    assert 'auditModeData' in body, "Missing Mode 11 (Audit trail)"
+    assert 'loi25ModeData' in body, "Missing Mode 12 (Conformité Loi 25)"
+    # Mode panels content keywords
+    assert 'ENREGISTREMENT LIVE' in body, "Missing recording header"
+    assert 'RECHERCHE IA SÉMANTIQUE' in body, "Missing semantic search header"
+    assert 'RÉSUMÉ EXÉCUTIF' in body, "Missing summary header"
+    assert 'INTÉGRATIONS HUB' in body, "Missing integrations hub header"
+    assert 'AUDIT TRAIL' in body, "Missing audit trail header"
+    assert 'CONFORMITÉ QUÉBEC' in body, "Missing conformity header"
+    assert 'ÉVÉNEMENT DÉTECTÉ' in body, "Missing ICS event detection"
+    assert '9 ordres professionnels' in body, "Missing 9 ordres listing"
+    for ordre in ['Barreau', 'CNQ', 'CPA', 'OIIQ']:
+        assert ordre in body, f"Missing ordre pro: {ordre}"
     # Auto / Manual status text
     assert 'Auto' in body, "Missing Auto status indicator"
     assert 'Auto reprend bientôt' in body, "Missing manual mode hint"
@@ -249,8 +273,9 @@ def test_fonctionnalites_how_it_works_reactor_section():
     assert 'dictia-bg-orbs' in body, "Missing floating orbs"
     assert 'dictia-connecting-line' in body, "Missing connecting line phone↔IA"
 
-    # Stats row in section header
+    # Stats row in section header (refonte 2026-04-29 : 4 catégories · 6 modules)
     assert 'modules' in body, "Missing stats row 'modules'"
+    assert 'catégories' in body, "Missing stats row 'catégories' (refonte)"
     assert 'cloud' in body, "Missing stats row 'cloud'"
     assert 'Voir une démo' in body, "Missing demo CTA link"