@atlashub/smartstack-cli 4.23.0 → 4.24.0

package/templates/skills/ba-generate-html/html/ba-interactive.html

@@ -473,460 +473,450 @@ body {
 
 
 /* --- 05-modules.css --- */
-/* ============================================
-   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; }
-
-/* ============================================
-   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;
-}
-
-/* ============================================
-   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;
-}
-
-/* ============================================
-   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); }
-
-/* ============================================
-   DATA MODEL (Consolidation)
-   ============================================ */
-.dm-summary {
-    display: flex; gap: 1.5rem; margin-bottom: 1.5rem;
-    padding: 1rem 1.5rem; background: var(--bg-card);
-    border: 1px solid var(--border); border-radius: 10px;
-}
-.dm-summary-item { display: flex; align-items: baseline; gap: 0.4rem; }
-.dm-summary-value { font-size: 1.4rem; font-weight: 700; color: var(--text-bright); }
-.dm-summary-label { font-size: 0.8rem; color: var(--text-muted); }
-.dm-module-group { margin-bottom: 1.5rem; }
-.dm-module-header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 0.5rem 0; margin-bottom: 0.75rem;
-    border-bottom: 2px solid var(--primary);
-}
-.dm-module-name { font-weight: 700; color: var(--primary-light); font-size: 1rem; }
-.dm-module-count { font-size: 0.75rem; color: var(--text-muted); }
-.dm-entity-grid {
-    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem;
-}
-.dm-entity-card {
-    background: var(--bg-card); border: 1px solid var(--border);
-    border-radius: 10px; overflow: hidden;
-    transition: border-color var(--transition-fast);
-}
-.dm-entity-card:hover { border-color: var(--border-light); }
-.dm-entity-header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 0.6rem 0.75rem; background: var(--bg-hover);
-    border-bottom: 1px solid var(--border);
-}
-.dm-entity-name { font-weight: 600; color: var(--text-bright); font-size: 0.95rem; }
-.dm-entity-attr-count {
-    font-size: 0.65rem; color: var(--text-muted);
-    background: rgba(99,102,241,0.1); padding: 0.1rem 0.4rem; border-radius: 4px;
-}
-.dm-entity-desc {
-    padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--text-muted);
-    border-bottom: 1px solid var(--border);
-}
-.dm-attr-table { width: 100%; border-collapse: collapse; }
-.dm-attr-table th {
-    text-align: left; font-size: 0.65rem; text-transform: uppercase;
-    letter-spacing: 0.05em; color: var(--text-muted); padding: 0.4rem 0.75rem;
-    border-bottom: 1px solid var(--border); font-weight: 600;
-}
-.dm-attr-table td { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-bottom: 1px solid rgba(51,65,85,0.2); }
-.dm-attr-name { font-weight: 500; color: var(--text-bright); white-space: nowrap; }
-.dm-attr-desc { color: var(--text-muted); }
-.dm-relations {
-    padding: 0.5rem 0.75rem; border-top: 1px solid var(--border);
-    background: rgba(6,182,212,0.03);
-}
-.dm-relations-title {
-    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
-    color: var(--accent); font-weight: 600; margin-bottom: 0.3rem;
-}
-.dm-relation-item {
-    font-size: 0.8rem; color: var(--text); padding: 0.15rem 0;
-    padding-left: 0.75rem; border-left: 2px solid var(--accent);
-    margin-bottom: 0.2rem;
-}
-
-/* ============================================
-   STRUCTURE TAB (Sections/Resources)
-   ============================================ */
-.struct-section {
-    background: var(--bg-card);
-    border: 1px solid var(--border);
-    border-radius: 10px;
-    margin-bottom: 1rem;
-    overflow: hidden;
-}
-.struct-section-header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0.75rem 1rem;
-    background: var(--bg-hover);
-    border-bottom: 1px solid var(--border);
-}
-.struct-section-code {
-    font-weight: 600;
-    color: var(--text-bright);
-    font-size: 0.95rem;
-}
-.struct-section-desc {
-    flex: 1;
-    font-size: 0.8rem;
-    color: var(--text-muted);
-}
-.struct-section-badge {
-    font-size: 0.65rem;
-    color: var(--text-muted);
-    background: rgba(99,102,241,0.1);
-    padding: 0.1rem 0.5rem;
-    border-radius: 4px;
-    white-space: nowrap;
-}
-.struct-resources {
-    padding: 0.5rem 0;
-}
-.struct-resource {
-    display: flex;
-    align-items: baseline;
-    gap: 0.5rem;
-    padding: 0.35rem 1rem 0.35rem 1.5rem;
-    font-size: 0.85rem;
-    transition: background var(--transition-fast);
-}
-.struct-resource:hover {
-    background: var(--bg-hover);
-}
-.struct-resource-icon {
-    color: var(--primary-light);
-    font-size: 0.7rem;
-    flex-shrink: 0;
-}
-.struct-resource-name {
-    font-weight: 500;
-    color: var(--text-bright);
-}
-.struct-resource-desc {
-    font-size: 0.8rem;
-    color: var(--text-muted);
-}
+/* ============================================
+   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; }
+
+/* ============================================
+   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; }
+
+/* ============================================
+    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;
+}
+    width: 10px; height: 10px;
+    border-radius: 50%;
+}
+    font-size: 0.7rem;
+    color: var(--text-muted);
+    text-align: center;
+}
+/* ============================================
+   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;
+}
+
+/* ============================================
+   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); }
+
+/* ============================================
+   DATA MODEL (Consolidation)
+   ============================================ */
+.dm-summary {
+    display: flex; gap: 1.5rem; margin-bottom: 1.5rem;
+    padding: 1rem 1.5rem; background: var(--bg-card);
+    border: 1px solid var(--border); border-radius: 10px;
+}
+.dm-summary-item { display: flex; align-items: baseline; gap: 0.4rem; }
+.dm-summary-value { font-size: 1.4rem; font-weight: 700; color: var(--text-bright); }
+.dm-summary-label { font-size: 0.8rem; color: var(--text-muted); }
+.dm-module-group { margin-bottom: 1.5rem; }
+.dm-module-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0.5rem 0; margin-bottom: 0.75rem;
+    border-bottom: 2px solid var(--primary);
+}
+.dm-module-name { font-weight: 700; color: var(--primary-light); font-size: 1rem; }
+.dm-module-count { font-size: 0.75rem; color: var(--text-muted); }
+.dm-entity-grid {
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem;
+}
+.dm-entity-card {
+    background: var(--bg-card); border: 1px solid var(--border);
+    border-radius: 10px; overflow: hidden;
+    transition: border-color var(--transition-fast);
+}
+.dm-entity-card:hover { border-color: var(--border-light); }
+.dm-entity-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 0.6rem 0.75rem; background: var(--bg-hover);
+    border-bottom: 1px solid var(--border);
+}
+.dm-entity-name { font-weight: 600; color: var(--text-bright); font-size: 0.95rem; }
+.dm-entity-attr-count {
+    font-size: 0.65rem; color: var(--text-muted);
+    background: rgba(99,102,241,0.1); padding: 0.1rem 0.4rem; border-radius: 4px;
+}
+.dm-entity-desc {
+    padding: 0.5rem 0.75rem; font-size: 0.8rem; color: var(--text-muted);
+    border-bottom: 1px solid var(--border);
+}
+.dm-attr-table { width: 100%; border-collapse: collapse; }
+.dm-attr-table th {
+    text-align: left; font-size: 0.65rem; text-transform: uppercase;
+    letter-spacing: 0.05em; color: var(--text-muted); padding: 0.4rem 0.75rem;
+    border-bottom: 1px solid var(--border); font-weight: 600;
+}
+.dm-attr-table td { padding: 0.35rem 0.75rem; font-size: 0.8rem; border-bottom: 1px solid rgba(51,65,85,0.2); }
+.dm-attr-name { font-weight: 500; color: var(--text-bright); white-space: nowrap; }
+.dm-attr-desc { color: var(--text-muted); }
+.dm-relations {
+    padding: 0.5rem 0.75rem; border-top: 1px solid var(--border);
+    background: rgba(6,182,212,0.03);
+}
+.dm-relations-title {
+    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em;
+    color: var(--accent); font-weight: 600; margin-bottom: 0.3rem;
+}
+.dm-relation-item {
+    font-size: 0.8rem; color: var(--text); padding: 0.15rem 0;
+    padding-left: 0.75rem; border-left: 2px solid var(--accent);
+    margin-bottom: 0.2rem;
+}
+
+/* ============================================
+   STRUCTURE TAB (Sections/Resources)
+   ============================================ */
+.struct-section {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    margin-bottom: 1rem;
+    overflow: hidden;
+}
+.struct-section-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background: var(--bg-hover);
+    border-bottom: 1px solid var(--border);
+}
+.struct-section-code {
+    font-weight: 600;
+    color: var(--text-bright);
+    font-size: 0.95rem;
+}
+.struct-section-desc {
+    flex: 1;
+    font-size: 0.8rem;
+    color: var(--text-muted);
+}
+.struct-section-badge {
+    font-size: 0.65rem;
+    color: var(--text-muted);
+    background: rgba(99,102,241,0.1);
+    padding: 0.1rem 0.5rem;
+    border-radius: 4px;
+    white-space: nowrap;
+}
+.struct-resources {
+    padding: 0.5rem 0;
+}
+.struct-resource {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    padding: 0.35rem 1rem 0.35rem 1.5rem;
+    font-size: 0.85rem;
+    transition: background var(--transition-fast);
+}
+.struct-resource:hover {
+    background: var(--bg-hover);
+}
+.struct-resource-icon {
+    color: var(--primary-light);
+    font-size: 0.7rem;
+    flex-shrink: 0;
+}
+.struct-resource-name {
+    font-weight: 500;
+    color: var(--text-bright);
+}
+.struct-resource-desc {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+}
 
 
 /* --- 06-wireframes.css --- */
@@ -1959,55 +1949,6 @@ body {
                     </div>
                 </div>
 
-                <!-- SECTION: Risques et hypotheses -->
-                <div class="section" id="cadrage-risks" style="display:none;" data-vibe-hide>
-                    <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>
@@ -2295,7 +2236,6 @@ data.specComments = data.specComments || {};
 data.customRoles = data.customRoles || [];
 data.customActions = data.customActions || [];
 data.cadrage.criteria = data.cadrage.criteria || [];
-data.cadrage.risks = data.cadrage.risks || [];
 data.consolidation = data.consolidation || {};
 data.consolidation.e2eFlows = data.consolidation.e2eFlows || [];
 
@@ -2431,7 +2371,6 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     renderStakeholders();
     renderScope();
-    renderRisks();
     renderCriteria();
     renderModules();
     renderDependencies();
@@ -2443,6 +2382,7 @@ document.addEventListener('DOMContentLoaded', function() {
     updateDepSelects();
     initInlineComments();
     renderReviewPanel();
+    showSection(currentSectionId);
 });
 
 
@@ -2562,7 +2502,6 @@ function buildCadrageItems() {
     return renderNavItem('cadrage-context', 'Contexte') +
         renderNavItem('cadrage-stakeholders', 'Parties prenantes', data.cadrage.stakeholders.length) +
         renderNavItem('cadrage-scope', 'Perimetre fonctionnel') +
-        (isVibeCoding ? '' : renderNavItem('cadrage-risks', 'Risques et hypotheses', data.cadrage.risks.length)) +
         renderNavItem('cadrage-success', 'Criteres de reussite');
 }
 
@@ -2839,53 +2778,14 @@ function toggleCriterion(index) {
 function renderCriteria() {
     const container = document.getElementById('criteriaList');
     if (!container) return;
-    const criteria = data.cadrage.criteria || [];
-    container.innerHTML = criteria.map((c, i) => `
-        <div class="uc-item" style="display:flex;align-items:center;gap:0.75rem;">
-            <input type="checkbox" ${c.validated ? 'checked' : ''} onchange="toggleCriterion(${i})" style="cursor:pointer;width:18px;height:18px;flex-shrink:0;">
-            <span style="flex:1;${c.validated ? 'text-decoration:line-through;color:var(--text-muted);' : ''}">${c.text}</span>
-            <button class="btn btn-sm" onclick="removeCriterion(${i})" style="opacity:0.5;flex-shrink:0;">&#10005;</button>
-        </div>
-    `).join('');
-}
-
-/* ============================================
-   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('');
+    const criteria = data.cadrage.criteria || [];
+    container.innerHTML = criteria.map((c, i) => `
+        <div class="uc-item" style="display:flex;align-items:center;gap:0.75rem;">
+            <input type="checkbox" ${c.validated ? 'checked' : ''} onchange="toggleCriterion(${i})" style="cursor:pointer;width:18px;height:18px;flex-shrink:0;">
+            <span style="flex:1;${c.validated ? 'text-decoration:line-through;color:var(--text-muted);' : ''}">${c.text}</span>
+            <button class="btn btn-sm" onclick="removeCriterion(${i})" style="opacity:0.5;flex-shrink:0;">&#10005;</button>
+        </div>
+    `).join('');
 }
 
 /* ============================================
@@ -3602,7 +3502,6 @@ function renderWireframeMockup(code, wf, i) {
     </div>
     `;
 }
-}
 
 function toggleWireframeView(wireframeId, view) {
     const container = document.getElementById(wireframeId);
@@ -4399,7 +4298,6 @@ function renderHandoffStats() {
         <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>
-        ${isVibeCoding ? '' : `<div class="stat-card"><div class="stat-value">${data.cadrage.risks.length}</div><div class="stat-label">Risques identifies</div></div>`}
     `;
 }
 
@@ -4468,141 +4366,139 @@ function renderCoverageMatrix() {
 
 
 /* --- 08-editing.js --- */
-/* ============================================
-   PERSISTENCE
-   ============================================ */
-function autoSave() {
-    data.metadata.lastModified = new Date().toISOString();
-    localStorage.setItem(APP_KEY, JSON.stringify(data));
-}
-
-function saveToLocalStorage() {
-    autoSave();
-    showNotification('Modifications sauvegardees');
-}
-
-function resetToEmbedded() {
-    if (!confirm('Reinitialiser toutes les donnees depuis la version d\'origine ? Vos modifications locales (commentaires, notes) seront perdues.')) return;
-    localStorage.removeItem(APP_KEY);
-    // Restore data from ORIGINAL_DATA
-    Object.keys(data).forEach(k => delete data[k]);
-    Object.assign(data, JSON.parse(JSON.stringify(ORIGINAL_DATA)));
-    // Re-render everything
-    initEditableFields();
-    renderStakeholders();
-    renderScope();
-    renderRisks();
-    renderCriteria();
-    renderModules();
-    renderDependencies();
-    renderAllModuleSpecs();
-    renderConsolidation();
-    renderHandoff();
-    renderE2EFlows();
-    updateCounts();
-    renderReviewPanel();
-    showNotification('Donnees reinitialisees depuis la version d\'origine');
-}
-
-function loadFromLocalStorage() {
-    const saved = localStorage.getItem(APP_KEY);
-    if (!saved) return;
-
-    try {
-        const parsed = JSON.parse(saved);
-
-        // Build fingerprint of embedded structural data to detect HTML regeneration
-        const embeddedFingerprint = ORIGINAL_DATA.modules.map(m => m.code).sort().join(',')
-            + '|' + (ORIGINAL_DATA.metadata?.createdAt || '')
-            + '|' + ORIGINAL_DATA.modules.length;
-        const cachedFingerprint = parsed._structureFingerprint || '';
-
-        const structureChanged = embeddedFingerprint !== cachedFingerprint;
-        const embeddedModuleCount = ORIGINAL_DATA.modules?.length || 0;
-        const cachedModuleCount = (parsed.modules || []).length;
-        const hasNewModules = embeddedModuleCount > cachedModuleCount;
-        const embeddedModuleCodes = new Set(ORIGINAL_DATA.modules.map(m => m.code));
-        const cachedModuleCodes = new Set((parsed.modules || []).map(m => m.code));
-        const missingModules = [...embeddedModuleCodes].filter(c => !cachedModuleCodes.has(c));
-
-        if (structureChanged || hasNewModules || missingModules.length > 0) {
-            // HTML was regenerated or has new modules — keep embedded structural data
-            // Only restore user-specific edits (comments, custom roles, notes)
-            data.wireframeComments = parsed.wireframeComments || {};
-            data.specComments = parsed.specComments || {};
-            data.customRoles = parsed.customRoles || [];
-            data.customActions = parsed.customActions || [];
-            data.comments = parsed.comments || [];
-
-            // Merge user-added notes per module (preserve existing module notes)
-            for (const code of Object.keys(parsed.moduleSpecs || {})) {
-                if (data.moduleSpecs[code] && parsed.moduleSpecs[code]?.notes) {
-                    data.moduleSpecs[code].notes = parsed.moduleSpecs[code].notes;
-                }
-            }
-
-            // Save fresh embedded data with fingerprint
-            data._structureFingerprint = embeddedFingerprint;
-            autoSave();
-        } else {
-            // Cache matches current structure — safe to restore user edits on cadrage/notes
-            // IMPORTANT: Always keep embedded modules and moduleSpecs as structural source of truth
-            // Only merge cadrage user-editable fields and notes
-            if (parsed.cadrage) {
-                // Merge cadrage context (user may have edited text fields)
-                if (parsed.cadrage.context) {
-                    data.cadrage.context = { ...data.cadrage.context, ...parsed.cadrage.context };
-                }
-                // Merge scope only if user added items interactively
-                if (parsed.cadrage.scope) {
-                    data.cadrage.scope = { ...data.cadrage.scope, ...parsed.cadrage.scope };
-                }
-                // Merge stakeholders and risks if user edited them
-                if (parsed.cadrage.stakeholders) data.cadrage.stakeholders = parsed.cadrage.stakeholders;
-                if (parsed.cadrage.risks) data.cadrage.risks = parsed.cadrage.risks;
-            }
-            data.dependencies = parsed.dependencies || data.dependencies;
-            data.consolidation = { ...data.consolidation, ...(parsed.consolidation || {}) };
-
-            // Merge moduleSpecs: keep embedded structure, overlay user-editable fields (notes, custom permissions)
-            for (const code of Object.keys(data.moduleSpecs)) {
-                const cached = parsed.moduleSpecs?.[code];
-                if (cached) {
-                    // Preserve user notes
-                    if (cached.notes) data.moduleSpecs[code].notes = cached.notes;
-                    // Preserve user-added use cases/rules/entities (merged with embedded)
-                    // Only add items that don't exist in embedded (by name match)
-                    const embeddedUcNames = new Set((data.moduleSpecs[code].useCases || []).map(uc => uc.name));
-                    (cached.useCases || []).forEach(uc => {
-                        if (!embeddedUcNames.has(uc.name)) data.moduleSpecs[code].useCases.push(uc);
-                    });
-                    const embeddedBrNames = new Set((data.moduleSpecs[code].businessRules || []).map(br => br.name));
-                    (cached.businessRules || []).forEach(br => {
-                        if (!embeddedBrNames.has(br.name)) data.moduleSpecs[code].businessRules.push(br);
-                    });
-                    // Preserve user permissions edits
-                    if (cached.permissions) data.moduleSpecs[code].permissions = cached.permissions;
-                }
-            }
-
-            data.wireframeComments = parsed.wireframeComments || {};
-            data.specComments = parsed.specComments || {};
-            data.customRoles = parsed.customRoles || [];
-            data.customActions = parsed.customActions || [];
-            data.comments = parsed.comments || [];
-
-            // Update fingerprint
-            data._structureFingerprint = embeddedFingerprint;
-            autoSave();
-        }
-
-        // Restore editable fields
-        document.querySelectorAll('.editable[data-field]').forEach(el => {
-            const value = getNestedValue(data, 'cadrage.' + el.dataset.field);
-            if (value) el.textContent = value;
-        });
-    } catch (e) { console.error('Error loading saved data:', e); }
-}
+/* ============================================
+   PERSISTENCE
+   ============================================ */
+function autoSave() {
+    data.metadata.lastModified = new Date().toISOString();
+    localStorage.setItem(APP_KEY, JSON.stringify(data));
+}
+
+function saveToLocalStorage() {
+    autoSave();
+    showNotification('Modifications sauvegardees');
+}
+
+function resetToEmbedded() {
+    if (!confirm('Reinitialiser toutes les donnees depuis la version d\'origine ? Vos modifications locales (commentaires, notes) seront perdues.')) return;
+    localStorage.removeItem(APP_KEY);
+    // Restore data from ORIGINAL_DATA
+    Object.keys(data).forEach(k => delete data[k]);
+    Object.assign(data, JSON.parse(JSON.stringify(ORIGINAL_DATA)));
+    // Re-render everything
+    initEditableFields();
+    renderStakeholders();
+    renderScope();
+    renderCriteria();
+    renderModules();
+    renderDependencies();
+    renderAllModuleSpecs();
+    renderConsolidation();
+    renderHandoff();
+    renderE2EFlows();
+    updateCounts();
+    renderReviewPanel();
+    showNotification('Donnees reinitialisees depuis la version d\'origine');
+}
+
+function loadFromLocalStorage() {
+    const saved = localStorage.getItem(APP_KEY);
+    if (!saved) return;
+
+    try {
+        const parsed = JSON.parse(saved);
+
+        // Build fingerprint of embedded structural data to detect HTML regeneration
+        const embeddedFingerprint = ORIGINAL_DATA.modules.map(m => m.code).sort().join(',')
+            + '|' + (ORIGINAL_DATA.metadata?.createdAt || '')
+            + '|' + ORIGINAL_DATA.modules.length;
+        const cachedFingerprint = parsed._structureFingerprint || '';
+
+        const structureChanged = embeddedFingerprint !== cachedFingerprint;
+        const embeddedModuleCount = ORIGINAL_DATA.modules?.length || 0;
+        const cachedModuleCount = (parsed.modules || []).length;
+        const hasNewModules = embeddedModuleCount > cachedModuleCount;
+        const embeddedModuleCodes = new Set(ORIGINAL_DATA.modules.map(m => m.code));
+        const cachedModuleCodes = new Set((parsed.modules || []).map(m => m.code));
+        const missingModules = [...embeddedModuleCodes].filter(c => !cachedModuleCodes.has(c));
+
+        if (structureChanged || hasNewModules || missingModules.length > 0) {
+            // HTML was regenerated or has new modules — keep embedded structural data
+            // Only restore user-specific edits (comments, custom roles, notes)
+            data.wireframeComments = parsed.wireframeComments || {};
+            data.specComments = parsed.specComments || {};
+            data.customRoles = parsed.customRoles || [];
+            data.customActions = parsed.customActions || [];
+            data.comments = parsed.comments || [];
+
+            // Merge user-added notes per module (preserve existing module notes)
+            for (const code of Object.keys(parsed.moduleSpecs || {})) {
+                if (data.moduleSpecs[code] && parsed.moduleSpecs[code]?.notes) {
+                    data.moduleSpecs[code].notes = parsed.moduleSpecs[code].notes;
+                }
+            }
+
+            // Save fresh embedded data with fingerprint
+            data._structureFingerprint = embeddedFingerprint;
+            autoSave();
+        } else {
+            // Cache matches current structure — safe to restore user edits on cadrage/notes
+            // IMPORTANT: Always keep embedded modules and moduleSpecs as structural source of truth
+            // Only merge cadrage user-editable fields and notes
+            if (parsed.cadrage) {
+                // Merge cadrage context (user may have edited text fields)
+                if (parsed.cadrage.context) {
+                    data.cadrage.context = { ...data.cadrage.context, ...parsed.cadrage.context };
+                }
+                // Merge scope only if user added items interactively
+                if (parsed.cadrage.scope) {
+                    data.cadrage.scope = { ...data.cadrage.scope, ...parsed.cadrage.scope };
+                }
+                // Merge stakeholders if user edited them
+                if (parsed.cadrage.stakeholders) data.cadrage.stakeholders = parsed.cadrage.stakeholders;
+            }
+            data.dependencies = parsed.dependencies || data.dependencies;
+            data.consolidation = { ...data.consolidation, ...(parsed.consolidation || {}) };
+
+            // Merge moduleSpecs: keep embedded structure, overlay user-editable fields (notes, custom permissions)
+            for (const code of Object.keys(data.moduleSpecs)) {
+                const cached = parsed.moduleSpecs?.[code];
+                if (cached) {
+                    // Preserve user notes
+                    if (cached.notes) data.moduleSpecs[code].notes = cached.notes;
+                    // Preserve user-added use cases/rules/entities (merged with embedded)
+                    // Only add items that don't exist in embedded (by name match)
+                    const embeddedUcNames = new Set((data.moduleSpecs[code].useCases || []).map(uc => uc.name));
+                    (cached.useCases || []).forEach(uc => {
+                        if (!embeddedUcNames.has(uc.name)) data.moduleSpecs[code].useCases.push(uc);
+                    });
+                    const embeddedBrNames = new Set((data.moduleSpecs[code].businessRules || []).map(br => br.name));
+                    (cached.businessRules || []).forEach(br => {
+                        if (!embeddedBrNames.has(br.name)) data.moduleSpecs[code].businessRules.push(br);
+                    });
+                    // Preserve user permissions edits
+                    if (cached.permissions) data.moduleSpecs[code].permissions = cached.permissions;
+                }
+            }
+
+            data.wireframeComments = parsed.wireframeComments || {};
+            data.specComments = parsed.specComments || {};
+            data.customRoles = parsed.customRoles || [];
+            data.customActions = parsed.customActions || [];
+            data.comments = parsed.comments || [];
+
+            // Update fingerprint
+            data._structureFingerprint = embeddedFingerprint;
+            autoSave();
+        }
+
+        // Restore editable fields
+        document.querySelectorAll('.editable[data-field]').forEach(el => {
+            const value = getNestedValue(data, 'cadrage.' + el.dataset.field);
+            if (value) el.textContent = value;
+        });
+    } catch (e) { console.error('Error loading saved data:', e); }
+}
 
 
 /* --- 09-export.js --- */
@@ -4777,374 +4673,373 @@ function saveReviewJSON() {
 
 
 /* --- 10-comments.js --- */
-/* ============================================
-   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() {
-    // Cadrage sections: direct card children
-    document.querySelectorAll('.section > .card, .section > .stakeholder-card, .section > .uc-item, .section > .risk-item').forEach(function(card) {
-        if (card.dataset.commentInitialized) return;
-        card.dataset.commentInitialized = 'true';
-        var section = card.closest('.section');
-        var sectionId = section ? section.id : 'unknown';
-        var siblings = Array.from(section.querySelectorAll(':scope > .card, :scope > .stakeholder-card, :scope > .uc-item, :scope > .risk-item'));
-        var index = siblings.indexOf(card);
-        card.appendChild(createCommentUI(sectionId, index));
-    });
-
-    // Module spec lists: nested items in ucList, brList, entList containers
-    document.querySelectorAll('[id^="ucList-"] > .uc-item, [id^="brList-"] > div, [id^="entList-"] > .entity-block').forEach(function(item) {
-        if (item.dataset.commentInitialized) return;
-        item.dataset.commentInitialized = 'true';
-        var list = item.parentElement;
-        var listId = list.id;
-        var siblings = Array.from(list.children);
-        var index = siblings.indexOf(item);
-        item.appendChild(createCommentUI(listId, index));
-    });
-
-    // Stakeholder cards in grid
-    document.querySelectorAll('.stakeholder-grid > .stakeholder-card').forEach(function(card) {
-        if (card.dataset.commentInitialized) return;
-        card.dataset.commentInitialized = 'true';
-        var grid = card.parentElement;
-        var section = card.closest('.section');
-        var sectionId = section ? section.id : 'stakeholders';
-        var siblings = Array.from(grid.children);
-        var index = siblings.indexOf(card);
-        card.appendChild(createCommentUI(sectionId, index));
-    });
-
-    // Scope items
-    ['scopeVital', 'scopeImportant', 'scopeOptional', 'scopeExcluded'].forEach(function(containerId) {
-        var container = document.getElementById(containerId);
-        if (!container) return;
-        container.querySelectorAll('.uc-item').forEach(function(item, index) {
-            if (item.dataset.commentInitialized) return;
-            item.dataset.commentInitialized = 'true';
-            item.appendChild(createCommentUI(containerId, index));
-        });
-    });
-}
-
-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' : '');
-        }
-    }
-}
+/* ============================================
+   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() {
+    // Cadrage sections: direct card children
+    document.querySelectorAll('.section > .card, .section > .stakeholder-card, .section > .uc-item').forEach(function(card) {
+        if (card.dataset.commentInitialized) return;
+        card.dataset.commentInitialized = 'true';
+        var section = card.closest('.section');
+        var sectionId = section ? section.id : 'unknown';
+        var siblings = Array.from(section.querySelectorAll(':scope > .card, :scope > .stakeholder-card, :scope > .uc-item'));
+        var index = siblings.indexOf(card);
+        card.appendChild(createCommentUI(sectionId, index));
+    });
+
+    // Module spec lists: nested items in ucList, brList, entList containers
+    document.querySelectorAll('[id^="ucList-"] > .uc-item, [id^="brList-"] > div, [id^="entList-"] > .entity-block').forEach(function(item) {
+        if (item.dataset.commentInitialized) return;
+        item.dataset.commentInitialized = 'true';
+        var list = item.parentElement;
+        var listId = list.id;
+        var siblings = Array.from(list.children);
+        var index = siblings.indexOf(item);
+        item.appendChild(createCommentUI(listId, index));
+    });
+
+    // Stakeholder cards in grid
+    document.querySelectorAll('.stakeholder-grid > .stakeholder-card').forEach(function(card) {
+        if (card.dataset.commentInitialized) return;
+        card.dataset.commentInitialized = 'true';
+        var grid = card.parentElement;
+        var section = card.closest('.section');
+        var sectionId = section ? section.id : 'stakeholders';
+        var siblings = Array.from(grid.children);
+        var index = siblings.indexOf(card);
+        card.appendChild(createCommentUI(sectionId, index));
+    });
+
+    // Scope items
+    ['scopeVital', 'scopeImportant', 'scopeOptional', 'scopeExcluded'].forEach(function(containerId) {
+        var container = document.getElementById(containerId);
+        if (!container) return;
+        container.querySelectorAll('.uc-item').forEach(function(item, index) {
+            if (item.dataset.commentInitialized) return;
+            item.dataset.commentInitialized = 'true';
+            item.appendChild(createCommentUI(containerId, index));
+        });
+    });
+}
+
+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' : '');
+        }
+    }
+}
 
 
 /* --- 11-review-panel.js --- */
-/* ============================================
-   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-context': 'Contexte',
-        '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;
-    }
-    // Handle module structure sections (module-struct-{code}-{section})
-    const structMatch = sectionId.match(/^module-struct-(.+?)-(.+)$/);
-    if (structMatch) {
-        const mod = data.modules.find(m => m.code === structMatch[1]);
-        const modName = mod ? mod.name : structMatch[1];
-        return modName + ' > Structure > ' + structMatch[2];
-    }
-    // Handle list-based sectionIds (ucList-*, brList-*, entList-*)
-    const listMatch = sectionId.match(/^(uc|br|ent)List-(.+)$/);
-    if (listMatch) {
-        const tabLabels = { uc: 'Cas d\'utilisation', br: 'Regles metier', ent: 'Donnees' };
-        const mod = data.modules.find(m => m.code === listMatch[2]);
-        const modName = mod ? mod.name : listMatch[2];
-        return modName + ' > ' + (tabLabels[listMatch[1]] || listMatch[1]);
-    }
-    return sectionId;
-}
-
-function navigateToComment(sectionId, cardIndex) {
-    // Handle list-based sectionIds (ucList-*, brList-*, entList-*) → navigate to module + tab
-    const listMatch = sectionId.match(/^(uc|br|ent)List-(.+)$/);
-    if (listMatch) {
-        const [, tabType, moduleCode] = listMatch;
-        showSection('module-spec-' + moduleCode);
-        setTimeout(() => {
-            switchTab(moduleCode, tabType);
-            scrollToCommentThread(sectionId, cardIndex);
-        }, 150);
-    } else {
-        showSection(sectionId);
-        scrollToCommentThread(sectionId, cardIndex);
-    }
-}
-
-function scrollToCommentThread(sectionId, cardIndex) {
-    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);
-}
+/* ============================================
+   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-context': 'Contexte',
+        'cadrage-stakeholders': 'Parties prenantes',
+        'cadrage-scope': 'Perimetre',
+        '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;
+    }
+    // Handle module structure sections (module-struct-{code}-{section})
+    const structMatch = sectionId.match(/^module-struct-(.+?)-(.+)$/);
+    if (structMatch) {
+        const mod = data.modules.find(m => m.code === structMatch[1]);
+        const modName = mod ? mod.name : structMatch[1];
+        return modName + ' > Structure > ' + structMatch[2];
+    }
+    // Handle list-based sectionIds (ucList-*, brList-*, entList-*)
+    const listMatch = sectionId.match(/^(uc|br|ent)List-(.+)$/);
+    if (listMatch) {
+        const tabLabels = { uc: 'Cas d\'utilisation', br: 'Regles metier', ent: 'Donnees' };
+        const mod = data.modules.find(m => m.code === listMatch[2]);
+        const modName = mod ? mod.name : listMatch[2];
+        return modName + ' > ' + (tabLabels[listMatch[1]] || listMatch[1]);
+    }
+    return sectionId;
+}
+
+function navigateToComment(sectionId, cardIndex) {
+    // Handle list-based sectionIds (ucList-*, brList-*, entList-*) → navigate to module + tab
+    const listMatch = sectionId.match(/^(uc|br|ent)List-(.+)$/);
+    if (listMatch) {
+        const [, tabType, moduleCode] = listMatch;
+        showSection('module-spec-' + moduleCode);
+        setTimeout(() => {
+            switchTab(moduleCode, tabType);
+            scrollToCommentThread(sectionId, cardIndex);
+        }, 150);
+    } else {
+        showSection(sectionId);
+        scrollToCommentThread(sectionId, cardIndex);
+    }
+}
+
+function scrollToCommentThread(sectionId, cardIndex) {
+    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);
+}
 
     </script>
 </body>