Spaces:

MMOON
/

FDARRMT

Running

App Files Files Community

MMOON commited on Jan 10

Commit

e19584f

verified ·

1 Parent(s): d5639e4

Upload 2 files

Browse files

Files changed (2) hide show

index.html +1692 -0
translation.js +212 -0

index.html ADDED Viewed

	@@ -0,0 +1,1692 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FDA Risk Analyzer - Outil d'Analyse des Risques Alimentaires</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-color: #003366;
+            --primary-light: #0055a4;
+            --accent-color: #fdb81e;
+            --danger-color: #d93025;
+            --warning-color: #f59e0b;
+            --success-color: #1e8e3e;
+            --bg-color: #f8f9fa;
+            --surface-color: #ffffff;
+            --text-primary: #202124;
+            --text-secondary: #5f6368;
+            --border-color: #dee2e6;
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            --border-radius: 8px;
+            --transition: all 0.3s ease-in-out;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            line-height: 1.5;
+        }
+        .header {
+            background: var(--surface-color);
+            border-bottom: 1px solid var(--border-color);
+            padding: 1rem 0;
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            box-shadow: var(--shadow-sm);
+        }
+        .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);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .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;
+        }
+        .methodology-info {
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+            border: 1px solid #0ea5e9;
+            border-radius: var(--border-radius);
+            margin-bottom: 2rem;
+            overflow: hidden;
+            box-shadow: var(--shadow-sm);
+        }
+        .methodology-header {
+            background: var(--primary-color);
+            color: white;
+            padding: 1rem 1.5rem;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: var(--transition);
+        }
+        .methodology-header:hover {
+            background-color: var(--primary-light);
+        }
+        .methodology-title {
+            font-size: 1.1rem;
+            font-weight: 600;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .methodology-toggle {
+            font-size: 1.2rem;
+            transition: transform 0.3s ease;
+        }
+        .methodology-toggle.expanded {
+            transform: rotate(180deg);
+        }
+        .methodology-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
+            padding: 0 2rem;
+        }
+        .methodology-content.expanded {
+            max-height: 3000px;
+            padding: 2rem;
+        }
+        .methodology-inner {
+            /* Padding supprimé - maintenant géré par methodology-content */
+        }
+        .methodology-section {
+            margin-bottom: 2rem;
+        }
+        .methodology-section:last-child {
+            margin-bottom: 0;
+        }
+        .methodology-section h4 {
+            color: var(--primary-color);
+            font-size: 1.1rem;
+            margin: 0 0 1rem 0;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .methodology-section p {
+            margin-bottom: 1rem;
+            line-height: 1.6;
+        }
+        .methodology-section ul {
+            padding-left: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .methodology-section li {
+            margin-bottom: 0.5rem;
+            line-height: 1.5;
+        }
+        .highlight-box {
+            background: rgba(251, 191, 36, 0.1);
+            border-left: 4px solid #f59e0b;
+            padding: 1rem;
+            margin: 1rem 0;
+            border-radius: 0 var(--border-radius) var(--border-radius) 0;
+        }
+        .reference-section {
+            background: var(--bg-color);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            margin-top: 1.5rem;
+        }
+        .reference-section h5 {
+            color: var(--primary-color);
+            margin: 0 0 1rem 0;
+            font-size: 1rem;
+        }
+        .reference-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .reference-list li {
+            margin-bottom: 0.75rem;
+            padding-left: 1.5rem;
+            position: relative;
+            font-size: 0.9rem;
+        }
+        .reference-list li:before {
+            content: "📄";
+            position: absolute;
+            left: 0;
+        }
+        .reference-list a {
+            color: var(--primary-light);
+            text-decoration: none;
+        }
+        .reference-list a:hover {
+            text-decoration: underline;
+        }
+        .haccp-integration {
+            background: rgba(30, 142, 62, 0.1);
+            border: 2px solid var(--success-color);
+            border-radius: var(--border-radius);
+            padding: 1.5rem;
+            margin: 1.5rem 0;
+        }
+        .haccp-integration h5 {
+            color: var(--success-color);
+            margin: 0 0 1rem 0;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .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;
+            transition: var(--transition);
+        }
+        .view-btn.active {
+            color: var(--primary-light);
+            background-color: #e7f3ff;
+            border-color: var(--primary-light);
+        }
+        .view-btn:hover:not(.active) {
+            background-color: #f0f7ff;
+        }
+        #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%;
+        }
+        .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);
+            text-align: center;
+        }
+        .metric-label {
+            font-size: 0.85rem;
+            color: var(--text-secondary);
+            margin-bottom: 0.5rem;
+        }
+        .metric-value {
+            font-size: 1.75rem;
+            font-weight: 600;
+            color: var(--text-primary);
+        }
+        .metric-card.high-risk {
+            border-top: 4px solid var(--danger-color);
+        }
+        .metric-card.medium-risk {
+            border-top: 4px solid var(--warning-color);
+        }
+        .metric-card.low-risk {
+            border-top: 4px solid var(--success-color);
+        }
+        #detail-panel {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.5s ease-in-out, margin 0.5s ease-in-out;
+            margin-bottom: 0;
+        }
+        #detail-panel.visible {
+            max-height: 1000px;
+            margin-bottom: 2rem;
+        }
+        .detail-card {
+            background-color: var(--surface-color);
+            border-radius: var(--border-radius);
+            border: 1px solid var(--border-color);
+            box-shadow: var(--shadow-md);
+            padding: 1.5rem;
+        }
+        .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 {
+            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;
+        }
+        #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;
+        }
+        .results-count {
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+        }
+        .table-wrapper {
+            overflow-x: auto;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        th, td {
+            padding: 1rem 1.5rem;
+            text-align: left;
+            border-bottom: 1px solid var(--border-color);
+            white-space: nowrap;
+        }
+        tbody tr:last-child td {
+            border-bottom: none;
+        }
+        th {
+            background: var(--bg-color);
+            font-weight: 600;
+            color: var(--text-secondary);
+            font-size: 0.85rem;
+            text-transform: uppercase;
+        }
+        th.sortable {
+            cursor: pointer;
+            position: relative;
+        }
+        th.sortable:hover {
+            color: var(--text-primary);
+        }
+        th.sortable::after {
+            content: '↕';
+            position: absolute;
+            right: 0.75rem;
+            opacity: 0.3;
+        }
+        th.sort-asc::after {
+            content: '↑';
+            opacity: 1;
+        }
+        th.sort-desc::after {
+            content: '↓';
+            opacity: 1;
+        }
+        tbody tr.clickable {
+            cursor: pointer;
+        }
+        tbody tr:hover {
+            background-color: #e9ecef;
+        }
+        tbody tr.selected {
+            background-color: #dbeafe !important;
+            font-weight: 500;
+        }
+        .score-badge {
+            display: inline-block;
+            padding: 0.2rem 0.6rem;
+            border-radius: 1rem;
+            font-size: 0.8rem;
+            font-weight: 700;
+        }
+        .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;
+        }
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(0, 51, 102, 0.2);
+            border-top: 5px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .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: 1200px) {
+            #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;
+            }
+            .view-selector {
+                flex-direction: column;
+            }
+            .dashboard {
+                grid-template-columns: 1fr;
+            }
+        }
+        .risk-indicator {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            margin-right: 8px;
+        }
+        .risk-high {
+            background-color: var(--danger-color);
+        }
+        .risk-medium {
+            background-color: var(--warning-color);
+        }
+        .risk-low {
+            background-color: var(--success-color);
+        }
+        .footer {
+            text-align: center;
+            padding: 2rem;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            border-top: 1px solid var(--border-color);
+            margin-top: 2rem;
+        }
+        .error-message {
+            color: var(--danger-color);
+            text-align: center;
+            padding: 2rem;
+            font-weight: 500;
+        }
+    </style>
+</head>
+<body>
+    <div id="loading-overlay">
+        <div>
+            <div class="spinner"></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>
+            <button class="guide-btn" id="guide-btn">
+                <i class="fas fa-book"></i>
+                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.
+                </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="methodology-info" id="methodology-info">
+            <div class="methodology-header" id="methodology-header">
+                <h3 class="methodology-title">
+                    🧬 Comprendre la Méthodologie FDA de Classement des Risques
+                </h3>
+                <span class="methodology-toggle" id="methodology-toggle">▼</span>
+            </div>
+            <div class="methodology-content" id="methodology-content">
+                <div class="methodology-inner">
+                    <div class="methodology-section">
+                        <h4>🎯 Qu'est-ce que le Modèle de Classement des Risques de la FDA ?</h4>
+                        <p>
+                            Le <strong>FDA Risk-Ranking Model</strong> est un outil scientifique développé par l'administration américaine (FDA) pour <strong>prioriser les efforts de surveillance</strong> et de contrôle dans l'industrie alimentaire. Il permet d'identifier quels couples produit/danger représentent les risques les plus élevés pour la santé publique.
+                        </p>
+                        <div class="highlight-box">
+                            <strong>🔍 Objectif principal :</strong> Aider les autorités sanitaires et les professionnels de l'alimentaire à concentrer leurs ressources limitées sur les risques qui comptent vraiment.
+                        </div>
+                    </div>
+                    <div class="methodology-section">
+                        <h4>⚙️ Comment ça fonctionne : Les 7 Critères d'Évaluation</h4>
+                        <p>Chaque couple produit/pathogène est évalué selon 7 critères scientifiques, notés de 1 à 9 :</p>
+                        <ul>
+                            <li><strong>C1 - Gravité :</strong> Sévérité des effets sur la santé (mortalité, hospitalisation)</li>
+                            <li><strong>C2 - Exposition :</strong> Fréquence et quantité de consommation du produit</li>
+                            <li><strong>C3 - Dose-Réponse :</strong> Quantité minimale de pathogène nécessaire pour déclencher la maladie</li>
+                            <li><strong>C4 - Croissance :</strong> Capacité du pathogène à survivre/proliférer dans l'aliment</li>
+                            <li><strong>C5 - Traitement :</strong> Efficacité des procédés de décontamination</li>
+                            <li><strong>C6 - Contamination :</strong> Probabilité de contamination à la production</li>
+                            <li><strong>C7 - Consommation :</strong> Mode de préparation (cru, cuit, transformé)</li>
+                        </ul>
+                        <p>Le <strong>score final</strong> est calculé en multipliant ces 7 critères, créant un classement objectif des risques.</p>
+                    </div>
+                    <div class="methodology-section">
+                        <h4>📊 Pourquoi c'est révolutionnaire ?</h4>
+                        <p>Avant ce modèle, les décisions étaient souvent basées sur :</p>
+                        <ul>
+                            <li>❌ L'intuition ou l'expérience personnelle</li>
+                            <li>❌ Les crises médiatiques du moment</li>
+                            <li>❌ Des approches fragmentées par produit OU par pathogène</li>
+                        </ul>
+                        <p>Le modèle FDA apporte :</p>
+                        <ul>
+                            <li>✅ Une approche <strong>scientifique et quantitative</strong></li>
+                            <li>✅ Une vision <strong>globale</strong> produit × pathogène</li>
+                            <li>✅ Une <strong>transparence</strong> dans les décisions de priorisation</li>
+                            <li>✅ Une <strong>comparabilité</strong> entre différents risques</li>
+                        </ul>
+                    </div>
+                    <div class="haccp-integration">
+                        <h5>🛡️ Intégration avec votre Plan HACCP</h5>
+                        <p><strong>Ce modèle ne remplace pas HACCP, il le renforce !</strong></p>
+                        <ul>
+                            <li><strong>Analyse des Dangers :</strong> Utilisez les scores pour prioriser vos dangers significatifs (étape 1 HACCP)</li>
+                            <li><strong>Points Critiques :</strong> Concentrez vos CCP sur les couples à haut score</li>
+                            <li><strong>Surveillance :</strong> Adaptez la fréquence de monitoring selon les scores de risque</li>
+                            <li><strong>Validation :</strong> Justifiez scientifiquement vos choix de maîtrise</li>
+                            <li><strong>Audits :</strong> Orientez vos vérifications sur les zones à plus haut risque</li>
+                        </ul>
+                    </div>
+                    <div class="methodology-section">
+                        <h4>💼 Applications Pratiques en Industrie</h4>
+                        <ul>
+                            <li><strong>Responsables Qualité :</strong> Priorisation des plans de surveillance et contrôles</li>
+                            <li><strong>Acheteurs :</strong> Évaluation et sélection des fournisseurs selon les risques</li>
+                            <li><strong>R&D :</strong> Conception de produits avec maîtrise des risques intégrée</li>
+                            <li><strong>Direction :</strong> Allocation des budgets sécurité alimentaire basée sur les risques réels</li>
+                            <li><strong>Auditeurs :</strong> Focus des audits sur les couples produit/danger critiques</li>
+                        </ul>
+                    </div>
+                    <div class="methodology-section">
+                        <h4>🌍 Food Traceability List (FTL)</h4>
+                        <p>
+                            La <strong>Food Traceability List</strong> est une liste des aliments à plus haut risque, identifiés grâce à ce modèle.
+                            Ces produits sont soumis à des <strong>exigences de traçabilité renforcée</strong> aux États-Unis depuis janvier 2026.
+                        </p>
+                        <div class="highlight-box">
+                            <strong>💡 Conseil :</strong> Même en Europe, surveiller ces produits FTL peut vous donner un avantage concurrentiel et anticiper les évolutions réglementaires.
+                        </div>
+                    </div>
+                    <div class="reference-section">
+                        <h5>📚 Sources et Références Officielles</h5>
+                        <ul class="reference-list">
+                            <li>
+                                <a href="https://www.fda.gov/food/cfsan-constituent-updates/fda-releases-risk-ranking-model-food-tracing-final-rule" target="_blank">
+                                    FDA Risk-Ranking Model for Food Tracing Final Rule (2022)
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://hfpappexternal.fda.gov/scripts/FDARiskRankingModelforFoodTracingfinalrule/" target="_blank">
+                                    Outil Officiel FDA Risk-Ranking Model (Interface Interactive)
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://www.federalregister.gov/documents/2022/11/21/2022-24417/requirements-for-additional-traceability-records-for-certain-foods" target="_blank">
+                                    Federal Register - Règlement Traçabilité Alimentaire (21 CFR 204)
+                                </a>
+                            </li>
+                            <li>
+                                <a href="https://www.fda.gov/media/161908/download" target="_blank">
+                                    Document Technique FDA : "Risk-Ranking Model for Food Tracing" (PDF)
+                                </a>
+                            </li>
+                            <li>
+                                <strong>Publications Scientifiques :</strong> Journal of Food Protection, Risk Analysis, Food Control - rechercher "FDA risk-ranking model"
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="controls-panel">
+            <div class="view-selector">
+                <button class="view-btn active" id="btn-ftl">Vue FTL</button>
+                <button class="view-btn" id="btn-all">Vue Globale</button>
+                <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="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;">
+                    <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>
+        <div id="main-view-content" class="active">
+            <div class="dashboard">
+                <div class="metric-card">
+                    <div class="metric-label">Produits Affichés</div>
+                    <div class="metric-value" id="total-products">-</div>
+                </div>
+                <div class="metric-card high-risk">
+                    <div class="metric-label">Haut Risque (≥400)</div>
+                    <div class="metric-value" id="high-risk-count">-</div>
+                </div>
+                <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>
+            <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>
+                <div class="table-wrapper">
+                    <table id="dataTable">
+                        <thead id="tableHead"></thead>
+                        <tbody id="tableBody"></tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <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>
+            </div>
+        </div>
+    </div>
+    <div class="footer">
+        <p>FDA Risk Analyzer - Outil d'Analyse des Risques Alimentaires basé sur le modèle de la FDA</p>
+        <p>© 2023 Tous droits réservés</p>
+    </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 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 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">
+                <div class="criteria-card">
+                    <div class="criteria-title">C1: Gravité</div>
+                    <div class="criteria-desc">Gravité des effets sur la santé (mortalité, morbidité, hospitalisation).</div>
+                </div>
+                <div class="criteria-card">
+                    <div class="criteria-title">C2: Exposition</div>
+                    <div class="criteria-desc">Probabilité d'exposition au danger (fréquence de consommation, quantité).</div>
+                </div>
+                <div class="criteria-card">
+                    <div class="criteria-title">C3: Dose-Réponse</div>
+                    <div class="criteria-desc">Dose infectieuse minimale requise pour provoquer la maladie.</div>
+                </div>
+                <div class="criteria-card">
+                    <div class="criteria-title">C4: Croissance</div>
+                    <div class="criteria-desc">Capacité du pathogène à croître/survivre dans l'aliment.</div>
+                </div>
+                <div class="criteria-card">
+                    <div class="criteria-title">C5: Traitement</div>
+                    <div class="criteria-desc">Efficacité des traitements de décontamination appliqués.</div>
+                </div>
+                <div class="criteria-card">
+                    <div class="criteria-title">C6: Contamination</div>
+                    <div class="criteria-desc">Probabilité de contamination à la production (sources, environnement).</div>
+                </div>
+                <div class="criteria-card">
+                    <div class="criteria-title">C7: Consommation</div>
+                    <div class="criteria-desc">Mode de préparation/consommation (cru, cuit, transformé).</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() {
+            // --- SCRIPT COMPLET ET CORRIGÉ ---
+            const state = {
+                currentDataset: 'ftl',
+                searchTerm: '',
+                hazardFilter: '',
+                sortColumn: 'agg_score',
+                sortDirection: 'desc',
+                selectedCommodity: '',
+                selectedHazard: 'All',
+                charts: {}
+            };
+            // Données réelles chargées depuis les fichiers JSON
+            let fdaData = {
+                aggregated_ftl: [],
+                aggregated_all: [],
+                pairs_all: []
+            };
+            const viewConfig = {
+                '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'),
+                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')
+            };
+            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;
+            };
+            const filterAndSortData = () => {
+                const config = viewConfig[state.currentDataset];
+                if (!config) return [];
+                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];
+                        const valB = b[state.sortColumn];
+                        if (isNumeric) {
+                            return state.sortDirection === 'asc' ?
+                                (valA || 0) - (valB || 0) :
+                                (valB || 0) - (valA || 0);
+                        } else {
+                            const strA = String(valA || '').toLowerCase();
+                            const strB = String(valB || '').toLowerCase();
+                            return state.sortDirection === 'asc' ?
+                                strA.localeCompare(strB) :
+                                strB.localeCompare(strA);
+                        }
+                    });
+                }
+                return data;
+            };
+            const 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 (isComparisonView) {
+                    renderComparisonView();
+                } else {
+                    renderMainView();
+                }
+            };
+            const renderMainView = () => {
+                const config = viewConfig[state.currentDataset];
+                const data = filterAndSortData();
+                el.tableTitle.textContent = config.title;
+                el.resultsCount.textContent = `${data.length} résultat(s)`;
+                // Générer l'en-tête du tableau
+                el.tableHead.innerHTML = `<tr>${config.columns.map(c =>
+                    `<th class="${c.sortable ? 'sortable' : ''}" data-column="${c.key}">${c.label}</th>`
+                ).join('')}</tr>`;
+                // Mettre à jour l'indicateur de tri
+                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}`);
+                    }
+                });
+                // Générer le corps du tableau
+                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' ? 'flex' : 'none';
+                if (state.currentDataset !== 'pairs') {
+                    el.detailPanel.classList.remove('visible');
+                }
+            };
+            const 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: Gravité',
+                    'C2: Exposition',
+                    'C3: Dose-Réponse',
+                    'C4: Croissance',
+                    'C5: Traitement',
+                    'C6: Contamination',
+                    'C7: Consommation'
+                ];
+                const colors = [
+                    '#C62828', '#AD1457', '#6A1B9A',
+                    '#4527A0', '#283593', '#1565C0', '#0277BD'
+                ];
+                if (data.length === 0) {
+                    document.getElementById('comparison-chart-container').innerHTML = '<p style="text-align:center; padding:2rem;">Aucune donnée disponible pour cette sélection</p>';
+                    return;
+                }
+                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'
+                            }
+                        }
+                    }
+                });
+            };
+            const 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';
+            };
+            const 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();
+                }
+                // Nettoyer les balises HTML dans le nom du produit
+                const cleanedProduct = data.commodity.replace(/<[^>]+>/g, '');
+                const cleanedHazard = data.hazardRef.replace(/<[^>]+>/g, '');
+                el.criteriaChartTitle.textContent = `Analyse "${cleanedProduct}" × Danger "${cleanedHazard}"`;
+                state.charts.criteria = new Chart(el.criteriaCanvas, {
+                    type: 'radar',
+                    data: {
+                        labels: [
+                            'C1-Gravité',
+                            'C2-Exposition',
+                            'C3-Dose-Réponse',
+                            'C4-Croissance',
+                            'C5-Traitement',
+                            'C6-Contamination',
+                            'C7-Consommation'
+                        ],
+                        datasets: [{
+                            label: `${cleanedHazard}`,
+                            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)',
+                            pointBackgroundColor: 'rgba(0, 51, 102, 1)'
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        scales: {
+                            r: {
+                                beginAtZero: true,
+                                max: 9,
+                                ticks: {
+                                    stepSize: 3
+                                }
+                            }
+                        },
+                        plugins: {
+                            legend: {
+                                display: false
+                            }
+                        }
+                    }
+                });
+                const takeaways = [];
+                if (data.C1 > 6) takeaways.push("Le danger associé 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>";
+                document.querySelectorAll('#tableBody tr').forEach(tr => tr.classList.remove('selected'));
+                document.querySelector(`#tableBody tr[data-index="${rowIndex}"]`)?.classList.add('selected');
+                el.detailPanel.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            };
+            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() {
+                // Vérification de sécurité pour les éléments
+                if (!el.searchInput || !el.hazardFilter) {
+                    console.error('Certains éléments DOM ne sont pas trouvés');
+                    return;
+                }
+                // Debug: vérifier tous les éléments methodology
+                console.log('Methodology elements check:');
+                console.log('Header:', el.methodologyHeader);
+                console.log('Content:', el.methodologyContent);
+                console.log('Toggle:', el.methodologyToggle);
+                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') {
+                        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;
+                        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';
+                    el.comparisonHazardFilter.value = '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';
+                }
+                if (el.closeGuide) {
+                    el.closeGuide.addEventListener('click', () => {
+                        el.welcomeGuide.style.display = 'none';
+                        try {
+                            localStorage.setItem('hideWelcomeGuide', 'true');
+                        } catch (e) {}
+                    });
+                }
+                // Toggle methodology info avec fallback
+                if (el.methodologyHeader && el.methodologyContent && el.methodologyToggle) {
+                    console.log('Setting up methodology toggle');
+                    el.methodologyHeader.addEventListener('click', () => {
+                        console.log('Methodology header clicked');
+                        const isExpanded = el.methodologyContent.classList.contains('expanded');
+                        console.log('Is expanded:', isExpanded);
+                        if (isExpanded) {
+                            el.methodologyContent.classList.remove('expanded');
+                            el.methodologyToggle.classList.remove('expanded');
+                            console.log('Collapsed');
+                        } else {
+                            el.methodologyContent.classList.add('expanded');
+                            el.methodologyToggle.classList.add('expanded');
+                            console.log('Expanded');
+                        }
+                    });
+                } else {
+                    console.error('Methodology elements missing:', {
+                        header: !!el.methodologyHeader,
+                        content: !!el.methodologyContent,
+                        toggle: !!el.methodologyToggle
+                    });
+                    // Fallback: essayer de nouveau dans 100ms
+                    setTimeout(() => {
+                        const header = document.getElementById('methodology-header');
+                        const content = document.getElementById('methodology-content');
+                        const toggle = document.getElementById('methodology-toggle');
+                        if (header && content && toggle) {
+                            console.log('Retry: Setting up methodology toggle');
+                            header.addEventListener('click', () => {
+                                console.log('Methodology header clicked (retry)');
+                                const isExpanded = content.classList.contains('expanded');
+                                if (isExpanded) {
+                                    content.classList.remove('expanded');
+                                    toggle.classList.remove('expanded');
+                                } else {
+                                    content.classList.add('expanded');
+                                    toggle.classList.add('expanded');
+                                }
+                            });
+                        } else {
+                            console.error('Methodology elements still not found after retry');
+                        }
+                    }, 100);
+                }
+            }
+            // Fonction de chargement des données depuis les fichiers JSON avec les noms réels
+            async function loadAllData() {
+                try {
+                    // Charger les données depuis les fichiers JSON avec les noms exacts visibles dans HuggingFace
+                    const [ftlResponse, allResponse, pairsResponse] = await Promise.all([
+                        fetch('fda_aggregated_ftl_20250813_164803.json'),
+                        fetch('fda_aggregated_all_20250813_164803.json'),
+                        fetch('fda_pairs_all_20250813_164803.json')
+                    ]);
+                    if (!ftlResponse.ok || !allResponse.ok || !pairsResponse.ok) {
+                        throw new Error('Erreur lors du chargement des fichiers JSON');
+                    }
+                    fdaData.aggregated_ftl = await ftlResponse.json();
+                    fdaData.aggregated_all = await allResponse.json();
+                    fdaData.pairs_all = await pairsResponse.json();
+                    // Initialiser les filtres et afficher les données
+                    populateFilters();
+                    render();
+                    // Masquer l'écran de chargement
+                    el.loadingOverlay.style.display = 'none';
+                } catch (error) {
+                    console.error('Erreur lors du chargement des données:', error);
+                    el.loadingOverlay.innerHTML = `
+                        <div class="error-message">
+                            <h2>Erreur de chargement</h2>
+                            <p>Impossible de charger les fichiers de données.</p>
+                            <p>Vérifiez que les fichiers suivants sont présents dans le répertoire：</p>
+                            <ul style="text-align: left; margin: 1rem auto; max-width: 400px;">
+                                <li>fda_aggregated_ftl_20250813_164803.json</li>
+                                <li>fda_aggregated_all_20250813_164803.json</li>
+                                <li>fda_pairs_all_20250813_164803.json</li>
+                            </ul>
+                            <p>Message d'erreur : ${error.message}</p>
+                        </div>
+                    `;
+                }
+            }
+            setupEventListeners();
+            loadAllData();
+        });
+    </script>
+</body>
+</html>

translation.js ADDED Viewed

	@@ -0,0 +1,212 @@

+const translations = {
+    fr: {
+        "Chargement des données...": "Loading data...",
+        "Veuillez patienter.": "Please wait.",
+        "Guide d'Utilisation": "Usage Guide",
+        "Guide Rapide de l'Outil": "Quick Tool Guide",
+        "1. Choisissez une Vue": "1. Choose a View",
+        "Utilisez les boutons ci-dessous pour sélectionner votre niveau d'analyse.": "Use the buttons below to select your analysis level.",
+        "2. Filtrez les Données": "2. Filter Data",
+        "Utilisez la recherche et les filtres pour affiner les résultats.": "Use search and filters to refine results.",
+        "3. Analysez en Profondeur": "3. Analyze in Depth",
+        "Cliquez sur les lignes du tableau ou utilisez la vue comparative.": "Click on table rows or use the comparative view.",
+        "Comprendre la Méthodologie FDA de Classement des Risques": "Understanding the FDA Risk Ranking Methodology",
+        "Qu'est-ce que le Modèle de Classement des Risques de la FDA ?": "What is the FDA Risk Ranking Model?",
+        "Le FDA Risk-Ranking Model est un outil scientifique développé par l'administration américaine (FDA) pour prioriser les efforts de surveillance et de contrôle dans l'industrie alimentaire. Il permet d'identifier quels couples produit/danger représentent les risques les plus élevés pour la santé publique.": "The FDA Risk-Ranking Model is a scientific tool developed by the U.S. administration (FDA) to prioritize surveillance and control efforts in the food industry. It identifies which product/hazard pairs represent the highest risks to public health.",
+        "Objectif principal :": "Main Objective:",
+        "Aider les autorités sanitaires et les professionnels de l'alimentaire à concentrer leurs ressources limitées sur les risques qui comptent vraiment.": "Help health authorities and food professionals focus their limited resources on the risks that truly matter.",
+        "Comment ça fonctionne : Les 7 Critères d'Évaluation": "How it Works: The 7 Evaluation Criteria",
+        "Chaque couple produit/pathogène est évalué selon 7 critères scientifiques, notés de 1 à 9 :": "Each product/pathogen pair is evaluated according to 7 scientific criteria, rated from 1 to 9:",
+        "C1 - Gravité : Sévérité des effets sur la santé (mortalité, hospitalisation)": "C1 - Severity: Severity of health effects (mortality, hospitalization)",
+        "C2 - Exposition : Fréquence et quantité de consommation du produit": "C2 - Exposure: Frequency and quantity of product consumption",
+        "C3 - Dose-Réponse : Quantité minimale de pathogène nécessaire pour déclencher la maladie": "C3 - Dose-Response: Minimum amount of pathogen needed to trigger illness",
+        "C4 - Croissance : Capacité du pathogène à survivre/proliférer dans l'aliment": "C4 - Growth: Ability of the pathogen to survive/proliferate in food",
+        "C5 - Traitement : Efficacité des procédés de décontamination": "C5 - Treatment: Effectiveness of decontamination processes",
+        "C6 - Contamination : Probabilité de contamination à la production": "C6 - Contamination: Probability of contamination during production",
+        "C7 - Consommation : Mode de préparation (cru, cuit, transformé)": "C7 - Consumption: Preparation method (raw, cooked, processed)",
+        "Le score final est calculé en multipliant ces 7 critères, créant un classement objectif des risques.": "The final score is calculated by multiplying these 7 criteria, creating an objective risk ranking.",
+        "Pourquoi c'est révolutionnaire ?": "Why is it revolutionary?",
+        "Avant ce modèle, les décisions étaient souvent basées sur :": "Before this model, decisions were often based on:",
+        "L'intuition ou l'expérience personnelle": "Intuition or personal experience",
+        "Les crises médiatiques du moment": "Media crises of the moment",
+        "Des approches fragmentées par produit OU par pathogène": "Fragmented approaches by product OR by pathogen",
+        "Le modèle FDA apporte :": "The FDA model brings:",
+        "Une approche scientifique et quantitative": "A scientific and quantitative approach",
+        "Une vision globale produit × pathogène": "A global product × pathogen view",
+        "Une transparence dans les décisions de priorisation": "Transparency in prioritization decisions",
+        "Une comparabilité entre différents risques": "Comparability between different risks",
+        "Intégration avec votre Plan HACCP": "Integration with your HACCP Plan",
+        "Ce modèle ne remplace pas HACCP, il le renforce !": "This model does not replace HACCP, it strengthens it!",
+        "Analyse des Dangers : Utilisez les scores pour prioriser vos dangers significatifs (étape 1 HACCP)": "Hazard Analysis: Use scores to prioritize your significant hazards (HACCP step 1)",
+        "Points Critiques : Concentrez vos CCP sur les couples à haut score": "Critical Control Points: Focus your CCPs on high-scoring pairs",
+        "Surveillance : Adaptez la fréquence de monitoring selon les scores de risque": "Monitoring: Adjust monitoring frequency according to risk scores",
+        "Validation : Justifiez scientifiquement vos choix de maîtrise": "Validation: Scientifically justify your control choices",
+        "Audits : Orientez vos vérifications sur les zones à plus haut risque": "Audits: Focus your verifications on higher-risk areas",
+        "Applications Pratiques en Industrie": "Practical Applications in Industry",
+        "Responsables Qualité : Priorisation des plans de surveillance et contrôles": "Quality Managers: Prioritization of surveillance and control plans",
+        "Acheteurs : Évaluation et sélection des fournisseurs selon les risques": "Buyers: Evaluation and selection of suppliers based on risks",
+        "R&D : Conception de produits avec maîtrise des risques intégrée": "R&D: Product design with integrated risk control",
+        "Direction : Allocation des budgets sécurité alimentaire basée sur les risques réels": "Management: Allocation of food safety budgets based on real risks",
+        "Auditeurs : Focus des audits sur les couples produit/danger critiques": "Auditors: Focus audits on critical product/hazard pairs",
+        "Food Traceability List (FTL)": "Food Traceability List (FTL)",
+        "La Food Traceability List est une liste des aliments à plus haut risque, identifiés grâce à ce modèle. Ces produits sont soumis à des exigences de traçabilité renforcée aux États-Unis depuis janvier 2026.": "The Food Traceability List is a list of higher-risk foods, identified using this model. These products are subject to enhanced traceability requirements in the United States since January 2026.",
+        "Conseil :": "Tip:",
+        "Même en Europe, surveiller ces produits FTL peut vous donner un avantage concurrentiel et anticiper les évolutions réglementaires.": "Even in Europe, monitoring these FTL products can give you a competitive advantage and anticipate regulatory changes.",
+        "Sources et Références Officielles": "Official Sources and References",
+        "Publications Scientifiques :": "Scientific Publications:",
+        "Journal of Food Protection, Risk Analysis, Food Control - rechercher \"FDA risk-ranking model\"": "Journal of Food Protection, Risk Analysis, Food Control - search for \"FDA risk-ranking model\"",
+        "Vue FTL": "FTL View",
+        "Vue Globale": "Global View",
+        "Analyse Détaillée": "Detailed Analysis",
+        "Analyse Comparative": "Comparative Analysis",
+        "Rechercher...": "Search...",
+        "Tous les Dangers": "All Hazards",
+        "Produits Affichés": "Products Displayed",
+        "Haut Risque (≥400)": "High Risk (≥400)",
+        "Catégories Uniques": "Unique Categories",
+        "Score Moyen": "Average Score",
+        "Points de Vigilance & Actions": "Vigilance Points & Actions",
+        "Analyse des Critères Pondérés": "Weighted Criteria Analysis",
+        "FDA Risk Analyzer - Outil d'Analyse des Risques Alimentaires basé sur le modèle de la FDA": "FDA Risk Analyzer - Food Risk Analysis Tool based on the FDA model",
+        "© 2023 Tous droits réservés": "© 2023 All rights reserved",
+        "Comment utiliser cet outil": "How to use this tool",
+        "Cet outil vous aide à explorer le modèle de classement des risques de la FDA pour prioriser vos efforts en sécurité alimentaire.": "This tool helps you explore the FDA risk ranking model to prioritize your food safety efforts.",
+        "Les Vues d'Analyse": "Analysis Views",
+        "Se concentre sur les produits à plus haut risque de la Food Traceability List. Idéal pour les audits.": "Focuses on higher-risk products from the Food Traceability List. Ideal for audits.",
+        "Affiche tous les produits de la base de données pour une vue d'ensemble.": "Displays all products in the database for an overview.",
+        "Montre les couples produit/danger. Cliquez sur une ligne pour une analyse approfondie (graphique radar et actions recommandées).": "Shows product/hazard pairs. Click on a row for in-depth analysis (radar chart and recommended actions).",
+        "Permet de comparer visuellement les contributions des différents facteurs de risque pour un produit et ses dangers.": "Allows visual comparison of the contributions of different risk factors for a product and its hazards.",
+        "Les 7 Critères d'Évaluation de la FDA": "The 7 FDA Evaluation Criteria",
+        "C1: Gravité": "C1: Severity",
+        "Gravité des effets sur la santé (mortalité, morbidité, hospitalisation).": "Severity of health effects (mortality, morbidity, hospitalization).",
+        "C2: Exposition": "C2: Exposure",
+        "Probabilité d'exposition au danger (fréquence de consommation, quantité).": "Probability of exposure to the hazard (frequency of consumption, quantity).",
+        "C3: Dose-Réponse": "C3: Dose-Response",
+        "Dose infectieuse minimale requise pour provoquer la maladie.": "Minimum infectious dose required to cause illness.",
+        "C4: Croissance": "C4: Growth",
+        "Capacité du pathogène à croître/survivre dans l'aliment.": "Ability of the pathogen to grow/survive in food.",
+        "C5: Traitement": "C5: Treatment",
+        "Efficacité des traitements de décontamination appliqués.": "Effectiveness of decontamination treatments applied.",
+        "C6: Contamination": "C6: Contamination",
+        "Probabilité de contamination à la production (sources, environnement).": "Probability of contamination during production (sources, environment).",
+        "C7: Consommation": "C7: Consumption",
+        "Mode de préparation/consommation (cru, cuit, transformé).": "Preparation/consumption method (raw, cooked, processed).",
+        "Source officielle :": "Official source:",
+        "FDA Risk-Ranking Model": "FDA Risk-Ranking Model",
+        "Erreur de chargement": "Loading error",
+        "Impossible de charger les fichiers de données.": "Could not load data files.",
+        "Vérifiez que les fichiers suivants sont présents dans le répertoire：": "Verify that the following files are present in the directory:",
+        "Message d'erreur :": "Error message:",
+        "Produit": "Product",
+        "Catégorie": "Category",
+        "Score": "Score",
+        "Danger": "Hazard",
+        "Analyse de ": "Analysis of ",
+        "× Danger ": "× Hazard ",
+        "Le danger associé est sévère. La maîtrise du CCP est critique.": "The associated hazard is severe. CCP control is critical.",
+        "Le produit est largement consommé. L'impact d'un rappel serait majeur.": "The product is widely consumed. The impact of a recall would be major.",
+        "Le pathogène peut proliférer rapidement. Action: Valider la chaîne du froid et les barèmes de DLC/DDM.": "The pathogen can proliferate rapidly. Action: Validate the cold chain and shelf-life/use-by dates.",
+        "Pas d'étape d'assainissement efficace. Action: Maîtrise des matières premières essentielle.": "No effective sanitation step. Action: Essential raw material control.",
+        "Risque de contamination à la source élevé. Action: Renforcer audits fournisseurs et contrôles à réception.": "High risk of source contamination. Action: Strengthen supplier audits and reception controls.",
+        "Souvent consommé cru. Contrôles microbiologiques du produit fini à considérer.": "Often consumed raw. Microbiological controls of the finished product to be considered.",
+        "Le risque est équilibré.": "The risk is balanced.",
+        "Analyse des Critères Pondérés pour : ": "Weighted Criteria Analysis for: ",
+        "Aucune donnée disponible pour cette sélection": "No data available for this selection",
+        "Score Pondéré": "Weighted Score",
+        "FDA Risk Analyzer": "FDA Risk Analyzer",
+        "Vue FTL (Produits à Traçabilité Renforcée)": "FTL View (Enhanced Traceability Products)",
+        "Vue Globale (Tous les Produits)": "Global View (All Products)",
+        "Analyse Détaillée (Produit x Danger)": "Detailed Analysis (Product x Hazard)"
+    },
+    en: {
+        // This will be populated dynamically if we switch to French and back, or if we want to add more direct English text
+    }
+};
+let currentLanguage = localStorage.getItem('currentLanguage') || 'fr';
+const applyTranslations = () => {
+    const elements = document.querySelectorAll('[data-translate-key]');
+    elements.forEach(element => {
+        const key = element.getAttribute('data-translate-key');
+        if (translations[currentLanguage][key]) {
+            element.textContent = translations[currentLanguage][key];
+        }
+    });
+    // Translate elements that don't have a direct data-translate-key but have identifiable text
+    const textNodes = [];
+    const walk = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
+    let node;
+    while ((node = walk.nextNode())) {
+        if (node.parentNode.nodeName !== 'SCRIPT' && node.parentNode.nodeName !== 'STYLE') {
+            textNodes.push(node);
+        }
+    }
+    textNodes.forEach(node => {
+        let originalText = node.nodeValue.trim();
+        // Handle cases where the original text might have HTML entities that are not visible in the dictionary
+        originalText = originalText.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
+        if (originalText && translations[currentLanguage][originalText]) {
+            node.nodeValue = translations[currentLanguage][originalText];
+        }
+    });
+    // Update placeholders
+    const searchInput = document.getElementById('searchInput');
+    if (searchInput && translations[currentLanguage]["Rechercher..."]) {
+        searchInput.placeholder = translations[currentLanguage]["Rechercher..."];
+    }
+    // Update dynamic content that might not be in the initial DOM
+    const updateDynamicContent = () => {
+        document.getElementById('table-title').textContent = translations[currentLanguage][document.getElementById('table-title').textContent] || document.getElementById('table-title').textContent;
+        // Update other dynamic elements if necessary
+        if (document.getElementById('results-count')) {
+            const resultsText = document.getElementById('results-count').textContent;
+            const match = resultsText.match(/(\d+)\srésultat\(s\)/);
+            if (match && translations[currentLanguage]["résultat(s)"]) {
+                document.getElementById('results-count').textContent = match[1] + ' ' + translations[currentLanguage]["résultat(s)"];
+            }
+        }
+    };
+    updateDynamicContent();
+};
+const switchLanguage = (lang) => {
+    currentLanguage = lang;
+    localStorage.setItem('currentLanguage', lang);
+    location.reload(); // Simple reload to re-apply translations
+};
+// Add a language toggle button to the header
+document.addEventListener('DOMContentLoaded', () => {
+    const headerContent = document.querySelector('.header-content');
+    if (headerContent) {
+        const langToggleContainer = document.createElement('div');
+        langToggleContainer.style.display = 'flex';
+        langToggleContainer.style.gap = '10px';
+        langToggleContainer.style.alignItems = 'center';
+        const frButton = document.createElement('button');
+        frButton.textContent = 'FR';
+        frButton.className = 'guide-btn'; // Re-use existing button style
+        frButton.style.backgroundColor = currentLanguage === 'fr' ? 'var(--primary-light)' : 'var(--primary-color)';
+        frButton.onclick = () => switchLanguage('fr');
+        langToggleContainer.appendChild(frButton);
+        const enButton = document.createElement('button');
+        enButton.textContent = 'EN';
+        enButton.className = 'guide-btn'; // Re-use existing button style
+        enButton.style.backgroundColor = currentLanguage === 'en' ? 'var(--primary-light)' : 'var(--primary-color)';
+        enButton.onclick = () => switchLanguage('en');
+        langToggleContainer.appendChild(enButton);
+        headerContent.appendChild(langToggleContainer);
+    }
+    // Apply translations on DOMContentLoaded
+    applyTranslations();
+});