From 86d9b351b1b72605e0420a5f24f8c1f6494a73aa Mon Sep 17 00:00:00 2001
From: Mathieu Fort <mathieu.fort@gmail.com>
Date: Sat, 6 Jun 2026 11:18:18 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20ZIP=20import,=20rotation,=20feather=20s?=
 =?UTF-8?q?lider,=20lightbox=20+=20config=20d=C3=A9ploiement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 .gitignore          |   2 +
 Dockerfile          |  13 +++
 docker-compose.yml  |  11 +++
 index.html          | 213 +++++++++++++++++++++++++++++++++++---------
 js/bgRemover.js     |  72 ++++++++++-----
 js/heicConverter.js |  27 +++---
 js/imageRotator.js  |  46 ++++++++++
 js/zipExporter.js   |   8 +-
 js/zipImporter.js   |  57 ++++++++++++
 9 files changed, 368 insertions(+), 81 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 Dockerfile
 create mode 100644 docker-compose.yml
 create mode 100644 js/imageRotator.js
 create mode 100644 js/zipImporter.js

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c051e52
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.claude/
+.DS_Store
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..ab1543a
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,13 @@
+FROM nginx:alpine
+
+# Copier les fichiers statiques
+COPY . /usr/share/nginx/html/
+
+# Supprimer les fichiers non destinés au navigateur
+RUN rm -rf /usr/share/nginx/html/.git \
+           /usr/share/nginx/html/.claude \
+           /usr/share/nginx/html/Dockerfile \
+           /usr/share/nginx/html/docker-compose.yml \
+           /usr/share/nginx/html/.gitignore
+
+EXPOSE 80
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..c28dcdf
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,11 @@
+services:
+  app:
+    build: .
+    image: convertisseur-images:latest
+    restart: unless-stopped
+    networks:
+      - web
+
+networks:
+  web:
+    external: true
diff --git a/index.html b/index.html
index 6971602..cc0b45f 100644
--- a/index.html
+++ b/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);
       },
     }));
diff --git a/js/bgRemover.js b/js/bgRemover.js
index 3b53d06..be34f90 100644
--- a/js/bgRemover.js
+++ b/js/bgRemover.js
@@ -1,13 +1,11 @@
 /**
  * Suppression de fond par IA — @imgly/background-removal (WebAssembly).
- * Le modèle (~40 Mo) est téléchargé depuis le CDN au premier lancement
- * puis mis en cache automatiquement dans le navigateur.
+ * Le modèle est téléchargé depuis staticimgly.com au premier lancement.
  */
 
 const CDN_VERSION = '1.7.0';
 const CDN = `https://cdn.jsdelivr.net/npm/@imgly/background-removal@${CDN_VERSION}/dist/`;
 
-// Chargement paresseux de la librairie (évite de bloquer le rendu initial)
 let _removeBg = null;
 
 async function loadLib() {
@@ -18,18 +16,17 @@ async function loadLib() {
 }
 
 /**
- * Supprime le fond d'un Blob image via IA.
- * Retourne un nouveau Blob JPEG avec fond blanc pur.
+ * Supprime le fond d'un Blob image via IA puis composite sur blanc.
  * @param {Blob} blob — image source (JPEG)
  * @param {function} [onProgress] — callback({ key, percent })
+ * @param {number} [feather=2] — récupération de bords en px (0 = strict, 5 = doux)
  * @returns {Promise<Blob>} Blob JPEG fond blanc
  */
-export async function removeBackground(blob, onProgress) {
+export async function removeBackground(blob, onProgress, feather = 2) {
   const removeBg = await loadLib();
 
-  // Détourage IA → PNG avec transparence
   const pngBlob = await removeBg(blob, {
-    // publicPath omis → utilise le CDN par défaut de img.ly (staticimgly.com)
+    // publicPath omis → utilise staticimgly.com par défaut
     output: {
       format: 'image/png',
       type:   'foreground',
@@ -42,32 +39,63 @@ export async function removeBackground(blob, onProgress) {
     },
   });
 
-  // Composite sur fond blanc → JPEG
-  return compositeOnWhite(pngBlob);
+  return compositeOnWhite(pngBlob, feather);
 }
 
 /**
- * Composite un PNG transparent sur fond blanc, retourne un Blob JPEG.
+ * Composite un PNG transparent sur fond blanc.
+ * Si feather > 0, dilate légèrement le contour du sujet (récupère les bords
+ * que l'IA a pu couper trop agressivement).
  * @param {Blob} pngBlob
- * @returns {Promise<Blob>}
+ * @param {number} feather — rayon de dilation en pixels (0–5)
+ * @returns {Promise<Blob>} JPEG fond blanc
  */
-async function compositeOnWhite(pngBlob) {
+async function compositeOnWhite(pngBlob, feather) {
+  const objectUrl = URL.createObjectURL(pngBlob);
+
   return new Promise((resolve, reject) => {
     const img = new Image();
+
     img.onload = () => {
-      const canvas = document.createElement('canvas');
-      canvas.width  = img.width;
-      canvas.height = img.height;
-      const ctx = canvas.getContext('2d');
+      const { width, height } = img;
+
+      // ── Canvas intermédiaire : premier plan avec bords optionnels ──
+      const fgCanvas = document.createElement('canvas');
+      fgCanvas.width  = width;
+      fgCanvas.height = height;
+      const fgCtx = fgCanvas.getContext('2d');
+
+      // 1. Dessin net du premier plan
+      fgCtx.drawImage(img, 0, 0);
+
+      if (feather > 0) {
+        // 2. On dessine une version floutée DERRIÈRE le dessin net
+        //    (destination-over = "derrière le contenu existant")
+        //    → les zones transparentes proches des bords du sujet deviennent
+        //      semi-transparentes, récupérant les détails coupés par l'IA.
+        fgCtx.globalCompositeOperation = 'destination-over';
+        fgCtx.filter = `blur(${feather}px)`;
+        fgCtx.drawImage(img, 0, 0);
+        fgCtx.filter = 'none';
+        fgCtx.globalCompositeOperation = 'source-over';
+      }
+
+      // ── Canvas final : fond blanc + premier plan ───────────────────
+      const out = document.createElement('canvas');
+      out.width  = width;
+      out.height = height;
+      const ctx = out.getContext('2d');
       ctx.fillStyle = '#ffffff';
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      ctx.drawImage(img, 0, 0);
-      canvas.toBlob(b => {
-        URL.revokeObjectURL(img.src);
+      ctx.fillRect(0, 0, width, height);
+      ctx.drawImage(fgCanvas, 0, 0);
+
+      URL.revokeObjectURL(objectUrl);
+      out.toBlob(b => {
         b ? resolve(b) : reject(new Error('canvas.toBlob a retourné null'));
       }, 'image/jpeg', 0.92);
     };
+
     img.onerror = () => reject(new Error('Impossible de charger le résultat IA'));
-    img.src = URL.createObjectURL(pngBlob);
+    img.src = objectUrl;
   });
 }
diff --git a/js/heicConverter.js b/js/heicConverter.js
index 3dd9b92..9590a02 100644
--- a/js/heicConverter.js
+++ b/js/heicConverter.js
@@ -1,28 +1,31 @@
 /**
- * Convertit un fichier HEIC/HEIF en Blob JPEG.
- * @param {File} file
+ * Convertit un fichier/blob HEIC/HEIF en Blob JPEG.
+ * @param {File|Blob} fileOrBlob — fichier HEIC/HEIF (File depuis l'input, ou Blob extrait d'un ZIP)
  * @returns {Promise<Blob>}
- * @throws {TypeError} si l'entrée n'est pas un fichier HEIC/HEIF
+ * @throws {TypeError} si l'entrée n'est pas un Blob HEIC/HEIF
  * @throws {Error} si la conversion échoue ou dépasse 30s
  */
-export async function convertHeicToJpeg(file) {
-  if (!(file instanceof File)) {
-    throw new TypeError("L'entrée doit être un objet File");
+export async function convertHeicToJpeg(fileOrBlob) {
+  if (!(fileOrBlob instanceof Blob)) {
+    throw new TypeError("L'entrée doit être un Blob ou un File");
   }
   // Certains iPhone envoient un type MIME vide pour les HEIC — on l'autorise
-  const type = file.type.toLowerCase();
+  const type = fileOrBlob.type.toLowerCase();
   if (type !== '' && !['image/heic', 'image/heif'].includes(type)) {
-    throw new TypeError(`Format attendu : HEIC/HEIF. Reçu : ${file.type || '(vide)'}`);
+    throw new TypeError(`Format attendu : HEIC/HEIF. Reçu : ${fileOrBlob.type || '(vide)'}`);
   }
 
-  console.log(`[heicConverter] Début conversion : ${file.name} (${file.type || 'type vide'}, ${(file.size/1024).toFixed(0)} Ko)`);
+  const label = fileOrBlob instanceof File
+    ? `${fileOrBlob.name} (${fileOrBlob.type || 'type vide'}, ${(fileOrBlob.size / 1024).toFixed(0)} Ko)`
+    : `blob HEIC (${(fileOrBlob.size / 1024).toFixed(0)} Ko)`;
+  console.log(`[heicConverter] Début conversion : ${label}`);
 
   const timeout = new Promise((_, reject) =>
-    setTimeout(() => reject(new Error('Timeout : conversion > 30s. Vérifiez que le fichier est bien un HEIC valide.')), 30_000)
+    setTimeout(() => reject(new Error('Timeout : conversion > 120s. Vérifiez que le fichier est bien un HEIC valide.')), 120_000)
   );
 
   const conversion = heic2any({
-    blob: file,
+    blob: fileOrBlob,
     toType: 'image/jpeg',
     quality: 0.92,
   });
@@ -34,6 +37,6 @@ export async function convertHeicToJpeg(file) {
     throw new Error("heic2any n'a pas retourné un Blob");
   }
 
-  console.log(`[heicConverter] ✅ Conversion réussie : ${file.name} → ${(blob.size/1024).toFixed(0)} Ko`);
+  console.log(`[heicConverter] ✅ Conversion réussie → ${(blob.size / 1024).toFixed(0)} Ko`);
   return blob;
 }
diff --git a/js/imageRotator.js b/js/imageRotator.js
new file mode 100644
index 0000000..368ec73
--- /dev/null
+++ b/js/imageRotator.js
@@ -0,0 +1,46 @@
+/**
+ * Rotation d'un Blob image via Canvas.
+ * @param {Blob} blob — image source (JPEG)
+ * @param {number} degrees — angle de rotation en degrés (0, 90, 180, 270)
+ * @returns {Promise<Blob>} Blob JPEG pivoté, ou le blob original si degrees === 0
+ */
+export async function rotateBlob(blob, degrees) {
+  const norm = ((degrees % 360) + 360) % 360;
+  if (norm === 0) return blob;
+
+  const url = URL.createObjectURL(blob);
+
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+
+    img.onload = () => {
+      // Pour 90° ou 270°, largeur et hauteur sont inversées
+      const swap = norm === 90 || norm === 270;
+      const w = swap ? img.naturalHeight : img.naturalWidth;
+      const h = swap ? img.naturalWidth  : img.naturalHeight;
+
+      const canvas = document.createElement('canvas');
+      canvas.width  = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d');
+
+      ctx.translate(w / 2, h / 2);
+      ctx.rotate((norm * Math.PI) / 180);
+      ctx.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
+
+      URL.revokeObjectURL(url);
+      canvas.toBlob(
+        b => b ? resolve(b) : reject(new Error('rotateBlob : toBlob a retourné null')),
+        'image/jpeg',
+        0.92
+      );
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error('rotateBlob : impossible de charger le blob'));
+    };
+
+    img.src = url;
+  });
+}
diff --git a/js/zipExporter.js b/js/zipExporter.js
index d377335..1ecf1c4 100644
--- a/js/zipExporter.js
+++ b/js/zipExporter.js
@@ -1,12 +1,14 @@
 /**
  * Compresse les fichiers en ZIP et déclenche le téléchargement.
- * @param {{ name: string, blob: Blob }[]} processedFiles
+ * Si un fichier possède un `folder`, il est placé dans le sous-dossier correspondant.
+ * @param {{ name: string, blob: Blob, folder?: string }[]} processedFiles
  * @returns {Promise<void>}
  */
 export async function downloadAllAsZip(processedFiles) {
   const zip = new JSZip();
-  for (const { name, blob } of processedFiles) {
-    zip.file(name, blob);
+  for (const { name, blob, folder } of processedFiles) {
+    const path = folder ? `${folder}/${name}` : name;
+    zip.file(path, blob);
   }
   const zipBlob = await zip.generateAsync({ type: 'blob' });
   const url = URL.createObjectURL(zipBlob);
diff --git a/js/zipImporter.js b/js/zipImporter.js
new file mode 100644
index 0000000..dfcea42
--- /dev/null
+++ b/js/zipImporter.js
@@ -0,0 +1,57 @@
+/**
+ * Lecture d'un ZIP produits.
+ * Attend une structure : dossier-produit/image.heic (ou jpg/png).
+ * JSZip est chargé comme script global dans index.html.
+ */
+
+const IMAGE_EXTS = new Set(['heic', 'heif', 'jpg', 'jpeg', 'png']);
+
+/**
+ * Extrait toutes les images d'un fichier ZIP.
+ * @param {File} zipFile
+ * @returns {Promise<Array<{folder:string, name:string, ext:string, blob:Blob, isHeic:boolean}>>}
+ */
+export async function readImagesFromZip(zipFile) {
+  const zip = await JSZip.loadAsync(zipFile);
+
+  // Collecter les entrées fichier (pas les dossiers)
+  const entries = [];
+  zip.forEach((relativePath, entry) => {
+    if (!entry.dir) entries.push({ relativePath, entry });
+  });
+
+  const results = [];
+
+  for (const { relativePath, entry } of entries) {
+    // Ignorer les métadonnées macOS et fichiers cachés
+    if (relativePath.startsWith('__MACOSX/')) continue;
+
+    const parts = relativePath.split('/').filter(p => p.length > 0);
+    const filename = parts[parts.length - 1];
+    if (filename.startsWith('.')) continue;
+
+    // Extension
+    const dotIdx = filename.lastIndexOf('.');
+    if (dotIdx === -1) continue;
+    const ext = filename.slice(dotIdx + 1).toLowerCase();
+    if (!IMAGE_EXTS.has(ext)) continue;
+
+    const name   = filename.slice(0, dotIdx);
+    // Premier segment du chemin = dossier produit (ex: "12345")
+    const folder = parts.length > 1 ? parts[0] : '';
+
+    const isHeic = ext === 'heic' || ext === 'heif';
+    const mimeType = isHeic ? 'image/heic'
+      : (ext === 'jpg' || ext === 'jpeg') ? 'image/jpeg'
+      : 'image/png';
+
+    // JSZip retourne des Blobs sans type MIME — on le définit explicitement
+    // pour que heic2any puisse détecter le format correctement.
+    const rawBlob = await entry.async('blob');
+    const blob = new Blob([rawBlob], { type: mimeType });
+
+    results.push({ folder, name, ext, blob, isHeic });
+  }
+
+  return results;
+}