diff --git a/test.html b/test.html
index ece87e1..33f53ea 100644
--- a/test.html
+++ b/test.html
@@ -2,123 +2,81 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
-    <title>⚡ Debug & Modification Complet</title>
+    <title>EverShelf - Réconciliation</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; }
-        .card { background: #444; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
+        .card { background: #444; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
         input, select { padding: 10px; border-radius: 5px; border: none; margin: 5px 0; width: 100%; box-sizing: border-box; }
         button { padding: 10px 20px; background: #1976d2; color: white; border: none; border-radius: 5px; cursor: pointer; }
     </style>
 </head>
 <body>
 
-    <div class="debug-header" id="debug-panel">
-        État : <span id="status-text">Prêt</span>
-    </div>
-
     <div class="card">
-        <h3>1. Tester l'action API pour les produits</h3>
-        <input type="text" id="api-action" value="list_products" placeholder="ex: list_products, app_bootstrap">
-        <button onclick="loadProducts()">Charger la liste des produits</button>
-    </div>
-
-    <div class="card">
-        <h3>2. Modifier le produit</h3>
+        <h3>Modification de produit</h3>
         <select id="product-selector" onchange="updateIdField()">
-            <option value="">-- Sélectionner un produit chargé --</option>
+            <option value="">-- Choisir un produit --</option>
         </select>
-        <input type="text" id="prod-id" placeholder="ID du produit" readonly style="background:#555;">
-        <input type="text" id="prod-name" placeholder="Nom du produit">
+        <input type="text" id="prod-id" readonly placeholder="ID">
+        <input type="text" id="prod-name" placeholder="Nom">
         <select id="category-selector">
-            <option value="">-- Choisir une catégorie --</option>
+            <option value="">-- Catégorie --</option>
         </select>
-        <button onclick="saveProduct()">Enregistrer la modification</button>
+        <button onclick="saveProduct()">ENREGISTRER</button>
     </div>
 
     <script>
-        // Charger les catégories au démarrage
-        fetch('translations/fr.json')
+        // 1. Charger les catégories
+        fetch('translations/fr.json').then(r => r.json()).then(data => {
+            const sel = document.getElementById('category-selector');
+            Object.entries(data.categories || {}).forEach(([key, val]) => {
+                const opt = document.createElement('option');
+                opt.value = key; opt.textContent = val;
+                sel.appendChild(opt);
+            });
+        });
+
+        // 2. Charger les produits via l'action correcte
+        fetch('api/index.php?action=products_list')
             .then(r => r.json())
             .then(data => {
-                const selector = document.getElementById('category-selector');
-                Object.entries(data.categories || {}).forEach(([key, val]) => {
+                const sel = document.getElementById('product-selector');
+                // On utilise 'data' directement si c'est un tableau, ou la clé correcte
+                const prods = data.products || data; 
+                prods.forEach(p => {
                     const opt = document.createElement('option');
-                    opt.value = key; opt.textContent = val;
-                    selector.appendChild(opt);
+                    opt.value = p.id;
+                    opt.setAttribute('data-name', p.name);
+                    opt.setAttribute('data-cat', p.category || '');
+                    opt.textContent = p.name;
+                    sel.appendChild(opt);
                 });
             });
 
-        // Charger les produits selon l'action saisie
-        function loadProducts() {
-            const action = document.getElementById('api-action').value;
-            fetch('api/index.php?action=' + action)
-                .then(r => r.json())
-                .then(data => {
-                    console.log("Données reçues :", data);
-                    const selector = document.getElementById('product-selector');
-                    selector.innerHTML = '<option value="">-- Choisir un produit --</option>';
-                    
-                    // On cherche le tableau de produits. Souvent dans data.products ou data directement
-                    const list = data.products || data;
-                    if(Array.isArray(list)) {
-                        list.forEach(p => {
-                            const opt = document.createElement('option');
-                            opt.value = p.id;
-                            opt.setAttribute('data-name', p.name || 'Sans nom');
-                            opt.textContent = (p.name || 'ID: ' + p.id);
-                            selector.appendChild(opt);
-                        });
-                        alert("Produits chargés ! Vérifie la console F12 si vide.");
-                    } else {
-                        alert("Format JSON non reconnu. Regarde la console (F12) pour voir la structure.");
-                    }
-                });
-        }
-
         function updateIdField() {
             const sel = document.getElementById('product-selector');
+            const opt = sel.options[sel.selectedIndex];
             document.getElementById('prod-id').value = sel.value;
-            document.getElementById('prod-name').value = sel.options[sel.selectedIndex].getAttribute('data-name');
+            document.getElementById('prod-name').value = opt.getAttribute('data-name');
+            document.getElementById('category-selector').value = opt.getAttribute('data-cat');
         }
 
-        function Product() {
+        function saveProduct() {
             const data = {
                 id: document.getElementById('prod-id').value,
                 name: document.getElementById('prod-name').value,
                 category: document.getElementById('category-selector').value
             };
-            fetch('api/index.php?action=product_edit', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(data)
-            }).then(r => r.json()).then(res => alert(JSON.stringify(res)));
-        }
-        function saveChanges() {
-            const data = {
-                id: document.getElementById('edit-id').value,
-                name: document.getElementById('edit-name').value,
-                category: document.getElementById('edit-category').value
-            };
-        
-            // On utilise l'action la plus probable pour une mise à jour d'entité
-            // Si 'product_edit' ne marche pas, essaie 'ha_update_product' 
-            // ou regarde le switch dans api/index.php
-            fetch('api/index.php?action=product_edit', {
+            
+            // On utilise l'action 'product_save' identifiée par ton grep
+            fetch('api/index.php?action=product_save', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify(data)
             })
             .then(r => r.json())
-            .then(res => {
-                if(res.error) {
-                    alert("Erreur API : " + res.error);
-                } else {
-                    alert("Produit mis à jour avec succès !");
-                    loadInventory(); // Recharge la grille
-                }
-            })
-            .catch(e => console.error("Erreur de connexion:", e));
+            .then(res => alert("Réponse API : " + JSON.stringify(res)))
+            .catch(e => alert("Erreur : " + e));
         }
     </script>
 </body>
