feat: ZIP import, rotation, feather slider, lightbox + config déploiement

- Import ZIP produits (HEIC/JPG/PNG, structure dossiers conservée)
- Rotation des images ±90° avec aperçu CSS et export canvas
- Slider récupération des bords (feather 0–5 px)
- Lightbox plein écran (clic miniature, Échap, fond noir)
- Fix timeout HEIC 30s → 120s
- Fix MIME type blobs JSZip pour heic2any
- Dockerfile nginx:alpine + docker-compose.yml pour déploiement

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

index.html

@@ -48,10 +48,10 @@
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
             d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
         </svg>
-        <p class="text-gray-600 font-medium">Glissez vos fichiers HEIC ici</p>
-        <p class="text-gray-400 text-sm mt-1">ou cliquez pour parcourir</p>
+        <p class="text-gray-600 font-medium">Glissez vos fichiers ici</p>
+        <p class="text-gray-400 text-sm mt-1">ZIP (dossiers produits) · HEIC · HEIF — ou cliquez pour parcourir</p>
         <input type="file" x-ref="fileInput"
-          accept=".heic,.heif,image/heic,image/heif"
+          accept=".heic,.heif,.zip,image/heic,image/heif"
           multiple class="hidden"
           @change="handleFiles($event.target.files)" />
       </div>
@@ -66,7 +66,12 @@
 
               <!-- En-tête de carte -->
               <div class="px-4 py-3 border-b border-gray-100 flex items-center justify-between">
-                <span class="text-sm font-medium text-gray-700 truncate" x-text="file.name"></span>
+                <div class="min-w-0 flex-1 mr-2">
+                  <template x-if="file.folder">
+                    <span class="text-xs text-blue-400 block truncate" x-text="'📁 ' + file.folder"></span>
+                  </template>
+                  <span class="text-sm font-medium text-gray-700 truncate block" x-text="file.name"></span>
+                </div>
                 <span class="text-xs px-2 py-1 rounded-full ml-2 shrink-0"
                   :class="{
                     'bg-yellow-100 text-yellow-700': ['pending','converting','processing'].includes(file.status),
@@ -108,7 +113,9 @@
                   <p class="text-xs text-gray-400 text-center mb-1">Avant</p>
                   <div class="bg-gray-100 rounded overflow-hidden aspect-square flex items-center justify-center">
                     <template x-if="file.originalUrl">
-                      <img :src="file.originalUrl" class="object-contain w-full h-full" />
+                      <img :src="file.originalUrl"
+                        class="object-contain w-full h-full cursor-zoom-in"
+                        @click="modalUrl = file.originalUrl; modalTitle = file.name + ' — Avant'; modalOpen = true" />
                     </template>
                     <template x-if="!file.originalUrl">
                       <span class="text-gray-300 text-xs">—</span>
@@ -119,7 +126,10 @@
                   <p class="text-xs text-gray-400 text-center mb-1">Après</p>
                   <div class="bg-gray-100 rounded overflow-hidden aspect-square flex items-center justify-center">
                     <template x-if="file.processedUrl">
-                      <img :src="file.processedUrl" class="object-contain w-full h-full" />
+                      <img :src="file.processedUrl"
+                        class="object-contain w-full h-full cursor-zoom-in transition-transform duration-200"
+                        :style="file.rotation ? 'transform:rotate(' + file.rotation + 'deg)' : ''"
+                        @click="modalUrl = file.processedUrl; modalTitle = file.name + ' — Après'; modalRotation = file.rotation; modalOpen = true" />
                     </template>
                     <template x-if="!file.processedUrl">
                       <span class="text-gray-300 text-xs">—</span>
@@ -130,7 +140,35 @@
 
               <!-- Contrôles -->
               <template x-if="file.status === 'done' || file.status === 'error'">
-                <div class="px-3 pb-3 border-t border-gray-100 pt-2">
+                <div class="px-3 pb-3 border-t border-gray-100 pt-2 space-y-2">
+                  <!-- Rotation -->
+                  <template x-if="file.status === 'done'">
+                    <div class="flex items-center justify-between">
+                      <span class="text-xs text-gray-500">Rotation</span>
+                      <div class="flex items-center gap-1">
+                        <button @click="file.rotation = (file.rotation - 90 + 360) % 360"
+                          class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm transition-colors"
+                          title="Rotation -90°">↺</button>
+                        <span class="text-xs text-gray-500 w-8 text-center" x-text="file.rotation + '°'"></span>
+                        <button @click="file.rotation = (file.rotation + 90) % 360"
+                          class="w-7 h-7 flex items-center justify-center rounded bg-gray-100 hover:bg-gray-200 text-gray-600 text-sm transition-colors"
+                          title="Rotation +90°">↻</button>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- Slider récupération des bords -->
+                  <div>
+                    <div class="flex items-center justify-between text-xs text-gray-500 mb-1">
+                      <label>Récupération des bords</label>
+                      <span x-text="file.feather + ' px'"></span>
+                    </div>
+                    <input type="range" min="0" max="5" step="1"
+                      x-model.number="file.feather"
+                      class="w-full h-1.5 accent-blue-500 cursor-pointer" />
+                    <div class="flex justify-between text-xs text-gray-300 mt-0.5">
+                      <span>Strict</span><span>Doux</span>
+                    </div>
+                  </div>
                   <button
                     @click="reprocess(file)"
                     :disabled="file.status === 'processing'"
@@ -168,71 +206,153 @@
       </div>
     </template>
 
+    <!-- ── Modal plein écran ─────────────────────────────────── -->
+    <div
+      x-show="modalOpen"
+      x-transition:enter="transition ease-out duration-150"
+      x-transition:enter-start="opacity-0"
+      x-transition:enter-end="opacity-100"
+      x-transition:leave="transition ease-in duration-100"
+      x-transition:leave-start="opacity-100"
+      x-transition:leave-end="opacity-0"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+      @click.self="modalOpen = false"
+      @keydown.escape.window="modalOpen = false"
+      style="display:none"
+    >
+      <div class="relative">
+        <button
+          @click="modalOpen = false"
+          class="absolute -top-10 right-0 text-white text-3xl font-light leading-none hover:text-gray-300 transition-colors"
+          aria-label="Fermer"
+        >✕</button>
+        <p class="absolute -top-8 left-0 text-white text-sm font-medium truncate max-w-sm" x-text="modalTitle"></p>
+        <img :src="modalUrl" alt=""
+          class="object-contain rounded-lg shadow-2xl bg-white transition-transform duration-200"
+          style="max-width:85vmin; max-height:85vmin;"
+          :style="modalRotation ? 'transform:rotate(' + modalRotation + 'deg); max-width:85vmin; max-height:85vmin;' : 'max-width:85vmin; max-height:85vmin;'" />
+      </div>
+    </div>
+
   </div><!-- fin x-data -->
 
   <script type="module">
-    import Alpine               from 'https://cdn.jsdelivr.net/npm/alpinejs@3/dist/module.esm.min.js';
+    import Alpine                from 'https://cdn.jsdelivr.net/npm/alpinejs@3/dist/module.esm.min.js';
     import { convertHeicToJpeg } from './js/heicConverter.js';
     import { removeBackground }  from './js/bgRemover.js';
     import { processBatch }      from './js/imageProcessor.js';
     import { downloadAllAsZip }  from './js/zipExporter.js';
+    import { readImagesFromZip } from './js/zipImporter.js';
+    import { rotateBlob }        from './js/imageRotator.js';
 
     // ── App Alpine.js ──────────────────────────────────────────────
     Alpine.data('imageApp', () => ({
       files: [],
+      modalOpen:     false,
+      modalUrl:      null,
+      modalTitle:    '',
+      modalRotation: 0,
 
       get readyCount() {
         return this.files.filter(f => f.status === 'done').length;
       },
 
       async handleFiles(fileList) {
-        const validExts = ['.heic', '.heif'];
-        const allFiles  = Array.from(fileList);
+        const heicExts = ['.heic', '.heif'];
+        const allFiles = Array.from(fileList);
+
+        const zipFiles  = allFiles.filter(f => f.name.toLowerCase().endsWith('.zip'));
+        const heicFiles = allFiles.filter(f => heicExts.some(ext => f.name.toLowerCase().endsWith(ext)));
         const skipped   = allFiles.filter(f =>
-          !validExts.some(ext => f.name.toLowerCase().endsWith(ext))
+          !f.name.toLowerCase().endsWith('.zip') &&
+          !heicExts.some(ext => f.name.toLowerCase().endsWith(ext))
         );
 
         if (skipped.length > 0) {
           alert(
-            `${skipped.length} fichier(s) ignoré(s) — seuls .heic et .heif sont acceptés.\n` +
+            `${skipped.length} fichier(s) ignoré(s) — seuls .heic, .heif et .zip sont acceptés.\n` +
             `Ignorés : ${skipped.map(f => f.name).join(', ')}`
           );
         }
 
-        const heicFiles = allFiles.filter(f =>
-          validExts.some(ext => f.name.toLowerCase().endsWith(ext))
-        );
-        if (heicFiles.length === 0) return;
+        // ── Construire la liste unifiée de fichiers à traiter ──────
+        const newFiles = [];
 
-        const newFiles = heicFiles.map(file => ({
-          id:            crypto.randomUUID(),
-          name:          file.name.replace(/\.[^.]+$/, ''),
-          status:        'pending',
-          originalFile:  file,
-          originalBlob:  null,
-          processedBlob: null,
-          originalUrl:   null,
-          processedUrl:  null,
-          progressLabel: '',
-          progressPct:   0,
-          error:         null,
-        }));
+        // 1. Fichiers HEIC/HEIF déposés directement
+        for (const file of heicFiles) {
+          newFiles.push({
+            id:            crypto.randomUUID(),
+            name:          file.name.replace(/\.[^.]+$/, ''),
+            folder:        '',
+            isHeic:        true,
+            status:        'pending',
+            originalFile:  file,
+            originalBlob:  null,
+            processedBlob: null,
+            originalUrl:   null,
+            processedUrl:  null,
+            progressLabel: '',
+            progressPct:   0,
+            feather:       2,
+            rotation:      0,
+            error:         null,
+          });
+        }
 
+        // 2. Images extraites des ZIPs
+        for (const zipFile of zipFiles) {
+          let images;
+          try {
+            images = await readImagesFromZip(zipFile);
+          } catch (e) {
+            alert(`Erreur lors de la lecture du ZIP "${zipFile.name}" : ${e.message}`);
+            continue;
+          }
+          if (images.length === 0) {
+            alert(`Aucune image trouvée dans "${zipFile.name}".`);
+            continue;
+          }
+          for (const img of images) {
+            newFiles.push({
+              id:            crypto.randomUUID(),
+              name:          img.name,
+              folder:        img.folder,
+              isHeic:        img.isHeic,
+              status:        'pending',
+              originalFile:  null,
+              originalBlob:  img.blob,
+              processedBlob: null,
+              originalUrl:   img.isHeic ? null : URL.createObjectURL(img.blob),
+              processedUrl:  null,
+              progressLabel: '',
+              progressPct:   0,
+              feather:       2,
+              rotation:      0,
+              error:         null,
+            });
+          }
+        }
+
+        if (newFiles.length === 0) return;
         this.files.push(...newFiles);
 
+        // ── Pipeline de traitement ─────────────────────────────────
         await processBatch(newFiles, async (orig) => {
           const f = this.files.find(x => x.id === orig.id);
           if (!f) return;
 
-          // Étape 1 : HEIC → JPEG
-          f.status = 'converting';
-          try {
-            f.originalBlob = await convertHeicToJpeg(orig.originalFile);
-            f.originalUrl  = URL.createObjectURL(f.originalBlob);
-          } catch (e) {
-            f.status = 'error';
-            f.error  = `Conversion échouée : ${e.message}`;
-            return;
+          // Étape 1 : HEIC → JPEG (uniquement pour les fichiers HEIC/HEIF)
+          if (f.isHeic) {
+            f.status = 'converting';
+            try {
+              const source   = f.originalFile ?? f.originalBlob;
+              f.originalBlob = await convertHeicToJpeg(source);
+              f.originalUrl  = URL.createObjectURL(f.originalBlob);
+            } catch (e) {
+              f.status = 'error';
+              f.error  = `Conversion échouée : ${e.message}`;
+              return;
+            }
           }
 
           // Étape 2 : détourage IA
@@ -243,7 +363,7 @@
             f.processedBlob = await removeBackground(f.originalBlob, ({ key, percent }) => {
               f.progressPct   = percent;
               f.progressLabel = key.includes('model') ? 'Téléchargement modèle IA…' : 'Détourage en cours…';
-            });
+            }, f.feather);
             f.processedUrl  = URL.createObjectURL(f.processedBlob);
             f.status        = 'done';
           } catch (e) {
@@ -267,7 +387,7 @@
           file.processedBlob = await removeBackground(file.originalBlob, ({ key, percent }) => {
             file.progressPct   = percent;
             file.progressLabel = key.includes('model') ? 'Téléchargement modèle IA…' : 'Détourage en cours…';
-          });
+          }, file.feather);
           file.processedUrl = URL.createObjectURL(file.processedBlob);
           file.status = 'done';
         } catch (e) {
@@ -277,10 +397,15 @@
       },
 
       async downloadAll() {
-        const readyFiles = this.files
-          .filter(f => f.status === 'done' && f.processedBlob)
-          .map(f => ({ name: `${f.name}.jpg`, blob: f.processedBlob }));
-        if (readyFiles.length === 0) return;
+        const done = this.files.filter(f => f.status === 'done' && f.processedBlob);
+        if (done.length === 0) return;
+        const readyFiles = await Promise.all(
+          done.map(async f => ({
+            name:   `${f.name}.jpg`,
+            blob:   f.rotation ? await rotateBlob(f.processedBlob, f.rotation) : f.processedBlob,
+            folder: f.folder,
+          }))
+        );
         await downloadAllAsZip(readyFiles);
       },
     }));