diff --git a/test.html b/test.html
index e1020c2..8c39989 100644
--- a/test.html
+++ b/test.html
@@ -2,9 +2,12 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
-    <title>⚡ Debug Catégories - Final</title>
+    <title>⚡ Debug Catégories - Dashboard</title>
     <style>
         body { font-family: sans-serif; background: #222; color: #eee; padding: 20px; }
+        .debug-header { background: #333; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #555; }
+        .status-ok { color: #4ade80; font-weight: bold; }
+        .status-err { color: #f87171; font-weight: bold; }
         .controls { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
         table { width: 100%; border-collapse: collapse; background: #333; }
         th, td { border: 1px solid #555; padding: 10px; text-align: left; }
@@ -15,6 +18,10 @@
 </head>
 <body>
 
+    <div class="debug-header" id="debug-panel">
+        État : <span id="status-text">Tentative de récupération...</span>
+    </div>
+
     <div class="controls">
         <h3>Choisir une catégorie :</h3>
         <select id="category-selector">
@@ -29,28 +36,42 @@
     </table>
 
     <script>
+        const statusText = document.getElementById('status-text');
+        const debugPanel = document.getElementById('debug-panel');
+
         fetch('translations/fr.json')
-            .then(res => res.json())
+            .then(res => {
+                if (!res.ok) throw new Error("Fichier introuvable (" + res.status + ")");
+                return res.json();
+            })
             .then(data => {
                 const tbody = document.querySelector('#cat-table tbody');
                 const selector = document.querySelector('#category-selector');
                 const catData = data.categories; 
                 
                 if (catData) {
+                    statusText.innerText = "OK - Données chargées avec succès.";
+                    debugPanel.style.borderLeftColor = "#4ade80";
+                    statusText.className = "status-ok";
+
                     Object.entries(catData).forEach(([key, val]) => {
-                        // 1. Ajouter au tableau
                         const row = `<tr><td class="key">${key}</td><td>${val}</td></tr>`;
                         tbody.innerHTML += row;
 
-                        // 2. Ajouter à la liste déroulante
                         const opt = document.createElement('option');
                         opt.value = key;
                         opt.textContent = val;
                         selector.appendChild(opt);
                     });
+                } else {
+                    throw new Error("Structure JSON invalide (section 'categories' manquante)");
                 }
             })
-            .catch(err => alert("Erreur : " + err));
+            .catch(err => {
+                statusText.innerText = "ERREUR : " + err.message;
+                debugPanel.style.borderLeftColor = "#f87171";
+                statusText.className = "status-err";
+            });
     </script>
 </body>
 </html>
\ No newline at end of file
