From 30efdf1a799768ddb5eafc6ca51f172813419245 Mon Sep 17 00:00:00 2001
From: Mathieu Fort <mathieu.fort@gmail.com>
Date: Wed, 27 May 2026 10:19:02 +0200
Subject: [PATCH] fix: charger Alpine en module ES pour corriger le timing
 d'initialisation

---
 index.html | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)
diff --git a/index.html b/index.html
index 1f61a2d..5b0c741 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Convertisseur Images — Matériaux Destock</title>
   <script src="https://cdn.tailwindcss.com"></script>
-  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  <!-- Alpine chargé comme module ES pour contrôler le timing d'initialisation -->
   <script src="https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
   <link rel="stylesheet" href="css/app.css" />
 </head>
 <body class="bg-gray-50 min-h-screen font-sans pb-24">
-  <div x-data="imageApp()" class="max-w-6xl mx-auto px-4 py-8">
+  <div x-data="imageApp" class="max-w-6xl mx-auto px-4 py-8">
 
     <!-- En-tête -->
     <div class="mb-8">
@@ -173,6 +173,7 @@
   </div><!-- fin x-data -->
 
   <script type="module">
+    import Alpine                         from 'https://cdn.jsdelivr.net/npm/alpinejs@3/dist/module.esm.min.js';
     import { convertHeicToJpeg }          from './js/heicConverter.js';
     import { removeBackground, pickColorFromCanvas } from './js/bgRemover.js';
     import { processBatch }               from './js/imageProcessor.js';
@@ -203,8 +204,7 @@
     }
 
     // ── App Alpine.js ──────────────────────────────────────────────
-    window.imageApp = function () {
-      return {
+    Alpine.data('imageApp', () => ({
         files: [],
         globalTolerance: 30,
 
@@ -349,8 +349,9 @@
           if (readyFiles.length === 0) return;
           await downloadAllAsZip(readyFiles);
         },
-      };
-    };
+    }));
+
+    Alpine.start();
   </script>
 </body>
 </html>
