@atlashub/smartstack-cli 3.39.0 → 3.40.0

package/templates/skills/business-analyse/html/src/scripts/06-render-consolidation.js

@@ -1,195 +1,195 @@
-/* ============================================
-   CONSOLIDATION
-   ============================================ */
-function renderConsolidation() {
-    renderDataModel();
-    renderConsolInteractions();
-    renderConsolPermissions();
-}
-
-/* ============================================
-   DATA MODEL (cross-module entity overview)
-   ============================================ */
-function renderDataModel() {
-    const container = document.getElementById('dataModelContainer');
-    if (!container) return;
-
-    // Collect all entities from all modules
-    const allEntities = [];
-    data.modules.forEach(m => {
-        const spec = data.moduleSpecs[m.code] || {};
-        (spec.entities || []).forEach(ent => {
-            allEntities.push({ ...ent, moduleCode: m.code, moduleName: m.name || m.code });
-        });
-    });
-
-    if (allEntities.length === 0) {
-        container.innerHTML = '<p style="color:var(--text-muted);text-align:center;padding:2rem;">Aucune entite definie. Specifiez les donnees dans chaque domaine (Phase 3 > onglet Donnees).</p>';
-        return;
-    }
-
-    // Build relationship index for cross-module links
-    const entityModuleMap = {};
-    allEntities.forEach(e => { entityModuleMap[e.name] = e.moduleName; });
-
-    // Render grouped by module
-    let html = '';
-
-    // Summary bar
-    const moduleCount = data.modules.filter(m => (data.moduleSpecs[m.code]?.entities || []).length > 0).length;
-    const relCount = allEntities.reduce((sum, e) => sum + (e.relationships || []).length, 0);
-    html += `
-        <div class="dm-summary">
-            <div class="dm-summary-item"><span class="dm-summary-value">${allEntities.length}</span><span class="dm-summary-label">Entites</span></div>
-            <div class="dm-summary-item"><span class="dm-summary-value">${moduleCount}</span><span class="dm-summary-label">Domaines</span></div>
-            <div class="dm-summary-item"><span class="dm-summary-value">${relCount}</span><span class="dm-summary-label">Relations</span></div>
-        </div>`;
-
-    // Entity cards grouped by module
-    data.modules.forEach(m => {
-        const spec = data.moduleSpecs[m.code] || {};
-        const entities = spec.entities || [];
-        if (entities.length === 0) return;
-
-        html += `<div class="dm-module-group">`;
-        html += `<div class="dm-module-header">
-            <span class="dm-module-name">${m.name || m.code}</span>
-            <span class="dm-module-count">${entities.length} entite${entities.length > 1 ? 's' : ''}</span>
-        </div>`;
-
-        html += `<div class="dm-entity-grid">`;
-        entities.forEach(ent => {
-            const attrs = ent.attributes || [];
-            const rels = ent.relationships || [];
-            html += `
-                <div class="dm-entity-card">
-                    <div class="dm-entity-header">
-                        <span class="dm-entity-name">${ent.name}</span>
-                        <span class="dm-entity-attr-count">${attrs.length} champ${attrs.length > 1 ? 's' : ''}</span>
-                    </div>
-                    ${ent.description ? `<div class="dm-entity-desc">${ent.description}</div>` : ''}
-                    ${attrs.length > 0 ? `
-                    <table class="dm-attr-table">
-                        <thead><tr><th>Champ</th><th>Description</th></tr></thead>
-                        <tbody>
-                            ${attrs.map(a => `<tr><td class="dm-attr-name">${a.name}</td><td class="dm-attr-desc">${a.description || ''}</td></tr>`).join('')}
-                        </tbody>
-                    </table>` : ''}
-                    ${rels.length > 0 ? `
-                    <div class="dm-relations">
-                        <div class="dm-relations-title">Relations</div>
-                        ${rels.map(r => {
-                            const relText = typeof r === 'string' ? r : (r.target + ' (' + r.type + ') - ' + (r.description || ''));
-                            return `<div class="dm-relation-item">${relText}</div>`;
-                        }).join('')}
-                    </div>` : ''}
-                </div>`;
-        });
-        html += `</div></div>`;
-    });
-
-    container.innerHTML = html;
-}
-
-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 = getPermRoles();
-
-    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 || m.code}</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 allPerms = data.moduleSpecs[m.code]?.permissions || [];
-            const hasWildcard = allPerms.includes(role + '|*');
-            const perms = hasWildcard
-                ? getPermActions()
-                : allPerms.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)';
-            const label = hasWildcard ? 'Tous' : (count > 0 ? count + ' droits' : 'Aucun');
-            html += `<td style="text-align:center;color:${color};font-weight:600;">${label}</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('');
-}
+/* ============================================
+   CONSOLIDATION
+   ============================================ */
+function renderConsolidation() {
+    renderDataModel();
+    renderConsolInteractions();
+    renderConsolPermissions();
+}
+
+/* ============================================
+   DATA MODEL (cross-module entity overview)
+   ============================================ */
+function renderDataModel() {
+    const container = document.getElementById('dataModelContainer');
+    if (!container) return;
+
+    // Collect all entities from all modules
+    const allEntities = [];
+    data.modules.forEach(m => {
+        const spec = data.moduleSpecs[m.code] || {};
+        (spec.entities || []).forEach(ent => {
+            allEntities.push({ ...ent, moduleCode: m.code, moduleName: m.name || m.code });
+        });
+    });
+
+    if (allEntities.length === 0) {
+        container.innerHTML = '<p style="color:var(--text-muted);text-align:center;padding:2rem;">Aucune entite definie. Specifiez les donnees dans chaque domaine (Phase 3 > onglet Donnees).</p>';
+        return;
+    }
+
+    // Build relationship index for cross-module links
+    const entityModuleMap = {};
+    allEntities.forEach(e => { entityModuleMap[e.name] = e.moduleName; });
+
+    // Render grouped by module
+    let html = '';
+
+    // Summary bar
+    const moduleCount = data.modules.filter(m => (data.moduleSpecs[m.code]?.entities || []).length > 0).length;
+    const relCount = allEntities.reduce((sum, e) => sum + (e.relationships || []).length, 0);
+    html += `
+        <div class="dm-summary">
+            <div class="dm-summary-item"><span class="dm-summary-value">${allEntities.length}</span><span class="dm-summary-label">Entites</span></div>
+            <div class="dm-summary-item"><span class="dm-summary-value">${moduleCount}</span><span class="dm-summary-label">Domaines</span></div>
+            <div class="dm-summary-item"><span class="dm-summary-value">${relCount}</span><span class="dm-summary-label">Relations</span></div>
+        </div>`;
+
+    // Entity cards grouped by module
+    data.modules.forEach(m => {
+        const spec = data.moduleSpecs[m.code] || {};
+        const entities = spec.entities || [];
+        if (entities.length === 0) return;
+
+        html += `<div class="dm-module-group">`;
+        html += `<div class="dm-module-header">
+            <span class="dm-module-name">${m.name || m.code}</span>
+            <span class="dm-module-count">${entities.length} entite${entities.length > 1 ? 's' : ''}</span>
+        </div>`;
+
+        html += `<div class="dm-entity-grid">`;
+        entities.forEach(ent => {
+            const attrs = ent.attributes || [];
+            const rels = ent.relationships || [];
+            html += `
+                <div class="dm-entity-card">
+                    <div class="dm-entity-header">
+                        <span class="dm-entity-name">${ent.name}</span>
+                        <span class="dm-entity-attr-count">${attrs.length} champ${attrs.length > 1 ? 's' : ''}</span>
+                    </div>
+                    ${ent.description ? `<div class="dm-entity-desc">${ent.description}</div>` : ''}
+                    ${attrs.length > 0 ? `
+                    <table class="dm-attr-table">
+                        <thead><tr><th>Champ</th><th>Description</th></tr></thead>
+                        <tbody>
+                            ${attrs.map(a => `<tr><td class="dm-attr-name">${a.name}</td><td class="dm-attr-desc">${a.description || ''}</td></tr>`).join('')}
+                        </tbody>
+                    </table>` : ''}
+                    ${rels.length > 0 ? `
+                    <div class="dm-relations">
+                        <div class="dm-relations-title">Relations</div>
+                        ${rels.map(r => {
+                            const relText = typeof r === 'string' ? r : (r.target + ' (' + r.type + ') - ' + (r.description || ''));
+                            return `<div class="dm-relation-item">${relText}</div>`;
+                        }).join('')}
+                    </div>` : ''}
+                </div>`;
+        });
+        html += `</div></div>`;
+    });
+
+    container.innerHTML = html;
+}
+
+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 = getPermRoles();
+
+    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 || m.code}</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 allPerms = data.moduleSpecs[m.code]?.permissions || [];
+            const hasWildcard = allPerms.includes(role + '|*');
+            const perms = hasWildcard
+                ? getPermActions()
+                : allPerms.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)';
+            const label = hasWildcard ? 'Tous' : (count > 0 ? count + ' droits' : 'Aucun');
+            html += `<td style="text-align:center;color:${color};font-weight:600;">${label}</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('');
+}

package/templates/skills/business-analyse/html/src/scripts/07-render-handoff.js

@@ -1,92 +1,92 @@
-/* ============================================
-   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 = item.module
-                        ? (data.modules.find(m => m.code === item.module)?.name || item.module)
-                        : (data.modules.length > 0 ? data.modules.map(m => m.name).join(', ') : '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>`;
-}
+/* ============================================
+   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 = item.module
+                        ? (data.modules.find(m => m.code === item.module)?.name || item.module)
+                        : (data.modules.length > 0 ? data.modules.map(m => m.name).join(', ') : '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>`;
+}