Update index.html

index.html

@@ -23,14 +23,20 @@
         .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); }
@@ -53,7 +59,7 @@
         #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; }
         #takeaways-list li .icon { color: var(--warning-color); font-weight: bold; margin-top: 2px; }
-        
+
         .table-container { background: var(--surface-color); border-radius: var(--border-radius); box-shadow: var(--shadow-md); border: 1px solid var(--border-color); overflow: hidden; }
         .table-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
         .table-title { font-weight: 600; margin: 0; }
@@ -75,7 +81,6 @@
         .score-high { background-color: #fdeded; color: #a50e0e; }
         .score-medium { background-color: #fff8e1; color: #6f4f12; }
         .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); }
@@ -92,7 +97,7 @@
         .modal-footer a { color: var(--primary-light); }
         
         @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
-        @media (max-width: 1200px) { #main-view-controls, #comparison-view-controls { grid-template-columns: 1fr; } .detail-layout { grid-template-columns: 1fr; } }
+        @media (max-width: 992px) { #main-view-controls, #comparison-view-controls { grid-template-columns: 1fr; } .detail-layout { grid-template-columns: 1fr; } }
         @media (max-width: 768px) { .header-content, .container { padding: 0 1rem; } }
     </style>
 </head>
@@ -104,18 +109,16 @@
             <button class="guide-btn" id="guide-btn">📚 Guide d'Utilisation</button>
         </div>
     </header>
-
     <div class="container">
-        <div id="welcome-guide" class="welcome-guide">
-            <button id="close-guide" class="close-guide">×</button>
+        <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.</div>
-                 <div class="guide-step"><strong>2. Filtrez les Données :</strong><br>Utilisez la recherche et les filtres pour affiner les résultats.</div>
-                 <div class="guide-step"><strong>3. Analysez en Profondeur :</strong><br>Cliquez sur les lignes du tableau ou utilisez la vue comparative.</div>
+                <div class="guide-step"><strong>1. Choisissez une Vue :</strong><br>Utilisez les boutons ci-dessous pour sélectionner votre niveau d'analyse.</div>
+                <div class="guide-step"><strong>2. Filtrez les Données :</strong><br>Utilisez la recherche et les filtres pour affiner les résultats.</div>
+                <div class="guide-step"><strong>3. Analysez en Profondeur :</strong><br>Cliquez sur les lignes du tableau ou utilisez la vue comparative.</div>
             </div>
         </div>
-        
         <div class="controls-panel">
             <div class="view-selector">
                 <button class="view-btn active" id="btn-ftl">Vue FTL</button>
@@ -123,14 +126,14 @@
                 <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 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;">
-                 <div class="controls-grid" style="grid-template-columns: 1fr 1fr;">
+            <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>
@@ -144,7 +147,7 @@
                 <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 id="detail-panel">
                 <div class="detail-card"><div class="detail-layout">
                     <div>
                         <h3 class="chart-title" id="criteria-chart-title"></h3>
@@ -161,7 +164,8 @@
                 <div class="table-wrapper"><table id="dataTable"><thead id="tableHead"></thead><tbody id="tableBody"></tbody></table></div>
             </div>
         </div>
-        <div id="comparison-view-content">
+
+        <div id="comparison-view-content" style="display: none;">
              <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>
@@ -173,13 +177,13 @@
         <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 est conçu pour vous aider à explorer le modèle de classement des risques de la FDA et à prioriser vos actions en sécurité alimentaire.</p>
+            <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 de la Food Traceability List. Idéal pour les audits.</li>
                 <li><strong>Vue Globale :</strong> Affiche tous les produits de la base de données pour une vue d'ensemble.</li>
                 <li><strong>Analyse Détaillée :</strong> Montre les couples produit/danger. Cliquez sur une ligne pour une analyse approfondie (graphique radar et actions recommandées).</li>
-                <li><strong>Analyse Comparative :</strong> Permet de comparer visuellement les contributions des facteurs de risque pour un produit et ses dangers.</li>
+                <li><strong>Analyse Comparative :</strong> Permet de comparer visuellement les contributions des différents facteurs de risque pour un produit et ses dangers.</li>
             </ul>
             <h3>Les 7 Critères d'Évaluation de la FDA</h3>
             <div class="criteria-grid">
@@ -194,38 +198,53 @@
             <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'
+                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' },
+                'ftl': { dataKey: 'aggregated_ftl', title: 'Vue FTL (Produits à Traçabilité Renforcée)', 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 (Tous les Produits)', 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 (Produit x Danger)', 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-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'),
-                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')
+                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() {
@@ -236,9 +255,8 @@
                 };
                 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);
@@ -263,9 +281,13 @@
                 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(el.buttons[state.currentDataset]) el.buttons[state.currentDataset].classList.add('active');
 
-                if (isComparisonView) renderComparisonView(); else renderMainView();
+                if (isComparisonView) {
+                    renderComparisonView();
+                } else {
+                    renderMainView();
+                }
             }
 
             function renderMainView() {
@@ -277,10 +299,51 @@
                 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';
+                el.hazardFilterContainer.style.display = state.currentDataset === 'pairs' ? 'flex' : 'none';
                 if (state.currentDataset !== 'pairs') el.detailPanel.classList.remove('visible');
             }
 
+            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 Pondérés 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'];
+                const colors = ['#e57373', '#d69f70', '#81c784', '#4dd0e1', '#64b5f6', '#7986cb', '#ba68c8'];
+
+                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, title: { display: true, text: 'Score Pondéré' } }, y: { stacked: true } }, plugins: { legend: { position: 'top' } } }
+                });
+            }
+
+            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() {
+                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('');
+                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) { 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');
@@ -289,16 +352,14 @@
                 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 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',
@@ -320,37 +381,6 @@
                 el.detailPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
             }
 
-            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 Pondérés 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'];
-                const colors = ['#e57373', '#d69f70', '#81c784', '#4dd0e1', '#64b5f6', '#7986cb', '#ba68c8'];
-
-                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, title: { display: true, text: 'Score Pondéré' } }, y: { stacked: true } }, plugins: { legend: { position: 'top' } } }
-                });
-            }
-
-            function populateFilters() {
-                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('');
-                
-                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) { 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 setupEventListeners() {
                 el.searchInput.addEventListener('input', () => { state.searchTerm = el.searchInput.value; render(); });
                 el.hazardFilter.addEventListener('change', () => { state.hazardFilter = el.hazardFilter.value; render(); });