@atlashub/smartstack-cli 3.7.0 → 3.8.0

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

@@ -0,0 +1,90 @@
+/* ============================================
+   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>`;
+}

package/templates/skills/business-analyse/html/src/scripts/08-editing.js

@@ -0,0 +1,45 @@
+/* ============================================
+   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 || {};
+            data.wireframeComments = parsed.wireframeComments || {};
+            data.specComments = parsed.specComments || {};
+            data.customRoles = parsed.customRoles || [];
+            data.customActions = parsed.customActions || [];
+            data.comments = parsed.comments || [];
+
+            // 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); }
+    }
+}

package/templates/skills/business-analyse/html/src/scripts/09-export.js

@@ -0,0 +1,65 @@
+/* ============================================
+   EXPORT JSON
+   ============================================ */
+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,
+        artifacts: EMBEDDED_ARTIFACTS,
+        wireframeComments: data.wireframeComments,
+        specComments: data.specComments,
+        customRoles: data.customRoles,
+        customActions: data.customActions,
+        comments: data.comments
+    };
+
+    // 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 || ''
+        };
+    });
+
+    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');
+}

package/templates/skills/business-analyse/html/src/scripts/10-comments.js

@@ -0,0 +1,165 @@
+/* ============================================
+   INLINE COMMENTS SYSTEM
+   ============================================ */
+
+/**
+ * Comments are stored in data.comments[] with structure:
+ * { id, sectionId, cardIndex, author, timestamp, content, status, category }
+ *
+ * - sectionId: matches the section div id (e.g. "cadrage-problem", "module-spec-Clients")
+ * - cardIndex: index of the card within that section (0-based)
+ * - status: "to-review" | "validated"
+ * - category: "clarification" | "correction" | "suggestion"
+ */
+
+function initInlineComments() {
+    // Add comment buttons under each card and uc-item
+    document.querySelectorAll('.section').forEach(section => {
+        const sectionId = section.id;
+        const cards = section.querySelectorAll(':scope > .card, :scope > .uc-item');
+        cards.forEach((card, index) => {
+            if (card.querySelector('.comment-btn-container')) return; // already initialized
+            const container = createCommentUI(sectionId, index);
+            card.appendChild(container);
+        });
+    });
+}
+
+function createCommentUI(sectionId, cardIndex) {
+    const comments = getCommentsForCard(sectionId, cardIndex);
+    const count = comments.length;
+
+    const container = document.createElement('div');
+    container.className = 'comment-btn-container';
+    container.dataset.sectionId = sectionId;
+    container.dataset.cardIndex = cardIndex;
+
+    container.innerHTML = `
+        <button class="comment-toggle-btn" onclick="toggleCommentThread('${sectionId}', ${cardIndex})">
+            Commentaires <span class="comment-count ${count === 0 ? 'empty' : ''}">${count}</span>
+        </button>
+        <div class="comment-thread" id="comment-thread-${sectionId}-${cardIndex}">
+            <div class="comment-items" id="comment-items-${sectionId}-${cardIndex}">
+                ${renderCommentItems(sectionId, cardIndex)}
+            </div>
+            <div class="comment-add-form">
+                <textarea id="comment-text-${sectionId}-${cardIndex}" placeholder="Ajouter un commentaire..."></textarea>
+                <select id="comment-cat-${sectionId}-${cardIndex}">
+                    <option value="clarification">Clarification</option>
+                    <option value="correction">Correction</option>
+                    <option value="suggestion">Suggestion</option>
+                </select>
+                <button onclick="addInlineComment('${sectionId}', ${cardIndex})">Ajouter</button>
+            </div>
+        </div>
+    `;
+
+    return container;
+}
+
+function getCommentsForCard(sectionId, cardIndex) {
+    return (data.comments || []).filter(c =>
+        c.sectionId === sectionId && c.cardIndex === cardIndex
+    );
+}
+
+function toggleCommentThread(sectionId, cardIndex) {
+    const thread = document.getElementById('comment-thread-' + sectionId + '-' + cardIndex);
+    if (thread) thread.classList.toggle('visible');
+}
+
+function renderCommentItems(sectionId, cardIndex) {
+    const comments = getCommentsForCard(sectionId, cardIndex);
+    if (comments.length === 0) {
+        return '<div style="font-size:0.8rem;color:var(--text-muted);padding:0.5rem 0;font-style:italic;">Aucun commentaire</div>';
+    }
+
+    return comments.map((c, i) => {
+        const initials = (c.author || 'U').substring(0, 2).toUpperCase();
+        const date = c.timestamp ? new Date(c.timestamp).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }) : '';
+        const globalIndex = data.comments.indexOf(c);
+
+        return `
+            <div class="comment-item">
+                <div class="comment-avatar">${initials}</div>
+                <div class="comment-body">
+                    <div class="comment-meta">
+                        <span class="comment-author">${c.author || 'Utilisateur'}</span>
+                        <span class="comment-date">${date}</span>
+                        <span class="comment-category comment-category-${c.category}">${c.category}</span>
+                        <span class="comment-status comment-status-${c.status}">${c.status === 'validated' ? 'Valide' : 'A revoir'}</span>
+                    </div>
+                    <div class="comment-text">${c.content}</div>
+                    <div class="comment-actions">
+                        <button class="comment-action-btn" onclick="toggleCommentStatus(${globalIndex})">${c.status === 'validated' ? 'Remettre a revoir' : 'Valider'}</button>
+                        <button class="comment-action-btn" onclick="deleteComment(${globalIndex})" style="color:var(--error);">Supprimer</button>
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function addInlineComment(sectionId, cardIndex) {
+    const textEl = document.getElementById('comment-text-' + sectionId + '-' + cardIndex);
+    const catEl = document.getElementById('comment-cat-' + sectionId + '-' + cardIndex);
+    const content = textEl.value.trim();
+    if (!content) return;
+
+    const comment = {
+        id: 'comment-' + Date.now(),
+        sectionId: sectionId,
+        cardIndex: cardIndex,
+        author: 'Utilisateur',
+        timestamp: new Date().toISOString(),
+        content: content,
+        status: 'to-review',
+        category: catEl.value
+    };
+
+    data.comments.push(comment);
+    textEl.value = '';
+
+    refreshCommentUI(sectionId, cardIndex);
+    renderReviewPanel();
+    autoSave();
+}
+
+function toggleCommentStatus(globalIndex) {
+    const comment = data.comments[globalIndex];
+    if (!comment) return;
+    comment.status = comment.status === 'validated' ? 'to-review' : 'validated';
+    refreshCommentUI(comment.sectionId, comment.cardIndex);
+    renderReviewPanel();
+    autoSave();
+}
+
+function deleteComment(globalIndex) {
+    const comment = data.comments[globalIndex];
+    if (!comment) return;
+    const sectionId = comment.sectionId;
+    const cardIndex = comment.cardIndex;
+    data.comments.splice(globalIndex, 1);
+    refreshCommentUI(sectionId, cardIndex);
+    renderReviewPanel();
+    autoSave();
+}
+
+function refreshCommentUI(sectionId, cardIndex) {
+    // Update comment items
+    const itemsContainer = document.getElementById('comment-items-' + sectionId + '-' + cardIndex);
+    if (itemsContainer) {
+        itemsContainer.innerHTML = renderCommentItems(sectionId, cardIndex);
+    }
+
+    // Update count badge
+    const count = getCommentsForCard(sectionId, cardIndex).length;
+    const container = document.querySelector(`.comment-btn-container[data-section-id="${sectionId}"][data-card-index="${cardIndex}"]`);
+    if (container) {
+        const badge = container.querySelector('.comment-count');
+        if (badge) {
+            badge.textContent = count;
+            badge.className = 'comment-count' + (count === 0 ? ' empty' : '');
+        }
+    }
+}

package/templates/skills/business-analyse/html/src/scripts/11-review-panel.js

@@ -0,0 +1,139 @@
+/* ============================================
+   REVIEW PANEL
+   ============================================ */
+let reviewPanelOpen = false;
+let reviewFilter = 'all';
+
+function toggleReviewPanel() {
+    reviewPanelOpen = !reviewPanelOpen;
+    const panel = document.getElementById('reviewPanel');
+    const body = document.getElementById('appBody');
+    const btn = document.getElementById('reviewToggleBtn');
+
+    if (reviewPanelOpen) {
+        panel.classList.add('visible');
+        body.classList.add('review-open');
+        btn.classList.add('active');
+    } else {
+        panel.classList.remove('visible');
+        body.classList.remove('review-open');
+        btn.classList.remove('active');
+    }
+
+    renderReviewPanel();
+}
+
+function filterReviewComments(filter) {
+    reviewFilter = filter;
+    // Update active filter button
+    document.querySelectorAll('.review-filter-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.filter === filter);
+    });
+    renderReviewPanel();
+}
+
+function renderReviewPanel() {
+    const comments = data.comments || [];
+
+    // Update header badge
+    const toReviewCount = comments.filter(c => c.status === 'to-review').length;
+    const badge = document.getElementById('reviewBadge');
+    if (badge) {
+        badge.textContent = toReviewCount;
+        badge.classList.toggle('hidden', toReviewCount === 0);
+    }
+
+    // Update stats
+    const totalEl = document.getElementById('reviewStatTotal');
+    const toReviewEl = document.getElementById('reviewStatToReview');
+    const validatedEl = document.getElementById('reviewStatValidated');
+    if (totalEl) totalEl.textContent = comments.length;
+    if (toReviewEl) toReviewEl.textContent = toReviewCount;
+    if (validatedEl) validatedEl.textContent = comments.filter(c => c.status === 'validated').length;
+
+    // Filter comments
+    let filtered = comments;
+    if (reviewFilter === 'to-review') {
+        filtered = comments.filter(c => c.status === 'to-review');
+    } else if (reviewFilter === 'validated') {
+        filtered = comments.filter(c => c.status === 'validated');
+    }
+
+    // Render comment list
+    const container = document.getElementById('reviewCommentsList');
+    if (!container) return;
+
+    if (filtered.length === 0) {
+        container.innerHTML = '<div class="review-empty">Aucun commentaire' +
+            (reviewFilter !== 'all' ? ' avec ce filtre' : '') + '.</div>';
+        return;
+    }
+
+    container.innerHTML = filtered.map((c, i) => {
+        const globalIndex = data.comments.indexOf(c);
+        const sectionLabel = getSectionLabel(c.sectionId);
+        const date = c.timestamp ? new Date(c.timestamp).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit' }) : '';
+
+        return `
+            <div class="review-comment-item" onclick="navigateToComment('${c.sectionId}', ${c.cardIndex})">
+                <div class="review-comment-section">${sectionLabel}</div>
+                <div class="review-comment-text">${c.content}</div>
+                <div class="review-comment-footer">
+                    <span class="review-comment-author">${c.author || 'Utilisateur'} - ${date}</span>
+                    <div class="review-comment-actions">
+                        <button class="review-action-btn ${c.status === 'validated' ? 'reject' : 'validate'}"
+                            onclick="event.stopPropagation();toggleCommentStatus(${globalIndex})"
+                            title="${c.status === 'validated' ? 'Remettre a revoir' : 'Valider'}">
+                            ${c.status === 'validated' ? 'A revoir' : 'Valider'}
+                        </button>
+                        <button class="review-action-btn delete"
+                            onclick="event.stopPropagation();deleteComment(${globalIndex})"
+                            title="Supprimer">
+                            &#10005;
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+    }).join('');
+}
+
+function getSectionLabel(sectionId) {
+    const labels = {
+        'cadrage-problem': 'Probleme',
+        'cadrage-current': 'Situation actuelle',
+        'cadrage-vision': 'Vision',
+        'cadrage-stakeholders': 'Parties prenantes',
+        'cadrage-scope': 'Perimetre',
+        'cadrage-risks': 'Risques',
+        'cadrage-success': 'Criteres',
+        'decomp-modules': 'Domaines',
+        'decomp-dependencies': 'Dependances',
+        'consol-interactions': 'Interactions',
+        'consol-permissions': 'Acces',
+        'consol-flows': 'Parcours',
+        'handoff-summary': 'Synthese'
+    };
+    if (labels[sectionId]) return labels[sectionId];
+    if (sectionId.startsWith('module-spec-')) {
+        const code = sectionId.replace('module-spec-', '');
+        const mod = data.modules.find(m => m.code === code);
+        return mod ? mod.name : code;
+    }
+    return sectionId;
+}
+
+function navigateToComment(sectionId, cardIndex) {
+    showSection(sectionId);
+    // Scroll to the card and open its comment thread
+    setTimeout(() => {
+        const thread = document.getElementById('comment-thread-' + sectionId + '-' + cardIndex);
+        if (thread && !thread.classList.contains('visible')) {
+            thread.classList.add('visible');
+        }
+        const container = document.querySelector(`.comment-btn-container[data-section-id="${sectionId}"][data-card-index="${cardIndex}"]`);
+        if (container) {
+            container.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }, 100);
+}

package/templates/skills/business-analyse/html/src/styles/01-variables.css

@@ -0,0 +1,38 @@
+/* ============================================
+   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;
+}

package/templates/skills/business-analyse/html/src/styles/02-layout.css

@@ -0,0 +1,101 @@
+/* ============================================
+   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; }
+
+.body { display: flex; flex: 1; }
+
+/* ============================================
+   SIDEBAR - Container
+   ============================================ */
+.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; }
+
+/* ============================================
+   MAIN CONTENT - FULL WIDTH
+   ============================================ */
+.main {
+    flex: 1;
+    padding: 2rem 3rem;
+    overflow-y: auto;
+    height: calc(100vh - var(--header-height));
+}
+
+.section { margin-bottom: 4rem; }
+.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;
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 768px) {
+    .sidebar { display: none; }
+    .main { padding: 1rem; }
+    .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; }
+    .review-panel, .comment-btn-container { display: none !important; }
+}