Upload 4 files

data-processor.js

@@ -5,6 +5,132 @@ class DataProcessor {
         this.state.subscribe(this.onStateChange.bind(this));
     }
 
+    static REVIEW_CHECKLIST_STRUCTURE = {
+        "1_documents_et_dossier": {
+            "titre": "Réception et complétude des documents",
+            "items": [
+                { "id": "doc_001", "nom": "Mandat d'audit" },
+                { "id": "doc_002", "nom": "Plan d'audit" },
+                { "id": "doc_003", "nom": "Bilan de clôture" },
+                { "id": "doc_004", "nom": "Éléments obligatoires complétés" },
+                { "id": "doc_005", "nom": "Synthèse" },
+                { "id": "doc_006", "nom": "Rapport AXP" },
+                { "id": "doc_007", "nom": "Plan d'actions complété" },
+                { "id": "doc_008", "nom": "Preuves de correction" },
+                { "id": "doc_009", "nom": "Notes d'audit" }
+            ]
+        },
+        "2_audits_a_distance": {
+            "titre": "Spécificités audits à distance",
+            "sous_titres": "Applicable pour : audits IFS Broker à distance + audits siège à distance",
+            "items": [
+                { "id": "dist_001", "nom": "Captures d'écran début d'audit", "description": "Participants, date et heure visibles" },
+                { "id": "dist_002", "nom": "Captures d'écran fin d'audit", "description": "Participants, date et heure visibles" },
+                { "id": "dist_003", "nom": "Enregistrement historique de conservation", "description": "Si applicable selon l'outil utilisé" },
+                { "id": "dist_004", "nom": "Preuve test de connexion", "description": "Capture d'écran + date/résultat complétés dans le mandat" },
+                { "id": "dist_005", "nom": "Analyse de risques CRO", "description": "Complétée par le Coordinateur Responsable de l'Organisme" }
+            ]
+        },
+        "3_coherence_durees": {
+            "titre": "Cohérence des durées d'audit",
+            "items": [
+                { "id": "dur_001", "nom": "Cohérence mandat ↔ plan d'audit", "description": "Durée identique entre les deux documents" },
+                { "id": "dur_002", "nom": "Cohérence mandat ↔ synthèse", "description": "Durée mandat = durée réellement passée (synthèse)" },
+                { "id": "dur_003", "nom": "Cohérence rapport ↔ calculateur IFS", "description": "Joindre l'outil de calcul", "justification": "" },
+                { "id": "dur_004", "nom": "Temps passé en usine", "description": "Temps effectif en site ou justification documentée", "justification": "" }
+            ]
+        },
+        "4_statut_rapport": {
+            "titre": "Statut et complétude du rapport",
+            "items": [
+                { "id": "rap_001", "nom": "Version du rapport", "description": "Statut 'non périmé' et version finalisée" },
+                { "id": "rap_002", "nom": "Données manquantes", "description": "Absence de données manquantes (sauf nom/prénom CDO et date décision à compléter)", "exceptions": ["CDO nom/prénom", "Date de décision"] }
+            ]
+        },
+        "5_donnees_entreprise": {
+            "titre": "Informations de l'entreprise - Profil",
+            "items": [
+                { "id": "prof_001", "nom": "Nombre maximum d'employés", "description": "Au pic de l'activité" },
+                { "id": "prof_002", "nom": "Surface totale du site", "description": "Production + stockage (m²)" },
+                { "id": "prof_003", "nom": "Activité saisonnière", "description": "Renseignée si applicable" },
+                { "id": "prof_004", "nom": "Produits totalement sous-traités", "description": "Nom entreprise, localisation, certification IFS, COID si applicable" },
+                { "id": "prof_005", "nom": "Produits de négoce", "description": "Nom entreprise, localisation, certification IFS, COID si applicable" },
+                { "id": "prof_006", "nom": "Procédés partiellement sous-traités", "description": "Nom entreprise, localisation, certification IFS, COID si applicable" },
+                { "id": "prof_007", "nom": "Usage du logo IFS", "description": "Conforme à la réglementation" }
+            ]
+        },
+        "6_donnees_audit": {
+            "titre": "Données de l'audit / Évaluation",
+            "items": [
+                { "id": "eval_001", "nom": "Produits et procédés audités", "description": "Liste des produits et procédés vus lors de l'audit sur site" },
+                { "id": "eval_002", "nom": "Option d'audit", "description": "Annoncée ou non annoncée" },
+                { "id": "eval_003", "nom": "Certification IFS précédente", "description": "Date et fin de validité du certificat antérieur" },
+                { "id": "eval_004", "nom": "Personne en charge de la revue", "description": "Identifiée et documentée" },
+                { "id": "eval_005", "nom": "Horaires d'audit", "description": "Sans les pauses + justification en cas de dépassement/réduction", "justification": "" },
+                { "id": "eval_006", "nom": "Auditeurs et participants", "description": "Direction, RQ, traducteur et observateur éventuels (optionnel hors Direction/RQ)" }
+            ]
+        },
+        "7_secteurs_scope": {
+            "titre": "Secteurs / Scope Data",
+            "items": [
+                { "id": "scope_001", "nom": "Description complète des procédés", "description": "Vue complète + secteurs technologiques" },
+                { "id": "scope_002", "nom": "Périmètre d'audit", "description": "Libellé + traduction anglaise" },
+                { "id": "scope_003", "nom": "Exclusions", "description": "Documentées pour le certificat avec justification dans 'informations additionnelles'" },
+                { "id": "scope_004", "nom": "Outils calcul durée", "description": "Secteurs technologiques sélectionnés pour chaque secteur produit" },
+                { "id": "scope_005", "nom": "Sous-catégories de produits", "description": "Exhaustivité et conformité vérifiées" }
+            ]
+        },
+        "8_audits_multisites": {
+            "titre": "Organisation de l'audit en multi-sites",
+            "items": [
+                { "id": "multi_001", "nom": "Plan d'audit adapté", "description": "Identification des chapitres audités une seule fois pour tous les sites" },
+                { "id": "multi_002", "nom": "Description des autres sites", "description": "Nom, localisation, statut certification IFS, COID si applicable" },
+                { "id": "multi_003", "nom": "Organisation audit multisites", "description": "Activités communes auditées une fois + services centraux (date/lieu)" },
+                { "id": "multi_004", "nom": "Répercution écarts siège", "description": "Plan d'actions et rapport complétés" },
+                { "id": "multi_005", "nom": "Onglet multisites synthèse", "description": "Cas des audits multi-sites complété" }
+            ]
+        },
+        "9_pertinence_deviations": {
+            "titre": "Pertinence des déviations",
+            "items": [
+                { "id": "dev_001", "nom": "Justification des déviations", "description": "Notes et justification documentées" },
+                { "id": "dev_002", "nom": "Suivi actions correctives précédentes", "description": "Suivi des NC/déviations de l'audit antérieur" }
+            ]
+        },
+        "10_plan_actions": {
+            "titre": "Plan d'actions",
+            "items": [
+                { "id": "pa_001", "nom": "Pertinence corrections", "description": "Actions correctives proposées par l'entreprise pertinentes et efficaces" },
+                { "id": "pa_002", "nom": "Délais corrections", "description": "Antérieurs à envoi PA à OC ou certification du dossier" },
+                { "id": "pa_003", "nom": "Délais actions correctives", "description": "Avant ouverture prochaine fenêtre audit selon gravité NC/déviation" },
+                { "id": "pa_004", "nom": "Statuts mise en place", "description": "Corrections et actions correctives renseignées" },
+                { "id": "pa_005", "nom": "Validation auditeur", "description": "Statut 'OK-Libéré-Validé-Approuvé', nom auditeur, date validation" }
+            ]
+        },
+        "11_preuves_corrections": {
+            "titre": "Preuves de corrections",
+            "items": [
+                { "id": "prev_001", "nom": "Pertinence des preuves", "description": "Preuves documentées et pertinentes pour chaque correction" }
+            ]
+        },
+        "12_checklist": {
+            "titre": "Check-list audit",
+            "items": [
+                { "id": "ckl_001", "nom": "Champs obligatoires complétés", "description": "Tous les champs obligatoires renseignés" },
+                { "id": "ckl_002", "nom": "NA justifiés", "description": "Non Applicable justifiés et documentés" }
+            ]
+        },
+        "13_traductions_anglais": {
+            "titre": "Traduction en anglais",
+            "items": [
+                { "id": "tra_001", "nom": "Traduction rapport", "description": "Tout traduit sauf les NA" },
+                { "id": "tra_002", "nom": "Champs obligatoires", "description": "Seule version anglaise requise pour export rapport" },
+                { "id": "tra_003", "nom": "Déviations et NC", "description": "Langue audit + traduction anglaise" },
+                { "id": "tra_004", "nom": "Plan d'actions", "description": "Traduction déviations, NC, corrections, actions correctives" }
+            ]
+        }
+    };
+
     setUIManager(uiManager) {
         this.uiManager = uiManager;
     }
@@ -645,25 +771,43 @@ class DataProcessor {
 
         let html = '';
         checklistData.forEach(item => {
-            const fieldId = `req-${item.uuid}`;
-            const conversation = conversations[fieldId];
-            const commentStatus = this.getConversationStatus(conversation);
-            const commentCount = conversation?.thread?.length || 0;
+            const isNC = ['B', 'C', 'D'].includes(item.score);
+            const constatFieldId = `ckl-${item.uuid}`;
+            const paFieldId = `pa-${item.uuid}`;
 
-            html += `<tr class="table-row-clickable" data-field-id="${fieldId}" data-chapter="${item.chapter}" data-score="${item.score}" data-comment-status="${commentStatus}" onclick="openCommentModal(this)">
+            const constatConv = conversations[constatFieldId] || conversations[`req-${item.uuid}`]; // Fallback old format
+            const paConv = conversations[paFieldId];
+
+            const constatStatus = this.getConversationStatus(constatConv);
+            const constatCount = constatConv?.thread?.length || 0;
+            const paStatus = this.getConversationStatus(paConv);
+            const paCount = paConv?.thread?.length || 0;
+
+            html += `<tr class="table-row-clickable" data-chapter="${item.chapter}" data-score="${item.score}">
                         <td class="font-medium">${item.requirementNumber}</td>
                         <td><span class="score-badge score-${item.score}">${item.score}</span></td>
-                        <td class="max-w-xs">${item.explanation || ''}</td>
-                        <td class="max-w-xs">${item.detailedExplanation || ''}</td>
-                        <td class="comment-status-cell">
+                        <td class="max-w-xs text-xs">${item.explanation || ''}</td>
+                        <td class="max-w-xs text-xs">${item.detailedExplanation || ''}</td>
+                        
+                        <td class="comment-status-cell" onclick="event.stopPropagation(); window.openCommentModalFromCell(this, '${constatFieldId}')">
                             <div class="comment-indicators">
-                                <span class="comment-count-badge" style="display: ${commentCount > 0 ? 'inline-flex' : 'none'}">${commentCount}</span>
-                                <span class="status-indicator ${commentStatus}"></span>
-                                <button class="quick-comment-btn" onclick="event.stopPropagation(); openCommentModal(this.closest('tr'))">
+                                <span class="comment-count-badge" style="display: ${constatCount > 0 ? 'inline-flex' : 'none'}">${constatCount}</span>
+                                <span class="status-indicator ${constatStatus}"></span>
+                                <button class="quick-comment-btn">
                                     <i class="fas fa-comment"></i>
                                 </button>
                             </div>
                         </td>
+                        
+                        <td class="comment-status-cell ${isNC ? '' : 'opacity-20 pointer-events-none'}" onclick="event.stopPropagation(); if(${isNC}) window.openCommentModalFromCell(this, '${paFieldId}')">
+                            <div class="comment-indicators">
+                                <span class="comment-count-badge" style="display: ${paCount > 0 ? 'inline-flex' : 'none'}">${paCount}</span>
+                                <span class="status-indicator ${paStatus}"></span>
+                                <button class="quick-comment-btn">
+                                    <i class="fas fa-tools"></i>
+                                </button>
+                            </div>
+                        </td>
                     </tr>`;
         });
 
@@ -851,8 +995,10 @@ class DataProcessor {
                 let typeLabel = '';
                 if (task.type === 'profile') {
                     typeLabel = '<span class="score-badge" style="background-color:#3b82f6">Profil</span>';
-                } else if (task.type === 'nc') {
-                    typeLabel = '<span class="score-badge" style="background-color:#ef4444">Non-Conformité</span>';
+                } else if (task.type === 'nc-pa' || task.fieldId.startsWith('pa-')) {
+                    typeLabel = '<span class="score-badge" style="background-color:#ef4444">Plan d\'actions</span>';
+                } else if (task.type === 'ckl' || task.fieldId.startsWith('ckl-')) {
+                    typeLabel = '<span class="score-badge" style="background-color:#f59e0b">Constat d\'audit</span>';
                 } else {
                     typeLabel = '<span class="score-badge" style="background-color:#8b5cf6">Checklist</span>';
                 }
@@ -897,46 +1043,66 @@ class DataProcessor {
                 };
             }
         } else if (fieldId.startsWith('dossier-')) {
-            const dossierFields = {
-                'mandat': 'Mandat',
-                'plan-daudit': 'Plan d\'audit',
-                'bilan-de-clture': 'Bilan de clôture',
-                'elments-obligatoires': 'Eléments obligatoires',
-                'notes-daudit': 'Notes d\'audit',
-                'synthese-daudit': 'Synthèse d\'audit',
-                'annexes-diverses': 'Annexes diverses'
-            };
-            const sanitizedPart = fieldId.replace('dossier-', '');
-            const name = dossierFields[sanitizedPart] || 'Document du dossier';
+            const rawId = fieldId.replace('dossier-', '');
+            let name = 'Document du dossier';
+            let description = '';
+
+            // Search in the static structure
+            for (const key in DataProcessor.REVIEW_CHECKLIST_STRUCTURE) {
+                const category = DataProcessor.REVIEW_CHECKLIST_STRUCTURE[key];
+                const item = category.items.find(i => i.id === rawId);
+                if (item) {
+                    name = item.nom;
+                    description = item.description || '';
+                    break;
+                }
+            }
+
+            let contentHTML = `<strong>${name}</strong><br>`;
+            if (description) {
+                contentHTML += `<p class="text-sm text-gray-500 mb-2">${description}</p>`;
+            }
+            contentHTML += `<br>Point de contrôle de la revue du dossier.`;
+
             return {
                 name: `[DOSSIER] ${name}`,
-                content: `Point de revue pour le document : ${name}`,
+                content: contentHTML,
                 type: 'dossier'
             };
-        } else if (fieldId.startsWith('req-') || fieldId.startsWith('nc-')) {
-            const uuid = fieldId.replace(/^(req-|nc-)/, '');
+        } else if (fieldId.startsWith('ckl-') || fieldId.startsWith('pa-') || fieldId.startsWith('req-') || fieldId.startsWith('nc-')) {
+            const prefix = fieldId.startsWith('ckl-') ? 'ckl-' : (fieldId.startsWith('pa-') ? 'pa-' : (fieldId.startsWith('req-') ? 'req-' : 'nc-'));
+            const uuid = fieldId.replace(prefix, '');
             const item = checklistData.find(r => r.uuid === uuid);
+
             if (item) {
-                let contentHTML = `<strong>Score:</strong> <span class="score-badge score-${item.score}">${item.score}</span><br><br>`;
-                contentHTML += `<strong>Constat (Explanation):</strong><br><div class="p-2 bg-gray-50 dark:bg-gray-800 rounded mb-2">${item.explanation || '-'}</div>`;
-                contentHTML += `<strong>Explication détaillée:</strong><br><div class="p-2 bg-gray-50 dark:bg-gray-800 rounded mb-2">${item.detailedExplanation || '-'}</div>`;
+                let contentHTML = `<strong>Exigence ${item.requirementNumber}</strong> - `;
+                contentHTML += `<span class="score-badge score-${item.score}">${item.score}</span><br><br>`;
 
-                if (['B', 'C', 'D'].includes(item.score) || item.correction || item.correctiveAction || item.evidence) {
+                if (prefix === 'pa-') {
+                    contentHTML += `<div style="border-left: 4px solid var(--color-danger); padding-left: 10px; margin-bottom: 15px;">
+                        <h4 style="margin: 0 0 10px 0; color: var(--color-danger);">PLAN D'ACTIONS</h4>`;
                     contentHTML += `<strong>Correction (Action Immédiate):</strong><br><div class="p-2 bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-800 rounded mb-2">${item.correction || '<span class="text-gray-400 italic">Non renseigné</span>'}</div>`;
-
                     contentHTML += `<strong>Preuves de correction:</strong><br><div class="p-2 bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-800 rounded mb-2">${item.evidence || '<span class="text-gray-400 italic">Non renseigné</span>'}</div>`;
-
                     contentHTML += `<strong>Action Corrective (Plan d'action):</strong><br><div class="p-2 bg-red-50 dark:bg-red-900/20 border border-red-100 dark:border-red-800 rounded mb-2">${item.correctiveAction || '<span class="text-gray-400 italic">Non renseigné</span>'}</div>`;
+                    contentHTML += `</div>`;
+                    return {
+                        name: `[P.A.] Exigence ${item.requirementNumber}`,
+                        content: contentHTML,
+                        type: 'nc-pa'
+                    };
+                } else {
+                    // CKL or REQ or NC fallback -> Constat focus
+                    contentHTML += `<div style="border-left: 4px solid var(--color-theme-500); padding-left: 10px;">
+                        <h4 style="margin: 0 0 10px 0; color: var(--color-theme-600);">CONSTAT D'AUDIT</h4>`;
+                    contentHTML += `<strong>Constat (Explanation):</strong><br><div class="p-2 bg-gray-50 dark:bg-gray-800 rounded mb-2">${item.explanation || '-'}</div>`;
+                    contentHTML += `<strong>Explication détaillée:</strong><br><div class="p-2 bg-gray-50 dark:bg-gray-800 rounded mb-2">${item.detailedExplanation || '-'}</div>`;
+                    contentHTML += `</div>`;
+                    return {
+                        name: `[CONSTAT] Exigence ${item.requirementNumber}`,
+                        content: contentHTML,
+                        type: prefix === 'ckl-' ? 'ckl' : 'requirement'
+                    };
                 }
-
-                // Determine precise type
-                const isNC = ['B', 'C', 'D'].includes(item.score);
-
-                return {
-                    name: `Exigence ${item.requirementNumber}`,
-                    content: contentHTML,
-                    type: isNC ? 'nc' : 'requirement'
-                };
             }
         }
 
@@ -1111,20 +1277,29 @@ class DataProcessor {
                 }
             });
         } else if (tabId === 'dossier') {
-            const dossierFields = [
-                'Plan d\'audit', 'Mandat de l\'audit', 'Contrat/Offre',
-                'Qualification de l\'auditeur', 'Documents de l\'entreprise', 'Annexes diverses'
-            ];
-            dossierFields.forEach(field => {
-                const fieldId = `dossier-${this.sanitizeFieldId(field)}`;
-                const conversation = conversations[fieldId];
-                if (conversation && conversation.thread?.length > 0) {
+            Object.values(DataProcessor.REVIEW_CHECKLIST_STRUCTURE).forEach(cat => {
+                cat.items.forEach(item => {
                     total++;
-                    const status = this.getConversationStatus(conversation);
-                    if (status === 'resolved') resolved++;
-                    else if (status === 'pending') pending++;
-                }
+                    const status = this.state.get().dossierReviewState?.[item.id];
+                    const conversation = conversations[`dossier-${item.id}`];
+
+                    // Total counts conversations (consistent with other tabs)
+                    // But for Dossier, we often want to know what's left to process
+                    const hasComment = conversation && conversation.thread?.length > 0;
+
+                    if (!status) pending++;
+                    // Note: resolved is tricky here as it's about comments. 
+                    // Let's stick to comment status for resolved/pending logic
+                    if (hasComment) {
+                        const convStatus = this.getConversationStatus(conversation);
+                        if (convStatus === 'resolved') resolved++;
+                        // If we already counted it as pending because of NC, we don't double count for comment
+                    }
+                });
             });
+            // Overwrite total to be the number of comments for the sidebar counter consistency
+            const dossierCommentCount = Object.keys(conversations).filter(k => k.startsWith('dossier-') && conversations[k].thread?.length > 0).length;
+            total = dossierCommentCount;
         }
 
         console.log(`--- Finished refreshing for ${tabId}. Total: ${total} ---`);
@@ -1465,56 +1640,193 @@ class DataProcessor {
         const container = document.getElementById('dossierTableContainer');
         if (!container) return;
 
-        const dossierFields = [
-            'Mandat',
-            'Plan d\'audit',
-            'Bilan de clôture',
-            'Eléments obligatoires',
-            'Notes d\'audit',
-            'Synthèse d\'audit',
-            'Annexes diverses'
-        ];
+        // Ensure UI state
+        if (!this.dossierUiState) {
+            this.dossierUiState = { filter: 'all', openCategories: new Set() };
+        }
 
-        const conversations = this.state.get().conversations;
+        const state = this.state.get();
+        const conversations = state.conversations || {};
+        const reviewState = state.dossierReviewState || {};
+        const currentFilter = this.dossierUiState.filter;
+
+        // Statistics
+        let allItems = [];
+        Object.values(DataProcessor.REVIEW_CHECKLIST_STRUCTURE).forEach(cat => {
+            cat.items.forEach(item => allItems.push({ ...item, categoryKey: cat.titre }));
+        });
+
+        const counts = {
+            all: allItems.length,
+            todo: allItems.filter(i => !reviewState[i.id]).length,
+            problem: allItems.filter(i => reviewState[i.id] === 'nok').length,
+            comments: allItems.filter(i => conversations[`dossier-${i.id}`]?.thread?.length > 0).length
+        };
+
+        // Local Window Helpers
+        window.setDossierFilter = (f) => { this.dossierUiState.filter = f; this.renderDossierTable(); };
+        window.toggleDossierCategory = (k) => {
+            if (this.dossierUiState.openCategories.has(k)) this.dossierUiState.openCategories.delete(k);
+            else this.dossierUiState.openCategories.add(k);
+            this.renderDossierTable();
+        };
+
+        const themeColor = 'var(--color-theme-600, #3b82f6)';
+        const successColor = 'var(--color-success, #10b981)';
+        const dangerColor = 'var(--color-danger, #ef4444)';
+        const grayColor = 'var(--color-gray-500, #64748b)';
 
         let html = `
-            <div class="table-container">
-                <table class="data-table">
-                    <thead>
-                        <tr>
-                            <th style="width: 40%">Document / Thématique</th>
-                            <th style="width: 40%">Statut / Instructions</th>
-                            <th style="width: 20%">Revue & Commentaires</th>
-                        </tr>
-                    </thead>
-                    <tbody>
+            <style>
+                .dossier-modern-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border-primary); margin-bottom: 24px; padding-bottom: 2px; }
+                .dossier-tab-btn { background: none; border: none; padding: 12px 4px; font-size: 14px; font-weight: 600; color: var(--text-tertiary); cursor: pointer; position: relative; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px; }
+                .dossier-tab-btn.active { color: ${themeColor}; }
+                .dossier-tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px; background: ${themeColor}; border-radius: 3px; }
+                .dossier-card { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 12px; margin-bottom: 20px; box-shadow: var(--shadow-sm); overflow: hidden; }
+                .dossier-cat-header { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background 0.2s; }
+                .dossier-cat-header:hover { background: var(--color-gray-50); }
+                .dossier-item-row { display: grid; grid-template-columns: 1fr auto auto; gap: 24px; padding: 16px 24px; align-items: center; border-top: 1px solid var(--border-primary); }
+                .dossier-validation-group { display: flex; gap: 8px; }
+                .dossier-v-btn { height: 36px; padding: 0 16px; border-radius: 18px; border: 1.5px solid var(--border-primary); background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
+                .dossier-v-btn:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); }
+                .btn-ok.active { background: ${successColor}; border-color: ${successColor}; color: white; box-shadow: 0 4px 12px -2px rgba(16, 185, 129, 0.4); }
+                .btn-nok.active { background: ${dangerColor}; border-color: ${dangerColor}; color: white; box-shadow: 0 4px 12px -2px rgba(239, 68, 68, 0.4); }
+                .btn-na.active { background: ${grayColor}; border-color: ${grayColor}; color: white; }
+                .comment-btn-modern { width: 40px; height: 40px; border-radius: 10px; background: var(--color-gray-100); border: none; color: var(--color-gray-500); cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.2s; }
+                .comment-btn-modern:hover { background: var(--color-theme-50); color: ${themeColor}; }
+                .comment-btn-modern.has-comments { background: var(--color-theme-100); color: ${themeColor}; border: 1px solid var(--color-theme-200); }
+                .v-badge { position: absolute; top: -6px; right: -6px; background: ${themeColor}; color: white; font-size: 9px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
+                .status-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--border-primary); }
+                .status-dot.complete { background: ${successColor}; }
+            </style>
+
+            <div class="dossier-modern-tabs">
+                <button onclick="window.setDossierFilter('all')" class="dossier-tab-btn ${currentFilter === 'all' ? 'active' : ''}">Tout (${counts.all})</button>
+                <button onclick="window.setDossierFilter('todo')" class="dossier-tab-btn ${currentFilter === 'todo' ? 'active' : ''}">À traiter (${counts.todo})</button>
+                <button onclick="window.setDossierFilter('problem')" class="dossier-tab-btn ${currentFilter === 'problem' ? 'active' : ''}">Points NOK (${counts.problem})</button>
+                <button onclick="window.setDossierFilter('comments')" class="dossier-tab-btn ${currentFilter === 'comments' ? 'active' : ''}">Commentaires (${counts.comments})</button>
+            </div>
+
+            <div class="dossier-content-area">
         `;
 
-        dossierFields.forEach(field => {
-            const fieldId = `dossier-${this.sanitizeFieldId(field)}`;
-            const conversation = conversations[fieldId];
-            const commentStatus = this.getConversationStatus(conversation);
-            const commentCount = conversation?.thread?.length || 0;
+        for (const [key, category] of Object.entries(DataProcessor.REVIEW_CHECKLIST_STRUCTURE)) {
+            const items = category.items;
+            const completed = items.filter(i => reviewState[i.id]).length;
+            const isAllDone = completed === items.length;
+
+            const visibleItems = items.filter(item => {
+                const s = reviewState[item.id];
+                const hasC = conversations[`dossier-${item.id}`]?.thread?.length > 0;
+                if (currentFilter === 'todo') return !s;
+                if (currentFilter === 'problem') return s === 'nok';
+                if (currentFilter === 'comments') return hasC;
+                return true;
+            });
+
+            if (visibleItems.length === 0 && currentFilter !== 'all') continue;
+
+            const isOpen = this.dossierUiState.openCategories.has(key) || currentFilter !== 'all';
 
             html += `
-                <tr class="table-row-clickable" data-field-id="${fieldId}" data-comment-status="${commentStatus}" onclick="openCommentModal(this)">
-                    <td class="font-medium">${field}</td>
-                    <td class="text-sm text-gray-500">Cliquez pour ajouter une question ou un commentaire sur ce document.</td>
-                     <td class="comment-status-cell">
-                        <div class="comment-indicators">
-                            <span class="comment-count-badge" style="display: ${commentCount > 0 ? 'inline-flex' : 'none'}">${commentCount}</span>
-                            <span class="status-indicator ${commentStatus}"></span>
-                            <button class="quick-comment-btn" onclick="event.stopPropagation(); openCommentModal(this.closest('tr'))">
-                                <i class="fas fa-comment"></i>
-                            </button>
+                <div class="dossier-card" style="border-left: 5px solid ${isAllDone ? successColor : 'var(--border-primary)'}">
+                    <div class="dossier-cat-header" onclick="window.toggleDossierCategory('${key}')">
+                        <div style="display: flex; align-items: center; gap: 16px;">
+                            <div class="status-dot ${isAllDone ? 'complete' : ''}"></div>
+                            <div>
+                                <h3 style="margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary);">${category.titre}</h3>
+                                <p style="margin: 4px 0 0 0; font-size: 12px; color: var(--text-tertiary);">${category.sous_titres || ''}</p>
+                            </div>
                         </div>
-                    </td>
-                </tr>
+                        <div style="display: flex; align-items: center; gap: 15px;">
+                             <span style="font-size: 10px; font-weight: 800; color: var(--color-theme-600); cursor: pointer;" onclick="event.stopPropagation(); window.markCategoryNA('${key}')">TOUT N/A</span>
+                             <span style="font-size: 10px; font-weight: 800; color: ${successColor}; cursor: pointer;" onclick="event.stopPropagation(); window.markCategoryValid('${key}')">TOUT VALIDE</span>
+                             <span style="font-size: 13px; font-weight: 700; color: ${isAllDone ? successColor : 'var(--text-tertiary)'}">${completed} / ${items.length}</span>
+                             <i class="fas fa-chevron-down" style="color: var(--color-gray-400); transition: transform 0.3s; transform: rotate(${isOpen ? '180deg' : '0deg'})"></i>
+                        </div>
+                    </div>
+
+                    <div class="dossier-cat-content" style="display: ${isOpen ? 'block' : 'none'}">
             `;
-        });
 
-        html += `</tbody></table></div>`;
+            visibleItems.forEach(item => {
+                const fieldId = `dossier-${item.id}`;
+                const conv = conversations[fieldId];
+                const threadLen = conv?.thread?.length || 0;
+                const status = reviewState[item.id];
+
+                html += `
+                    <div class="dossier-item-row">
+                        <div class="item-info">
+                            <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">${item.nom}</div>
+                            <div style="font-size: 11px; color: var(--text-tertiary); line-height: 1.4;">${item.description || ''}</div>
+                        </div>
+                        
+                        <div class="dossier-validation-group">
+                            <button onclick="window.toggleDossierStatus('${item.id}', 'ok')" class="dossier-v-btn btn-ok ${status === 'ok' ? 'active' : ''}">
+                                <i class="fas fa-check-circle"></i> VALIDE
+                            </button>
+                            <button onclick="window.toggleDossierStatus('${item.id}', 'nok')" class="dossier-v-btn btn-nok ${status === 'nok' ? 'active' : ''}">
+                                <i class="fas fa-exclamation-circle"></i> ÉCART
+                            </button>
+                            <button onclick="window.toggleDossierStatus('${item.id}', 'na')" class="dossier-v-btn btn-na ${status === 'na' ? 'active' : ''}">
+                                N/A
+                            </button>
+                        </div>
+
+                        <div class="item-actions">
+                            <button class="comment-btn-modern ${threadLen > 0 ? 'has-comments' : ''}" onclick="const r=this.closest('.dossier-item-row'); r.setAttribute('data-field-id', '${fieldId}'); openCommentModal(r)">
+                                <i class="fas fa-comment-dots" style="font-size: 18px;"></i>
+                                ${threadLen > 0 ? `<div class="v-badge">${threadLen}</div>` : ''}
+                            </button>
+                        </div>
+                    </div>
+                `;
+            });
+
+            if (visibleItems.length === 0) {
+                html += `<div style="padding: 30px; text-align: center; color: var(--text-tertiary); font-style: italic; font-size: 13px;">Aucun point dans cette sélection.</div>`;
+            }
+
+            html += `</div></div>`;
+        }
+
+        html += `</div>`;
         container.innerHTML = html;
+
+        // Ensure global functions
+        if (!window.markCategoryNA) {
+            window.markCategoryNA = (k) => {
+                const cat = DataProcessor.REVIEW_CHECKLIST_STRUCTURE[k];
+                if (!cat) return;
+                const cur = this.state.get().dossierReviewState || {};
+                const upd = {};
+                cat.items.forEach(i => { if (!cur[i.id]) upd[i.id] = 'na'; });
+                this.state.setState({ dossierReviewState: { ...cur, ...upd } });
+                this.renderDossierTable();
+            };
+        }
+
+        if (!window.markCategoryValid) {
+            window.markCategoryValid = (k) => {
+                const cat = DataProcessor.REVIEW_CHECKLIST_STRUCTURE[k];
+                if (!cat) return;
+                const cur = this.state.get().dossierReviewState || {};
+                const upd = {};
+                cat.items.forEach(i => { if (!cur[i.id]) upd[i.id] = 'ok'; });
+                this.state.setState({ dossierReviewState: { ...cur, ...upd } });
+                this.renderDossierTable();
+            };
+        }
+
+        if (!window.toggleDossierStatus) {
+            window.toggleDossierStatus = (id, s) => {
+                const cur = this.state.get().dossierReviewState || {};
+                const next = cur[id] === s ? null : s;
+                this.state.setState({ dossierReviewState: { ...cur, [id]: next } });
+                this.renderDossierTable();
+            };
+        }
     }
 
     updateCertificationDecision() {

file-handler.js

@@ -102,6 +102,7 @@ class FileHandler {
             requirementNumberMapping: {},
             packageVersion: 1,
             certificationDecisionData: {},
+            dossierReviewState: {},
             currentSession: {
                 id: `IFS-${Date.now()}`,
                 name: 'Nouvel Audit',
@@ -139,7 +140,8 @@ class FileHandler {
                 conversations: conversations,
                 requirementNumberMapping: workData.requirementNumberMapping || {},
                 packageVersion: workData.packageVersion || 1,
-                certificationDecisionData: workData.certificationDecisionData || {}
+                certificationDecisionData: workData.certificationDecisionData || {},
+                dossierReviewState: workData.dossierReviewState || {}
             });
 
             if (workData.currentMode && workData.currentMode !== this.state.get().currentMode) {
@@ -184,20 +186,25 @@ class FileHandler {
     }
 
     migrateConversationKeys(conversations) {
+        if (!conversations) return {};
         const newConversations = { ...conversations };
         let keysChanged = false;
+
         for (const key in newConversations) {
-            if (key.startsWith('nc-')) {
-                const newKey = key.replace('nc-', 'req-');
-                if (!newConversations[newKey]) { // Avoid overwriting if a req- key already exists
+            // Migrer les anciennes clés 'req-' ou 'nc-' vers 'ckl-' (Canal Constat)
+            if (key.startsWith('req-') || key.startsWith('nc-')) {
+                const uuid = key.startsWith('req-') ? key.replace('req-', '') : key.replace('nc-', '');
+                const newKey = `ckl-${uuid}`;
+                if (!newConversations[newKey]) {
                     newConversations[newKey] = newConversations[key];
                     delete newConversations[key];
                     keysChanged = true;
                 }
             }
         }
+
         if (keysChanged) {
-            console.log('Migrated old conversation keys to new format.');
+            console.log('✅ Migrated old conversation keys to the new dual-channel format (ckl-).');
         }
         return newConversations;
     }
@@ -329,6 +336,7 @@ class FileHandler {
             requirementNumberMapping: {},
             packageVersion: 1,
             certificationDecisionData: {},
+            dossierReviewState: {},
             currentSession: {
                 id: null,
                 name: 'Nouveau Dossier',
@@ -368,7 +376,9 @@ class FileHandler {
                 companyProfileData: this.state.get().companyProfileData,
                 conversations: this.state.get().conversations,
                 requirementNumberMapping: this.state.get().requirementNumberMapping,
+                packageVersion: this.state.get().packageVersion,
                 certificationDecisionData: this.state.get().certificationDecisionData,
+                dossierReviewState: this.state.get().dossierReviewState,
 
                 stats: {
                     totalComments: this.dataProcessor.getTotalCommentsCount(),
@@ -625,14 +635,402 @@ class FileHandler {
         XLSX.utils.book_append_sheet(wb, ws, "COMMENTAIRES");
     }
 
-    exportPDF() {
+    exportActionPlanForSite() {
         if (!this.state.get().auditData) {
-            this.uiManager.showError('Aucune donnée à exporter en PDF.');
+            this.uiManager.showError('Aucune donnée à exporter.');
             return;
         }
 
         try {
-            this.uiManager.showError('🚧 Export PDF en cours de développement. Utilisez l\'export Excel pour le moment.');
+            const wb = XLSX.utils.book_new();
+            const conversations = this.state.get().conversations;
+            const checklistData = this.state.get().checklistData;
+
+            const paData = [['N° Exigence', 'Score', 'Constat (Rappel d\'audit)', 'Questions Reviewer / Corrections demandées', 'Statut']];
+
+            Object.entries(conversations).forEach(([fieldId, conv]) => {
+                if (fieldId.startsWith('pa-')) {
+                    const uuid = fieldId.replace('pa-', '');
+                    const item = checklistData.find(i => i.uuid === uuid);
+                    if (!item) return;
+
+                    const commentsText = conv.thread.map(m => `[${m.author === 'reviewer' ? 'REVIEWER' : 'AUDITEUR'}] ${m.content}`).join('\n---\n');
+                    paData.push([
+                        item.requirementNumber,
+                        item.score,
+                        item.explanation || '-',
+                        commentsText,
+                        this.dataProcessor.getConversationStatus(conv) === 'resolved' ? 'VALIDÉ' : 'EN ATTENTE'
+                    ]);
+                }
+            });
+
+            if (paData.length === 1) {
+                this.uiManager.showError("Aucune question sur le plan d'actions (canal spécifique) n'a été identifiée.");
+                return;
+            }
+
+            const ws = XLSX.utils.aoa_to_sheet(paData);
+            ws['!cols'] = [{ width: 15 }, { width: 10 }, { width: 40 }, { width: 60 }, { width: 15 }];
+            XLSX.utils.book_append_sheet(wb, ws, "QUESTIONS SITE P.A.");
+
+            const companyName = this.state.get().companyProfileData['Nom du site à auditer'] || 'audit';
+            const filename = `QUESTIONS_PA_SITE_${this.sanitizeFileName(companyName)}_${this.getDateStamp()}.xlsx`;
+            XLSX.writeFile(wb, filename);
+
+            this.uiManager.showSuccess(`📑 Fichier pour le site généré : ${filename}`);
+
+        } catch (error) {
+            console.error('Error exporting PA for site:', error);
+            this.uiManager.showError("Erreur lors de l'exportation : " + error.message);
+        }
+    }
+
+    async exportPDF() {
+        if (!this.state.get().auditData) {
+            this.uiManager.showError('Aucune donnée à exporter.');
+            return;
+        }
+
+        try {
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF();
+            const pageWidth = doc.internal.pageSize.width;
+            const pageHeight = doc.internal.pageSize.height;
+
+            const state = this.state.get();
+            const profile = state.companyProfileData || {};
+            const decision = state.certificationDecisionData || {};
+            const dossierState = state.dossierReviewState || {};
+            const conversations = state.conversations || {};
+            const checklistStructure = this.dataProcessor.constructor.REVIEW_CHECKLIST_STRUCTURE;
+
+            const findVal = (keywords) => {
+                const lowerKeywords = keywords.map(k => k.toLowerCase());
+                for (const [key, val] of Object.entries(profile)) {
+                    const lowerKey = key.toLowerCase();
+                    if (lowerKeywords.some(k => lowerKey.includes(k))) return val;
+                }
+                return null;
+            };
+
+
+
+            // --- STATUS CHECK (DRAFT OR FINAL) ---
+            let unresolvedDossierPixels = 0;
+            Object.values(checklistStructure).forEach(cat => {
+                cat.items.forEach(i => {
+                    if (!dossierState[i.id]) unresolvedDossierPixels++;
+                });
+            });
+            const isDecisionMade = decision.date && decision.result;
+            const isDraft = !isDecisionMade || unresolvedDossierPixels > 0;
+            const watermarkText = "DOCUMENT PROVISOIRE - NON VALIDÉ";
+
+            // --- STYLING CONSTANTS ---
+            const COLOR_PRIMARY = [15, 23, 42]; // Slate 900
+            const COLOR_ACCENT = [59, 130, 246]; // Blue 500
+            const COLOR_SUCCESS = [16, 185, 129]; // Emerald 500
+            const COLOR_DANGER = [239, 68, 68]; // Red 500
+            const COLOR_GRAY = [148, 163, 184]; // Slate 400
+
+            // --- HELPER FUNCTIONS ---
+            const drawHeader = (title) => {
+                doc.setFillColor(...COLOR_PRIMARY);
+                doc.rect(0, 0, pageWidth, 25, 'F');
+                doc.setTextColor(255, 255, 255);
+                doc.setFontSize(14);
+                doc.setFont('helvetica', 'bold');
+                doc.text("IFS NEO REVIEWER", 15, 17);
+                doc.setFontSize(10);
+                doc.setFont('helvetica', 'normal');
+                doc.text(title, pageWidth - 15, 17, { align: 'right' });
+
+                if (isDraft) {
+                    doc.setTextColor(200, 200, 200);
+                    doc.setFontSize(50);
+                    doc.text("PROVISOIRE", pageWidth / 2, pageHeight / 2, { align: 'center', angle: 45, renderingMode: 'fill' });
+                }
+            };
+
+            const drawFooter = (pageNo) => {
+                doc.setTextColor(150);
+                doc.setFontSize(8);
+                const str = `Page ${pageNo}`;
+                doc.text(str, pageWidth - 20, pageHeight - 10, { align: 'right' });
+                doc.text(`Généré le ${new Date().toLocaleDateString()} - IFS Review Tool`, 20, pageHeight - 10);
+            };
+
+            // ================= PAGE 1: COVER & SYNTHESIS =================
+            drawHeader("SYNTHÈSE DE CERTIFICATION");
+
+            // Company Info Box - Structured & Filtered
+            doc.setDrawColor(200);
+            doc.setFillColor(255, 255, 255); // White background
+
+            // 1. Extract specific fields using smart search
+            const val = (keys) => findVal(keys) || '-';
+
+            const siteName = val(['nom du site', 'site name', 'société', 'company']);
+            const coidCode = val(['coid']);
+            const auditDateVal = val(['date audit', 'dates audit', 'période']);
+            const reviewerName = val(['reviewer', 'review par', 'nom du reviewer']) || profile['Reviewer'] || "Non spécifié";
+            const auditorName = val(['auditeur', 'auditor', 'nom de l\'auditeur']) || profile['Auditeur'] || "Non spécifié";
+            const reviewDate = new Date().toLocaleDateString();
+
+            const scopeEn = val(['scope en', 'audit scope', 'scope english']) || "N/A";
+            const scopeFr = val(['périm��tre', 'scope fr', 'libellé fr']) || "N/A";
+
+            // 2. Content Layoutextract
+            const startY = 40;
+            let currentY = startY + 15;
+            const leftCol = 20;
+            const rightCol = 110;
+
+            doc.setFontSize(14);
+            doc.setTextColor(...COLOR_PRIMARY);
+            doc.setFont('helvetica', 'bold');
+            doc.text("INFORMATIONS CLÉS", 20, 50);
+
+            doc.setFontSize(10);
+            doc.setTextColor(50);
+
+            // Row 1: Site & COID
+            doc.setFont('helvetica', 'bold'); doc.text("Site / Société:", leftCol, currentY);
+            doc.setFont('helvetica', 'normal'); doc.text(String(siteName), leftCol, currentY + 5);
+
+            doc.setFont('helvetica', 'bold'); doc.text("COID:", rightCol, currentY);
+            doc.setFont('helvetica', 'normal'); doc.text(String(coidCode), rightCol, currentY + 5);
+            currentY += 15;
+
+            // Row 2: Dates
+            doc.setFont('helvetica', 'bold'); doc.text("Date de l'audit:", leftCol, currentY);
+            doc.setFont('helvetica', 'normal'); doc.text(String(auditDateVal), leftCol, currentY + 5);
+
+            doc.setFont('helvetica', 'bold'); doc.text("Date de la revue:", rightCol, currentY);
+            doc.setFont('helvetica', 'normal'); doc.text(reviewDate, rightCol, currentY + 5);
+            currentY += 15;
+
+            // Row 3: People
+            doc.setFont('helvetica', 'bold'); doc.text("Auditeur:", leftCol, currentY);
+            doc.setFont('helvetica', 'normal'); doc.text(String(auditorName), leftCol, currentY + 5);
+
+            doc.setFont('helvetica', 'bold'); doc.text("Reviewer:", rightCol, currentY);
+            doc.setFont('helvetica', 'normal'); doc.text(String(reviewerName), rightCol, currentY + 5);
+            currentY += 20;
+
+            // Row 4: Scopes (Full Width)
+            doc.setFont('helvetica', 'bold'); doc.text("Audit Scope (EN):", leftCol, currentY);
+            currentY += 5;
+            doc.setFont('helvetica', 'normal');
+            const splitScopeEn = doc.splitTextToSize(String(scopeEn), pageWidth - 40);
+            doc.text(splitScopeEn, leftCol, currentY);
+            currentY += (splitScopeEn.length * 5) + 8;
+
+            doc.setFont('helvetica', 'bold'); doc.text("Périmètre (FR):", leftCol, currentY);
+            currentY += 5;
+            doc.setFont('helvetica', 'normal');
+            const splitScopeFr = doc.splitTextToSize(String(scopeFr), pageWidth - 40);
+            doc.text(splitScopeFr, leftCol, currentY);
+            currentY += (splitScopeFr.length * 5) + 15;
+
+            // Draw Border around the dynamic section
+            const boxHeight = currentY - startY;
+            doc.setDrawColor(200);
+            doc.roundedRect(14, startY, pageWidth - 28, boxHeight, 2, 2, 'S'); // S for Stroke only
+
+            // Adjust Y for next section (Decision)
+
+
+
+
+            // Adjust Y for next section
+            const nextSectionY = currentY + 15;
+
+            // Decision Block
+            const decisionY = nextSectionY;
+            doc.setFontSize(14);
+            doc.setTextColor(...COLOR_PRIMARY);
+            doc.text("DÉCISION DE CERTIFICATION", 14, decisionY - 5);
+
+            if (isDecisionMade) {
+                const isSuccess = ['foundation', 'higher'].includes(decision.result);
+                const boxColor = isSuccess ? [240, 253, 244] : [254, 242, 242]; // Light green or light red
+                const borderColor = isSuccess ? COLOR_SUCCESS : COLOR_DANGER;
+                const textColor = isSuccess ? [21, 128, 61] : [185, 28, 28];
+                const resultText = decision.result === 'higher' ? "NIVEAU SUPÉRIEUR" : (decision.result === 'foundation' ? "NIVEAU DE BASE" : "NON CERTIFIÉ");
+
+                doc.setDrawColor(...borderColor);
+                doc.setFillColor(...boxColor);
+                doc.rect(14, decisionY, pageWidth - 28, 40, 'FD');
+
+                doc.setFontSize(16);
+                doc.setTextColor(...textColor);
+                doc.setFont('helvetica', 'bold');
+                doc.text(resultText, pageWidth / 2, decisionY + 15, { align: 'center' });
+
+                doc.setFontSize(10);
+                doc.setTextColor(50);
+                doc.setFont('helvetica', 'normal');
+                doc.text(`Décision prise par: ${decision.maker || 'N/A'}`, pageWidth / 2, decisionY + 25, { align: 'center' });
+                doc.text(`Date: ${decision.date || 'N/A'}`, pageWidth / 2, decisionY + 32, { align: 'center' });
+            } else {
+                doc.setDrawColor(200);
+                doc.setFillColor(245, 245, 245);
+                doc.rect(14, decisionY, pageWidth - 28, 30, 'FD');
+                doc.setFontSize(11);
+                doc.setTextColor(100);
+                doc.text("Aucune décision de certification n'a encore été enregistrée.", pageWidth / 2, decisionY + 18, { align: 'center' });
+            }
+
+            // Synthesis Comment
+            if (decision.comments) {
+                const synthesisY = decision.result ? decisionY + 50 : decisionY + 40;
+                doc.setFontSize(12);
+                doc.setTextColor(...COLOR_PRIMARY);
+                doc.text("Synthèse du Reviewer", 14, synthesisY);
+
+                doc.setFontSize(10);
+                doc.setTextColor(60);
+                const splitText = doc.splitTextToSize(decision.comments, pageWidth - 30);
+                doc.text(splitText, 14, synthesisY + 8);
+            }
+
+            drawFooter(1);
+
+
+            // ================= PAGE 2: DOSSIER REVIEW TABLE =================
+            doc.addPage();
+            drawHeader("REVUE DU DOSSIER");
+
+            let dossierRows = [];
+            Object.keys(checklistStructure).sort().forEach(key => {
+                const cat = checklistStructure[key];
+                // Category Header Row - styled differently in autotable
+                dossierRows.push([{ content: cat.titre.toUpperCase(), colSpan: 3, styles: { fillColor: [248, 250, 252], fontStyle: 'bold', textColor: [71, 85, 105] } }]);
+
+                cat.items.forEach(item => {
+                    const status = dossierState[item.id];
+                    let statusLabel = "À TRAITER";
+                    let comments = "";
+
+                    // Get conversation preview
+                    const fieldId = `dossier-${item.id}`;
+                    if (conversations[fieldId]?.thread?.length > 0) {
+                        comments = `${conversations[fieldId].thread.length} message(s)`;
+                    }
+
+                    if (status === 'ok') statusLabel = "CONFORME";
+                    if (status === 'nok') statusLabel = "NON CONFORME";
+                    if (status === 'na') statusLabel = "N/A";
+
+                    dossierRows.push([
+                        item.nom,
+                        statusLabel,
+                        comments
+                    ]);
+                });
+            });
+
+            doc.autoTable({
+                startY: 35,
+                head: [['Point de contrôle', 'Statut', 'Observations']],
+                body: dossierRows,
+                theme: 'grid',
+                styles: { fontSize: 9, cellPadding: 3, lineColor: [226, 232, 240] },
+                headStyles: { fillColor: COLOR_PRIMARY, textColor: 255, fontStyle: 'bold' },
+                columnStyles: {
+                    0: { cellWidth: 'auto' },
+                    1: { cellWidth: 40, fontStyle: 'bold', halign: 'center' },
+                    2: { cellWidth: 40, fontStyle: 'italic' }
+                },
+                didParseCell: function (data) {
+                    if (data.section === 'body' && data.column.index === 1) {
+                        const s = data.cell.raw;
+                        if (s === 'CONFORME') data.cell.styles.textColor = COLOR_SUCCESS;
+                        if (s === 'NON CONFORME') data.cell.styles.textColor = COLOR_DANGER;
+                        if (s === 'N/A') data.cell.styles.textColor = COLOR_GRAY;
+                        if (s === 'À TRAITER') data.cell.styles.textColor = [234, 88, 12]; // Orange
+                    }
+                }
+            });
+            drawFooter(2);
+
+
+            // ================= PAGE 3: CONVERSATION LOGS =================
+            doc.addPage();
+            drawHeader("JOURNAL DES ÉCHANGES");
+
+            let activeThreads = [];
+            // Collect all relevant conversations
+            Object.keys(conversations).forEach(fieldId => {
+                const thread = conversations[fieldId].thread;
+                if (thread && thread.length > 0) {
+                    const info = this.dataProcessor.getFieldInfo(fieldId);
+                    activeThreads.push({
+                        name: info.name,
+                        thread: thread,
+                        type: info.type
+                    });
+                }
+            });
+
+            if (activeThreads.length === 0) {
+                doc.setFontSize(10);
+                doc.setTextColor(100);
+                doc.text("Aucun échange commentaire/réponse enregistré.", 14, 40);
+            } else {
+                let yOffset = 40;
+
+                activeThreads.forEach((item, index) => {
+                    // Check page break
+                    if (yOffset > pageHeight - 40) {
+                        doc.addPage();
+                        drawHeader("JOURNAL DES ÉCHANGES (Suite)");
+                        yOffset = 40;
+                    }
+
+                    doc.setFontSize(11);
+                    doc.setTextColor(...COLOR_ACCENT);
+                    doc.setFont('helvetica', 'bold');
+                    doc.text(`${item.name}`, 14, yOffset);
+                    yOffset += 7;
+
+                    const msgRows = item.thread.map(msg => [
+                        `${msg.author === 'reviewer' ? 'Reviewer' : 'Auditeur'} (${formatDate(msg.date)})`,
+                        msg.content
+                    ]);
+
+                    doc.autoTable({
+                        startY: yOffset,
+                        body: msgRows,
+                        theme: 'plain',
+                        styles: { fontSize: 8, cellPadding: 2 },
+                        columnStyles: {
+                            0: { cellWidth: 40, fontStyle: 'bold', textColor: [100, 100, 100] },
+                            1: { cellWidth: 'auto' }
+                        },
+                        didDrawPage: function (data) {
+                            // Don't draw header
+                        }
+                    });
+
+                    yOffset = doc.lastAutoTable.finalY + 10;
+                });
+            }
+            drawFooter(3);
+
+            // SAVE
+            // Try to find COID for filename safely
+            let safeCoid = "Draft";
+            const foundCoid = findVal ? findVal(['coid']) : null;
+            if (foundCoid) safeCoid = this.sanitizeFileName(foundCoid);
+            else if (profile['COID']) safeCoid = this.sanitizeFileName(profile['COID']);
+
+            const filename = `Rapport_Certification_${safeCoid}.pdf`;
+            doc.save(filename);
+            this.uiManager.showError(`✅ Export PDF réussi : ${filename}`, 3000); // Using showError for generic toast if nice toast not avail
+
         } catch (error) {
             console.error('Error exporting PDF:', error);
             this.uiManager.showError('❌ Erreur export PDF : ' + error.message);
@@ -685,6 +1083,13 @@ class FileHandler {
             }
         };
 
+        reader.onerror = (error) => {
+            console.error('File reading error:', error);
+            this.uiManager.showError('Erreur lors de la lecture du fichier');
+            this.uiManager.showLoading(false);
+            event.target.value = null;
+        };
+
         reader.readAsArrayBuffer(file);
     }
 
@@ -722,7 +1127,7 @@ class FileHandler {
                 for (let i = 0; i < Math.min(rows.length, 25); i++) {
                     const row = rows[i].map(c => String(c || '').toLowerCase().trim());
                     if (row.includes('numéro') || row.includes('numero') || row.includes('requirementno')) {
-                        dataStartIndex = i + 2; // Skip duplication row
+                        dataStartIndex = i + 1; // Start right after header
                         // Update mapping
                         row.forEach((cell, idx) => {
                             const val = String(cell).toLowerCase().trim();
@@ -741,7 +1146,7 @@ class FileHandler {
         console.log("🚀 Début lecture données ligne:", dataStartIndex + 1);
 
         let updatedCount = 0;
-        const currentChecklist = this.state.get().checklistData;
+        const currentChecklist = [...this.state.get().checklistData]; // Shallow copy of array
         const numToUUID = {};
 
         currentChecklist.forEach(item => {
@@ -778,45 +1183,302 @@ class FileHandler {
                     const itemIndex = currentChecklist.findIndex(item => item.uuid === uuid);
                     if (itemIndex !== -1) {
                         let modified = false;
+                        const item = { ...currentChecklist[itemIndex] }; // Copy object to avoid direct mutation
 
                         if (correctionText.length > 2) {
-                            currentChecklist[itemIndex].correction = correctionText;
+                            item.correction = correctionText;
                             modified = true;
                         }
 
                         if (evidenceText.length > 2) {
-                            currentChecklist[itemIndex].evidence = evidenceText;
+                            item.evidence = evidenceText;
                             modified = true;
                         }
 
                         if (actionText.length > 2) {
-                            currentChecklist[itemIndex].correctiveAction = actionText;
+                            item.correctiveAction = actionText;
                             modified = true;
                         }
 
-                        if (modified) updatedCount++;
+                        if (modified) {
+                            currentChecklist[itemIndex] = item;
+                            updatedCount++;
+                        }
                     }
                 }
             }
         }
 
         if (updatedCount > 0) {
-            console.log(`✅ ${updatedCount} plans d'actions mis à jour.`);
-
             this.state.setState({
-                checklistData: [...currentChecklist],
+                checklistData: currentChecklist,
                 hasUnsavedChanges: true
             });
-
+            this.uiManager.showSuccess(`✅ Plan d'Actions importé : ${updatedCount} exigences mises à jour.`);
             this.dataProcessor.renderChecklistTable();
             this.dataProcessor.renderNonConformitiesTable();
-            this.uiManager.showSuccess(`✅ Import réussi ! ${updatedCount} items mis à jour avec corrections/preuves.`);
         } else {
-            this.uiManager.showError("⚠️ Import terminé, mais aucune correspondance trouvée. Vérifiez 'requirementNo'/'Numéro'.");
+            this.uiManager.showError("Aucune donnée valide n'a été importée. Vérifiez le format du fichier.");
         }
 
         this.uiManager.showLoading(false);
-        this.uiManager.showResults(true);
-        this.dataProcessor.renderCompanyProfile();
+    }
+
+    exportActionPlanForSite() {
+        const state = this.state.get();
+        const conversations = state.conversations || {};
+        const checklistData = state.checklistData || [];
+        const companyProfileData = state.companyProfileData || {};
+
+        // On cherche les conversations qui commencent par 'pa-' (Plan d'Actions)
+        const paEntries = Object.entries(conversations).filter(([key, conv]) =>
+            key.startsWith('pa-') && conv.thread && conv.thread.length > 0
+        );
+
+        if (paEntries.length === 0) {
+            this.uiManager.showError("Aucune question sur le Plan d'Actions (canal spécifique) n'a été trouvée.");
+            return;
+        }
+
+        const header = [
+            "N° Exigence",
+            "Score",
+            "Constat (Audit)",
+            "Échanges / Questions (Reviewer)",
+            "Réponse Site (Correction)",
+            "Preuves",
+            "Action Corrective",
+            "Statut"
+        ];
+
+        const rows = paEntries.map(([fieldId, conv]) => {
+            const uuid = fieldId.replace('pa-', '');
+            const item = checklistData.find(i => i.uuid === uuid);
+
+            // On compile le fil de discussion pour l'affichage
+            const discussion = conv.thread.map(m =>
+                `[${m.author === 'reviewer' ? 'REVIEWER' : 'AUDITEUR'} ${new Date(m.date).toLocaleDateString()}] : ${m.content}`
+            ).join('\n\n');
+
+            return [
+                item ? item.requirementNumber : '?',
+                item ? item.score : '?',
+                item ? (item.explanation || '-') : '-',
+                discussion,
+                item ? (item.correction || '') : '',
+                item ? (item.evidence || '') : '',
+                item ? (item.correctiveAction || '') : '',
+                conv.status === 'resolved' ? 'VALIDÉ' : 'EN ATTENTE'
+            ];
+        });
+
+        try {
+            const worksheet = XLSX.utils.aoa_to_sheet([header, ...rows]);
+
+            // Style de base pour les colonnes
+            worksheet['!cols'] = [
+                { width: 12 }, // N°
+                { width: 8 },  // Score
+                { width: 40 }, // Constat
+                { width: 60 }, // Discussion
+                { width: 30 }, // Correction
+                { width: 30 }, // Preuves
+                { width: 30 }, // AC
+                { width: 15 }  // Statut
+            ];
+
+            const workbook = XLSX.utils.book_new();
+            XLSX.utils.book_append_sheet(workbook, worksheet, "Questions Plan Actions");
+
+            // Nom de fichier propre
+            const companyName = companyProfileData['Nom du site à auditer'] || 'Site';
+            const coid = companyProfileData['N° COID du portail'] || 'COID';
+            const dateStamp = this.getDateStamp();
+            const filename = `QUESTIONS_PA_${this.sanitizeFileName(coid)}_${this.sanitizeFileName(companyName)}_${dateStamp}.xlsx`;
+
+            XLSX.writeFile(workbook, filename);
+            this.uiManager.showSuccess(`✅ Export réussi : ${filename}`);
+
+        } catch (error) {
+            console.error('Error exporting PA for site:', error);
+            this.uiManager.showError("Erreur lors de l'exportation Excel : " + error.message);
+        }
+    }
+
+    generateActionPlanPrintView() {
+        const state = this.state.get();
+        const conversations = state.conversations || {};
+        const checklistData = state.checklistData || [];
+        const profile = state.companyProfileData || {};
+
+        const paEntries = Object.entries(conversations).filter(([key, conv]) =>
+            key.startsWith('pa-') && conv.thread && conv.thread.length > 0
+        );
+
+        if (paEntries.length === 0) {
+            this.uiManager.showError("Aucune question sur le Plan d'Actions n'a été trouvée.");
+            return;
+        }
+
+        const siteName = profile['Nom du site à auditer'] || 'Site';
+        const coid = profile['N° COID du portail'] || 'N/A';
+
+        let html = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Plan d'Actions - ${siteName}</title>
+    <style>
+        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; max-width: 900px; margin: 40px auto; padding: 20px; }
+        .header { border-bottom: 3px solid #2563eb; padding-bottom: 20px; margin-bottom: 30px; }
+        .header h1 { margin: 0; color: #1e3a8a; }
+        .header p { margin: 5px 0; color: #64748b; font-weight: bold; }
+        .item { border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin-bottom: 30px; page-break-inside: avoid; }
+        .item-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f5f9; padding-bottom: 10px; margin-bottom: 15px; }
+        .req-num { font-size: 1.25rem; font-weight: 800; color: #2563eb; }
+        .score-badge { background: #f1f5f9; padding: 4px 12px; border-radius: 4px; font-weight: bold; }
+        .section-title { font-size: 0.85rem; text-transform: uppercase; color: #64748b; font-weight: 700; margin-top: 15px; margin-bottom: 5px; }
+        .content-box { background: #f8fafc; padding: 12px; border-radius: 6px; border-left: 4px solid #cbd5e1; white-space: pre-wrap; margin-bottom: 10px; }
+        .question-box { background: #fff7ed; padding: 15px; border-radius: 6px; border: 1px solid #ffedd5; border-left: 4px solid #f59e0b; margin-top: 20px; }
+        .question-label { color: #c2410c; font-weight: 800; display: block; margin-bottom: 10px; font-size: 1.1rem; }
+        .comment-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #fed7aa; }
+        .comment-item:last-child { border-bottom: none; margin-bottom: 0; }
+        .comment-meta { font-size: 0.75rem; color: #9a3412; font-weight: bold; }
+        .no-print { margin-bottom: 20px; display: flex; gap: 10px; }
+        button { padding: 10px 20px; cursor: pointer; background: #2563eb; color: white; border: none; border-radius: 5px; font-weight: bold; }
+        @media print { .no-print { display: none; } body { margin: 0; padding: 0; } }
+    </style>
+</head>
+<body>
+    <div class="no-print">
+        <button onclick="window.print()">Imprimer en PDF / Papier</button>
+        <button onclick="window.close()" style="background: #64748b;">Fermer</button>
+    </div>
+
+    <div class="header">
+        <h1>Questions sur le Plan d'Actions</h1>
+        <p>Site : ${siteName} (COID: ${coid})</p>
+        <p>Date : ${new Date().toLocaleDateString()}</p>
+    </div>
+`;
+
+        paEntries.forEach(([fieldId, conv]) => {
+            const uuid = fieldId.replace('pa-', '');
+            const item = checklistData.find(i => i.uuid === uuid);
+            if (!item) return;
+
+            html += `
+    <div class="item">
+        <div class="item-header">
+            <span class="req-num">Exigence ${item.requirementNumber}</span>
+            <span class="score-badge">Score: ${item.score}</span>
+        </div>
+
+        <div class="section-title">Constat d'audit (Rappel)</div>
+        <div class="content-box">${item.explanation || '-'}</div>
+
+        <div class="section-title">Correction (saisie)</div>
+        <div class="content-box">${item.correction || 'Non renseigné'}</div>
+
+        <div class="section-title">Action Corrective (saisie)</div>
+        <div class="content-box">${item.correctiveAction || 'Non renseigné'}</div>
+
+        <div class="question-box">
+            <span class="question-label">❓ QUESTION(S) DU REVIEWER :</span>
+            ${conv.thread.map(m => `
+                <div class="comment-item">
+                    <div class="comment-meta">${m.author === 'reviewer' ? 'REVIEWER' : 'AUDITEUR'} - ${new Date(m.date).toLocaleString()}</div>
+                    <div class="comment-content">${m.content}</div>
+                </div>
+            `).join('')}
+        </div>
+    </div>
+`;
+        });
+
+        html += `
+    <div style="margin-top: 50px; text-align: center; color: #94a3b8; font-size: 0.85rem;">
+        Document généré le ${new Date().toLocaleString()} via IFS Review Tool
+    </div>
+</body>
+</html>`;
+
+        const printWindow = window.open('', '_blank');
+        printWindow.document.write(html);
+        printWindow.document.close();
+    }
+
+    generateShortActionPlanPrintView() {
+        const state = this.state.get();
+        const conversations = state.conversations || {};
+        const checklistData = state.checklistData || [];
+        const profile = state.companyProfileData || {};
+
+        const paEntries = Object.entries(conversations).filter(([key, conv]) =>
+            key.startsWith('pa-') && conv.thread && conv.thread.length > 0
+        );
+
+        if (paEntries.length === 0) {
+            this.uiManager.showError("Aucune question sur le Plan d'Actions n'a été trouvée.");
+            return;
+        }
+
+        const siteName = profile['Nom du site à auditer'] || 'Site';
+
+        let html = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Liste Questions Reviewer - ${siteName}</title>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.5; color: #1e293b; max-width: 800px; margin: 40px auto; padding: 20px; }
+        .no-print { margin-bottom: 20px; }
+        h1 { font-size: 1.5rem; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 20px; }
+        .q-item { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #f1f5f9; }
+        .q-header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
+        .q-num { font-weight: 800; color: #2563eb; font-size: 1.1rem; }
+        .q-score { background: #f1f5f9; padding: 2px 8px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; }
+        .q-text { background: #fff7ed; border-left: 4px solid #f59e0b; padding: 10px 15px; font-style: italic; }
+        .q-label { font-size: 0.75rem; text-transform: uppercase; color: #9a3412; font-weight: bold; margin-bottom: 4px; display: block; }
+        button { padding: 8px 16px; cursor: pointer; background: #2563eb; color: white; border: none; border-radius: 4px; }
+        @media print { .no-print { display: none; } }
+    </style>
+</head>
+<body>
+    <div class="no-print">
+        <button onclick="window.print()">Imprimer la liste</button>
+    </div>
+    <h1>Questions Reviewer - P.A. (Format court)</h1>
+    <p style="margin-bottom: 30px;"><strong>Site :</strong> ${siteName}</p>
+`;
+
+        paEntries.forEach(([fieldId, conv]) => {
+            const uuid = fieldId.replace('pa-', '');
+            const item = checklistData.find(i => i.uuid === uuid);
+            if (!item) return;
+
+            // Only get the latest reviewer comment for the "ultra simple" view
+            const reviewerComments = conv.thread.filter(m => m.author === 'reviewer');
+            const lastQuestion = reviewerComments.length > 0 ? reviewerComments[reviewerComments.length - 1].content : "Voir fil de discussion";
+
+            html += `
+    <div class="q-item">
+        <div class="q-header">
+            <span class="q-num">Exigence ${item.requirementNumber}</span>
+            <span class="q-score">Score: ${item.score}</span>
+        </div>
+        <div class="q-text">
+            <span class="q-label">Question du Reviewer :</span>
+            ${lastQuestion}
+        </div>
+    </div>
+`;
+        });
+
+        html += `</body></html>`;
+
+        const printWindow = window.open('', '_blank');
+        printWindow.document.write(html);
+        printWindow.document.close();
     }
 }

index.html

@@ -12,6 +12,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.29/jspdf.plugin.autotable.min.js"></script>
 
     <link rel="stylesheet" href="styles.css">
 </head>
@@ -282,6 +283,17 @@
                                 onclick="setAuditorTaskFilter('all')">
                                 <i class="fas fa-list"></i> Tout
                             </button>
+                            <button class="btn btn-secondary btn-sm" style="margin-left: auto;"
+                                onclick="printShortActionPlan()">
+                                <i class="fas fa-list-ul"></i> Liste Simple
+                            </button>
+                            <button id="exportPAQuestionsBtn" class="btn btn-primary btn-sm"
+                                onclick="printActionPlan()">
+                                <i class="fas fa-print"></i> Fiche P.A.
+                            </button>
+                            <button class="btn btn-success btn-sm" onclick="exportActionPlanForSite()">
+                                <i class="fas fa-file-excel"></i> Excel
+                            </button>
                         </div>
                     </div>
 
@@ -491,9 +503,10 @@
                                 <tr>
                                     <th style="width: 8%;">N° Exigence</th>
                                     <th style="width: 7%;">Score</th>
-                                    <th style="width: 32%;">Explication</th>
-                                    <th style="width: 33%;">Explication détaillée</th>
-                                    <th style="width: 20%;">Revue : Statut commentaires</th>
+                                    <th style="width: 30%;">Explication</th>
+                                    <th style="width: 30%;">Explication détaillée</th>
+                                    <th style="width: 12%;">Revue : CONSTAT</th>
+                                    <th style="width: 13%;">Revue : PLAN D'ACTIONS</th>
                                 </tr>
                             </thead>
                             <tbody id="checklistTableBody"></tbody>

ui-manager.js

@@ -115,7 +115,8 @@ class UIManager {
         this.setupKeyboardShortcuts();
 
         window.selectMode = (mode) => this.selectMode(mode);
-        window.openCommentModal = (rowElement) => this.openCommentModal(rowElement);
+        window.openCommentModal = (rowElementOrId) => this.openCommentModal(rowElementOrId);
+        window.openCommentModalFromCell = (cellElement, fieldId) => this.openCommentModalFromCell(cellElement, fieldId);
         window.closeCommentModal = () => this.closeCommentModal();
         window.saveComment = () => this.saveComment();
         window.markAsResolved = () => this.markAsResolved();
@@ -146,6 +147,9 @@ class UIManager {
         window.openResetModal = () => this.openResetModal();
         window.closeResetModal = () => this.closeResetModal();
         window.confirmAppReset = () => this.confirmAppReset();
+        window.exportActionPlanForSite = () => this.fileHandler.exportActionPlanForSite();
+        window.printActionPlan = () => this.fileHandler.generateActionPlanPrintView();
+        window.printShortActionPlan = () => this.fileHandler.generateShortActionPlanPrintView();
 
         window.addEventListener('beforeunload', function (event) {
             console.log('beforeunload triggered. Unsaved changes:', this.state.get().hasUnsavedChanges);
@@ -565,28 +569,48 @@ class UIManager {
         this.dataProcessor.refreshCountersForTab(tabId);
     }
 
-    openCommentModal(rowElement) {
-        if (!rowElement) return;
+    openCommentModalFromCell(cellElement, fieldId) {
+        if (!fieldId) return;
+        this.currentFieldId = fieldId;
+        this.openCommentModal(fieldId);
+    }
+
+    openCommentModal(rowElementOrId) {
+        let fieldId = '';
+        if (typeof rowElementOrId === 'string') {
+            fieldId = rowElementOrId;
+        } else if (rowElementOrId && rowElementOrId.dataset) {
+            fieldId = rowElementOrId.dataset.fieldId;
+        }
 
-        const fieldId = rowElement.dataset.fieldId;
         if (!fieldId) return;
 
         this.currentFieldId = fieldId;
-
         const fieldInfo = this.dataProcessor.getFieldInfo(fieldId);
 
-        document.getElementById('modalFieldName').textContent = `Commentaires - ${fieldInfo.name}`;
-        document.getElementById('fieldDisplayContent').innerHTML = fieldInfo.content;
+        // Update Modal Title and Content
+        const modalTitle = document.getElementById('modalFieldName');
+        const fieldDisplay = document.getElementById('fieldDisplayContent');
 
+        if (modalTitle) modalTitle.textContent = `Commentaires - ${fieldInfo.name}`;
+        if (fieldDisplay) fieldDisplay.innerHTML = fieldInfo.content;
+
+        // Load Conversation History
         this.loadConversationHistory(fieldId);
-        this.renderHistoryTimeline(fieldId); // Appel pour afficher la timeline
 
+        // Render History Timeline
+        this.renderHistoryTimeline(fieldId);
+
+        // Mode specific setup (placeholder, read-only, etc.)
         this.setupModalForCurrentMode(fieldId);
 
+        // Start Draft Auto-save for this specific field
         this.setupDraftAutoSave(fieldId);
 
+        // Show Modal
         document.getElementById('commentModal').classList.remove('hidden');
 
+        // Focus on textarea (slightly delayed for visibility)
         setTimeout(() => {
             const textarea = document.getElementById('newCommentInput');
             if (textarea) textarea.focus();