Update index.html

index.html

@@ -19,25 +19,30 @@
         .header-content { max-width: 1600px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; }
         .logo { display: flex; align-items: center; gap: 0.75rem; color: var(--primary-color); font-weight: 600; font-size: 1.25rem; }
         .logo-icon { width: 32px; height: 32px; background-color: var(--primary-color); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1rem; }
+        .guide-btn { background-color: var(--primary-color); color: white; border: none; padding: 0.6rem 1.2rem; border-radius: var(--border-radius); cursor: pointer; font-size: 0.9rem; transition: var(--transition); }
+        .guide-btn:hover { background-color: var(--primary-light); }
         .container { max-width: 1600px; margin: 2rem auto; padding: 0 2rem; }
+
+        .welcome-guide { background-color: #e7f3ff; border: 1px solid #a8c7fa; border-radius: var(--border-radius); padding: 1.5rem; margin-bottom: 2rem; position: relative; animation: fadeIn 0.5s; }
+        .welcome-guide h3 { margin: 0 0 1rem 0; color: var(--primary-color); }
+        .guide-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
+        .guide-step { font-size: 0.9rem; }
+        .guide-step strong { color: var(--text-primary); }
+        .close-guide { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); }
         
         .controls-panel { background: var(--surface-color); border-radius: var(--border-radius); padding: 1.5rem; margin-bottom: 2rem; box-shadow: var(--shadow-md); border: 1px solid var(--border-color); }
         .view-selector { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1rem; }
         .view-btn { padding: 0.6rem 1.2rem; border: 1px solid transparent; background: none; color: var(--text-secondary); cursor: pointer; font-size: 0.95rem; font-weight: 500; border-bottom: 3px solid transparent; border-radius: 6px; }
         .view-btn.active { color: var(--primary-light); background-color: #e7f3ff; border-color: var(--primary-light); }
         
-        #main-view-controls { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; }
+        #main-view-controls { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; }
         #comparison-view-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; }
-        
         .search-container { position: relative; }
         .search-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.5rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); font-size: 1rem; transition: var(--transition); }
         .search-input:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 0 0 3px rgba(0, 85, 164, 0.1); }
         .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
         .filter-select { padding: 0.75rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); background: var(--surface-color); color: var(--text-primary); font-size: 0.9rem; width: 100%; }
         
-        .main-view-content, .comparison-view-content { display: none; }
-        .main-view-content.active, .comparison-view-content.active { display: block; }
-
         .dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; }
         .metric-card { background: var(--surface-color); padding: 1.5rem; border-radius: var(--border-radius); box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); }
         .metric-label { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
@@ -49,8 +54,7 @@
         .detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
         .chart-title { font-weight: 600; color: var(--text-primary); margin: 0 0 1rem 0; font-size: 1.1rem; word-break: break-word; }
         .chart-canvas-container { position: relative; height: 320px; }
-        #comparison-chart-container { height: auto; min-height: 600px; }
-
+        #comparison-chart-container { min-height: 600px; height: auto; }
         #takeaways-section h4 { margin: 0 0 1rem 0; color: var(--primary-color); }
         #takeaways-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
         #takeaways-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; }
@@ -79,16 +83,44 @@
         .score-low { background-color: #e6f4ea; color: #1b5e20; }
         #loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); z-index: 3000; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2rem; color: var(--primary-color); transition: opacity 0.3s; }
         
+        .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(5px); }
+        .modal-content { background-color: var(--surface-color); margin: 5% auto; padding: 2.5rem; border: 1px solid var(--border-color); width: 90%; max-width: 800px; border-radius: var(--border-radius); animation: fadeIn 0.3s; }
+        .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; margin-bottom: 1.5rem; }
+        .modal-title { font-size: 1.5rem; color: var(--primary-color); margin: 0; }
+        .close-modal { font-size: 2rem; font-weight: bold; color: var(--text-secondary); cursor: pointer; }
+        .close-modal:hover { color: var(--text-primary); }
+        .criteria-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
+        .criteria-card { background: var(--bg-color); padding: 1rem; border-radius: var(--border-radius); }
+        .criteria-title { font-weight: 600; display: block; margin-bottom: 0.25rem; }
+        .criteria-desc { font-size: 0.9rem; color: var(--text-secondary); }
+        .modal-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border-color); text-align: center; font-size: 0.9rem; }
+        .modal-footer a { color: var(--primary-light); }
+        
         @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
-        @media (max-width: 992px) { #main-view-controls, #comparison-view-controls { grid-template-columns: 1fr; } .detail-layout { grid-template-columns: 1fr; } }
+        @media (max-width: 992px) { .controls-grid, .detail-layout { grid-template-columns: 1fr; } }
         @media (max-width: 768px) { .header-content, .container { padding: 0 1rem; } }
     </style>
 </head>
 <body>
     <div id="loading-overlay"><div><h2>Chargement des données...</h2><p>Veuillez patienter.</p></div></div>
-    <header class="header"><div class="header-content"><div class="logo"><div class="logo-icon">🛡️</div><span>FDA Risk Analyzer</span></div></div></header>
+    <header class="header">
+        <div class="header-content">
+            <div class="logo"><div class="logo-icon">🛡️</div><span>FDA Risk Analyzer</span></div>
+            <button class="guide-btn" id="guide-btn">📚 Guide d'Utilisation</button>
+        </div>
+    </header>
 
     <div class="container">
+        <div class="welcome-guide" id="welcome-guide">
+            <button class="close-guide" id="close-guide">×</button>
+            <h3>Guide Rapide de l'Outil</h3>
+            <div class="guide-steps">
+                <div class="guide-step"><strong>1. Choisissez une Vue :</strong><br>Utilisez les boutons ci-dessous pour sélectionner votre niveau d'analyse. "Analyse Détaillée" est la plus puissante pour étudier les causes des risques.</div>
+                <div class="guide-step"><strong>2. Filtrez les Données :</strong><br>Utilisez la recherche et le filtre "Danger" (en mode détaillé) pour affiner les résultats.</div>
+                <div class="guide-step"><strong>3. Analysez en Profondeur :</strong><br>En mode "Analyse Détaillée", cliquez sur une ligne pour visualiser le détail des 7 critères de risque et les actions recommandées.</div>
+            </div>
+        </div>
+        
         <div class="controls-panel">
             <div class="view-selector">
                 <button class="view-btn active" id="btn-ftl">Vue FTL</button>
@@ -96,15 +128,22 @@
                 <button class="view-btn" id="btn-pairs">Analyse Détaillée</button>
                 <button class="view-btn" id="btn-comparison">Analyse Comparative</button>
             </div>
-            
-            <div id="main-controls">
-                 <div class="search-container"><span class="search-icon">🔍</span><input type="search" class="search-input" id="searchInput" placeholder="Rechercher..."></div>
-                 <div id="hazard-filter-container" style="display: none;"><select class="filter-select" id="hazard-filter"><option value="">Tous les Dangers</option></select></div>
+            <div id="main-view-controls">
+                <div class="controls-grid">
+                    <div class="search-container">
+                        <span class="search-icon">🔍</span>
+                        <input type="search" class="search-input" id="searchInput" placeholder="Rechercher...">
+                    </div>
+                    <div id="hazard-filter-container" style="display: none;">
+                        <select class="filter-select" id="hazard-filter"><option value="">Tous les Dangers</option></select>
+                    </div>
+                </div>
             </div>
-            
-            <div id="comparison-controls" style="display: none;">
-                <select class="filter-select" id="commodity-filter"></select>
-                <select class="filter-select" id="comparison-hazard-filter"><option value="All">Tous les Dangers</option></select>
+            <div id="comparison-view-controls" style="display: none;">
+                 <div class="controls-grid" style="grid-template-columns: 1fr 1fr;">
+                    <select class="filter-select" id="commodity-filter"></select>
+                    <select class="filter-select" id="comparison-hazard-filter"><option value="All">Tous les Dangers</option></select>
+                </div>
             </div>
         </div>
 
@@ -115,11 +154,19 @@
                 <div class="metric-card"><div class="metric-label">Catégories Uniques</div><div class="metric-value" id="categories-count">-</div></div>
                 <div class="metric-card"><div class="metric-label">Score Moyen</div><div class="metric-value" id="avg-score">-</div></div>
             </div>
-             <div id="detail-panel">
-                <div class="detail-card"><div class="detail-layout">
-                    <div><h3 class="chart-title" id="criteria-chart-title"></h3><div class="chart-canvas-container"><canvas id="criteriaChart"></canvas></div></div>
-                    <div id="takeaways-section"><h4>Points de Vigilance & Actions</h4><ul id="takeaways-list"></ul></div>
-                </div></div>
+            <div id="detail-panel">
+                <div class="detail-card">
+                    <div class="detail-layout">
+                        <div>
+                            <h3 class="chart-title" id="criteria-chart-title"></h3>
+                            <div class="chart-canvas-container"><canvas id="criteriaChart"></canvas></div>
+                        </div>
+                        <div id="takeaways-section">
+                            <h4>Points de Vigilance & Actions</h4>
+                            <ul id="takeaways-list"></ul>
+                        </div>
+                    </div>
+                </div>
             </div>
             <div class="table-container">
                 <div class="table-header"><h3 class="table-title" id="table-title"></h3><div class="results-count" id="results-count"></div></div>
@@ -128,51 +175,90 @@
         </div>
 
         <div id="comparison-view-content">
-            <div class="chart-container">
+             <div class="chart-container">
                 <h3 class="chart-title" id="stacked-chart-title">Analyse des Critères Pondérés</h3>
                 <div class="chart-canvas-container" id="comparison-chart-container"><canvas id="stackedBarChart"></canvas></div>
             </div>
         </div>
     </div>
     
+    <div id="guide-modal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header"><h2 class="modal-title">Guide d'Utilisation</h2><span class="close-modal" id="close-guide-btn">&times;</span></div>
+            <h3>Comment utiliser cet outil</h3>
+            <p>Cet outil vous aide à explorer le modèle de classement des risques de la FDA pour prioriser vos efforts en sécurité alimentaire.</p>
+            <h4>Les Vues d'Analyse</h4>
+            <ul>
+                <li><strong>Vue FTL :</strong> Se concentre sur les produits à plus haut risque identifiés par la FDA (Food Traceability List). Idéal pour les audits de conformité.</li>
+                <li><strong>Vue Globale :</strong> Affiche tous les produits de la base de données pour une vue d'ensemble complète du paysage des risques.</li>
+                <li><strong>Analyse Détaillée :</strong> Montre les couples produit/danger. Cliquez sur une ligne pour afficher une analyse détaillée (graphique radar et actions recommandées).</li>
+                <li><strong>Analyse Comparative :</strong> Permet de comparer visuellement les contributions des différents facteurs de risque pour un produit et ses dangers associés.</li>
+            </ul>
+            <h3>Les 7 Critères d'Évaluation de la FDA</h3>
+            <div class="criteria-grid">
+                <div class="criteria-card"><div class="criteria-title">C1: Gravité</div><div class="criteria-desc">Impact sur la santé.</div></div>
+                <div class="criteria-card"><div class="criteria-title">C2: Exposition</div><div class="criteria-desc">Fréquence de consommation.</div></div>
+                <div class="criteria-card"><div class="criteria-title">C3: Dose-Réponse</div><div class="criteria-desc">Quantité de pathogène infectieuse.</div></div>
+                <div class="criteria-card"><div class="criteria-title">C4: Croissance</div><div class="criteria-desc">Potentiel de multiplication.</div></div>
+                <div class="criteria-card"><div class="criteria-title">C5: Traitement</div><div class="criteria-desc">Impact des processus industriels.</div></div>
+                <div class="criteria-card"><div class="criteria-title">C6: Contamination</div><div class="criteria-desc">Probabilité de contamination à la source.</div></div>
+                <div class="criteria-card"><div class="criteria-title">C7: Consommation</div><div class="criteria-desc">Mode de consommation (cru/cuit).</div></div>
+            </div>
+            <div class="modal-footer">Source officielle : <a href="https://hfpappexternal.fda.gov/scripts/FDARiskRankingModelforFoodTracingfinalrule/" target="_blank" rel="noopener noreferrer">FDA Risk-Ranking Model</a>.</div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             let state = {
-                currentDataset: 'ftl', searchTerm: '', hazardFilter: '',
-                sortColumn: 'agg_score', sortDirection: 'desc', charts: {},
-                selectedCommodity: '', selectedHazard: 'All'
+                currentDataset: 'ftl',
+                searchTerm: '',
+                hazardFilter: '',
+                sortColumn: 'agg_score',
+                sortDirection: 'desc',
+                selectedCommodity: '',
+                selectedHazard: 'All',
+                charts: {}
             };
             let fdaData = { aggregated_ftl: [], aggregated_all: [], pairs_all: [] };
-            
+
             const viewConfig = {
                 'ftl': { dataKey: 'aggregated_ftl', title: 'Vue FTL', columns: [{ key: 'commodity', label: 'Produit', sortable: true }, { key: 'commodity_category', label: 'Catégorie', sortable: true }, { key: 'agg_score', label: 'Score', sortable: true, type: 'score' }], scoreColumn: 'agg_score' },
                 'all': { dataKey: 'aggregated_all', title: 'Vue Globale', columns: [{ key: 'commodity', label: 'Produit', sortable: true }, { key: 'commodity_category', label: 'Catégorie', sortable: true }, { key: 'agg_score', label: 'Score', sortable: true, type: 'score' }, { key: 'ftl', label: 'FTL', sortable: true, type: 'boolean' }], scoreColumn: 'agg_score' },
-                'pairs': { dataKey: 'pairs_all', title: 'Analyse Détaillée', columns: [{ key: 'commodity', label: 'Produit', sortable: true }, { key: 'hazardRef', label: 'Danger', sortable: true }, { key: 'risk_score', label: 'Score', sortable: true, type: 'score' }], scoreColumn: 'risk_score' },
-                'comparison': { dataKey: 'pairs_all' }
+                'pairs': { dataKey: 'pairs_all', title: 'Analyse Détaillée', columns: [{ key: 'commodity', label: 'Produit', sortable: true }, { key: 'hazardRef', label: 'Danger', sortable: true }, { key: 'risk_score', label: 'Score', sortable: true, type: 'score' }], scoreColumn: 'risk_score' }
             };
 
             const el = {
                 loadingOverlay: document.getElementById('loading-overlay'),
-                mainViewContent: document.getElementById('main-view-content'), comparisonViewContent: document.getElementById('comparison-view-content'),
-                mainControls: document.getElementById('main-controls'), comparisonControls: document.getElementById('comparison-controls'),
-                searchInput: document.getElementById('searchInput'), hazardFilter: document.getElementById('hazard-filter'), hazardFilterContainer: document.getElementById('hazard-filter-container'),
-                commodityFilter: document.getElementById('commodity-filter'), comparisonHazardFilter: document.getElementById('comparison-hazard-filter'),
+                mainViewContent: document.getElementById('main-view-content'),
+                comparisonViewContent: document.getElementById('comparison-view-content'),
+                mainControls: document.getElementById('main-view-controls'),
+                comparisonControls: document.getElementById('comparison-controls'),
+                searchInput: document.getElementById('searchInput'),
+                hazardFilter: document.getElementById('hazard-filter'),
+                hazardFilterContainer: document.getElementById('hazard-filter-container'),
+                commodityFilter: document.getElementById('commodity-filter'),
+                comparisonHazardFilter: document.getElementById('comparison-hazard-filter'),
                 buttons: { ftl: document.getElementById('btn-ftl'), all: document.getElementById('btn-all'), pairs: document.getElementById('btn-pairs'), comparison: document.getElementById('btn-comparison') },
                 metrics: { totalProducts: document.getElementById('total-products'), highRiskCount: document.getElementById('high-risk-count'), categoriesCount: document.getElementById('categories-count'), avgScore: document.getElementById('avg-score')},
                 detailPanel: document.getElementById('detail-panel'),
-                criteriaChartTitle: document.getElementById('criteria-chart-title'), criteriaCanvas: document.getElementById('criteriaChart'),
-                takeawaysSection: document.getElementById('takeaways-section'), takeawaysList: document.getElementById('takeaways-list'),
-                tableTitle: document.getElementById('table-title'), tableHead: document.getElementById('tableHead'), tableBody: document.getElementById('tableBody'), resultsCount: document.getElementById('results-count'),
-                stackedBarChartCanvas: document.getElementById('stackedBarChart'), stackedChartTitle: document.getElementById('stacked-chart-title'),
-            };
-            
-            const formatCell = (value, type) => {
-                if (value === undefined || value === null) return '';
-                const cleanValue = String(value);
-                if (type === 'score') return `<span class="score-badge ${parseInt(cleanValue) >= 400 ? 'score-high' : parseInt(cleanValue) >= 200 ? 'score-medium' : 'score-low'}">${cleanValue}</span>`;
-                if (type === 'boolean') return cleanValue === 'true' ? '<span style="color: var(--success-color); font-weight: 600;">✓</span>' : '<span style="color: var(--text-secondary);">-</span>';
-                return cleanValue;
+                criteriaChartTitle: document.getElementById('criteria-chart-title'),
+                criteriaCanvas: document.getElementById('criteriaChart'),
+                takeawaysSection: document.getElementById('takeaways-section'),
+                takeawaysList: document.getElementById('takeaways-list'),
+                tableTitle: document.getElementById('table-title'),
+                tableHead: document.getElementById('tableHead'),
+                tableBody: document.getElementById('tableBody'),
+                resultsCount: document.getElementById('results-count'),
+                stackedBarChartCanvas: document.getElementById('stackedBarChart'),
+                stackedChartTitle: document.getElementById('stacked-chart-title'),
+                welcomeGuide: document.getElementById('welcome-guide'),
+                closeGuide: document.getElementById('close-guide'),
+                guideModal: document.getElementById('guide-modal'),
+                guideBtn: document.getElementById('guide-btn'),
+                closeGuideBtn: document.getElementById('close-guide-btn')
             };
 
             async function loadAllData() {
@@ -183,34 +269,39 @@
                 };
                 try {
                     const responses = await Promise.all(Object.values(files).map(file => fetch(file)));
-                    for (const res of responses) { if (!res.ok) throw new Error(`Échec du chargement du fichier: ${res.url}`); }
+                    for (const res of responses) { if (!res.ok) throw new Error(`Échec du chargement : ${res.url}`); }
                     const [ftl, all, pairs] = await Promise.all(responses.map(res => res.json()));
                     const clean = item => ({ ...item, commodity: String(item.commodity).replace(/<ast>\*<\/ast>/g, '').trim() });
                     fdaData.aggregated_ftl = ftl.map(clean);
                     fdaData.aggregated_all = all.map(clean);
                     fdaData.pairs_all = pairs.map(item => ({ ...clean(item), C1w: (item.C1||0)*10, C2w: (item.C2||0)*10, C3w: (item.C3||0)*10, C4w: (item.C4||0)*10, C5w: (item.C5||0)*10, C6w: (item.C6||0)*10, C7w: (item.C7||0)*10 }));
                     
-                    setupUI();
-                    el.loadingOverlay.style.display = 'none';
+                    initializeAppUI();
                 } catch (error) { el.loadingOverlay.innerHTML = `<h2>Erreur</h2><p style="color:red;">${error.message}</p>`; }
             }
 
-            function setupUI() {
-                populateHazardFilter(); populateCommodityFilter();
-                render(); setupEventListeners();
+            function initializeAppUI() {
+                populateFilters();
+                setupEventListeners();
+                render();
+                el.loadingOverlay.style.display = 'none';
             }
-            
-            function render() {
-                const isMainView = state.currentDataset !== 'comparison';
-                el.mainViewContent.style.display = isMainView ? 'block' : 'none';
-                el.comparisonViewContent.style.display = isMainView ? 'none' : 'block';
-                el.mainControls.style.display = isMainView ? 'grid' : 'none';
-                el.comparisonControls.style.display = isMainView ? 'none' : 'grid';
 
+            function render() {
+                const isComparisonView = state.currentDataset === 'comparison';
+                el.mainViewContent.style.display = isComparisonView ? 'none' : 'block';
+                el.comparisonViewContent.style.display = isComparisonView ? 'block' : 'none';
+                el.mainControls.style.display = isComparisonView ? 'none' : 'block';
+                el.comparisonControls.style.display = isComparisonView ? 'block' : 'none';
+                
                 Object.values(el.buttons).forEach(btn => btn.classList.remove('active'));
                 el.buttons[state.currentDataset].classList.add('active');
 
-                if(isMainView) renderMainView(); else renderComparisonView();
+                if (isComparisonView) {
+                    renderComparisonView();
+                } else {
+                    renderMainView();
+                }
             }
 
             function renderMainView() {
@@ -222,27 +313,15 @@
                 document.querySelectorAll('#tableHead th').forEach(th => { th.classList.remove('sort-asc', 'sort-desc'); if (th.dataset.column === state.sortColumn) th.classList.add(`sort-${state.sortDirection}`); });
                 el.tableBody.innerHTML = data.length === 0 ? `<tr><td colspan="${config.columns.length}" style="text-align:center;">🚫 Aucun résultat</td></tr>` : data.map((row, index) => `<tr class="${state.currentDataset === 'pairs' ? 'clickable' : ''}" data-index="${index}">${config.columns.map(col => `<td>${formatCell(row[col.key], col.type)}</td>`).join('')}</tr>`).join('');
                 updateDashboard(data);
-                el.hazardFilterContainer.style.display = state.currentDataset === 'pairs' ? 'block' : 'none';
-            }
-            
-            function updateDashboard(data) {
-                const scoreCol = viewConfig[state.currentDataset].scoreColumn;
-                const scores = data.map(i => i[scoreCol]).filter(s => typeof s === 'number');
-                el.metrics.totalProducts.textContent = data.length;
-                el.metrics.highRiskCount.textContent = scores.filter(s => s >= 400).length;
-                el.metrics.categoriesCount.textContent = new Set(data.map(i => i.commodity_category).filter(Boolean)).size;
-                el.metrics.avgScore.textContent = scores.length ? Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) : 'N/A';
+                el.hazardFilterContainer.style.display = state.currentDataset === 'pairs' ? 'flex' : 'none';
+                if (state.currentDataset !== 'pairs') el.detailPanel.classList.remove('visible');
             }
 
-            function showDetailPanel(rowIndex) {
-                // ... (code de la fonction showDetailPanel de la version précédente)
-            }
-             
             function renderComparisonView() {
                 let data = fdaData.pairs_all.filter(p => p.commodity === state.selectedCommodity);
                 if (state.selectedHazard !== 'All') data = data.filter(p => p.hazardRef === state.selectedHazard);
                 el.stackedChartTitle.textContent = `Analyse des Critères pour : ${state.selectedCommodity}`;
-
+                
                 if (state.charts.stackedBar) state.charts.stackedBar.destroy();
                 const criteria = ['C1w', 'C2w', 'C3w', 'C4w', 'C5w', 'C6w', 'C7w'];
                 const labels = ['C1: Éclosions', 'C2: Gravité', 'C3: Contamination', 'C4: Croissance', 'C5: Intervention', 'C6: Consommation', 'C7: Coût'];
@@ -251,46 +330,107 @@
                 state.charts.stackedBar = new Chart(el.stackedBarChartCanvas, {
                     type: 'bar',
                     data: { labels: data.map(d => d.hazardRef), datasets: criteria.map((c, i) => ({ label: labels[i], data: data.map(d => d[c]), backgroundColor: colors[i] }))},
-                    options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true }, y: { stacked: true } }, plugins: { legend: { position: 'top' } } }
+                    options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true, title: { display: true, text: 'Score Pondéré' } }, y: { stacked: true } }, plugins: { legend: { position: 'top' } } }
                 });
             }
 
-            function populateCommodityFilter() {
-                 const commodities = [...new Set(fdaData.pairs_all.map(item => item.commodity))].sort();
+            function filterAndSortData() {
+                const config = viewConfig[state.currentDataset];
+                let data = [...fdaData[config.dataKey]];
+                if (state.searchTerm) { const search = state.searchTerm.toLowerCase(); data = data.filter(row => Object.values(row).some(v => String(v).toLowerCase().includes(search))); }
+                if (state.currentDataset === 'pairs' && state.hazardFilter) { data = data.filter(row => row.hazardRef === state.hazardFilter); }
+                if (state.sortColumn) {
+                    const isNumeric = config.columns.find(c => c.key === state.sortColumn)?.type === 'score';
+                    data.sort((a, b) => { const valA = a[state.sortColumn], valB = b[state.sortColumn]; const comparison = isNumeric ? (valA || 0) - (valB || 0) : String(valA || '').localeCompare(String(valB || '')); return state.sortDirection === 'asc' ? comparison : -comparison; });
+                }
+                return data;
+            }
+
+            function populateFilters() {
+                // For main table view
+                const mainHazards = [...new Set(fdaData.pairs_all.map(item => item.hazardRef))].filter(Boolean).sort();
+                el.hazardFilter.innerHTML = '<option value="">Tous les Dangers</option>' + mainHazards.map(h => `<option value="${h}">${h}</option>`).join('');
+                
+                // For comparison view
+                const commodities = [...new Set(fdaData.pairs_all.map(item => item.commodity))].sort();
                 el.commodityFilter.innerHTML = commodities.map(c => `<option value="${c}">${c}</option>`).join('');
-                if(commodities.length > 0){
+                if (commodities.length > 0) {
                     state.selectedCommodity = commodities[0];
                     el.commodityFilter.value = state.selectedCommodity;
+                    populateComparisonHazardFilter();
                 }
             }
+            
+            function populateComparisonHazardFilter(){
+                const hazards = [...new Set(fdaData.pairs_all.filter(p => p.commodity === state.selectedCommodity).map(p => p.hazardRef))].sort();
+                el.comparisonHazardFilter.innerHTML = '<option value="All">Tous les Dangers</option>' + hazards.map(h => `<option value="${h}">${h}</option>`).join('');
+            }
+            
+            function updateDashboard(data) {
+                const scoreCol = viewConfig[state.currentDataset].scoreColumn;
+                const scores = data.map(i => i[scoreCol]).filter(s => typeof s === 'number');
+                el.metrics.totalProducts.textContent = data.length;
+                el.metrics.highRiskCount.textContent = scores.filter(s => s >= 400).length;
+                el.metrics.categoriesCount.textContent = new Set(data.map(i => i.commodity_category).filter(Boolean)).size;
+                el.metrics.avgScore.textContent = scores.length ? Math.round(scores.reduce((a, b) => a + b, 0) / scores.length) : 'N/A';
+            }
 
-            function populateHazardFilter() {
-                 let hazards = [...new Set(fdaData.pairs_all.map(item => item.hazardRef))].filter(Boolean).sort();
-                 el.hazardFilter.innerHTML = '<option value="">Tous les Dangers</option>' + hazards.map(h => `<option value="${h}">${h}</option>`).join('');
+            function showDetailPanel(rowIndex) {
+                const data = filterAndSortData()[rowIndex];
+                if (!data || !('C1' in data)) return;
+                
+                el.detailPanel.classList.add('visible');
+                el.criteriaCanvas.style.display = 'block';
+                el.takeawaysSection.style.display = 'block';
+                el.criteriaChartTitle.textContent = `Analyse de "${data.commodity}"`;
+                
+                if (state.charts.criteria) state.charts.criteria.destroy();
+                state.charts.criteria = new Chart(el.criteriaCanvas, {
+                    type: 'radar',
+                    data: { labels: ['C1-Gravité', 'C2-Expo.', 'C3-Dose', 'C4-Croissance', 'C5-Traitement', 'C6-Contam.', 'C7-Conso.'], datasets: [{ label: `Danger: ${data.hazardRef}`, data: [data.C1, data.C2, data.C3, data.C4, data.C5, data.C6, data.C7], backgroundColor: 'rgba(0, 51, 102, 0.2)', borderColor: 'rgba(0, 51, 102, 1)' }] },
+                    options: { responsive: true, maintainAspectRatio: false, scales: { r: { beginAtZero: true, max: 9, ticks: { stepSize: 3 } } } }
+                });
+                
+                const takeaways = [];
+                if (data.C1 > 6) takeaways.push("Le danger est <strong>sévère</strong>. La maîtrise du CCP est critique.");
+                if (data.C2 > 6) takeaways.push("Le produit est <strong>largement consommé</strong>. L'impact d'un rappel serait majeur.");
+                if (data.C4 > 6) takeaways.push("Le pathogène peut <strong>proliférer rapidement</strong>. <u>Action</u>: Valider la chaîne du froid et les barèmes de DLC/DDM.");
+                if (data.C5 < 3) takeaways.push("Pas d'<strong>étape d'assainissement</strong> efficace. <u>Action</u>: Maîtrise des matières premières essentielle.");
+                if (data.C6 > 6) takeaways.push("Risque de <strong>contamination à la source élevé</strong>. <u>Action</u>: Renforcer audits fournisseurs et contrôles à réception.");
+                if (data.C7 > 6) takeaways.push("Souvent <strong>consommé cru</strong>. Contrôles microbiologiques du produit fini à considérer.");
+                el.takeawaysList.innerHTML = takeaways.length ? takeaways.map(t => `<li><span class="icon">⚠️</span><span>${t}</span></li>`).join('') : "<li><span class='icon'>✓</span><span>Le risque est équilibré.</span></li>";
 
-                if(state.selectedCommodity){
-                    hazards = [...new Set(fdaData.pairs_all.filter(p => p.commodity === state.selectedCommodity).map(p => p.hazardRef))].sort();
-                    el.comparisonHazardFilter.innerHTML = '<option value="All">Tous les Dangers</option>' + hazards.map(h => `<option value="${h}">${h}</option>`).join('');
-                }
+                document.querySelectorAll('#tableBody tr').forEach(tr => tr.classList.remove('selected'));
+                const selectedRow = document.querySelector(`#tableBody tr[data-index="${rowIndex}"]`);
+                if(selectedRow) selectedRow.classList.add('selected');
+                el.detailPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
             }
 
             function setupEventListeners() {
-                el.searchInput.addEventListener('input', () => { state.searchTerm = el.searchInput.value; render(); });
-                el.hazardFilter.addEventListener('change', () => { state.hazardFilter = el.hazardFilter.value; render(); });
-                el.tableHead.addEventListener('click', (e) => { const th = e.target.closest('th[data-column]'); if (th) { state.sortColumn = th.dataset.column; state.sortDirection = state.sortDirection === 'asc' ? 'desc' : 'asc'; render(); }});
-                el.tableBody.addEventListener('click', (e) => { if (state.currentDataset !== 'pairs') return; const row = e.target.closest('tr'); if (row) showDetailPanel(row.dataset.index); });
+                el.searchInput.addEventListener('input', () => { state.searchTerm = el.searchInput.value; renderMainView(); });
+                el.hazardFilter.addEventListener('change', () => { state.hazardFilter = el.hazardFilter.value; renderMainView(); });
+                el.tableHead.addEventListener('click', (e) => { const th = e.target.closest('th[data-column]'); if (th) { state.sortColumn = th.dataset.column; state.sortDirection = state.sortDirection === 'asc' ? 'desc' : 'asc'; renderMainView(); }});
+                el.tableBody.addEventListener('click', (e) => { if (state.currentDataset === 'pairs') { const row = e.target.closest('tr'); if (row) showDetailPanel(row.dataset.index); }});
+                
                 Object.keys(el.buttons).forEach(key => {
                     el.buttons[key].addEventListener('click', () => {
                         state.currentDataset = key;
-                        state.sortColumn = viewConfig[key].scoreColumn;
-                        state.searchTerm = ''; el.searchInput.value = '';
+                        if(key !== 'comparison') { state.sortColumn = viewConfig[key].scoreColumn; }
+                        Object.assign(state, { searchTerm: '', hazardFilter: '', sortDirection: 'desc' });
+                        el.searchInput.value = ''; el.hazardFilter.value = '';
                         el.detailPanel.classList.remove('visible');
                         render();
                     });
                 });
-                 el.commodityFilter.addEventListener('change', (e) => { state.selectedCommodity = e.target.value; state.selectedHazard = 'All'; populateHazardFilter(); renderComparisonView(); });
-                 el.comparisonHazardFilter.addEventListener('change', (e) => { state.selectedHazard = e.target.value; renderComparisonView(); });
-                 // etc.
+                
+                el.commodityFilter.addEventListener('change', (e) => { state.selectedCommodity = e.target.value; state.selectedHazard = 'All'; populateComparisonHazardFilter(); renderComparisonView(); });
+                el.comparisonHazardFilter.addEventListener('change', (e) => { state.selectedHazard = e.target.value; renderComparisonView(); });
+                
+                el.guideBtn.addEventListener('click', () => { el.guideModal.style.display = 'block'; });
+                el.closeGuideBtn.addEventListener('click', () => { el.guideModal.style.display = 'none'; });
+                window.addEventListener('click', (event) => { if (event.target == el.guideModal) el.guideModal.style.display = 'none'; });
+                if (localStorage.getItem('hideWelcomeGuide')) el.welcomeGuide.style.display = 'none';
+                el.closeGuide.addEventListener('click', () => { el.welcomeGuide.style.display = 'none'; try { localStorage.setItem('hideWelcomeGuide', 'true'); } catch (e) {} });
             }
             
             loadAllData();