npm - @atlashub/smartstack-cli - Versions diffs - 2.9.0 → 3.1.0 - Mend

@atlashub/smartstack-cli 2.9.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/.documentation/agents.html +1 -371
package/.documentation/business-analyse.html +81 -17
package/.documentation/cli-commands.html +1 -1
package/.documentation/commands.html +1 -1
package/.documentation/efcore.html +1 -1
package/.documentation/gitflow.html +1 -1
package/.documentation/hooks.html +27 -66
package/.documentation/index.html +166 -166
package/.documentation/init.html +6 -7
package/.documentation/installation.html +1 -1
package/.documentation/ralph-loop.html +1 -9
package/.documentation/test-web.html +15 -39
package/dist/index.js +23 -16
package/dist/index.js.map +1 -1
package/dist/mcp-entry.mjs +1302 -223
package/dist/mcp-entry.mjs.map +1 -1
package/package.json +1 -1
package/templates/agents/efcore/db-deploy.md +1 -1
package/templates/agents/efcore/migration.md +26 -10
package/templates/agents/efcore/rebase-snapshot.md +24 -7
package/templates/agents/efcore/squash.md +73 -57
package/templates/agents/gitflow/commit.md +138 -18
package/templates/agents/gitflow/exec.md +1 -1
package/templates/agents/gitflow/finish.md +79 -62
package/templates/agents/gitflow/init-clone.md +186 -0
package/templates/agents/gitflow/init-detect.md +137 -0
package/templates/agents/gitflow/init-validate.md +210 -0
package/templates/agents/gitflow/init.md +231 -74
package/templates/agents/gitflow/merge.md +115 -33
package/templates/agents/gitflow/pr.md +151 -46
package/templates/agents/gitflow/start.md +76 -33
package/templates/agents/gitflow/status.md +41 -71
package/templates/hooks/appsettings-guard.sh +76 -0
package/templates/hooks/ef-migration-check.md +1 -1
package/templates/hooks/hooks.json +9 -0
package/templates/project/appsettings.json.template +8 -2
package/templates/project/test-frontend/msw/handlers.ts +58 -0
package/templates/project/test-frontend/msw/server.ts +25 -0
package/templates/project/test-frontend/setup.ts +16 -0
package/templates/project/test-frontend/test-utils.tsx +59 -0
package/templates/project/test-frontend/vitest.config.ts +31 -0
package/templates/skills/_resources/config-safety.md +61 -0
package/templates/skills/_resources/formatting-guide.md +2 -2
package/templates/skills/application/SKILL.md +12 -3
package/templates/skills/application/steps/step-04-backend.md +21 -0
package/templates/skills/application/steps/step-07-tests.md +259 -120
package/templates/skills/business-analyse/SKILL.md +57 -28
package/templates/skills/business-analyse/_shared.md +70 -39
package/templates/skills/business-analyse/html/ba-interactive.html +2596 -0
package/templates/skills/business-analyse/questionnaire/00-application.md +123 -131
package/templates/skills/business-analyse/questionnaire/01-context.md +173 -24
package/templates/skills/business-analyse/questionnaire/02-stakeholders.md +170 -50
package/templates/skills/business-analyse/questionnaire/03-scope.md +154 -48
package/templates/skills/business-analyse/questionnaire/10-documentation.md +1 -1
package/templates/skills/business-analyse/questionnaire/14-risk-assumptions.md +135 -0
package/templates/skills/business-analyse/questionnaire/15-success-metrics.md +136 -0
package/templates/skills/business-analyse/questionnaire.md +55 -46
package/templates/skills/business-analyse/steps/step-00-init.md +24 -2
package/templates/skills/business-analyse/steps/step-01-cadrage.md +31 -20
package/templates/skills/business-analyse/steps/step-03-specify.md +58 -0
package/templates/skills/business-analyse/steps/step-05-handoff.md +301 -1
package/templates/skills/business-analyse/steps/step-06-extract.md +518 -0
package/templates/skills/check-version/SKILL.md +1 -1
package/templates/skills/efcore/steps/db/step-deploy.md +22 -3
package/templates/skills/efcore/steps/db/step-reset.md +27 -4
package/templates/skills/efcore/steps/db/step-seed.md +46 -2
package/templates/skills/efcore/steps/db/step-status.md +14 -0
package/templates/skills/efcore/steps/migration/step-01-check.md +31 -5
package/templates/skills/efcore/steps/migration/step-02-create.md +20 -4
package/templates/skills/efcore/steps/rebase-snapshot/step-03-create.md +60 -0
package/templates/skills/efcore/steps/shared/step-00-init.md +47 -8
package/templates/skills/efcore/steps/squash/step-03-create.md +27 -5
package/templates/skills/gitflow/SKILL.md +91 -29
package/templates/skills/gitflow/_shared.md +144 -2
package/templates/skills/gitflow/phases/status.md +11 -1
package/templates/skills/gitflow/steps/step-commit.md +1 -1
package/templates/skills/gitflow/steps/step-init.md +202 -39
package/templates/skills/gitflow/steps/step-pr.md +17 -5
package/templates/skills/gitflow/templates/config.json +10 -1
package/templates/skills/ralph-loop/SKILL.md +22 -15
package/templates/skills/ralph-loop/steps/step-01-task.md +89 -4
package/templates/skills/ralph-loop/steps/step-02-execute.md +408 -23
package/templates/skills/ralph-loop/steps/step-03-commit.md +84 -2
package/templates/skills/ralph-loop/steps/step-04-check.md +235 -6
package/templates/skills/ralph-loop/steps/step-05-report.md +115 -0
package/templates/skills/validate-feature/SKILL.md +83 -0
package/templates/skills/validate-feature/steps/step-01-compile.md +38 -0
package/templates/skills/validate-feature/steps/step-02-unit-tests.md +45 -0
package/templates/skills/validate-feature/steps/step-03-integration-tests.md +53 -0
package/templates/skills/validate-feature/steps/step-04-api-smoke.md +157 -0

package/templates/skills/business-analyse/html/ba-interactive.html ADDED Viewed

@@ -0,0 +1,2596 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{APPLICATION_NAME}} - Analyse metier</title>
+    <style>
+        /* ============================================
+           DESIGN SYSTEM - SmartStack Business Analysis
+           ============================================ */
+        :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --primary-light: #818cf8;
+            --secondary: #f97316;
+            --accent: #06b6d4;
+            --bg-dark: #0f172a;
+            --bg-card: #1e293b;
+            --bg-hover: #334155;
+            --bg-input: #151d2e;
+            --text: #b8c4d1;
+            --text-muted: #8a9bb0;
+            --text-bright: #e2e8f0;
+            --border: #334155;
+            --border-light: #475569;
+            --success: #22c55e;
+            --warning: #eab308;
+            --error: #ef4444;
+            --info: #3b82f6;
+            --sidebar-width: 280px;
+            --header-height: 52px;
+            --transition-fast: 0.15s ease;
+            --transition-normal: 0.3s ease;
+        }
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html { scroll-behavior: smooth; }
+        body {
+            font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+            background: var(--bg-dark);
+            color: var(--text);
+            line-height: 1.7;
+            min-height: 100vh;
+        }
+        /* ============================================
+           LAYOUT
+           ============================================ */
+        .app { display: flex; flex-direction: column; min-height: 100vh; }
+        .header {
+            background: var(--bg-card);
+            border-bottom: 1px solid var(--border);
+            height: var(--header-height);
+            display: flex;
+            align-items: center;
+            padding: 0 1.5rem;
+            gap: 1rem;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .header-logo {
+            width: 32px; height: 32px;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            border-radius: 6px;
+            display: flex; align-items: center; justify-content: center;
+            font-weight: 700; font-size: 0.85rem; color: #fff;
+            flex-shrink: 0;
+        }
+        .header-title { font-size: 1rem; font-weight: 600; color: var(--text-bright); }
+        .header-sep { width: 1px; height: 24px; background: var(--border); }
+        .header-app-name { font-size: 0.9rem; color: var(--primary-light); font-weight: 500; }
+        .header-spacer { flex: 1; }
+        .header-actions { display: flex; gap: 0.5rem; }
+        .btn {
+            padding: 0.4rem 0.9rem;
+            border-radius: 6px;
+            border: 1px solid var(--border);
+            background: var(--bg-hover);
+            color: var(--text);
+            font-size: 0.8rem;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            font-family: inherit;
+        }
+        .btn:hover { border-color: var(--primary); color: var(--text-bright); }
+        .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
+        .btn-primary:hover { background: var(--primary-dark); }
+        .btn-success { background: var(--success); border-color: var(--success); color: #fff; }
+        .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.75rem; }
+        .body { display: flex; flex: 1; }
+        /* ============================================
+           SIDEBAR - Navigation 5 niveaux
+           ============================================ */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: var(--bg-card);
+            border-right: 1px solid var(--border);
+            overflow-y: auto;
+            height: calc(100vh - var(--header-height));
+            position: sticky;
+            top: var(--header-height);
+            flex-shrink: 0;
+        }
+        .sidebar::-webkit-scrollbar { width: 4px; }
+        .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+        .nav-group { padding: 1rem 0; }
+        .nav-group + .nav-group { border-top: 1px solid var(--border); }
+        .nav-group-title {
+            font-size: 0.65rem;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            color: var(--text-muted);
+            padding: 0 1rem;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+        }
+        .nav-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.45rem 1rem;
+            color: var(--text);
+            text-decoration: none;
+            font-size: 0.85rem;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            border-left: 3px solid transparent;
+        }
+        .nav-item:hover { background: var(--bg-hover); color: var(--text-bright); }
+        .nav-item.active { background: rgba(99,102,241,0.1); border-left-color: var(--primary); color: var(--primary-light); font-weight: 500; }
+        .nav-item .nav-icon { font-size: 1rem; width: 20px; text-align: center; }
+        .nav-item .nav-badge {
+            margin-left: auto;
+            font-size: 0.65rem;
+            background: var(--bg-hover);
+            padding: 0.1rem 0.4rem;
+            border-radius: 10px;
+            color: var(--text-muted);
+        }
+        .nav-children { margin-left: 1.2rem; }
+        .nav-children .nav-item { font-size: 0.8rem; padding: 0.3rem 1rem; }
+        /* ============================================
+           MAIN CONTENT
+           ============================================ */
+        .main {
+            flex: 1;
+            padding: 2rem 2.5rem;
+            max-width: 960px;
+            overflow-y: auto;
+            height: calc(100vh - var(--header-height));
+        }
+        .section { margin-bottom: 3rem; }
+        .section-title {
+            font-size: 1.4rem;
+            color: var(--text-bright);
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 2px solid var(--primary);
+        }
+        .section-subtitle {
+            font-size: 0.9rem;
+            color: var(--text-muted);
+            margin-bottom: 1.5rem;
+        }
+        /* ============================================
+           EDITABLE CARDS
+           ============================================ */
+        .card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            padding: 1.25rem;
+            margin-bottom: 1rem;
+            transition: border-color var(--transition-fast);
+        }
+        .card:hover { border-color: var(--border-light); }
+        .card-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 0.75rem;
+        }
+        .card-label {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            color: var(--text-muted);
+            font-weight: 600;
+        }
+        .card-title {
+            font-size: 1.05rem;
+            color: var(--text-bright);
+            font-weight: 600;
+        }
+        .editable {
+            border: 1px dashed transparent;
+            border-radius: 6px;
+            padding: 0.4rem 0.6rem;
+            transition: all var(--transition-fast);
+            min-height: 1.5em;
+            outline: none;
+        }
+        .editable:hover { border-color: var(--border-light); background: var(--bg-input); }
+        .editable:focus { border-color: var(--primary); background: var(--bg-input); box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
+        .editable[data-placeholder]:empty::before {
+            content: attr(data-placeholder);
+            color: var(--text-muted);
+            font-style: italic;
+        }
+        /* ============================================
+           PRIORITY BADGES
+           ============================================ */
+        .priority {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.3rem;
+            padding: 0.2rem 0.6rem;
+            border-radius: 12px;
+            font-size: 0.7rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        .priority-vital { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
+        .priority-important { background: rgba(234,179,8,0.15); color: #facc15; border: 1px solid rgba(234,179,8,0.3); }
+        .priority-optional { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
+        .priority-excluded { background: rgba(100,116,139,0.15); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
+        /* ============================================
+           STATUS BADGES
+           ============================================ */
+        .status {
+            display: inline-flex; align-items: center; gap: 0.3rem;
+            padding: 0.15rem 0.5rem; border-radius: 10px;
+            font-size: 0.7rem; font-weight: 500;
+        }
+        .status-dot { width: 6px; height: 6px; border-radius: 50%; }
+        .status-draft .status-dot { background: var(--text-muted); }
+        .status-draft { color: var(--text-muted); }
+        .status-progress .status-dot { background: var(--info); }
+        .status-progress { color: var(--info); }
+        .status-done .status-dot { background: var(--success); }
+        .status-done { color: var(--success); }
+        /* ============================================
+           USE CASE LIST
+           ============================================ */
+        .uc-list { list-style: none; }
+        .uc-item {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 1rem 1.25rem;
+            margin-bottom: 0.75rem;
+            transition: border-color var(--transition-fast);
+        }
+        .uc-item:hover { border-color: var(--border-light); }
+        .uc-header {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            margin-bottom: 0.5rem;
+        }
+        .uc-id {
+            font-size: 0.7rem;
+            font-weight: 700;
+            color: var(--primary-light);
+            background: rgba(99,102,241,0.1);
+            padding: 0.15rem 0.5rem;
+            border-radius: 4px;
+        }
+        .uc-title { font-weight: 600; color: var(--text-bright); flex: 1; }
+        .uc-actions { display: flex; gap: 0.3rem; opacity: 0; transition: opacity var(--transition-fast); }
+        .uc-item:hover .uc-actions { opacity: 1; }
+        .uc-detail { font-size: 0.875rem; color: var(--text); }
+        .uc-detail-label { color: var(--text-muted); font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; }
+        .uc-actors {
+            display: flex; gap: 0.4rem; margin-top: 0.3rem; flex-wrap: wrap;
+        }
+        .uc-actor {
+            font-size: 0.7rem;
+            padding: 0.1rem 0.4rem;
+            background: rgba(6,182,212,0.1);
+            color: var(--accent);
+            border-radius: 4px;
+            border: 1px solid rgba(6,182,212,0.2);
+        }
+        /* ============================================
+           BUSINESS RULE LIST
+           ============================================ */
+        .br-item {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.75rem;
+            padding: 0.75rem 1rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            margin-bottom: 0.5rem;
+        }
+        .br-category {
+            font-size: 0.65rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            padding: 0.15rem 0.4rem;
+            border-radius: 4px;
+            flex-shrink: 0;
+            min-width: 70px;
+            text-align: center;
+        }
+        .br-cat-validation { background: rgba(99,102,241,0.15); color: var(--primary-light); }
+        .br-cat-calculation { background: rgba(234,179,8,0.15); color: #facc15; }
+        .br-cat-workflow { background: rgba(249,115,22,0.15); color: var(--secondary); }
+        .br-cat-security { background: rgba(239,68,68,0.15); color: #f87171; }
+        .br-cat-data { background: rgba(6,182,212,0.15); color: var(--accent); }
+        .br-text { flex: 1; font-size: 0.875rem; }
+        /* ============================================
+           MOCKUP FRAME
+           ============================================ */
+        .mockup-frame {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            overflow: hidden;
+            margin: 1rem 0;
+        }
+        .mockup-toolbar {
+            background: var(--bg-hover);
+            padding: 0.5rem 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            border-bottom: 1px solid var(--border);
+        }
+        .mockup-dot { width: 8px; height: 8px; border-radius: 50%; }
+        .mockup-dot-red { background: #ef4444; }
+        .mockup-dot-yellow { background: #eab308; }
+        .mockup-dot-green { background: #22c55e; }
+        .mockup-title {
+            font-size: 0.75rem; color: var(--text-muted);
+            margin-left: 0.5rem;
+        }
+        .mockup-content {
+            padding: 1.5rem;
+            min-height: 200px;
+        }
+        /* Mockup components */
+        .mock-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 1rem;
+            padding-bottom: 0.75rem;
+            border-bottom: 1px solid var(--border);
+        }
+        .mock-title { font-size: 1.1rem; font-weight: 600; color: var(--text-bright); }
+        .mock-btn {
+            padding: 0.35rem 0.8rem;
+            background: var(--primary);
+            color: #fff;
+            border-radius: 6px;
+            font-size: 0.8rem;
+            font-weight: 500;
+        }
+        .mock-search {
+            display: flex; align-items: center; gap: 0.5rem;
+            padding: 0.4rem 0.8rem;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            margin-bottom: 1rem;
+            color: var(--text-muted);
+            font-size: 0.8rem;
+        }
+        .mock-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        .mock-table th {
+            text-align: left;
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-muted);
+            padding: 0.5rem 0.75rem;
+            border-bottom: 1px solid var(--border);
+            font-weight: 600;
+        }
+        .mock-table td {
+            padding: 0.6rem 0.75rem;
+            font-size: 0.85rem;
+            border-bottom: 1px solid rgba(51,65,85,0.5);
+        }
+        .mock-table tr:hover td { background: rgba(99,102,241,0.05); }
+        .mock-status {
+            display: inline-flex; align-items: center; gap: 0.3rem;
+            padding: 0.15rem 0.5rem; border-radius: 10px; font-size: 0.75rem;
+        }
+        .mock-status-active { background: rgba(34,197,94,0.15); color: #4ade80; }
+        .mock-status-pending { background: rgba(234,179,8,0.15); color: #facc15; }
+        .mock-status-draft { background: rgba(100,116,139,0.15); color: #94a3b8; }
+        .mock-form-group { margin-bottom: 1rem; }
+        .mock-label {
+            display: block;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            margin-bottom: 0.3rem;
+            font-weight: 500;
+        }
+        .mock-input {
+            width: 100%;
+            padding: 0.5rem 0.75rem;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            color: var(--text);
+            font-size: 0.85rem;
+        }
+        .mock-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
+        .mock-form-actions {
+            display: flex; gap: 0.5rem; justify-content: flex-end;
+            padding-top: 1rem; border-top: 1px solid var(--border);
+        }
+        /* Dashboard mockup */
+        .mock-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
+        .mock-kpi {
+            background: var(--bg-hover);
+            border-radius: 8px;
+            padding: 0.75rem;
+            text-align: center;
+        }
+        .mock-kpi-value { font-size: 1.3rem; font-weight: 700; color: var(--text-bright); }
+        .mock-kpi-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
+        .mock-chart-placeholder {
+            height: 150px;
+            background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(6,182,212,0.05));
+            border: 1px dashed var(--border);
+            border-radius: 8px;
+            display: flex; align-items: center; justify-content: center;
+            color: var(--text-muted); font-size: 0.85rem;
+        }
+        /* ============================================
+           ADD BUTTON
+           ============================================ */
+        .add-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            width: 100%;
+            padding: 0.75rem;
+            border: 2px dashed var(--border);
+            border-radius: 8px;
+            background: transparent;
+            color: var(--text-muted);
+            font-size: 0.85rem;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            font-family: inherit;
+        }
+        .add-btn:hover {
+            border-color: var(--primary);
+            color: var(--primary-light);
+            background: rgba(99,102,241,0.05);
+        }
+        /* ============================================
+           INLINE FORM (for adding items)
+           ============================================ */
+        .inline-form {
+            background: var(--bg-card);
+            border: 2px solid var(--primary);
+            border-radius: 10px;
+            padding: 1.25rem;
+            margin-bottom: 1rem;
+            display: none;
+        }
+        .inline-form.visible { display: block; }
+        .inline-form-title {
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: var(--primary-light);
+            margin-bottom: 1rem;
+        }
+        .form-group { margin-bottom: 0.75rem; }
+        .form-label {
+            display: block;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            margin-bottom: 0.3rem;
+            font-weight: 500;
+        }
+        .form-input, .form-textarea, .form-select {
+            width: 100%;
+            padding: 0.5rem 0.75rem;
+            background: var(--bg-input);
+            border: 1px solid var(--border);
+            border-radius: 6px;
+            color: var(--text);
+            font-size: 0.85rem;
+            font-family: inherit;
+            transition: border-color var(--transition-fast);
+        }
+        .form-input:focus, .form-textarea:focus, .form-select:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
+        }
+        .form-textarea { min-height: 80px; resize: vertical; }
+        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
+        .form-actions {
+            display: flex; gap: 0.5rem; justify-content: flex-end;
+            margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
+        }
+        /* ============================================
+           STAKEHOLDER TABLE
+           ============================================ */
+        .stakeholder-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1rem;
+        }
+        .stakeholder-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            padding: 1rem;
+        }
+        .stakeholder-card:hover { border-color: var(--border-light); }
+        .stakeholder-role { font-weight: 600; color: var(--text-bright); margin-bottom: 0.25rem; }
+        .stakeholder-function { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
+        .stakeholder-tasks { list-style: none; }
+        .stakeholder-tasks li {
+            font-size: 0.8rem;
+            padding: 0.15rem 0;
+            color: var(--text);
+        }
+        .stakeholder-tasks li::before { content: "- "; color: var(--primary-light); }
+        .stakeholder-meta {
+            display: flex; gap: 0.75rem; margin-top: 0.5rem; padding-top: 0.5rem;
+            border-top: 1px solid var(--border);
+        }
+        .stakeholder-meta span { font-size: 0.7rem; color: var(--text-muted); }
+        /* ============================================
+           PROCESS FLOW
+           ============================================ */
+        .process-flow {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            overflow-x: auto;
+            padding: 1rem 0;
+        }
+        .process-step {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 0.75rem 1rem;
+            min-width: 140px;
+            text-align: center;
+            flex-shrink: 0;
+        }
+        .process-step:hover { border-color: var(--primary); }
+        .process-step-number {
+            font-size: 0.65rem;
+            color: var(--primary-light);
+            font-weight: 700;
+        }
+        .process-step-label { font-size: 0.8rem; color: var(--text-bright); font-weight: 500; }
+        .process-arrow { color: var(--text-muted); font-size: 1.2rem; flex-shrink: 0; }
+        /* ============================================
+           RISK TABLE
+           ============================================ */
+        .risk-item {
+            display: grid;
+            grid-template-columns: auto 1fr auto auto;
+            gap: 1rem;
+            align-items: center;
+            padding: 0.75rem 1rem;
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            margin-bottom: 0.5rem;
+        }
+        .risk-level {
+            width: 10px; height: 10px;
+            border-radius: 50%;
+        }
+        .risk-critical { background: var(--error); }
+        .risk-medium { background: var(--warning); }
+        .risk-low { background: var(--success); }
+        .risk-text { font-size: 0.875rem; }
+        .risk-probability, .risk-impact {
+            font-size: 0.7rem;
+            color: var(--text-muted);
+            text-align: center;
+        }
+        /* ============================================
+           NOTIFICATION BAR
+           ============================================ */
+        .notification {
+            position: fixed;
+            bottom: 1.5rem;
+            right: 1.5rem;
+            padding: 0.75rem 1.25rem;
+            border-radius: 8px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            z-index: 200;
+            transform: translateY(100px);
+            opacity: 0;
+            transition: all 0.3s ease;
+        }
+        .notification.visible { transform: translateY(0); opacity: 1; }
+        .notification-success { background: var(--success); color: #fff; }
+        .notification-info { background: var(--info); color: #fff; }
+        /* ============================================
+           MODULE CARDS (Decomposition)
+           ============================================ */
+        .module-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+            gap: 1rem;
+        }
+        .module-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            padding: 1rem;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            position: relative;
+        }
+        .module-card:hover { border-color: var(--primary); }
+        .module-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,0.2); }
+        .module-card-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem; }
+        .module-card-code { font-weight: 700; color: var(--text-bright); font-size: 1rem; }
+        .module-card-type {
+            font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
+            padding: 0.15rem 0.5rem; border-radius: 4px;
+            background: rgba(99,102,241,0.1); color: var(--primary-light);
+        }
+        .module-card-desc { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
+        .module-card-meta { display: flex; gap: 0.75rem; font-size: 0.7rem; color: var(--text-muted); }
+        .module-card-meta span { display: flex; align-items: center; gap: 0.2rem; }
+        .module-card-remove {
+            position: absolute; top: 0.5rem; right: 0.5rem;
+            background: none; border: none; color: var(--text-muted);
+            cursor: pointer; font-size: 0.8rem; opacity: 0;
+            transition: opacity var(--transition-fast);
+        }
+        .module-card:hover .module-card-remove { opacity: 1; }
+        .module-card-remove:hover { color: var(--error); }
+        /* ============================================
+           TABS (Module Specification)
+           ============================================ */
+        .tab-bar {
+            display: flex;
+            gap: 0;
+            border-bottom: 1px solid var(--border);
+            margin-bottom: 1.5rem;
+            overflow-x: auto;
+        }
+        .tab-btn {
+            padding: 0.6rem 1rem;
+            background: none;
+            border: none;
+            border-bottom: 2px solid transparent;
+            color: var(--text-muted);
+            font-size: 0.8rem;
+            font-family: inherit;
+            cursor: pointer;
+            white-space: nowrap;
+            transition: all var(--transition-fast);
+        }
+        .tab-btn:hover { color: var(--text-bright); background: var(--bg-hover); }
+        .tab-btn.active { color: var(--primary-light); border-bottom-color: var(--primary); font-weight: 500; }
+        .tab-panel { display: none; }
+        .tab-panel.active { display: block; }
+        /* ============================================
+           ENTITY TABLE
+           ============================================ */
+        .entity-block {
+            background: var(--bg-card);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            margin-bottom: 1rem;
+            overflow: hidden;
+        }
+        .entity-header {
+            display: flex; align-items: center; justify-content: space-between;
+            padding: 0.75rem 1rem;
+            background: var(--bg-hover);
+            border-bottom: 1px solid var(--border);
+        }
+        .entity-name { font-weight: 600; color: var(--text-bright); }
+        .entity-desc { font-size: 0.8rem; color: var(--text-muted); }
+        .attr-table { width: 100%; border-collapse: collapse; }
+        .attr-table th {
+            text-align: left; font-size: 0.7rem; text-transform: uppercase;
+            letter-spacing: 0.05em; color: var(--text-muted); padding: 0.5rem 0.75rem;
+            border-bottom: 1px solid var(--border); font-weight: 600;
+        }
+        .attr-table td {
+            padding: 0.5rem 0.75rem; font-size: 0.85rem;
+            border-bottom: 1px solid rgba(51,65,85,0.3);
+        }
+        .attr-required { color: var(--error); font-weight: 700; }
+        /* ============================================
+           DEPENDENCY VISUALIZATION
+           ============================================ */
+        .dep-graph {
+            display: flex; flex-direction: column; gap: 1.5rem;
+            padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border);
+            border-radius: 10px;
+        }
+        .dep-layer {
+            display: flex; align-items: center; gap: 1rem;
+        }
+        .dep-layer-label {
+            font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
+            letter-spacing: 0.05em; min-width: 80px; font-weight: 600;
+        }
+        .dep-layer-modules { display: flex; gap: 0.75rem; flex-wrap: wrap; }
+        .dep-module {
+            padding: 0.4rem 0.8rem; border-radius: 6px;
+            background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.3);
+            color: var(--primary-light); font-size: 0.8rem; font-weight: 500;
+        }
+        .dep-arrow {
+            text-align: center; color: var(--text-muted); font-size: 1.2rem;
+            padding-left: 80px;
+        }
+        /* ============================================
+           PHASE PROGRESS
+           ============================================ */
+        .phase-progress {
+            display: flex; align-items: center; gap: 0.3rem;
+            padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
+        }
+        .phase-dot {
+            width: 24px; height: 24px; border-radius: 50%;
+            display: flex; align-items: center; justify-content: center;
+            font-size: 0.6rem; font-weight: 700; color: var(--text-muted);
+            background: var(--bg-hover); border: 2px solid var(--border);
+            transition: all var(--transition-fast);
+        }
+        .phase-dot.completed { background: var(--success); border-color: var(--success); color: #fff; }
+        .phase-dot.current { background: var(--primary); border-color: var(--primary); color: #fff; }
+        .phase-line { flex: 1; height: 2px; background: var(--border); }
+        .phase-line.completed { background: var(--success); }
+        /* ============================================
+           STAT CARDS (Handoff)
+           ============================================ */
+        .stat-grid {
+            display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            gap: 1rem; margin-bottom: 1.5rem;
+        }
+        .stat-card {
+            background: var(--bg-card); border: 1px solid var(--border);
+            border-radius: 10px; padding: 1rem; text-align: center;
+        }
+        .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--text-bright); }
+        .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
+        /* ============================================
+           CONSOLIDATION
+           ============================================ */
+        .interaction-item {
+            display: flex; align-items: center; gap: 0.75rem;
+            padding: 0.75rem 1rem; background: var(--bg-card);
+            border: 1px solid var(--border); border-radius: 8px;
+            margin-bottom: 0.5rem; font-size: 0.85rem;
+        }
+        .interaction-arrow { color: var(--primary-light); font-weight: 700; font-size: 1.1rem; }
+        .interaction-type {
+            font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
+            padding: 0.15rem 0.4rem; border-radius: 4px;
+            background: rgba(6,182,212,0.1); color: var(--accent);
+        }
+        .e2e-flow {
+            display: flex; align-items: center; gap: 0.3rem;
+            overflow-x: auto; padding: 1rem 0;
+        }
+        .e2e-step {
+            padding: 0.5rem 0.75rem; border-radius: 6px; text-align: center;
+            font-size: 0.75rem; flex-shrink: 0;
+            background: var(--bg-card); border: 1px solid var(--border);
+        }
+        .e2e-step-module { font-weight: 600; color: var(--primary-light); font-size: 0.65rem; }
+        .e2e-step-action { color: var(--text-bright); }
+        /* ============================================
+           RESPONSIVE
+           ============================================ */
+        @media (max-width: 768px) {
+            .sidebar { display: none; }
+            .main { padding: 1rem; }
+            .mock-kpi-grid { grid-template-columns: repeat(2, 1fr); }
+            .form-row { grid-template-columns: 1fr; }
+            .stakeholder-grid { grid-template-columns: 1fr; }
+        }
+        /* ============================================
+           PRINT
+           ============================================ */
+        @media print {
+            .sidebar, .header-actions, .add-btn, .uc-actions, .inline-form, .module-card-remove, .phase-progress { display: none !important; }
+            .main { max-width: 100%; padding: 0; }
+            .section { display: block !important; page-break-inside: avoid; }
+            body { background: #fff; color: #1a1a1a; }
+            .card, .uc-item, .br-item, .module-card, .entity-block, .interaction-item { border-color: #ddd; }
+            .tab-panel { display: block !important; }
+            .tab-bar { display: none; }
+        }
+    </style>
+</head>
+<body>
+    <div class="app">
+        <!-- ============================================
+             HEADER
+             ============================================ -->
+        <header class="header">
+            <div class="header-logo">BA</div>
+            <span class="header-title">Analyse metier</span>
+            <div class="header-sep"></div>
+            <span class="header-app-name" id="appName">{{APPLICATION_NAME}}</span>
+            <div class="header-spacer"></div>
+            <div class="header-actions">
+                <button class="btn btn-sm" onclick="saveToLocalStorage()" title="Sauvegarder les modifications dans le navigateur">Sauvegarder</button>
+                <button class="btn btn-sm btn-primary" onclick="exportJSON()" title="Exporter les donnees au format JSON pour l'extraction">Exporter JSON</button>
+            </div>
+        </header>
+        <div class="body">
+            <!-- ============================================
+                 SIDEBAR - Navigation 5 niveaux
+                 ============================================ -->
+            <aside class="sidebar">
+                <!-- Phase Progress -->
+                <div class="phase-progress">
+                    <div class="phase-dot current" id="phase-1" title="Cadrage">1</div>
+                    <div class="phase-line" id="pline-1"></div>
+                    <div class="phase-dot" id="phase-2" title="Decomposition">2</div>
+                    <div class="phase-line" id="pline-2"></div>
+                    <div class="phase-dot" id="phase-3" title="Specification">3</div>
+                    <div class="phase-line" id="pline-3"></div>
+                    <div class="phase-dot" id="phase-4" title="Consolidation">4</div>
+                    <div class="phase-line" id="pline-4"></div>
+                    <div class="phase-dot" id="phase-5" title="Synthese">5</div>
+                </div>
+                <!-- Phase 1 : Cadrage -->
+                <div class="nav-group">
+                    <div class="nav-group-title">1. Cadrage</div>
+                    <a class="nav-item active" onclick="showSection('cadrage-problem')" data-section="cadrage-problem">
+                        <span class="nav-icon">&#9679;</span> Probleme a resoudre
+                    </a>
+                    <a class="nav-item" onclick="showSection('cadrage-current')" data-section="cadrage-current">
+                        <span class="nav-icon">&#9679;</span> Situation actuelle
+                    </a>
+                    <a class="nav-item" onclick="showSection('cadrage-vision')" data-section="cadrage-vision">
+                        <span class="nav-icon">&#9679;</span> Situation souhaitee
+                    </a>
+                    <a class="nav-item" onclick="showSection('cadrage-stakeholders')" data-section="cadrage-stakeholders">
+                        <span class="nav-icon">&#9679;</span> Parties prenantes
+                        <span class="nav-badge" id="stakeholderCount">0</span>
+                    </a>
+                    <a class="nav-item" onclick="showSection('cadrage-scope')" data-section="cadrage-scope">
+                        <span class="nav-icon">&#9679;</span> Perimetre fonctionnel
+                    </a>
+                    <a class="nav-item" onclick="showSection('cadrage-risks')" data-section="cadrage-risks">
+                        <span class="nav-icon">&#9679;</span> Risques et hypotheses
+                    </a>
+                    <a class="nav-item" onclick="showSection('cadrage-success')" data-section="cadrage-success">
+                        <span class="nav-icon">&#9679;</span> Criteres de reussite
+                    </a>
+                </div>
+                <!-- Phase 2 : Decomposition -->
+                <div class="nav-group">
+                    <div class="nav-group-title">2. Decomposition</div>
+                    <a class="nav-item" onclick="showSection('decomp-modules')" data-section="decomp-modules">
+                        <span class="nav-icon">&#9679;</span> Domaines fonctionnels
+                        <span class="nav-badge" id="moduleCount">0</span>
+                    </a>
+                    <a class="nav-item" onclick="showSection('decomp-dependencies')" data-section="decomp-dependencies">
+                        <span class="nav-icon">&#9679;</span> Dependances
+                    </a>
+                </div>
+                <!-- Phase 3 : Specification par module -->
+                <div class="nav-group" id="modulesNav">
+                    <div class="nav-group-title">3. Specification</div>
+                    <!-- Populated dynamically per module -->
+                </div>
+                <!-- Phase 4 : Consolidation -->
+                <div class="nav-group">
+                    <div class="nav-group-title">4. Consolidation</div>
+                    <a class="nav-item" onclick="showSection('consol-interactions')" data-section="consol-interactions">
+                        <span class="nav-icon">&#9679;</span> Interactions
+                    </a>
+                    <a class="nav-item" onclick="showSection('consol-permissions')" data-section="consol-permissions">
+                        <span class="nav-icon">&#9679;</span> Coherence des acces
+                    </a>
+                    <a class="nav-item" onclick="showSection('consol-flows')" data-section="consol-flows">
+                        <span class="nav-icon">&#9679;</span> Parcours bout en bout
+                    </a>
+                </div>
+                <!-- Phase 5 : Synthese -->
+                <div class="nav-group">
+                    <div class="nav-group-title">5. Synthese</div>
+                    <a class="nav-item" onclick="showSection('handoff-summary')" data-section="handoff-summary">
+                        <span class="nav-icon">&#9679;</span> Vue d'ensemble
+                    </a>
+                </div>
+            </aside>
+            <!-- ============================================
+                 MAIN CONTENT
+                 ============================================ -->
+            <main class="main" id="mainContent">
+                <!-- SECTION: Probleme a resoudre -->
+                <div class="section" id="cadrage-problem">
+                    <h2 class="section-title">Probleme a resoudre</h2>
+                    <p class="section-subtitle">Decrivez le probleme principal que ce projet doit resoudre. Soyez le plus concret possible.</p>
+                    <div class="card">
+                        <div class="card-label">Description du probleme</div>
+                        <div class="editable" contenteditable="true" data-field="problem.description" data-placeholder="Decrivez le probleme que vous rencontrez aujourd'hui. Qu'est-ce qui ne fonctionne pas, ou pas assez bien ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Qui est le plus impacte ?</div>
+                        <div class="editable" contenteditable="true" data-field="problem.impactedPeople" data-placeholder="Quelles personnes souffrent le plus de ce probleme au quotidien ? Quel impact sur leur travail ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Depuis quand ce probleme existe-t-il ?</div>
+                        <div class="editable" contenteditable="true" data-field="problem.history" data-placeholder="Depuis combien de temps ce probleme existe-t-il ? A-t-il empire recemment ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Evenement declencheur</div>
+                        <div class="editable" contenteditable="true" data-field="problem.trigger" data-placeholder="Qu'est-ce qui a declenche cette demande maintenant ? Pourquoi pas il y a 6 mois ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Consequences si le projet n'est pas realise</div>
+                        <div class="editable" contenteditable="true" data-field="problem.consequences" data-placeholder="Que se passerait-il si ce projet n'etait PAS realise ? Quelles consequences a court et moyen terme ?"></div>
+                    </div>
+                </div>
+                <!-- SECTION: Situation actuelle -->
+                <div class="section" id="cadrage-current" style="display:none;">
+                    <h2 class="section-title">Situation actuelle</h2>
+                    <p class="section-subtitle">Comment les choses se passent aujourd'hui, concretement.</p>
+                    <div class="card">
+                        <div class="card-label">Outils et methodes utilises aujourd'hui</div>
+                        <div class="editable" contenteditable="true" data-field="current.tools" data-placeholder="Comment gerez-vous ce sujet aujourd'hui ? Avec quels outils (tableur, email, papier, logiciel) ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Processus actuel, etape par etape</div>
+                        <div id="processFlow" class="process-flow">
+                            <!-- Populated dynamically -->
+                        </div>
+                        <button class="add-btn" onclick="addProcessStep()">+ Ajouter une etape au processus</button>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Etapes les plus penibles ou les plus longues</div>
+                        <div class="editable" contenteditable="true" data-field="current.painPoints" data-placeholder="Quelles sont les etapes les plus penibles ou les plus longues dans ce processus ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Erreurs ou problemes recurrents</div>
+                        <div class="editable" contenteditable="true" data-field="current.errors" data-placeholder="Quelles erreurs ou problemes reviennent regulierement ? Donnez 2 a 3 exemples concrets."></div>
+                    </div>
+                </div>
+                <!-- SECTION: Situation souhaitee -->
+                <div class="section" id="cadrage-vision" style="display:none;">
+                    <h2 class="section-title">Situation souhaitee</h2>
+                    <p class="section-subtitle">Ce que le client veut obtenir, pas ce qu'il veut construire.</p>
+                    <div class="card">
+                        <div class="card-label">Ce qui changerait concretement</div>
+                        <div class="editable" contenteditable="true" data-field="vision.changes" data-placeholder="Si le probleme etait resolu demain, que feriez-vous differemment dans votre journee de travail ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Resultats attendus (mesurables)</div>
+                        <div class="editable" contenteditable="true" data-field="vision.results" data-placeholder="Quels resultats concrets attendez-vous ? Citez 2 a 3 ameliorations mesurables."></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Signe visible de succes</div>
+                        <div class="editable" contenteditable="true" data-field="vision.successSign" data-placeholder="Comment saurez-vous que le projet est un succes ? Quel est le signe visible ?"></div>
+                    </div>
+                </div>
+                <!-- SECTION: Parties prenantes -->
+                <div class="section" id="cadrage-stakeholders" style="display:none;">
+                    <h2 class="section-title">Parties prenantes</h2>
+                    <p class="section-subtitle">Toutes les personnes concernees par ce projet et leurs besoins.</p>
+                    <div class="stakeholder-grid" id="stakeholderGrid">
+                        <!-- Populated dynamically -->
+                    </div>
+                    <button class="add-btn" onclick="toggleForm('addStakeholderForm')">+ Ajouter un profil utilisateur</button>
+                    <div class="inline-form" id="addStakeholderForm">
+                        <div class="inline-form-title">Nouveau profil utilisateur</div>
+                        <div class="form-group">
+                            <label class="form-label">Titre du profil (exemple : Responsable de production)</label>
+                            <input type="text" class="form-input" id="sh-role" placeholder="Titre ou description du profil">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Fonction dans l'entreprise</label>
+                            <input type="text" class="form-input" id="sh-function" placeholder="Ce qu'il fait dans l'organisation">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Taches principales (une par ligne)</label>
+                            <textarea class="form-textarea" id="sh-tasks" placeholder="Tache 1&#10;Tache 2&#10;Tache 3"></textarea>
+                        </div>
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label class="form-label">Frequence d'utilisation</label>
+                                <select class="form-select" id="sh-frequency">
+                                    <option value="daily">Quotidienne</option>
+                                    <option value="weekly">Hebdomadaire</option>
+                                    <option value="monthly">Mensuelle</option>
+                                    <option value="occasional">Occasionnelle</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Niveau d'acces</label>
+                                <select class="form-select" id="sh-access">
+                                    <option value="admin">Administration complete</option>
+                                    <option value="manager">Supervision et validation</option>
+                                    <option value="contributor">Saisie et modification</option>
+                                    <option value="viewer">Consultation seule</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Frustrations actuelles</label>
+                            <textarea class="form-textarea" id="sh-frustrations" placeholder="Quelles sont les 2-3 plus grandes frustrations de ce profil avec la facon de travailler actuelle ?"></textarea>
+                        </div>
+                        <div class="form-actions">
+                            <button class="btn" onclick="toggleForm('addStakeholderForm')">Annuler</button>
+                            <button class="btn btn-primary" onclick="addStakeholder()">Ajouter ce profil</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- SECTION: Perimetre fonctionnel -->
+                <div class="section" id="cadrage-scope" style="display:none;">
+                    <h2 class="section-title">Perimetre fonctionnel</h2>
+                    <p class="section-subtitle">Ce que le systeme doit faire et ne pas faire, par ordre de priorite.</p>
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin-bottom: 0.75rem;">
+                        <span style="color: #f87171;">&#9632;</span> Fonctionnalites indispensables
+                    </h3>
+                    <div id="scopeVital" class="uc-list"></div>
+                    <button class="add-btn" onclick="addScopeItem('vital')">+ Ajouter une fonctionnalite indispensable</button>
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
+                        <span style="color: #facc15;">&#9632;</span> Fonctionnalites importantes
+                    </h3>
+                    <div id="scopeImportant" class="uc-list"></div>
+                    <button class="add-btn" onclick="addScopeItem('important')">+ Ajouter une fonctionnalite importante</button>
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
+                        <span style="color: #4ade80;">&#9632;</span> Fonctionnalites optionnelles
+                    </h3>
+                    <div id="scopeOptional" class="uc-list"></div>
+                    <button class="add-btn" onclick="addScopeItem('optional')">+ Ajouter une fonctionnalite optionnelle</button>
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 1.5rem 0 0.75rem;">
+                        <span style="color: #94a3b8;">&#9632;</span> Hors perimetre
+                    </h3>
+                    <div id="scopeExcluded" class="uc-list"></div>
+                    <button class="add-btn" onclick="addScopeItem('excluded')">+ Ajouter une exclusion</button>
+                </div>
+                <!-- SECTION: Risques et hypotheses -->
+                <div class="section" id="cadrage-risks" style="display:none;">
+                    <h2 class="section-title">Risques et hypotheses</h2>
+                    <p class="section-subtitle">Ce qui pourrait mal tourner et les certitudes non verifiees.</p>
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin-bottom: 0.75rem;">Risques identifies</h3>
+                    <div id="risksList"></div>
+                    <button class="add-btn" onclick="toggleForm('addRiskForm')">+ Ajouter un risque</button>
+                    <div class="inline-form" id="addRiskForm">
+                        <div class="inline-form-title">Nouveau risque</div>
+                        <div class="form-group">
+                            <label class="form-label">Description du risque</label>
+                            <input type="text" class="form-input" id="risk-desc" placeholder="Qu'est-ce qui pourrait mal tourner ?">
+                        </div>
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label class="form-label">Probabilite</label>
+                                <select class="form-select" id="risk-probability">
+                                    <option value="high">Forte</option>
+                                    <option value="medium">Moyenne</option>
+                                    <option value="low">Faible</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Impact</label>
+                                <select class="form-select" id="risk-impact">
+                                    <option value="high">Grave</option>
+                                    <option value="medium">Moyen</option>
+                                    <option value="low">Faible</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Mesure de prevention ou de reduction</label>
+                            <textarea class="form-textarea" id="risk-mitigation" placeholder="Comment prevenir ou reduire ce risque ?"></textarea>
+                        </div>
+                        <div class="form-actions">
+                            <button class="btn" onclick="toggleForm('addRiskForm')">Annuler</button>
+                            <button class="btn btn-primary" onclick="addRisk()">Ajouter ce risque</button>
+                        </div>
+                    </div>
+                    <h3 style="color: var(--text-bright); font-size: 1rem; margin: 2rem 0 0.75rem;">Hypotheses a verifier</h3>
+                    <div class="card">
+                        <div class="editable" contenteditable="true" data-field="risks.assumptions" data-placeholder="Quelles hypotheses faites-vous sur ce projet sans les avoir verifiees ? (une par ligne)"></div>
+                    </div>
+                </div>
+                <!-- SECTION: Criteres de reussite -->
+                <div class="section" id="cadrage-success" style="display:none;">
+                    <h2 class="section-title">Criteres de reussite</h2>
+                    <p class="section-subtitle">Comment mesurer objectivement que le projet est un succes.</p>
+                    <div class="card">
+                        <div class="card-label">Definition du succes</div>
+                        <div class="editable" contenteditable="true" data-field="success.definition" data-placeholder="Comment saurez-vous que le projet est un succes ? Quel changement concret observerez-vous ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Objectifs mesurables</div>
+                        <div class="editable" contenteditable="true" data-field="success.metrics" data-placeholder="Quels chiffres presenteriez-vous a votre direction pour prouver le succes ? (temps, erreurs, satisfaction...)"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Delai d'evaluation</div>
+                        <div class="editable" contenteditable="true" data-field="success.timeline" data-placeholder="Au bout de combien de temps pourrez-vous juger si ca fonctionne ? 1 semaine ? 1 mois ? 3 mois ?"></div>
+                    </div>
+                    <div class="card">
+                        <div class="card-label">Conditions minimales de mise en service</div>
+                        <div class="editable" contenteditable="true" data-field="success.minimumConditions" data-placeholder="Quelles conditions minimales pour mettre le systeme en service ? (fonctionnalites presentes, donnees migrees, formation faite...)"></div>
+                    </div>
+                </div>
+                <!-- ================================================================
+                     PHASE 2 : DECOMPOSITION
+                     ================================================================ -->
+                <!-- SECTION: Domaines fonctionnels -->
+                <div class="section" id="decomp-modules" style="display:none;">
+                    <h2 class="section-title">Domaines fonctionnels</h2>
+                    <p class="section-subtitle">Identifiez les grands domaines de votre application. Chaque domaine regroupe des fonctionnalites coherentes et independantes.</p>
+                    <div class="module-grid" id="moduleGrid">
+                        <!-- Populated dynamically -->
+                    </div>
+                    <button class="add-btn" onclick="toggleForm('addModuleForm')" style="margin-top:1rem;">+ Ajouter un domaine fonctionnel</button>
+                    <div class="inline-form" id="addModuleForm">
+                        <div class="inline-form-title">Nouveau domaine fonctionnel</div>
+                        <div class="form-group">
+                            <label class="form-label">Nom du domaine (exemple : Gestion des commandes)</label>
+                            <input type="text" class="form-input" id="mod-name" placeholder="Nom clair et explicite">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Description en une ou deux phrases</label>
+                            <textarea class="form-textarea" id="mod-desc" placeholder="A quoi sert ce domaine ? Quel probleme resout-il ?"></textarea>
+                        </div>
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label class="form-label">Type de domaine</label>
+                                <select class="form-select" id="mod-type">
+                                    <option value="data-centric">Gestion de donnees (listes, fiches, formulaires)</option>
+                                    <option value="workflow">Processus metier (etapes, validations, approbations)</option>
+                                    <option value="reporting">Tableaux de bord et rapports</option>
+                                    <option value="integration">Integration avec des systemes externes</option>
+                                    <option value="full-module">Domaine complet (donnees + processus + rapports)</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">Priorite</label>
+                                <select class="form-select" id="mod-priority">
+                                    <option value="must">Indispensable</option>
+                                    <option value="should">Important</option>
+                                    <option value="could">Optionnel</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Principales donnees gerees (une par ligne)</label>
+                            <textarea class="form-textarea" id="mod-entities" placeholder="Commande&#10;Ligne de commande&#10;Facture"></textarea>
+                        </div>
+                        <div class="form-actions">
+                            <button class="btn" onclick="toggleForm('addModuleForm')">Annuler</button>
+                            <button class="btn btn-primary" onclick="addModule()">Ajouter ce domaine</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- SECTION: Dependances -->
+                <div class="section" id="decomp-dependencies" style="display:none;">
+                    <h2 class="section-title">Dependances entre domaines</h2>
+                    <p class="section-subtitle">Indiquez quels domaines dependent d'autres domaines. Par exemple, les Commandes dependent des Clients et des Produits.</p>
+                    <div id="depGraphContainer">
+                        <div class="dep-graph" id="depGraph">
+                            <p style="color:var(--text-muted);text-align:center;padding:2rem;">Ajoutez des domaines fonctionnels pour visualiser les dependances.</p>
+                        </div>
+                    </div>
+                    <div style="margin-top:1.5rem;">
+                        <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Ajouter une dependance</h3>
+                        <div class="form-row">
+                            <div class="form-group">
+                                <label class="form-label">Ce domaine...</label>
+                                <select class="form-select" id="dep-from"></select>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">...depend de</label>
+                                <select class="form-select" id="dep-to"></select>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Nature de la dependance</label>
+                            <input type="text" class="form-input" id="dep-desc" placeholder="Exemple : La commande reference un client existant">
+                        </div>
+                        <button class="btn btn-primary" onclick="addDependency()" style="margin-top:0.5rem;">Ajouter cette dependance</button>
+                    </div>
+                    <div id="depList" style="margin-top:1.5rem;"></div>
+                    <div style="margin-top:2rem;">
+                        <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Ordre de traitement propose</h3>
+                        <p class="section-subtitle">Les domaines sont traites dans l'ordre de leurs dependances : les fondations d'abord, puis les domaines qui en dependent.</p>
+                        <div id="processingOrder" class="process-flow"></div>
+                    </div>
+                </div>
+                <!-- ================================================================
+                     PHASE 3 : SPECIFICATION PAR MODULE
+                     ================================================================ -->
+                <!-- Container dynamique pour les specs de chaque module -->
+                <div id="moduleSpecContainer">
+                    <!-- Generated dynamically by renderModuleSpec() -->
+                </div>
+                <!-- ================================================================
+                     PHASE 4 : CONSOLIDATION
+                     ================================================================ -->
+                <!-- SECTION: Interactions cross-module -->
+                <div class="section" id="consol-interactions" style="display:none;">
+                    <h2 class="section-title">Interactions entre domaines</h2>
+                    <p class="section-subtitle">Vue d'ensemble de la facon dont les domaines communiquent et partagent des donnees.</p>
+                    <div id="consolInteractions">
+                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">Les interactions seront calculees automatiquement a partir des dependances et des donnees partagees entre domaines.</p>
+                    </div>
+                </div>
+                <!-- SECTION: Coherence des acces -->
+                <div class="section" id="consol-permissions" style="display:none;">
+                    <h2 class="section-title">Coherence des droits d'acces</h2>
+                    <p class="section-subtitle">Verification que les profils utilisateurs ont des droits coherents dans tous les domaines.</p>
+                    <div id="consolPermissions">
+                        <p style="color:var(--text-muted);text-align:center;padding:2rem;">La coherence sera verifiee quand les permissions de chaque domaine seront definies.</p>
+                    </div>
+                </div>
+                <!-- SECTION: Parcours bout en bout -->
+                <div class="section" id="consol-flows" style="display:none;">
+                    <h2 class="section-title">Parcours bout en bout</h2>
+                    <p class="section-subtitle">Les processus metier qui traversent plusieurs domaines, de bout en bout.</p>
+                    <div id="e2eFlowsList"></div>
+                    <button class="add-btn" onclick="toggleForm('addFlowForm')">+ Ajouter un parcours</button>
+                    <div class="inline-form" id="addFlowForm">
+                        <div class="inline-form-title">Nouveau parcours bout en bout</div>
+                        <div class="form-group">
+                            <label class="form-label">Nom du parcours (exemple : De la commande a la facture)</label>
+                            <input type="text" class="form-input" id="flow-name" placeholder="Nom descriptif du parcours">
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Etapes du parcours (une par ligne : Domaine - Action)</label>
+                            <textarea class="form-textarea" id="flow-steps" placeholder="Clients - Le client existe dans le systeme&#10;Commandes - Creer la commande&#10;Commandes - Valider la commande&#10;Factures - Generer la facture"></textarea>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">Qui intervient dans ce parcours ?</label>
+                            <input type="text" class="form-input" id="flow-actors" placeholder="Exemple : Contributeur (creation), Responsable (validation)">
+                        </div>
+                        <div class="form-actions">
+                            <button class="btn" onclick="toggleForm('addFlowForm')">Annuler</button>
+                            <button class="btn btn-primary" onclick="addE2EFlow()">Ajouter ce parcours</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- ================================================================
+                     PHASE 5 : SYNTHESE
+                     ================================================================ -->
+                <div class="section" id="handoff-summary" style="display:none;">
+                    <h2 class="section-title">Synthese de l'analyse</h2>
+                    <p class="section-subtitle">Vue d'ensemble de toute l'analyse metier, prete pour le developpement.</p>
+                    <div class="stat-grid" id="handoffStats">
+                        <!-- Populated dynamically -->
+                    </div>
+                    <h3 style="color:var(--text-bright);font-size:1rem;margin-bottom:0.75rem;">Domaines par ordre de traitement</h3>
+                    <div id="handoffModuleList"></div>
+                    <h3 style="color:var(--text-bright);font-size:1rem;margin:1.5rem 0 0.75rem;">Couverture du besoin initial</h3>
+                    <div class="card">
+                        <div class="card-label">Matrice de couverture</div>
+                        <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:0.75rem;">Chaque besoin du cadrage est couvert par au moins un domaine et un cas d'utilisation.</p>
+                        <div id="coverageMatrix"></div>
+                    </div>
+                    <div style="margin-top:2rem;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;text-align:center;">
+                        <p style="color:var(--text-bright);font-size:1.1rem;font-weight:600;margin-bottom:0.5rem;">Analyse prete pour l'extraction</p>
+                        <p style="color:var(--text-muted);font-size:0.85rem;margin-bottom:1rem;">Exportez le fichier JSON pour lancer la generation automatique du systeme.</p>
+                        <button class="btn btn-primary" onclick="exportJSON()" style="font-size:0.9rem;padding:0.6rem 1.5rem;">Exporter l'analyse complete en JSON</button>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+    <!-- Notification -->
+    <div class="notification notification-success" id="notification"></div>
+    <script>
+    /* ============================================
+       DATA STORE
+       ============================================ */
+    const APP_KEY = 'ba-{{APPLICATION_ID}}';
+    let data = {{FEATURE_DATA}};
+    /* ============================================
+       INITIALIZATION
+       ============================================ */
+    document.addEventListener('DOMContentLoaded', function() {
+        loadFromLocalStorage();
+        initEditableFields();
+        renderStakeholders();
+        renderScope();
+        renderRisks();
+        renderModules();
+        renderDependencies();
+        renderAllModuleSpecs();
+        renderConsolidation();
+        renderHandoff();
+        renderE2EFlows();
+        updateCounts();
+    });
+    /* ============================================
+       NAVIGATION
+       ============================================ */
+    let currentSectionId = 'cadrage-problem';
+    function showSection(sectionId) {
+        currentSectionId = sectionId;
+        document.querySelectorAll('.section').forEach(s => s.style.display = 'none');
+        const section = document.getElementById(sectionId);
+        if (section) section.style.display = 'block';
+        document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+        const navItem = document.querySelector('[data-section="' + sectionId + '"]');
+        if (navItem) navItem.classList.add('active');
+    }
+    function restoreCurrentSection() {
+        if (currentSectionId) {
+            const section = document.getElementById(currentSectionId);
+            if (section) section.style.display = 'block';
+        }
+    }
+    /* ============================================
+       EDITABLE FIELDS
+       ============================================ */
+    function initEditableFields() {
+        document.querySelectorAll('.editable[data-field]').forEach(el => {
+            const field = el.dataset.field;
+            const value = getNestedValue(data, 'cadrage.' + field);
+            if (value) el.textContent = value;
+            el.addEventListener('blur', function() {
+                setNestedValue(data, 'cadrage.' + field, this.textContent.trim());
+                autoSave();
+            });
+        });
+    }
+    /* ============================================
+       STAKEHOLDERS
+       ============================================ */
+    function addStakeholder() {
+        const role = document.getElementById('sh-role').value.trim();
+        if (!role) return;
+        data.cadrage.stakeholders.push({
+            role: role,
+            function: document.getElementById('sh-function').value.trim(),
+            tasks: document.getElementById('sh-tasks').value.split('\n').filter(t => t.trim()),
+            frequency: document.getElementById('sh-frequency').value,
+            access: document.getElementById('sh-access').value,
+            frustrations: document.getElementById('sh-frustrations').value.trim()
+        });
+        renderStakeholders();
+        toggleForm('addStakeholderForm');
+        clearForm('addStakeholderForm');
+        updateCounts();
+        autoSave();
+    }
+    function renderStakeholders() {
+        const grid = document.getElementById('stakeholderGrid');
+        grid.innerHTML = data.cadrage.stakeholders.map((s, i) => `
+            <div class="stakeholder-card">
+                <div style="display:flex;justify-content:space-between;align-items:start;">
+                    <div class="stakeholder-role">${s.role}</div>
+                    <button class="btn btn-sm" onclick="removeStakeholder(${i})" style="opacity:0.5;font-size:0.7rem;">Supprimer</button>
+                </div>
+                <div class="stakeholder-function">${s.function || ''}</div>
+                <ul class="stakeholder-tasks">
+                    ${(s.tasks || []).map(t => '<li>' + t + '</li>').join('')}
+                </ul>
+                <div class="stakeholder-meta">
+                    <span>${formatFrequency(s.frequency)}</span>
+                    <span>${formatAccess(s.access)}</span>
+                </div>
+                ${s.frustrations ? '<div style="font-size:0.8rem;color:var(--warning);margin-top:0.5rem;font-style:italic;">' + s.frustrations + '</div>' : ''}
+            </div>
+        `).join('');
+    }
+    function removeStakeholder(index) {
+        data.cadrage.stakeholders.splice(index, 1);
+        renderStakeholders();
+        updateCounts();
+        autoSave();
+    }
+    /* ============================================
+       SCOPE ITEMS
+       ============================================ */
+    function addScopeItem(priority) {
+        const name = prompt('Nom de la fonctionnalite :');
+        if (!name) return;
+        const description = prompt('Description courte (optionnel) :') || '';
+        data.cadrage.scope[priority].push({ name, description });
+        renderScope();
+        autoSave();
+    }
+    function renderScope() {
+        ['vital', 'important', 'optional', 'excluded'].forEach(p => {
+            const container = document.getElementById('scope' + p.charAt(0).toUpperCase() + p.slice(1));
+            container.innerHTML = data.cadrage.scope[p].map((item, i) => `
+                <div class="uc-item">
+                    <div class="uc-header">
+                        <span class="priority priority-${p}">${formatPriority(p)}</span>
+                        <span class="uc-title">${item.name}</span>
+                        <div class="uc-actions">
+                            <button class="btn btn-sm" onclick="removeScopeItem('${p}',${i})">Supprimer</button>
+                        </div>
+                    </div>
+                    ${item.description ? '<div class="uc-detail">' + item.description + '</div>' : ''}
+                </div>
+            `).join('');
+        });
+    }
+    function removeScopeItem(priority, index) {
+        data.cadrage.scope[priority].splice(index, 1);
+        renderScope();
+        autoSave();
+    }
+    /* ============================================
+       RISKS
+       ============================================ */
+    function addRisk() {
+        const desc = document.getElementById('risk-desc').value.trim();
+        if (!desc) return;
+        data.cadrage.risks.push({
+            description: desc,
+            probability: document.getElementById('risk-probability').value,
+            impact: document.getElementById('risk-impact').value,
+            mitigation: document.getElementById('risk-mitigation').value.trim()
+        });
+        renderRisks();
+        toggleForm('addRiskForm');
+        clearForm('addRiskForm');
+        autoSave();
+    }
+    function renderRisks() {
+        const list = document.getElementById('risksList');
+        list.innerHTML = data.cadrage.risks.map((r, i) => {
+            const level = (r.probability === 'high' && r.impact === 'high') ? 'critical'
+                : (r.probability === 'low' && r.impact === 'low') ? 'low' : 'medium';
+            return `
+                <div class="risk-item">
+                    <div class="risk-level risk-${level}"></div>
+                    <div>
+                        <div class="risk-text">${r.description}</div>
+                        ${r.mitigation ? '<div style="font-size:0.75rem;color:var(--text-muted);margin-top:0.25rem;">Prevention : ' + r.mitigation + '</div>' : ''}
+                    </div>
+                    <div class="risk-probability">${formatLevel(r.probability)}</div>
+                    <div class="risk-impact">${formatLevel(r.impact)}</div>
+                </div>
+            `;
+        }).join('');
+    }
+    /* ============================================
+       PROCESS STEPS
+       ============================================ */
+    function addProcessStep() {
+        const label = prompt('Nom de l\'etape :');
+        if (!label) return;
+        if (!data.cadrage.current.steps) data.cadrage.current.steps = [];
+        data.cadrage.current.steps.push(label);
+        renderProcessFlow();
+        autoSave();
+    }
+    function renderProcessFlow() {
+        const container = document.getElementById('processFlow');
+        const steps = data.cadrage.current.steps || [];
+        container.innerHTML = steps.map((step, i) => `
+            <div class="process-step">
+                <div class="process-step-number">Etape ${i + 1}</div>
+                <div class="process-step-label">${step}</div>
+            </div>
+            ${i < steps.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
+        `).join('');
+    }
+    /* ============================================
+       PERSISTENCE
+       ============================================ */
+    function autoSave() {
+        data.metadata.lastModified = new Date().toISOString();
+        localStorage.setItem(APP_KEY, JSON.stringify(data));
+    }
+    function saveToLocalStorage() {
+        autoSave();
+        showNotification('Modifications sauvegardees');
+    }
+    function loadFromLocalStorage() {
+        const saved = localStorage.getItem(APP_KEY);
+        if (saved) {
+            try {
+                const parsed = JSON.parse(saved);
+                // Deep merge with defaults
+                data.metadata = { ...data.metadata, ...parsed.metadata };
+                data.cadrage = {
+                    ...data.cadrage,
+                    ...parsed.cadrage,
+                    scope: { ...data.cadrage.scope, ...(parsed.cadrage?.scope || {}) }
+                };
+                data.modules = parsed.modules || [];
+                data.dependencies = parsed.dependencies || [];
+                data.moduleSpecs = parsed.moduleSpecs || {};
+                data.consolidation = { ...data.consolidation, ...(parsed.consolidation || {}) };
+                data.handoff = parsed.handoff || {};
+                // Restore editable fields
+                document.querySelectorAll('.editable[data-field]').forEach(el => {
+                    const value = getNestedValue(data, 'cadrage.' + el.dataset.field);
+                    if (value) el.textContent = value;
+                });
+                renderProcessFlow();
+            } catch (e) { console.error('Error loading saved data:', e); }
+        }
+    }
+    function exportJSON() {
+        // Collect all editable fields (cadrage)
+        document.querySelectorAll('.editable[data-field]').forEach(el => {
+            setNestedValue(data, 'cadrage.' + el.dataset.field, el.textContent.trim());
+        });
+        // Collect module editable fields
+        document.querySelectorAll('.editable[data-module-field]').forEach(el => {
+            const code = el.dataset.moduleCode;
+            const field = el.dataset.moduleField;
+            if (data.moduleSpecs[code]) {
+                data.moduleSpecs[code][field] = el.textContent.trim();
+            }
+        });
+        data.metadata.lastModified = new Date().toISOString();
+        data.metadata.exportedAt = new Date().toISOString();
+        // Build complete export with structured data
+        const exportData = {
+            metadata: data.metadata,
+            cadrage: data.cadrage,
+            modules: data.modules,
+            dependencies: data.dependencies,
+            moduleSpecifications: {},
+            consolidation: data.consolidation
+        };
+        // Structure module specs for export
+        data.modules.forEach(m => {
+            const spec = data.moduleSpecs[m.code] || {};
+            exportData.moduleSpecifications[m.code] = {
+                module: m,
+                useCases: (spec.useCases || []).map((uc, i) => ({
+                    id: 'UC-' + String(i + 1).padStart(3, '0'),
+                    ...uc
+                })),
+                businessRules: (spec.businessRules || []).map((br, i) => ({
+                    id: 'BR-' + br.category.toUpperCase().substring(0, 4) + '-' + String(i + 1).padStart(3, '0'),
+                    ...br
+                })),
+                entities: spec.entities || [],
+                permissions: spec.permissions || [],
+                notes: spec.notes || '',
+                mockupNotes: spec.mockupNotes || ''
+            };
+        });
+        const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = (data.metadata.applicationId || 'analyse') + '-export.json';
+        a.click();
+        URL.revokeObjectURL(url);
+        showNotification('Export JSON telecharge');
+    }
+    /* ============================================
+       UTILITIES
+       ============================================ */
+    function showNotification(message) {
+        const el = document.getElementById('notification');
+        el.textContent = message;
+        el.classList.add('visible');
+        setTimeout(() => el.classList.remove('visible'), 2500);
+    }
+    function toggleForm(formId) {
+        document.getElementById(formId).classList.toggle('visible');
+    }
+    function clearForm(formId) {
+        document.querySelectorAll('#' + formId + ' input, #' + formId + ' textarea').forEach(el => el.value = '');
+    }
+    function getNestedValue(obj, path) {
+        return path.split('.').reduce((o, k) => (o || {})[k], obj);
+    }
+    function setNestedValue(obj, path, value) {
+        const keys = path.split('.');
+        let current = obj;
+        for (let i = 0; i < keys.length - 1; i++) {
+            if (!current[keys[i]]) current[keys[i]] = {};
+            current = current[keys[i]];
+        }
+        current[keys[keys.length - 1]] = value;
+    }
+    function updateCounts() {
+        document.getElementById('stakeholderCount').textContent = data.cadrage.stakeholders.length;
+        document.getElementById('moduleCount').textContent = data.modules.length;
+        updateModulesNav();
+        updateDepSelects();
+    }
+    function formatFrequency(f) {
+        return { daily: 'Quotidien', weekly: 'Hebdomadaire', monthly: 'Mensuel', occasional: 'Occasionnel' }[f] || f;
+    }
+    function formatAccess(a) {
+        return { admin: 'Administration', manager: 'Supervision', contributor: 'Contribution', viewer: 'Consultation' }[a] || a;
+    }
+    function formatPriority(p) {
+        return { vital: 'Indispensable', important: 'Important', optional: 'Optionnel', excluded: 'Hors perimetre' }[p] || p;
+    }
+    function formatLevel(l) {
+        return { high: 'Fort', medium: 'Moyen', low: 'Faible' }[l] || l;
+    }
+    /* ============================================
+       MODULE MANAGEMENT
+       ============================================ */
+    function addModule() {
+        const name = document.getElementById('mod-name').value.trim();
+        if (!name) return;
+        const code = name.replace(/[^a-zA-Z0-9]/g, '');
+        data.modules.push({
+            code: code,
+            name: name,
+            description: document.getElementById('mod-desc').value.trim(),
+            featureType: document.getElementById('mod-type').value,
+            priority: document.getElementById('mod-priority').value,
+            entities: document.getElementById('mod-entities').value.split('\n').filter(e => e.trim()),
+            status: 'pending'
+        });
+        // Initialize module spec
+        if (!data.moduleSpecs[code]) {
+            data.moduleSpecs[code] = {
+                useCases: [],
+                businessRules: [],
+                entities: [],
+                permissions: [],
+                notes: ''
+            };
+        }
+        renderModules();
+        renderDependencies();
+        renderAllModuleSpecs();
+        toggleForm('addModuleForm');
+        clearForm('addModuleForm');
+        updateCounts();
+        autoSave();
+    }
+    function removeModule(index) {
+        if (!confirm('Supprimer ce domaine fonctionnel ?')) return;
+        const code = data.modules[index].code;
+        data.modules.splice(index, 1);
+        delete data.moduleSpecs[code];
+        data.dependencies = data.dependencies.filter(d => d.from !== code && d.to !== code);
+        renderModules();
+        renderDependencies();
+        renderAllModuleSpecs();
+        updateCounts();
+        autoSave();
+    }
+    function renderModules() {
+        const grid = document.getElementById('moduleGrid');
+        grid.innerHTML = data.modules.map((m, i) => `
+            <div class="module-card" onclick="showSection('module-spec-${m.code}')">
+                <button class="module-card-remove" onclick="event.stopPropagation();removeModule(${i})">&#10005;</button>
+                <div class="module-card-header">
+                    <span class="module-card-code">${m.name}</span>
+                    <span class="module-card-type">${formatModuleType(m.featureType)}</span>
+                </div>
+                <div class="module-card-desc">${m.description || ''}</div>
+                <div class="module-card-meta">
+                    <span class="priority priority-${m.priority === 'must' ? 'vital' : m.priority === 'should' ? 'important' : 'optional'}">${formatModulePriority(m.priority)}</span>
+                    <span>${(m.entities || []).length} donnees</span>
+                    <span>${(data.moduleSpecs[m.code]?.useCases || []).length} cas d'utilisation</span>
+                </div>
+            </div>
+        `).join('') || '<p style="color:var(--text-muted);text-align:center;padding:2rem;grid-column:1/-1;">Aucun domaine fonctionnel defini. Cliquez sur le bouton ci-dessous pour commencer.</p>';
+    }
+    function updateModulesNav() {
+        const nav = document.getElementById('modulesNav');
+        const navItems = data.modules.map(m => `
+            <a class="nav-item" onclick="showSection('module-spec-${m.code}')" data-section="module-spec-${m.code}">
+                <span class="nav-icon">&#9679;</span> ${m.name}
+                <span class="nav-badge">${(data.moduleSpecs[m.code]?.useCases || []).length}</span>
+            </a>
+        `).join('');
+        nav.innerHTML = '<div class="nav-group-title">3. Specification</div>' + (navItems || '<div style="padding:0.3rem 1rem;font-size:0.8rem;color:var(--text-muted);font-style:italic;">Aucun domaine</div>');
+    }
+    /* ============================================
+       DEPENDENCY MANAGEMENT
+       ============================================ */
+    function updateDepSelects() {
+        const fromSel = document.getElementById('dep-from');
+        const toSel = document.getElementById('dep-to');
+        if (!fromSel || !toSel) return;
+        const opts = data.modules.map(m => `<option value="${m.code}">${m.name}</option>`).join('');
+        fromSel.innerHTML = opts;
+        toSel.innerHTML = opts;
+    }
+    function addDependency() {
+        const from = document.getElementById('dep-from').value;
+        const to = document.getElementById('dep-to').value;
+        if (!from || !to || from === to) return;
+        if (data.dependencies.some(d => d.from === from && d.to === to)) return;
+        data.dependencies.push({
+            from: from,
+            to: to,
+            description: document.getElementById('dep-desc').value.trim()
+        });
+        document.getElementById('dep-desc').value = '';
+        renderDependencies();
+        autoSave();
+    }
+    function removeDependency(index) {
+        data.dependencies.splice(index, 1);
+        renderDependencies();
+        autoSave();
+    }
+    function renderDependencies() {
+        // Render dependency list
+        const depList = document.getElementById('depList');
+        if (depList) {
+            depList.innerHTML = data.dependencies.map((d, i) => {
+                const fromName = data.modules.find(m => m.code === d.from)?.name || d.from;
+                const toName = data.modules.find(m => m.code === d.to)?.name || d.to;
+                return `
+                    <div class="interaction-item">
+                        <span style="font-weight:600;color:var(--text-bright);">${fromName}</span>
+                        <span class="interaction-arrow">&#8594;</span>
+                        <span style="font-weight:600;color:var(--text-bright);">${toName}</span>
+                        <span style="flex:1;font-size:0.8rem;color:var(--text-muted);">${d.description || ''}</span>
+                        <button class="btn btn-sm" onclick="removeDependency(${i})" style="opacity:0.5;">Supprimer</button>
+                    </div>
+                `;
+            }).join('');
+        }
+        // Render graph
+        renderDepGraph();
+        // Render processing order
+        renderProcessingOrder();
+    }
+    function renderDepGraph() {
+        const graph = document.getElementById('depGraph');
+        if (!graph || data.modules.length === 0) return;
+        const layers = computeTopologicalLayers();
+        if (!layers) {
+            graph.innerHTML = '<p style="color:var(--error);text-align:center;padding:1rem;">Dependance circulaire detectee ! Corrigez les dependances.</p>';
+            return;
+        }
+        graph.innerHTML = layers.map((layer, i) => `
+            <div class="dep-layer">
+                <div class="dep-layer-label">Couche ${i + 1}</div>
+                <div class="dep-layer-modules">
+                    ${layer.map(code => {
+                        const m = data.modules.find(mod => mod.code === code);
+                        return `<div class="dep-module">${m ? m.name : code}</div>`;
+                    }).join('')}
+                </div>
+            </div>
+            ${i < layers.length - 1 ? '<div class="dep-arrow">&#8595;</div>' : ''}
+        `).join('');
+    }
+    function computeTopologicalLayers() {
+        const codes = data.modules.map(m => m.code);
+        const inDeg = {};
+        const adj = {};
+        codes.forEach(c => { inDeg[c] = 0; adj[c] = []; });
+        data.dependencies.forEach(d => {
+            if (inDeg[d.from] !== undefined && adj[d.to] !== undefined) {
+                adj[d.to].push(d.from);
+                inDeg[d.from]++;
+            }
+        });
+        const layers = [];
+        let remaining = new Set(codes);
+        while (remaining.size > 0) {
+            const layer = [];
+            remaining.forEach(c => {
+                if (inDeg[c] === 0) layer.push(c);
+            });
+            if (layer.length === 0) return null; // cycle
+            layers.push(layer);
+            layer.forEach(c => {
+                remaining.delete(c);
+                (adj[c] || []).forEach(dep => { inDeg[dep]--; });
+            });
+        }
+        return layers;
+    }
+    function renderProcessingOrder() {
+        const container = document.getElementById('processingOrder');
+        if (!container) return;
+        const layers = computeTopologicalLayers();
+        if (!layers) { container.innerHTML = ''; return; }
+        const order = layers.flat();
+        container.innerHTML = order.map((code, i) => {
+            const m = data.modules.find(mod => mod.code === code);
+            return `
+                <div class="process-step">
+                    <div class="process-step-number">Etape ${i + 1}</div>
+                    <div class="process-step-label">${m ? m.name : code}</div>
+                </div>
+                ${i < order.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
+            `;
+        }).join('');
+    }
+    /* ============================================
+       MODULE SPECIFICATION (per module)
+       ============================================ */
+    function renderAllModuleSpecs() {
+        const container = document.getElementById('moduleSpecContainer');
+        container.innerHTML = data.modules.map(m => renderModuleSpecSection(m)).join('');
+        // Bind editable fields in module specs
+        container.querySelectorAll('.editable[data-module-field]').forEach(el => {
+            el.addEventListener('blur', function() {
+                const code = this.dataset.moduleCode;
+                const field = this.dataset.moduleField;
+                if (data.moduleSpecs[code]) {
+                    data.moduleSpecs[code][field] = this.textContent.trim();
+                    autoSave();
+                }
+            });
+        });
+        // Restore currently visible section after re-render
+        restoreCurrentSection();
+    }
+    function renderModuleSpecSection(mod) {
+        const code = mod.code;
+        const spec = data.moduleSpecs[code] || { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+        return `
+        <div class="section" id="module-spec-${code}" style="display:none;">
+            <h2 class="section-title">${mod.name}</h2>
+            <p class="section-subtitle">${mod.description || 'Specification detaillee de ce domaine fonctionnel.'}</p>
+            <div class="tab-bar">
+                <button class="tab-btn active" onclick="switchTab('${code}', 'uc')">Cas d'utilisation</button>
+                <button class="tab-btn" onclick="switchTab('${code}', 'br')">Regles metier</button>
+                <button class="tab-btn" onclick="switchTab('${code}', 'ent')">Donnees</button>
+                <button class="tab-btn" onclick="switchTab('${code}', 'perm')">Droits d'acces</button>
+                <button class="tab-btn" onclick="switchTab('${code}', 'mock')">Maquettes</button>
+                <button class="tab-btn" onclick="switchTab('${code}', 'notes')">Notes</button>
+            </div>
+            <!-- TAB: Cas d'utilisation -->
+            <div class="tab-panel active" id="tab-${code}-uc">
+                <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Decrivez ce que chaque type d'utilisateur peut faire dans ce domaine. Un cas d'utilisation = une action concrete.</p>
+                <div id="ucList-${code}" class="uc-list">
+                    ${spec.useCases.map((uc, i) => renderUseCase(code, uc, i)).join('')}
+                </div>
+                <button class="add-btn" onclick="toggleForm('addUcForm-${code}')">+ Ajouter un cas d'utilisation</button>
+                <div class="inline-form" id="addUcForm-${code}">
+                    <div class="inline-form-title">Nouveau cas d'utilisation</div>
+                    <div class="form-group">
+                        <label class="form-label">Que fait l'utilisateur ? (exemple : Creer une commande)</label>
+                        <input type="text" class="form-input" id="uc-name-${code}" placeholder="Action concrete de l'utilisateur">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Qui realise cette action ? (profil utilisateur)</label>
+                        <input type="text" class="form-input" id="uc-actor-${code}" placeholder="Exemple : Responsable de production">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Deroulement normal, etape par etape (une par ligne)</label>
+                        <textarea class="form-textarea" id="uc-steps-${code}" placeholder="1. L'utilisateur ouvre la page de creation&#10;2. Il remplit les champs obligatoires&#10;3. Il valide le formulaire&#10;4. Le systeme enregistre et confirme"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Que se passe-t-il si quelque chose ne va pas ? (optionnel)</label>
+                        <textarea class="form-textarea" id="uc-alt-${code}" placeholder="Exemple : Si les donnees sont incorrectes, le systeme affiche un message d'erreur" style="min-height:50px;"></textarea>
+                    </div>
+                    <div class="form-actions">
+                        <button class="btn" onclick="toggleForm('addUcForm-${code}')">Annuler</button>
+                        <button class="btn btn-primary" onclick="addUseCase('${code}')">Ajouter</button>
+                    </div>
+                </div>
+            </div>
+            <!-- TAB: Regles metier -->
+            <div class="tab-panel" id="tab-${code}-br">
+                <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Les regles que le systeme doit respecter. Formulez-les sous forme de conditions : "Si... alors... sinon..."</p>
+                <div id="brList-${code}">
+                    ${spec.businessRules.map((br, i) => renderBusinessRule(code, br, i)).join('')}
+                </div>
+                <button class="add-btn" onclick="toggleForm('addBrForm-${code}')">+ Ajouter une regle metier</button>
+                <div class="inline-form" id="addBrForm-${code}">
+                    <div class="inline-form-title">Nouvelle regle metier</div>
+                    <div class="form-group">
+                        <label class="form-label">Nom court de la regle</label>
+                        <input type="text" class="form-input" id="br-name-${code}" placeholder="Exemple : Verification du budget disponible">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Categorie</label>
+                        <select class="form-select" id="br-cat-${code}">
+                            <option value="validation">Verification (le systeme verifie que...)</option>
+                            <option value="calculation">Calcul (le systeme calcule...)</option>
+                            <option value="workflow">Processus (quand X se produit, alors...)</option>
+                            <option value="security">Securite (seul... peut...)</option>
+                            <option value="data">Donnees (les donnees doivent...)</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Formulation de la regle (Si... alors... sinon...)</label>
+                        <textarea class="form-textarea" id="br-statement-${code}" placeholder="Si le montant de la commande depasse le budget du client, alors la commande est refusee et un message d'erreur s'affiche"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Exemple concret (optionnel)</label>
+                        <input type="text" class="form-input" id="br-example-${code}" placeholder="Exemple : Commande de 5000 CHF, budget de 2000 CHF → refusee">
+                    </div>
+                    <div class="form-actions">
+                        <button class="btn" onclick="toggleForm('addBrForm-${code}')">Annuler</button>
+                        <button class="btn btn-primary" onclick="addBusinessRule('${code}')">Ajouter</button>
+                    </div>
+                </div>
+            </div>
+            <!-- TAB: Donnees (Entites) -->
+            <div class="tab-panel" id="tab-${code}-ent">
+                <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Les types de donnees que ce domaine gere. Decrivez les informations importantes a enregistrer pour chaque type.</p>
+                <div id="entList-${code}">
+                    ${spec.entities.map((ent, i) => renderEntity(code, ent, i)).join('')}
+                </div>
+                <button class="add-btn" onclick="toggleForm('addEntForm-${code}')">+ Ajouter un type de donnees</button>
+                <div class="inline-form" id="addEntForm-${code}">
+                    <div class="inline-form-title">Nouveau type de donnees</div>
+                    <div class="form-group">
+                        <label class="form-label">Nom (exemple : Commande, Client, Facture)</label>
+                        <input type="text" class="form-input" id="ent-name-${code}" placeholder="Nom du type de donnees">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Description : a quoi sert cette donnee ?</label>
+                        <textarea class="form-textarea" id="ent-desc-${code}" placeholder="En une ou deux phrases, decrivez ce que represente cette donnee dans votre activite" style="min-height:50px;"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Informations a enregistrer (une par ligne : Nom - Description)</label>
+                        <textarea class="form-textarea" id="ent-attrs-${code}" placeholder="Numero - Identifiant unique de la commande&#10;Date - Date de creation de la commande&#10;Montant total - Somme des lignes&#10;Statut - Brouillon, Envoyee, Validee, Refusee"></textarea>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Relations avec d'autres donnees (optionnel, une par ligne)</label>
+                        <textarea class="form-textarea" id="ent-rels-${code}" placeholder="Client - Chaque commande appartient a un client&#10;Ligne de commande - Une commande contient plusieurs lignes" style="min-height:50px;"></textarea>
+                    </div>
+                    <div class="form-actions">
+                        <button class="btn" onclick="toggleForm('addEntForm-${code}')">Annuler</button>
+                        <button class="btn btn-primary" onclick="addEntity('${code}')">Ajouter</button>
+                    </div>
+                </div>
+            </div>
+            <!-- TAB: Droits d'acces -->
+            <div class="tab-panel" id="tab-${code}-perm">
+                <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Definissez qui peut faire quoi dans ce domaine. Cochez les actions autorisees pour chaque profil.</p>
+                <div id="permGrid-${code}">
+                    ${renderPermissionGrid(code)}
+                </div>
+            </div>
+            <!-- TAB: Maquettes -->
+            <div class="tab-panel" id="tab-${code}-mock">
+                <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Exemples visuels des ecrans principaux de ce domaine. Ces maquettes montrent la disposition generale, pas le design final.</p>
+                <div class="mockup-frame">
+                    <div class="mockup-toolbar">
+                        <div class="mockup-dot mockup-dot-red"></div>
+                        <div class="mockup-dot mockup-dot-yellow"></div>
+                        <div class="mockup-dot mockup-dot-green"></div>
+                        <span class="mockup-title">${mod.name} - Liste</span>
+                    </div>
+                    <div class="mockup-content">
+                        <div class="mock-header">
+                            <div class="mock-title">${mod.name}</div>
+                            <div class="mock-btn">+ Nouveau</div>
+                        </div>
+                        <div class="mock-search">Rechercher...</div>
+                        <table class="mock-table">
+                            <thead><tr>
+                                ${(mod.entities || []).slice(0, 1).length > 0 ? '<th>Identifiant</th><th>Nom</th><th>Statut</th><th>Date</th><th>Actions</th>' : '<th>Colonne 1</th><th>Colonne 2</th><th>Statut</th><th>Actions</th>'}
+                            </tr></thead>
+                            <tbody>
+                                <tr><td style="color:var(--primary-light);">001</td><td>Exemple 1</td><td><span class="mock-status mock-status-active">Actif</span></td><td>Aujourd'hui</td><td style="color:var(--text-muted);">Voir | Modifier</td></tr>
+                                <tr><td style="color:var(--primary-light);">002</td><td>Exemple 2</td><td><span class="mock-status mock-status-pending">En attente</span></td><td>Hier</td><td style="color:var(--text-muted);">Voir | Modifier</td></tr>
+                                <tr><td style="color:var(--primary-light);">003</td><td>Exemple 3</td><td><span class="mock-status mock-status-draft">Brouillon</span></td><td>Il y a 3 jours</td><td style="color:var(--text-muted);">Voir | Modifier</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="mockup-frame" style="margin-top:1rem;">
+                    <div class="mockup-toolbar">
+                        <div class="mockup-dot mockup-dot-red"></div>
+                        <div class="mockup-dot mockup-dot-yellow"></div>
+                        <div class="mockup-dot mockup-dot-green"></div>
+                        <span class="mockup-title">${mod.name} - Formulaire de creation</span>
+                    </div>
+                    <div class="mockup-content">
+                        <div class="mock-header">
+                            <div class="mock-title">Nouveau ${(mod.entities || [])[0] || 'enregistrement'}</div>
+                        </div>
+                        <div class="mock-form-row">
+                            <div class="mock-form-group"><div class="mock-label">Identifiant</div><div class="mock-input" style="color:var(--text-muted);">Genere automatiquement</div></div>
+                            <div class="mock-form-group"><div class="mock-label">Nom</div><div class="mock-input"></div></div>
+                        </div>
+                        <div class="mock-form-group"><div class="mock-label">Description</div><div class="mock-input" style="height:60px;"></div></div>
+                        <div class="mock-form-actions">
+                            <div class="mock-btn" style="background:var(--bg-hover);color:var(--text);">Annuler</div>
+                            <div class="mock-btn">Enregistrer</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="card" style="margin-top:1rem;">
+                    <div class="card-label">Notes sur les maquettes</div>
+                    <div class="editable" contenteditable="true" data-module-code="${code}" data-module-field="mockupNotes" data-placeholder="Ajoutez vos remarques sur les maquettes : elements manquants, disposition souhaitee, comportements particuliers...">${spec.mockupNotes || ''}</div>
+                </div>
+            </div>
+            <!-- TAB: Notes -->
+            <div class="tab-panel" id="tab-${code}-notes">
+                <p style="font-size:0.85rem;color:var(--text-muted);margin-bottom:1rem;">Notes libres, questions en suspens, elements a clarifier pour ce domaine.</p>
+                <div class="card">
+                    <div class="editable" contenteditable="true" data-module-code="${code}" data-module-field="notes" data-placeholder="Notez ici tout ce qui concerne ce domaine : questions, precisions, contraintes particulieres...">${spec.notes || ''}</div>
+                </div>
+            </div>
+        </div>`;
+    }
+    function renderUseCase(code, uc, index) {
+        return `
+            <div class="uc-item">
+                <div class="uc-header">
+                    <span class="uc-id">UC-${String(index + 1).padStart(3, '0')}</span>
+                    <span class="uc-title">${uc.name}</span>
+                    <div class="uc-actions">
+                        <button class="btn btn-sm" onclick="removeUseCase('${code}',${index})">Supprimer</button>
+                    </div>
+                </div>
+                <div class="uc-actors"><div class="uc-actor">${uc.actor}</div></div>
+                ${uc.steps ? `<div class="uc-detail-label">Deroulement</div><div class="uc-detail">${uc.steps.replace(/\n/g, '<br>')}</div>` : ''}
+                ${uc.alternative ? `<div class="uc-detail-label">En cas de probleme</div><div class="uc-detail" style="color:var(--warning);">${uc.alternative}</div>` : ''}
+            </div>`;
+    }
+    function addUseCase(code) {
+        const name = document.getElementById('uc-name-' + code).value.trim();
+        if (!name) return;
+        if (!data.moduleSpecs[code]) data.moduleSpecs[code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+        data.moduleSpecs[code].useCases.push({
+            name: name,
+            actor: document.getElementById('uc-actor-' + code).value.trim(),
+            steps: document.getElementById('uc-steps-' + code).value.trim(),
+            alternative: document.getElementById('uc-alt-' + code).value.trim()
+        });
+        renderAllModuleSpecs();
+        updateCounts();
+        autoSave();
+    }
+    function removeUseCase(code, index) {
+        data.moduleSpecs[code].useCases.splice(index, 1);
+        renderAllModuleSpecs();
+        updateCounts();
+        autoSave();
+    }
+    function renderBusinessRule(code, br, index) {
+        const catColors = { validation: 'br-cat-validation', calculation: 'br-cat-calculation', workflow: 'br-cat-workflow', security: 'br-cat-security', data: 'br-cat-data' };
+        const catLabels = { validation: 'Verification', calculation: 'Calcul', workflow: 'Processus', security: 'Securite', data: 'Donnees' };
+        return `
+            <div class="br-item">
+                <span class="br-category ${catColors[br.category] || 'br-cat-validation'}">${catLabels[br.category] || br.category}</span>
+                <div class="br-text">
+                    <div style="font-weight:600;color:var(--text-bright);margin-bottom:0.2rem;">${br.name}</div>
+                    <div>${br.statement}</div>
+                    ${br.example ? `<div style="font-size:0.8rem;color:var(--text-muted);margin-top:0.25rem;font-style:italic;">Exemple : ${br.example}</div>` : ''}
+                </div>
+                <button class="btn btn-sm" onclick="removeBusinessRule('${code}',${index})" style="opacity:0.5;flex-shrink:0;">&#10005;</button>
+            </div>`;
+    }
+    function addBusinessRule(code) {
+        const name = document.getElementById('br-name-' + code).value.trim();
+        if (!name) return;
+        if (!data.moduleSpecs[code]) data.moduleSpecs[code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+        data.moduleSpecs[code].businessRules.push({
+            name: name,
+            category: document.getElementById('br-cat-' + code).value,
+            statement: document.getElementById('br-statement-' + code).value.trim(),
+            example: document.getElementById('br-example-' + code).value.trim()
+        });
+        renderAllModuleSpecs();
+        autoSave();
+    }
+    function removeBusinessRule(code, index) {
+        data.moduleSpecs[code].businessRules.splice(index, 1);
+        renderAllModuleSpecs();
+        autoSave();
+    }
+    function renderEntity(code, ent, index) {
+        return `
+            <div class="entity-block">
+                <div class="entity-header">
+                    <div>
+                        <div class="entity-name">${ent.name}</div>
+                        <div class="entity-desc">${ent.description || ''}</div>
+                    </div>
+                    <button class="btn btn-sm" onclick="removeEntity('${code}',${index})" style="opacity:0.5;">Supprimer</button>
+                </div>
+                ${(ent.attributes || []).length > 0 ? `
+                <table class="attr-table">
+                    <thead><tr><th>Information</th><th>Description</th></tr></thead>
+                    <tbody>
+                        ${ent.attributes.map(a => `<tr><td style="font-weight:500;color:var(--text-bright);">${a.name}</td><td>${a.description || ''}</td></tr>`).join('')}
+                    </tbody>
+                </table>` : ''}
+                ${(ent.relationships || []).length > 0 ? `
+                <div style="padding:0.5rem 0.75rem;font-size:0.8rem;color:var(--text-muted);border-top:1px solid var(--border);">
+                    Relations : ${ent.relationships.map(r => `<span style="color:var(--accent);">${r}</span>`).join(', ')}
+                </div>` : ''}
+            </div>`;
+    }
+    function addEntity(code) {
+        const name = document.getElementById('ent-name-' + code).value.trim();
+        if (!name) return;
+        if (!data.moduleSpecs[code]) data.moduleSpecs[code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+        const attrs = document.getElementById('ent-attrs-' + code).value.split('\n').filter(l => l.trim()).map(l => {
+            const parts = l.split(' - ');
+            return { name: parts[0]?.trim() || l.trim(), description: parts.slice(1).join(' - ').trim() };
+        });
+        const rels = document.getElementById('ent-rels-' + code).value.split('\n').filter(l => l.trim());
+        data.moduleSpecs[code].entities.push({
+            name: name,
+            description: document.getElementById('ent-desc-' + code).value.trim(),
+            attributes: attrs,
+            relationships: rels
+        });
+        renderAllModuleSpecs();
+        autoSave();
+    }
+    function removeEntity(code, index) {
+        data.moduleSpecs[code].entities.splice(index, 1);
+        renderAllModuleSpecs();
+        autoSave();
+    }
+    function renderPermissionGrid(code) {
+        const roles = data.cadrage.stakeholders.length > 0
+            ? data.cadrage.stakeholders.map(s => s.role)
+            : ['Administrateur', 'Responsable', 'Contributeur', 'Lecteur'];
+        const actions = ['Consulter', 'Creer', 'Modifier', 'Supprimer', 'Valider', 'Exporter'];
+        const perms = data.moduleSpecs[code]?.permissions || [];
+        return `
+            <table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">
+                <thead><tr>
+                    <th>Profil</th>
+                    ${actions.map(a => `<th style="text-align:center;">${a}</th>`).join('')}
+                </tr></thead>
+                <tbody>
+                    ${roles.map(role => `
+                        <tr>
+                            <td style="font-weight:500;color:var(--text-bright);">${role}</td>
+                            ${actions.map(action => {
+                                const key = role + '|' + action;
+                                const checked = perms.includes(key);
+                                return `<td style="text-align:center;"><input type="checkbox" ${checked ? 'checked' : ''} onchange="togglePermission('${code}','${key}',this.checked)" style="cursor:pointer;width:16px;height:16px;"></td>`;
+                            }).join('')}
+                        </tr>
+                    `).join('')}
+                </tbody>
+            </table>`;
+    }
+    function togglePermission(code, key, checked) {
+        if (!data.moduleSpecs[code]) data.moduleSpecs[code] = { useCases: [], businessRules: [], entities: [], permissions: [], notes: '' };
+        if (!data.moduleSpecs[code].permissions) data.moduleSpecs[code].permissions = [];
+        if (checked) {
+            if (!data.moduleSpecs[code].permissions.includes(key)) data.moduleSpecs[code].permissions.push(key);
+        } else {
+            data.moduleSpecs[code].permissions = data.moduleSpecs[code].permissions.filter(p => p !== key);
+        }
+        autoSave();
+    }
+    function switchTab(code, tabId) {
+        const section = document.getElementById('module-spec-' + code);
+        if (!section) return;
+        section.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+        section.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active'));
+        const targetPanel = document.getElementById('tab-' + code + '-' + tabId);
+        if (targetPanel) targetPanel.classList.add('active');
+        // Activate the clicked button
+        const buttons = section.querySelectorAll('.tab-btn');
+        const tabIndex = { uc: 0, br: 1, ent: 2, perm: 3, mock: 4, notes: 5 }[tabId];
+        if (buttons[tabIndex]) buttons[tabIndex].classList.add('active');
+    }
+    /* ============================================
+       CONSOLIDATION
+       ============================================ */
+    function renderConsolidation() {
+        renderConsolInteractions();
+        renderConsolPermissions();
+    }
+    function renderConsolInteractions() {
+        const container = document.getElementById('consolInteractions');
+        if (!container || data.dependencies.length === 0) return;
+        container.innerHTML = data.dependencies.map(d => {
+            const fromName = data.modules.find(m => m.code === d.from)?.name || d.from;
+            const toName = data.modules.find(m => m.code === d.to)?.name || d.to;
+            return `
+                <div class="interaction-item">
+                    <span style="font-weight:600;color:var(--text-bright);">${fromName}</span>
+                    <span class="interaction-arrow">&#8594;</span>
+                    <span style="font-weight:600;color:var(--text-bright);">${toName}</span>
+                    <span class="interaction-type">Dependance</span>
+                    <span style="flex:1;font-size:0.8rem;color:var(--text-muted);">${d.description || ''}</span>
+                </div>`;
+        }).join('');
+    }
+    function renderConsolPermissions() {
+        const container = document.getElementById('consolPermissions');
+        if (!container || data.modules.length === 0) return;
+        const roles = data.cadrage.stakeholders.length > 0
+            ? data.cadrage.stakeholders.map(s => s.role)
+            : ['Administrateur', 'Responsable', 'Contributeur', 'Lecteur'];
+        let html = '<table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">';
+        html += '<thead><tr><th>Profil</th>';
+        data.modules.forEach(m => { html += `<th style="text-align:center;">${m.name}</th>`; });
+        html += '</tr></thead><tbody>';
+        roles.forEach(role => {
+            html += `<tr><td style="font-weight:500;color:var(--text-bright);">${role}</td>`;
+            data.modules.forEach(m => {
+                const perms = (data.moduleSpecs[m.code]?.permissions || []).filter(p => p.startsWith(role + '|'));
+                const count = perms.length;
+                const color = count > 4 ? 'var(--success)' : count > 2 ? 'var(--warning)' : count > 0 ? 'var(--text-muted)' : 'var(--border)';
+                html += `<td style="text-align:center;color:${color};font-weight:600;">${count > 0 ? count + ' droits' : 'Aucun'}</td>`;
+            });
+            html += '</tr>';
+        });
+        html += '</tbody></table>';
+        container.innerHTML = html;
+    }
+    /* ============================================
+       E2E FLOWS
+       ============================================ */
+    function addE2EFlow() {
+        const name = document.getElementById('flow-name').value.trim();
+        if (!name) return;
+        const steps = document.getElementById('flow-steps').value.split('\n').filter(l => l.trim()).map(l => {
+            const parts = l.split(' - ');
+            return { module: parts[0]?.trim() || '', action: parts.slice(1).join(' - ').trim() || l.trim() };
+        });
+        data.consolidation.e2eFlows.push({
+            name: name,
+            steps: steps,
+            actors: document.getElementById('flow-actors').value.trim()
+        });
+        renderE2EFlows();
+        toggleForm('addFlowForm');
+        clearForm('addFlowForm');
+        autoSave();
+    }
+    function removeE2EFlow(index) {
+        data.consolidation.e2eFlows.splice(index, 1);
+        renderE2EFlows();
+        autoSave();
+    }
+    function renderE2EFlows() {
+        const container = document.getElementById('e2eFlowsList');
+        if (!container) return;
+        container.innerHTML = data.consolidation.e2eFlows.map((flow, fi) => `
+            <div class="card" style="margin-bottom:1rem;">
+                <div class="card-header">
+                    <span class="card-title">${flow.name}</span>
+                    <button class="btn btn-sm" onclick="removeE2EFlow(${fi})" style="opacity:0.5;">Supprimer</button>
+                </div>
+                ${flow.actors ? `<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:0.5rem;">Intervenants : ${flow.actors}</div>` : ''}
+                <div class="e2e-flow">
+                    ${flow.steps.map((s, i) => `
+                        <div class="e2e-step">
+                            <div class="e2e-step-module">${s.module}</div>
+                            <div class="e2e-step-action">${s.action}</div>
+                        </div>
+                        ${i < flow.steps.length - 1 ? '<div class="process-arrow">&#8594;</div>' : ''}
+                    `).join('')}
+                </div>
+            </div>
+        `).join('');
+    }
+    /* ============================================
+       HANDOFF / SYNTHESE
+       ============================================ */
+    function renderHandoff() {
+        renderHandoffStats();
+        renderHandoffModules();
+        renderCoverageMatrix();
+    }
+    function renderHandoffStats() {
+        const container = document.getElementById('handoffStats');
+        if (!container) return;
+        const totalUCs = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.useCases || []).length, 0);
+        const totalBRs = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.businessRules || []).length, 0);
+        const totalEnts = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.entities || []).length, 0);
+        const totalStakeholders = data.cadrage.stakeholders.length;
+        container.innerHTML = `
+            <div class="stat-card"><div class="stat-value">${data.modules.length}</div><div class="stat-label">Domaines fonctionnels</div></div>
+            <div class="stat-card"><div class="stat-value">${totalUCs}</div><div class="stat-label">Cas d'utilisation</div></div>
+            <div class="stat-card"><div class="stat-value">${totalBRs}</div><div class="stat-label">Regles metier</div></div>
+            <div class="stat-card"><div class="stat-value">${totalEnts}</div><div class="stat-label">Types de donnees</div></div>
+            <div class="stat-card"><div class="stat-value">${totalStakeholders}</div><div class="stat-label">Profils utilisateurs</div></div>
+            <div class="stat-card"><div class="stat-value">${data.dependencies.length}</div><div class="stat-label">Dependances</div></div>
+            <div class="stat-card"><div class="stat-value">${data.consolidation.e2eFlows.length}</div><div class="stat-label">Parcours bout en bout</div></div>
+            <div class="stat-card"><div class="stat-value">${data.cadrage.risks.length}</div><div class="stat-label">Risques identifies</div></div>
+        `;
+    }
+    function renderHandoffModules() {
+        const container = document.getElementById('handoffModuleList');
+        if (!container) return;
+        const layers = computeTopologicalLayers();
+        const order = layers ? layers.flat() : data.modules.map(m => m.code);
+        container.innerHTML = order.map((code, i) => {
+            const m = data.modules.find(mod => mod.code === code);
+            if (!m) return '';
+            const spec = data.moduleSpecs[code] || {};
+            return `
+                <div class="card" style="margin-bottom:0.75rem;">
+                    <div style="display:flex;align-items:center;gap:0.75rem;">
+                        <div style="width:28px;height:28px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-weight:700;flex-shrink:0;">${i + 1}</div>
+                        <div style="flex:1;">
+                            <div style="font-weight:600;color:var(--text-bright);">${m.name}</div>
+                            <div style="font-size:0.8rem;color:var(--text-muted);">${m.description || ''}</div>
+                        </div>
+                        <div style="display:flex;gap:1rem;font-size:0.75rem;color:var(--text-muted);">
+                            <span>${(spec.useCases || []).length} cas d'utilisation</span>
+                            <span>${(spec.businessRules || []).length} regles</span>
+                            <span>${(spec.entities || []).length} donnees</span>
+                        </div>
+                        <span class="priority priority-${m.priority === 'must' ? 'vital' : m.priority === 'should' ? 'important' : 'optional'}">${formatModulePriority(m.priority)}</span>
+                    </div>
+                </div>`;
+        }).join('');
+    }
+    function renderCoverageMatrix() {
+        const container = document.getElementById('coverageMatrix');
+        if (!container) return;
+        const allScope = ['vital', 'important', 'optional'].flatMap(p =>
+            (data.cadrage.scope[p] || []).map(item => ({ ...item, priority: p }))
+        );
+        if (allScope.length === 0) {
+            container.innerHTML = '<p style="color:var(--text-muted);font-style:italic;">Aucun element de perimetre defini dans le cadrage.</p>';
+            return;
+        }
+        container.innerHTML = `
+            <table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">
+                <thead><tr><th>Besoin</th><th>Priorite</th><th>Domaine</th><th>Couvert</th></tr></thead>
+                <tbody>
+                    ${allScope.map(item => {
+                        const moduleName = data.modules.length > 0 ? data.modules[0].name : 'A definir';
+                        return `
+                            <tr>
+                                <td>${item.name}</td>
+                                <td><span class="priority priority-${item.priority}">${formatPriority(item.priority)}</span></td>
+                                <td style="color:var(--text-muted);">${moduleName}</td>
+                                <td style="text-align:center;color:var(--success);">&#10003;</td>
+                            </tr>`;
+                    }).join('')}
+                </tbody>
+            </table>`;
+    }
+    /* ============================================
+       ADDITIONAL UTILITIES
+       ============================================ */
+    function formatModuleType(t) {
+        return { 'data-centric': 'Donnees', 'workflow': 'Processus', 'reporting': 'Rapports', 'integration': 'Integration', 'full-module': 'Complet' }[t] || t;
+    }
+    function formatModulePriority(p) {
+        return { must: 'Indispensable', should: 'Important', could: 'Optionnel' }[p] || p;
+    }
+    </script>
+</body>
+</html>