diff --git a/test.html b/test.html
index 29fddfd..72d3dd6 100644
--- a/test.html
+++ b/test.html
@@ -2,48 +2,63 @@
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
-    <title>EverShelf - Réconciliation (Session Hijack)</title>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <title>EverShelf - Liste des Produits</title>
     <style>
-        body { font-family: sans-serif; background: #222; color: #eee; padding: 20px; }
-        .card { background: #444; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
-        button { padding: 8px 15px; background: #1976d2; color: white; border: none; border-radius: 5px; cursor: pointer; }
+        body { font-family: sans-serif; background: #121212; color: #e0e0e0; padding: 20px; }
+        table { width: 100%; border-collapse: collapse; background: #1e1e1e; margin-top: 20px; }
+        th, td { border: 1px solid #333; padding: 12px; text-align: left; }
+        th { background: #252525; color: #1976d2; }
+        tr:hover { background: #2a2a2a; }
+        .loading { color: #ff9800; }
     </style>
 </head>
 <body>
-    <div class="card">
-        <h3>Modification en masse (Mode Bypass)</h3>
-        <button id="save-btn" onclick="runBypass()">DÉMARRER LA RÉCONCILIATION</button>
-    </div>
-    <script>
-        async function runBypass() {
-            // Cette fonction utilise la fonction de sauvegarde du site officiel
-            // au lieu de faire un 'fetch' qui est bloqué par le serveur.
-            const btn = document.getElementById('save-btn');
-            btn.disabled = true;
-            
-            // On récupère les éléments de la page originale EverShelf
-            // Tu dois ouvrir ton interface officielle dans un onglet, 
-            // et exécuter ce script via la console F12 de CET onglet.
-            
-            const selected = document.querySelectorAll('input.prod-check:checked');
-            const targetCat = document.getElementById('cat-mass').value;
 
-            for (let item of selected) {
-                // Ici, on appelle la fonction interne du site.
-                // Recherche dans le code source du site officiel une fonction nommée 'saveProduct', 'updateProduct', ou 'ajax'
-                try {
-                    // EXEMPLE : si ton site a une fonction 'saveProduct'
-                    await saveProduct(item.dataset.index, { category: targetCat });
-                    console.log("Succès");
-                } catch (e) {
-                    console.error("Erreur d'injection : ", e);
-                }
-                await new Promise(r => setTimeout(r, 500));
+    <h2>Inventaire des produits</h2>
+    <div id="status" class="loading">Chargement des données...</div>
+
+    <table id="prod-table">
+        <thead>
+            <tr>
+                <th>Produit</th>
+                <th>Catégorie</th>
+                <th>Emplacement</th>
+                <th>Stock/Quantité</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>
+
+    <script>
+        async function fetchProducts() {
+            try {
+                // Appel à l'API
+                const res = await fetch('api/index.php?action=products_list');
+                const data = await res.json();
+                
+                // Extraction de la liste (s'adapte à la structure retournée)
+                const products = data.inventory || data.products || data;
+                const tbody = document.querySelector('#prod-table tbody');
+                
+                tbody.innerHTML = "";
+                products.forEach(p => {
+                    let row = document.createElement('tr');
+                    row.innerHTML = `
+                        <td>${p.name || '---'}</td>
+                        <td>${p.category || 'Non classé'}</td>
+                        <td>${p.location || 'N/A'}</td>
+                        <td>${p.quantity !== undefined ? p.quantity : '---'}</td>
+                    `;
+                    tbody.appendChild(row);
+                });
+                
+                document.getElementById('status').textContent = "Données chargées.";
+            } catch (e) {
+                document.getElementById('status').textContent = "Erreur de chargement : " + e.message;
             }
-            alert("Processus terminé.");
-            btn.disabled = false;
         }
+
+        fetchProducts();
     </script>
 </body>
 </html>
\ No newline at end of file
