Update templates/index.html

templates/index.html

@@ -83,14 +83,17 @@
         /* Styles pour les messages d'erreur/avertissement */
         .alert-message {
             display: flex;
-            align-items: center;
-            space-x: 3; /* Ne fonctionnera pas ici, utilisez margin sur l'icône */
+            align-items: flex-start; /* Align items start for better text wrapping */
+            /* space-x-3 equivalent using margin on icon */
             padding: 1rem; /* p-4 */
             border-radius: 0.5rem; /* rounded-lg */
+            border-width: 1px;
+            border-style: solid;
         }
         .alert-message i {
              margin-right: 0.75rem; /* space-x-3 equivalent */
              font-size: 1.25rem; /* text-xl */
+             margin-top: 0.125rem; /* slight top margin for better alignment */
         }
         .alert-message div p:first-child {
             font-weight: 500; /* font-medium */
@@ -98,30 +101,31 @@
          .alert-message div p:last-child {
             font-size: 0.875rem; /* text-sm */
             margin-top: 0.25rem; /* mt-1 */
+            line-height: 1.4; /* Improved line height for wrap */
         }
 
         .alert-warning {
-             color: #92400e; /* text-amber-700 (approximatif) */
+             color: #92400e; /* text-amber-700 */
              background-color: #fffbeb; /* bg-amber-50 */
-             border: 1px solid #fde68a /* border-amber-200 (approximatif) */
+             border-color: #fde68a /* border-amber-200 */
         }
         .alert-warning i {
             color: var(--warning); /* text-amber-500 */
         }
         .alert-warning div p:last-child {
-             color: #b45309; /* text-amber-600 (approximatif) */
+             color: #b45309; /* text-amber-600 */
         }
 
         .alert-danger {
-             color: #991b1b; /* text-red-700 (approximatif) */
+             color: #991b1b; /* text-red-700 */
              background-color: #fef2f2; /* bg-red-50 */
-             border: 1px solid #fecaca; /* border-red-200 (approximatif) */
+             border-color: #fecaca; /* border-red-200 */
         }
         .alert-danger i {
              color: var(--danger); /* text-red-500 */
         }
          .alert-danger div p:last-child {
-             color: #b91c1c; /* text-red-600 (approximatif) */
+             color: #b91c1c; /* text-red-600 */
         }
 
 
@@ -159,16 +163,20 @@
             margin-top: 10px;
             max-height: 0;
             overflow: hidden;
-            transition: max-height 0.3s ease, opacity 0.3s ease;
+            transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out, padding-top 0.3s ease-out; /* Added padding-top */
             opacity: 0;
+            padding-top: 0; /* Start with no padding */
         }
 
         .backup-content-expanded {
             display: block;
-            max-height: 2000px; /* Augmenté pour les longs contenus */
+            max-height: 3000px; /* Augmenté pour les longs contenus */
             opacity: 1;
+            margin-top: 1rem; /* mt-4 */
+            padding-top: 0.75rem; /* pt-3 */
         }
 
+
         /* Styles for multiple image upload */
         .image-preview {
             display: flex;
@@ -344,6 +352,82 @@
                 grid-template-columns: repeat(2, minmax(0, 1fr));
             }
         }
+
+        /* Style pour la checkbox DeepThink */
+        .deepthink-label {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            font-size: 0.875rem; /* text-sm */
+            color: var(--secondary);
+        }
+        .deepthink-label input[type="checkbox"] {
+            appearance: none;
+            width: 1.25em;
+            height: 1.25em;
+            border: 2px solid #cbd5e0; /* border-gray-300 */
+            border-radius: 0.375rem; /* rounded-md */
+            margin-right: 0.5em;
+            position: relative;
+            top: 1px;
+            transition: all 0.2s ease-in-out;
+        }
+        .deepthink-label input[type="checkbox"]:checked {
+            background-color: var(--primary);
+            border-color: var(--primary);
+        }
+        .deepthink-label input[type="checkbox"]:checked::after {
+            content: '\f00c'; /* FontAwesome check icon */
+            font-family: 'Font Awesome 6 Free';
+            font-weight: 900;
+            color: white;
+            font-size: 0.8em;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+        .deepthink-label:hover input[type="checkbox"] {
+             border-color: var(--primary-dark);
+        }
+        .deepthink-tooltip {
+            position: relative;
+            display: inline-block;
+            margin-left: 6px;
+        }
+        .deepthink-tooltip .tooltip-text {
+            visibility: hidden;
+            width: 220px;
+            background-color: #2d3748; /* gray-800 */
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 6px 10px;
+            position: absolute;
+            z-index: 10;
+            bottom: 135%;
+            left: 50%;
+            margin-left: -110px;
+            opacity: 0;
+            transition: opacity 0.3s;
+            font-size: 0.75rem; /* text-xs */
+            line-height: 1.4;
+        }
+        .deepthink-tooltip .tooltip-text::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #2d3748 transparent transparent transparent;
+        }
+        .deepthink-tooltip:hover .tooltip-text {
+            visibility: visible;
+            opacity: 1;
+        }
+
     </style>
 </head>
 
@@ -381,7 +465,7 @@
                             <div class="focus-ring">
                                 <textarea id="sujet-francais" name="sujet" rows="4"
                                     class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:outline-none transition-all duration-200 resize-none"
-                                    placeholder="Entrez votre sujet ici..." required></textarea> <!-- Ajout de required -->
+                                    placeholder="Entrez votre sujet ici..." required></textarea>
                             </div>
                             <div class="text-xs text-gray-400 text-right" id="character-count">0 caractères</div>
                         </div>
@@ -416,12 +500,10 @@
                                     </span>
                                 </label>
                                 <label class="relative">
-                                     <!-- MODIFICATION ICI: disabled retiré, span class mise à jour, badge retiré -->
                                     <input type="radio" name="choix" value="dissertation"
                                         class="custom-radio absolute opacity-0 w-full h-full cursor-pointer">
                                     <span class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">
                                         Dissertation
-                                        <!-- <span class="coming-soon-badge">Bientôt</span> -->
                                     </span>
                                 </label>
                             </div>
@@ -451,6 +533,20 @@
                             </div>
                         </div>
 
+                        <!-- MODIFICATION: Ajout de la checkbox DeepThink -->
+                        <div class="flex items-center justify-start pt-2">
+                           <label for="deepthink-checkbox" class="deepthink-label">
+                               <input type="checkbox" id="deepthink-checkbox" name="use_deepthink_visual"> <!-- Name is different to avoid direct form submission -->
+                                Utiliser DeepThink
+                               <div class="deepthink-tooltip">
+                                   <i class="fas fa-info-circle text-gray-400"></i>
+                                   <span class="tooltip-text">Utilise un modèle plus avancé (Gemini Pro) pour une meilleure qualité, mais peut être plus lent et coûteux.</span>
+                               </div>
+                           </label>
+                        </div>
+                        <!-- Fin de la modification -->
+
+
                         <button type="submit"
                             class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white px-6 py-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg">
                             <div class="flex items-center justify-center space-x-3">
@@ -459,7 +555,7 @@
                             </div>
                         </button>
                     </form>
-                    <div id="francais-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[100px]"> <!-- Ajout de min-h -->
+                    <div id="francais-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[100px]">
                         <!-- Le contenu généré sera inséré ici -->
                     </div>
                 </div>
@@ -481,7 +577,7 @@
                             </label>
                             <div class="border-3 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-all duration-200 group"
                                  id="drop-zone">
-                                <input type="file" id="image-upload" name="images" accept="image/*" class="hidden" multiple> <!-- `multiple` permet plusieurs fichiers -->
+                                <input type="file" id="image-upload" name="images" accept="image/*" class="hidden" multiple>
                                 <div class="space-y-4">
                                     <div class="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto transform transition-transform group-hover:scale-110 group-hover:rotate-6">
                                         <i class="fas fa-cloud-upload-alt text-3xl text-blue-500"></i>
@@ -491,7 +587,7 @@
                                     <p class="text-xs text-gray-400">PNG, JPG, WEBP jusqu'à 10MB</p>
                                 </div>
                             </div>
-                            <div id="image-preview" class="image-preview"></div> <!-- Prévisualisation des images -->
+                            <div id="image-preview" class="image-preview"></div>
                         </div>
 
                         <button type="submit"
@@ -502,7 +598,7 @@
                             </div>
                         </button>
                     </form>
-                     <div id="etude-texte-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[100px]"> <!-- Ajout de min-h -->
+                     <div id="etude-texte-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[100px]">
                         <!-- Le contenu analysé sera inséré ici -->
                     </div>
                 </div>
@@ -638,7 +734,9 @@
                  previewElement.style.opacity = '0';
                  previewElement.style.transform = 'scale(0.9)';
                  setTimeout(() => {
-                      imagePreview.removeChild(previewElement);
+                      if (imagePreview.contains(previewElement)) {
+                           imagePreview.removeChild(previewElement);
+                      }
                  }, 300);
             }
         }
@@ -646,13 +744,12 @@
         function sauvegarderReponse(titre, contenu) {
             const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
             const dateSauvegarde = new Date().toISOString();
-            // Limiter la taille des sauvegardes si nécessaire
             const MAX_SAUVEGARDES = 20;
             if (sauvegardes.length >= MAX_SAUVEGARDES) {
-                 sauvegardes.shift(); // Supprime la plus ancienne
+                 sauvegardes.shift();
             }
             sauvegardes.push({
-                titre: titre || "Sauvegarde sans titre", // Titre par défaut
+                titre: titre || "Sauvegarde sans titre",
                 contenu,
                 date: dateSauvegarde
             });
@@ -660,24 +757,22 @@
                  localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
             } catch (e) {
                 console.error("Erreur lors de la sauvegarde dans localStorage (peut-être plein):", e);
-                // Afficher une erreur à l'utilisateur si localStorage est plein
                 displayNotification("Erreur de sauvegarde: Espace de stockage local plein.", "error");
-                return; // Arrêter si la sauvegarde échoue
+                return;
             }
-
-
             displayNotification("Sauvegardé avec succès", "success");
-            afficherSauvegardes(); // Mettre à jour la liste affichée
+            afficherSauvegardes();
         }
 
         function displayNotification(message, type = 'success') {
              const notification = document.createElement('div');
-             const bgColor = type === 'success' ? 'bg-green-50 border-green-200 text-green-700' : 'bg-red-50 border-red-200 text-red-700';
-             const iconClass = type === 'success' ? 'fa-check-circle text-green-500' : 'fa-exclamation-circle text-red-500';
+             const bgColor = type === 'success' ? 'bg-green-50 border-green-200 text-green-700' : type === 'error' ? 'bg-red-50 border-red-200 text-red-700' : 'bg-yellow-50 border-yellow-200 text-yellow-700';
+             const iconClass = type === 'success' ? 'fa-check-circle text-green-500' : type === 'error' ? 'fa-exclamation-circle text-red-500' : 'fa-exclamation-triangle text-yellow-500';
 
-             notification.className = `fixed bottom-6 right-6 border ${bgColor} px-4 py-3 rounded-lg shadow-lg z-[100] flex items-center scale-in`; // z-index élevé
+
+             notification.className = `fixed bottom-6 right-6 border ${bgColor} px-4 py-3 rounded-lg shadow-lg z-[100] flex items-center scale-in max-w-sm`; // z-index élevé, max-width
              notification.innerHTML = `
-                <i class="fas ${iconClass} mr-2"></i>
+                <i class="fas ${iconClass} mr-3 text-lg flex-shrink-0"></i>
                 <span class="text-sm font-medium">${message}</span>
             `;
             document.body.appendChild(notification);
@@ -690,7 +785,7 @@
                          document.body.removeChild(notification);
                     }
                 }, 300);
-            }, 3000);
+            }, type === 'error' ? 6000 : 3000); // Longer display for errors
         }
 
 
@@ -702,203 +797,173 @@
         }
 
 
-function afficherSauvegardes() {
-    const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-    // Trier par date décroissante (plus récent en premier)
-    sauvegardes.sort((a, b) => new Date(b.date) - new Date(a.date));
-    const backupsList = document.getElementById('backups-list');
-    backupsList.innerHTML = ''; // Vider la liste avant de la repeupler
-
-    if (sauvegardes.length === 0) {
-        backupsList.innerHTML = `
-            <div class="bg-blue-50 rounded-lg p-8 text-center">
-                <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-sm">
-                    <i class="fas fa-folder-open text-blue-300 text-2xl"></i>
-                </div>
-                <p class="text-gray-600">Aucune sauvegarde pour le moment.</p>
-                <p class="text-sm text-gray-500 mt-2">Vos réponses générées apparaîtront ici.</p>
-            </div>
-        `;
-        return;
-    }
-
-    sauvegardes.forEach((sauvegarde, index) => {
-        const date = new Date(sauvegarde.date);
-        const formattedDate = date.toLocaleDateString('fr-FR', {
-            day: 'numeric',
-            month: 'short',
-            year: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-        });
-
-        // Tronquer le titre si trop long pour l'affichage initial
-        const displayTitle = sauvegarde.titre.length > 60 ? sauvegarde.titre.substring(0, 57) + '...' : sauvegarde.titre;
-
-        const sauvegardeDiv = document.createElement('div');
-        // Utilise l'index original (avant tri) pour la suppression si nécessaire, ou l'index après tri si la suppression se base sur l'élément affiché.
-        // Ici on utilise l'index après tri car on supprime de la liste triée affichée.
-        sauvegardeDiv.dataset.index = index; // Utiliser cet index pour la suppression
-        sauvegardeDiv.className = 'bg-white rounded-lg shadow-md p-4 relative backup-item hover:bg-blue-50 transition-all duration-200';
-        sauvegardeDiv.innerHTML = `
-            <div class="flex items-start cursor-pointer item-header"> <!-- Ajout curseur et classe pour le clic -->
-                <div class="bg-blue-100 rounded-lg p-2 mr-3 flex-shrink-0"> <!-- flex-shrink-0 -->
-                    <i class="fas fa-file-alt text-blue-600"></i>
-                </div>
-                <div class="flex-grow overflow-hidden"> <!-- overflow-hidden -->
-                    <h3 class="text-lg font-semibold text-gray-800 truncate" title="${sauvegarde.titre}">${displayTitle}</h3> <!-- truncate et title -->
-                    <p class="text-sm text-gray-600 mb-2 flex items-center">
-                        <i class="fas fa-clock text-xs mr-1 text-gray-400"></i>
-                        ${formattedDate}
-                    </p>
-                </div>
-                <div class="flex space-x-2 ml-2 flex-shrink-0"> <!-- ml-2 et flex-shrink-0 -->
-                    <button class="text-gray-400 hover:text-blue-600 focus:outline-none copy-btn p-1" title="Copier">
-                        <i class="fas fa-copy"></i>
-                    </button>
-                    <button class="text-gray-400 hover:text-red-600 focus:outline-none delete-btn p-1" title="Supprimer">
-                        <i class="fas fa-trash-alt"></i>
-                    </button>
-                </div>
-            </div>
-            <div class="backup-content mt-4 text-sm text-gray-700 prose max-w-none border-t border-gray-100 pt-3">
-                <!-- Contenu chargé dynamiquement -->
-            </div>
-        `;
-        backupsList.appendChild(sauvegardeDiv);
-
-        // --- Event Listeners ---
-        const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
-        const headerDiv = sauvegardeDiv.querySelector('.item-header');
-
-        // Gestion de l'expansion/contraction du contenu au clic sur l'en-tête
-        headerDiv.addEventListener('click', (e) => {
-             // Basculer l'affichage du contenu actuel
-            const isExpanded = backupContentDiv.classList.contains('backup-content-expanded');
-
-            // Fermer tous les autres éléments ouverts
-            document.querySelectorAll('.backup-content-expanded').forEach(content => {
-                if (content !== backupContentDiv) {
-                    content.classList.remove('backup-content-expanded');
-                    content.innerHTML = ''; // Vider le contenu des autres
-                 }
-            });
-
-            if (!isExpanded) {
-                // Charger et afficher le contenu
-                backupContentDiv.innerHTML = marked.parse(sauvegarde.contenu);
-                backupContentDiv.classList.add('backup-content-expanded');
-                // Lancer MathJax seulement après que le contenu soit visible
-                setTimeout(() => {
-                    MathJax.typesetPromise([backupContentDiv]).catch(function (err) {
-                         console.error('MathJax typesetting error:', err);
-                    });
-                }, 50); // petit délai pour s'assurer que l'élément est rendu
-            } else {
-                 // Cacher le contenu
-                 backupContentDiv.classList.remove('backup-content-expanded');
-                 backupContentDiv.innerHTML = ''; // Vider le contenu quand on ferme
+        function afficherSauvegardes() {
+            const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+            sauvegardes.sort((a, b) => new Date(b.date) - new Date(a.date));
+            const backupsList = document.getElementById('backups-list');
+            backupsList.innerHTML = '';
+
+            if (sauvegardes.length === 0) {
+                backupsList.innerHTML = `
+                    <div class="bg-blue-50 rounded-lg p-8 text-center">
+                        <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-sm">
+                            <i class="fas fa-folder-open text-blue-300 text-2xl"></i>
+                        </div>
+                        <p class="text-gray-600">Aucune sauvegarde pour le moment.</p>
+                        <p class="text-sm text-gray-500 mt-2">Vos réponses générées apparaîtront ici.</p>
+                    </div>
+                `;
+                return;
             }
-        });
-
-        // Bouton de copie
-        const copyButton = sauvegardeDiv.querySelector('.copy-btn');
-        copyButton.addEventListener('click', (e) => {
-            e.stopPropagation(); // Empêche le clic de déclencher l'expansion
-            navigator.clipboard.writeText(sauvegarde.contenu).then(() => {
-                const icon = copyButton.querySelector('i');
-                icon.className = 'fas fa-check text-green-500'; // Icône de succès
-                setTimeout(() => {
-                    icon.className = 'fas fa-copy'; // Retour à l'icône normale
-                }, 2000);
-            }).catch(err => {
-                 console.error('Erreur de copie:', err);
-                 displayNotification("Erreur lors de la copie", "error");
-            });
-        });
 
-        // Bouton de suppression
-        const deleteButton = sauvegardeDiv.querySelector('.delete-btn');
-        deleteButton.addEventListener('click', (e) => {
-            e.stopPropagation(); // Empêche le clic de déclencher l'expansion
-             // Utiliser l'index stocké dans le dataset
-            const itemIndex = parseInt(sauvegardeDiv.dataset.index, 10);
-
-            // Chercher l'index réel dans le localStorage (car l'affichage est trié)
-            const storedSauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-            storedSauvegardes.sort((a, b) => new Date(b.date) - new Date(a.date)); // Appliquer le même tri
-            const itemToDelete = storedSauvegardes[itemIndex];
+            sauvegardes.forEach((sauvegarde, index) => {
+                const date = new Date(sauvegarde.date);
+                const formattedDate = date.toLocaleDateString('fr-FR', {
+                    day: 'numeric',
+                    month: 'short',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+                const displayTitle = sauvegarde.titre.length > 60 ? sauvegarde.titre.substring(0, 57) + '...' : sauvegarde.titre;
+
+                const sauvegardeDiv = document.createElement('div');
+                sauvegardeDiv.dataset.index = index;
+                sauvegardeDiv.className = 'bg-white rounded-lg shadow-md p-4 relative backup-item hover:bg-blue-50 transition-all duration-200';
+                sauvegardeDiv.innerHTML = `
+                    <div class="flex items-start cursor-pointer item-header">
+                        <div class="bg-blue-100 rounded-lg p-2 mr-3 flex-shrink-0">
+                            <i class="fas fa-file-alt text-blue-600"></i>
+                        </div>
+                        <div class="flex-grow overflow-hidden">
+                            <h3 class="text-lg font-semibold text-gray-800 truncate" title="${sauvegarde.titre}">${displayTitle}</h3>
+                            <p class="text-sm text-gray-600 mb-2 flex items-center">
+                                <i class="fas fa-clock text-xs mr-1 text-gray-400"></i>
+                                ${formattedDate}
+                            </p>
+                        </div>
+                        <div class="flex space-x-2 ml-2 flex-shrink-0">
+                            <button class="text-gray-400 hover:text-blue-600 focus:outline-none copy-btn p-1" title="Copier">
+                                <i class="fas fa-copy"></i>
+                            </button>
+                            <button class="text-gray-400 hover:text-red-600 focus:outline-none delete-btn p-1" title="Supprimer">
+                                <i class="fas fa-trash-alt"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="backup-content mt-4 text-sm text-gray-700 prose max-w-none border-t border-gray-100 pt-3">
+                        <!-- Contenu chargé dynamiquement -->
+                    </div>
+                `;
+                backupsList.appendChild(sauvegardeDiv);
 
-            // Retrouver l'index original dans le localStorage non trié
-            const originalSauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-            const originalIndex = originalSauvegardes.findIndex(s => s.date === itemToDelete.date && s.titre === itemToDelete.titre);
+                const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
+                const headerDiv = sauvegardeDiv.querySelector('.item-header');
 
+                headerDiv.addEventListener('click', (e) => {
+                    const isExpanded = backupContentDiv.classList.contains('backup-content-expanded');
+                    document.querySelectorAll('.backup-content-expanded').forEach(content => {
+                        if (content !== backupContentDiv) {
+                            content.classList.remove('backup-content-expanded');
+                            content.innerHTML = '';
+                         }
+                    });
+                    if (!isExpanded) {
+                        backupContentDiv.innerHTML = marked.parse(sauvegarde.contenu);
+                        backupContentDiv.classList.add('backup-content-expanded');
+                        setTimeout(() => {
+                            MathJax.typesetPromise([backupContentDiv]).catch(function (err) {
+                                 console.error('MathJax typesetting error:', err);
+                            });
+                        }, 50);
+                    } else {
+                         backupContentDiv.classList.remove('backup-content-expanded');
+                         backupContentDiv.innerHTML = '';
+                    }
+                });
 
-            if (originalIndex === -1) {
-                console.error("Impossible de trouver l'élément à supprimer dans le stockage original.");
-                displayNotification("Erreur lors de la suppression", "error");
-                return;
-            }
+                const copyButton = sauvegardeDiv.querySelector('.copy-btn');
+                copyButton.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    navigator.clipboard.writeText(sauvegarde.contenu).then(() => {
+                        const icon = copyButton.querySelector('i');
+                        icon.className = 'fas fa-check text-green-500';
+                        setTimeout(() => {
+                            icon.className = 'fas fa-copy';
+                        }, 2000);
+                    }).catch(err => {
+                         console.error('Erreur de copie:', err);
+                         displayNotification("Erreur lors de la copie", "error");
+                    });
+                });
 
+                const deleteButton = sauvegardeDiv.querySelector('.delete-btn');
+                deleteButton.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    const itemIndex = parseInt(sauvegardeDiv.dataset.index, 10);
+                    const storedSauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+                    storedSauvegardes.sort((a, b) => new Date(b.date) - new Date(a.date));
+                    const itemToDelete = storedSauvegardes[itemIndex];
+                    const originalSauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+                    const originalIndex = originalSauvegardes.findIndex(s => s.date === itemToDelete?.date && s.titre === itemToDelete?.titre); // Added safe navigation
+
+                    if (originalIndex === -1) {
+                        console.error("Impossible de trouver l'élément à supprimer dans le stockage original.");
+                        displayNotification("Erreur lors de la suppression", "error");
+                        return;
+                    }
 
-            // Afficher la modale de confirmation
-            const confirmationModal = document.createElement('div');
-            confirmationModal.className = 'fixed inset-0 flex items-center justify-center z-[100] bg-black bg-opacity-30 scale-in'; // z-index élevé
-            confirmationModal.innerHTML = `
-                <div class="bg-white rounded-lg p-6 max-w-sm mx-4 shadow-xl">
-                    <div class="flex items-center mb-4">
-                        <div class="bg-red-100 rounded-full p-2 mr-3">
-                            <i class="fas fa-exclamation-triangle text-red-500"></i>
+                    const confirmationModal = document.createElement('div');
+                    confirmationModal.className = 'fixed inset-0 flex items-center justify-center z-[100] bg-black bg-opacity-30 scale-in';
+                    confirmationModal.innerHTML = `
+                        <div class="bg-white rounded-lg p-6 max-w-sm mx-4 shadow-xl">
+                            <div class="flex items-center mb-4">
+                                <div class="bg-red-100 rounded-full p-2 mr-3">
+                                    <i class="fas fa-exclamation-triangle text-red-500"></i>
+                                </div>
+                                <h3 class="text-lg font-semibold text-gray-800">Confirmation</h3>
+                            </div>
+                            <p class="text-gray-600 mb-6 text-sm">Êtes-vous sûr de vouloir supprimer cette sauvegarde ?</p>
+                            <div class="flex justify-end space-x-3">
+                                <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 cancel-btn text-sm">Annuler</button>
+                                <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 confirm-btn text-sm">Supprimer</button>
+                            </div>
                         </div>
-                        <h3 class="text-lg font-semibold text-gray-800">Confirmation</h3>
-                    </div>
-                    <p class="text-gray-600 mb-6 text-sm">Êtes-vous sûr de vouloir supprimer cette sauvegarde ?</p>
-                    <div class="flex justify-end space-x-3">
-                        <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 cancel-btn text-sm">Annuler</button>
-                        <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 confirm-btn text-sm">Supprimer</button>
-                    </div>
-                </div>
-            `;
-            document.body.appendChild(confirmationModal);
+                    `;
+                    document.body.appendChild(confirmationModal);
 
-            confirmationModal.querySelector('.cancel-btn').addEventListener('click', () => {
-                closeModal(confirmationModal);
-            });
-
-            confirmationModal.querySelector('.confirm-btn').addEventListener('click', () => {
-                supprimerSauvegarde(originalIndex); // Utiliser l'index original pour supprimer
-                closeModal(confirmationModal);
+                    confirmationModal.querySelector('.cancel-btn').addEventListener('click', () => closeModal(confirmationModal));
+                    confirmationModal.querySelector('.confirm-btn').addEventListener('click', () => {
+                        supprimerSauvegarde(originalIndex);
+                        closeModal(confirmationModal);
+                    });
+                     confirmationModal.addEventListener('click', (event) => {
+                         if (event.target === confirmationModal) closeModal(confirmationModal);
+                     });
+                });
             });
+        }
 
-             // Fermer la modale en cliquant à l'extérieur
-             confirmationModal.addEventListener('click', (event) => {
-                 if (event.target === confirmationModal) {
-                     closeModal(confirmationModal);
-                 }
-             });
-        });
-    });
-}
-
-function closeModal(modalElement) {
-     modalElement.style.opacity = '0';
-     setTimeout(() => {
-          if (document.body.contains(modalElement)) {
-             document.body.removeChild(modalElement);
-          }
-     }, 300);
-}
+        function closeModal(modalElement) {
+             modalElement.style.opacity = '0';
+             modalElement.style.transition = 'opacity 0.3s ease';
+             setTimeout(() => {
+                  if (document.body.contains(modalElement)) {
+                     document.body.removeChild(modalElement);
+                  }
+             }, 300);
+        }
 
 
         async function submitFrancaisForm() {
             const form = document.getElementById('francais-form');
             const output = document.getElementById('francais-output');
-            const sujetTextarea = document.getElementById('sujet-francais'); // Récupérer le textarea
+            const sujetTextarea = document.getElementById('sujet-francais');
+            const deepThinkCheckbox = document.getElementById('deepthink-checkbox'); // MODIFICATION: Récupérer la checkbox
 
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
 
-                // MODIFICATION: Validation côté client
                 const sujetValue = sujetTextarea.value.trim();
                 if (!sujetValue) {
                     output.innerHTML = `
@@ -909,53 +974,56 @@ function closeModal(modalElement) {
                             <p>Veuillez entrer un sujet avant de générer.</p>
                         </div>
                     </div>`;
-                     sujetTextarea.focus(); // Met le focus sur le champ vide
-                     sujetTextarea.classList.add('border-red-500'); // Ajoute une bordure rouge
-                     setTimeout(() => sujetTextarea.classList.remove('border-red-500'), 3000); // Retire la bordure après 3s
-                    return; // Arrête l'exécution si le champ est vide
+                     sujetTextarea.focus();
+                     sujetTextarea.classList.add('border-red-500');
+                     setTimeout(() => sujetTextarea.classList.remove('border-red-500'), 3000);
+                    return;
                 }
 
-
                 output.innerHTML = `
                 <div class="flex flex-col items-center justify-center py-8">
                     <div class="loader mb-4">
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
+                        <div></div><div></div><div></div><div></div>
                     </div>
                     <p class="text-sm font-medium text-gray-600">Génération en cours...</p>
+                     ${deepThinkCheckbox.checked ? '<p class="text-xs text-blue-500 mt-1">Mode DeepThink activé</p>' : ''}
                 </div>`;
 
                 const formData = new FormData(form);
+                // MODIFICATION: Ajouter l'état de la checkbox aux données envoyées
+                formData.append('use_deepthink', deepThinkCheckbox.checked);
+
                 try {
                     const response = await fetch('/api/francais', {
                         method: 'POST',
                         body: formData
                     });
 
-                    const result = await response.json(); // Toujours lire la réponse
+                    const result = await response.json();
 
                     if (!response.ok) {
-                         // Afficher l'erreur renvoyée par le serveur si disponible
                          throw new Error(result.output || `Erreur HTTP ${response.status}`);
                     }
 
-
                     output.style.opacity = '0';
-                    setTimeout(() => {
-                        output.innerHTML = marked.parse(result.output);
+                    output.style.transition = ''; // Remove transition before changing content
+                    output.innerHTML = marked.parse(result.output);
+
+                    // Re-apply transition for fade-in
+                    requestAnimationFrame(() => {
+                        output.style.transition = 'opacity 0.3s ease-in-out';
                         output.style.opacity = '1';
-                        output.style.transition = 'opacity 0.3s ease-in-out'; // Transition douce
-
-                        // Utiliser le sujet comme titre, tronqué si nécessaire
-                         const titreSauvegarde = sujetValue.length > 100 ? sujetValue.substring(0, 97) + '...' : sujetValue;
-                        sauvegarderReponse(titreSauvegarde, result.output);
-                        // Lancer MathJax après l'insertion du contenu
-                         MathJax.typesetPromise([output]).catch(function (err) {
-                             console.error('MathJax typesetting error:', err);
-                        });
-                    }, 100); // Léger délai pour l'animation d'opacité
+                    });
+
+
+                    const titreSauvegarde = sujetValue.length > 100 ? sujetValue.substring(0, 97) + '...' : sujetValue;
+                     const deepThinkSuffix = deepThinkCheckbox.checked ? ' [DeepThink]' : ''; // Ajoute un suffixe au titre si DeepThink est utilisé
+                    sauvegarderReponse(titreSauvegarde + deepThinkSuffix, result.output);
+
+                    MathJax.typesetPromise([output]).catch(function (err) {
+                         console.error('MathJax typesetting error:', err);
+                    });
+
                 } catch (error) {
                      console.error("Erreur lors de la soumission:", error);
                      output.innerHTML = `
@@ -973,13 +1041,12 @@ function closeModal(modalElement) {
         async function submitEtudeTexteForm() {
             const form = document.getElementById('etude-texte-form');
             const output = document.getElementById('etude-texte-output');
-            const fileInput = document.getElementById('image-upload'); // Récupérer l'input file
+            const fileInput = document.getElementById('image-upload');
 
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
 
-                // Validation: Vérifier si au moins une image est sélectionnée
-                 if (fileInput.files.length === 0) {
+                 if (uploadedFiles.size === 0) { // Use the size of our managed Map
                      output.innerHTML = `
                     <div class="alert-message alert-warning">
                          <i class="fas fa-exclamation-triangle"></i>
@@ -988,68 +1055,52 @@ function closeModal(modalElement) {
                              <p>Veuillez ajouter au moins une image pour l'analyse.</p>
                          </div>
                      </div>`;
-                    return; // Arrête l'exécution
+                    return;
                 }
 
                 output.innerHTML = `
                 <div class="flex flex-col items-center justify-center py-8">
                     <div class="loader mb-4">
-                        <div></div>
-                        <div></div>
-                        <div></div>
-                        <div></div>
+                        <div></div><div></div><div></div><div></div>
                     </div>
                     <p class="text-sm font-medium text-gray-600">Analyse en cours...</p>
                     <p class="text-xs text-gray-400 mt-2">Cela peut prendre un moment</p>
                 </div>`;
 
                 const formData = new FormData();
-                 // Ajouter uniquement les fichiers valides de notre Map `uploadedFiles`
-                 if (uploadedFiles.size === 0) {
-                      // Double vérification (normalement impossible si fileInput.files > 0)
-                      output.innerHTML = `
-                        <div class="alert-message alert-warning">
-                            <i class="fas fa-exclamation-triangle"></i>
-                            <div>
-                                <p>Aucune image valide</p>
-                                <p>Veuillez vérifier les images sélectionnées.</p>
-                            </div>
-                        </div>`;
-                        return;
-                 }
                  uploadedFiles.forEach((file) => {
                      formData.append('images', file, file.name);
                  });
 
-
                 try {
                     const response = await fetch('/api/etude-texte', {
                         method: 'POST',
-                        body: formData // Utiliser notre formData construit
+                        body: formData
                     });
 
-                    const result = await response.json(); // Toujours lire la réponse
+                    const result = await response.json();
 
                     if (!response.ok) {
-                        // Afficher l'erreur renvoyée par le serveur si disponible
                         throw new Error(result.output || `Erreur HTTP ${response.status}`);
                     }
 
-
                     output.style.opacity = '0';
-                    setTimeout(() => {
-                        output.innerHTML = marked.parse(result.output);
+                    output.style.transition = ''; // Remove transition before changing content
+                    output.innerHTML = marked.parse(result.output);
+
+                     // Re-apply transition for fade-in
+                    requestAnimationFrame(() => {
+                        output.style.transition = 'opacity 0.3s ease-in-out';
                         output.style.opacity = '1';
-                        output.style.transition = 'opacity 0.3s ease-in-out'; // Transition douce
-
-                        // Titre par défaut pour les analyses d'images
-                        const titre = `Analyse d'image(s) - ${new Date().toLocaleDateString('fr-FR')}`;
-                        sauvegarderReponse(titre, result.output);
-                         // Lancer MathJax après l'insertion du contenu
-                         MathJax.typesetPromise([output]).catch(function (err) {
-                             console.error('MathJax typesetting error:', err);
-                        });
-                    }, 100); // Léger délai pour l'animation d'opacité
+                    });
+
+                    const titre = `Analyse d'image(s) - ${new Date().toLocaleDateString('fr-FR')}`;
+                    sauvegarderReponse(titre, result.output);
+
+                    MathJax.typesetPromise([output]).catch(function (err) {
+                         console.error('MathJax typesetting error:', err);
+                    });
+
                 } catch (error) {
                      console.error("Erreur lors de l'analyse:", error);
                      output.innerHTML = `
@@ -1067,29 +1118,27 @@ function closeModal(modalElement) {
         // Animation des cartes au défilement
         function animateOnScroll() {
             const cards = document.querySelectorAll('.card-hover');
-            // Si IntersectionObserver n'est pas supporté, on affiche directement
             if (!('IntersectionObserver' in window)) {
                  cards.forEach(card => card.style.opacity = '1');
                  return;
             }
-
             const observer = new IntersectionObserver((entries) => {
-                entries.forEach((entry) => { // Pas besoin d'index ici si le délai est fixe
+                entries.forEach((entry) => {
                     if (entry.isIntersecting) {
-                        entry.target.style.opacity = '1';
-                        entry.target.style.transform = 'translateY(0)';
-                        observer.unobserve(entry.target); // N'observer qu'une fois
+                        // Use requestAnimationFrame for smoother start
+                        requestAnimationFrame(() => {
+                            entry.target.style.opacity = '1';
+                            entry.target.style.transform = 'translateY(0)';
+                        });
+                        observer.unobserve(entry.target);
                     }
                 });
-            }, {
-                threshold: 0.1 // Déclenche quand 10% est visible
-            });
+            }, { threshold: 0.1 });
 
             cards.forEach(card => {
                 card.style.opacity = '0';
                 card.style.transform = 'translateY(30px)';
-                // Le style 'scale-in' gère déjà une animation, on ajuste le délai
-                // card.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
+                // Rely on the .scale-in animation defined in CSS for entrance
                 observer.observe(card);
             });
         }
@@ -1098,11 +1147,9 @@ function closeModal(modalElement) {
         function enhanceTextareaFocus() {
             const textarea = document.getElementById('sujet-francais');
             const counter = document.getElementById('character-count');
-
             textarea.addEventListener('input', () => {
                 const length = textarea.value.length;
                 counter.textContent = `${length} caractère${length !== 1 ? 's' : ''}`;
-                 // Enlève la bordure d'erreur si l'utilisateur commence à taper
                  textarea.classList.remove('border-red-500');
             });
         }
@@ -1112,43 +1159,33 @@ function closeModal(modalElement) {
              const radioGroups = document.querySelectorAll('input[type="radio"] + span');
              radioGroups.forEach(label => {
                 const input = label.previousElementSibling;
-                if (input.disabled) return; // Ne pas appliquer aux boutons désactivés
+                if (input.disabled) return;
 
                 label.addEventListener('mouseenter', () => {
                     if (!input.checked) {
-                        label.classList.add('border-blue-400', 'shadow-md', '-translate-y-0.5');
+                         // Use Tailwind classes for consistency
+                        label.classList.add('border-blue-400', 'shadow-md', 'transform' ,'-translate-y-0.5');
                     }
                 });
-
                 label.addEventListener('mouseleave', () => {
-                    // Retirer les styles de survol seulement si non coché
                      if (!input.checked) {
-                        label.classList.remove('border-blue-400', 'shadow-md', '-translate-y-0.5');
+                         label.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-0.5');
                      }
                 });
-
-                 // Assurer que les styles sont retirés si un autre bouton est coché
                  input.addEventListener('change', () => {
-                     // Retrouver tous les labels du même groupe
                      const groupName = input.name;
                      document.querySelectorAll(`input[name="${groupName}"] + span`).forEach(otherLabel => {
                          if (otherLabel !== label) {
-                             otherLabel.classList.remove('border-blue-400', 'shadow-md', '-translate-y-0.5');
-                             // Rétablir la bordure par défaut si besoin
-                             if (!otherLabel.previousElementSibling.checked) {
-                                 otherLabel.classList.remove('border-primary'); // Si jamais elle était là
-                             }
+                             otherLabel.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-0.5', 'border-primary'); // Ensure clean state
                          } else {
-                            // Appliquer les styles du bouton coché (gérés par :checked + span)
-                            // et retirer les styles de hover qui pourraient rester
-                             label.classList.remove('shadow-md', '-translate-y-0.5');
+                             label.classList.remove('shadow-md', 'transform', '-translate-y-0.5'); // Remove hover effects if checked
                          }
                      });
                  });
             });
         }
 
-        // Initialisation avec tous les effets
+        // Initialisation
         document.addEventListener('DOMContentLoaded', () => {
             initializeFileUpload();
             submitFrancaisForm();
@@ -1156,76 +1193,38 @@ function closeModal(modalElement) {
             animateOnScroll();
             enhanceTextareaFocus();
             enhanceRadioButtons();
-            afficherSauvegardes(); // Afficher les sauvegardes au chargement
+            afficherSauvegardes();
 
-            // Configuration MathJax (peut être mis dans <head> aussi)
+            // MathJax Config
             window.MathJax = {
-                 tex: {
-                     inlineMath: [['$', '$'], ['\\(', '\\)']],
-                     displayMath: [['$$', '$$'], ['\\[', '\\]']]
-                 },
-                 svg: {
-                     fontCache: 'global'
-                 },
-                 options: {
-                     skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
-                     ignoreHtmlClass: 'tex2jax_ignore',
-                     processHtmlClass: 'tex2jax_process'
-                 }
+                 tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$', '$$'], ['\\[', '\\]']] },
+                 svg: { fontCache: 'global' },
+                 options: { skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' }
             };
 
-
-            // Message de bienvenue (optionnel)
+            // Welcome Message
             const showWelcome = sessionStorage.getItem('welcomeShown') !== 'true';
             if (showWelcome) {
                  const welcomeMessageContainer = document.createElement('div');
                  welcomeMessageContainer.innerHTML = `
                     <div class="fixed bottom-6 right-6 bg-white rounded-xl shadow-lg p-5 transform transition-all duration-500 opacity-0 translate-y-4 max-w-xs z-[100]">
                         <div class="flex items-start space-x-4">
-                            <div class="bg-gradient-to-r from-blue-500 to-blue-700 rounded-full p-3 mt-1 flex-shrink-0">
-                                <i class="fas fa-robot text-white text-xl"></i>
-                            </div>
-                            <div>
-                                <p class="text-sm font-semibold text-gray-800">Bienvenue sur Mariam AI !</p>
-                                <p class="text-xs text-gray-500 mt-1">Votre assistant est prêt. Posez un sujet ou analysez un texte.</p>
-                            </div>
+                            <div class="bg-gradient-to-r from-blue-500 to-blue-700 rounded-full p-3 mt-1 flex-shrink-0"> <i class="fas fa-robot text-white text-xl"></i> </div>
+                            <div> <p class="text-sm font-semibold text-gray-800">Bienvenue sur Mariam AI !</p> <p class="text-xs text-gray-500 mt-1">Votre assistant est prêt. Posez un sujet ou analysez un texte.</p> </div>
                         </div>
-                        <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 focus:outline-none close-welcome p-1">
-                            <i class="fas fa-times text-xs"></i>
-                        </button>
-                    </div>
-                `;
+                        <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 focus:outline-none close-welcome p-1"> <i class="fas fa-times text-xs"></i> </button>
+                    </div>`;
                  document.body.appendChild(welcomeMessageContainer);
                  const welcomeMessage = welcomeMessageContainer.firstElementChild;
-
-                setTimeout(() => {
-                    welcomeMessage.classList.remove('opacity-0', 'translate-y-4');
-                 }, 500); // Délai avant apparition
-
-                const closeWelcomeButton = welcomeMessage.querySelector('.close-welcome');
-                 closeWelcomeButton.addEventListener('click', () => {
-                    closeWelcomeMessage(welcomeMessage);
-                 });
-
-                // Fermer automatiquement après un certain temps
-                 setTimeout(() => {
-                    if (document.body.contains(welcomeMessage)) {
-                         closeWelcomeMessage(welcomeMessage);
-                    }
-                }, 7000); // 7 secondes
-
-                 sessionStorage.setItem('welcomeShown', 'true'); // Marquer comme vu pour cette session
+                setTimeout(() => { welcomeMessage.classList.remove('opacity-0', 'translate-y-4'); }, 500);
+                welcomeMessage.querySelector('.close-welcome').addEventListener('click', () => closeWelcomeMessage(welcomeMessage));
+                setTimeout(() => { if (document.body.contains(welcomeMessage)) closeWelcomeMessage(welcomeMessage); }, 7000);
+                 sessionStorage.setItem('welcomeShown', 'true');
              }
-
              function closeWelcomeMessage(element) {
                  element.classList.add('opacity-0', 'translate-y-4');
-                 setTimeout(() => {
-                      if (element.parentElement) {
-                         element.parentElement.remove();
-                      }
-                 }, 500); // Attend la fin de la transition
+                 setTimeout(() => { if (element.parentElement) element.parentElement.remove(); }, 500);
              }
-
         });
     </script>
 </body>