Update templates/index.html

templates/index.html

@@ -371,6 +371,7 @@
             position: relative;
             top: 1px;
             transition: all 0.2s ease-in-out;
+            cursor: pointer; /* Add cursor pointer */
         }
         .deepthink-label input[type="checkbox"]:checked {
             background-color: var(--primary);
@@ -387,12 +388,25 @@
             left: 50%;
             transform: translate(-50%, -50%);
         }
-        .deepthink-label:hover input[type="checkbox"] {
+        .deepthink-label input[type="checkbox"]:disabled {
+            background-color: #e2e8f0; /* gray-200 */
+            border-color: #cbd5e0; /* gray-300 */
+            cursor: not-allowed;
+        }
+         .deepthink-label input[type="checkbox"]:disabled + span { /* Style text when disabled */
+             color: #a0aec0; /* gray-400 */
+         }
+        .deepthink-label input[type="checkbox"]:disabled:checked::after {
+             color: #a0aec0; /* gray-400 */
+        }
+
+        .deepthink-label:hover input[type="checkbox"]:not(:disabled) {
              border-color: var(--primary-dark);
         }
         .deepthink-tooltip {
             position: relative;
-            display: inline-block;
+            display: inline-flex; /* Use inline-flex for alignment */
+            align-items: center; /* Align icon vertically */
             margin-left: 6px;
         }
         .deepthink-tooltip .tooltip-text {
@@ -412,6 +426,7 @@
             transition: opacity 0.3s;
             font-size: 0.75rem; /* text-xs */
             line-height: 1.4;
+            pointer-events: none; /* Prevent tooltip from interfering */
         }
         .deepthink-tooltip .tooltip-text::after {
             content: "";
@@ -427,6 +442,11 @@
             visibility: visible;
             opacity: 1;
         }
+        /* MODIFICATION: Style pour le statut DeepThink */
+        #deepthink-status {
+            font-style: italic;
+            margin-left: 0.5rem; /* ml-2 */
+        }
 
     </style>
 </head>
@@ -533,20 +553,20 @@
                             </div>
                         </div>
 
-                        <!-- MODIFICATION: Ajout de la checkbox DeepThink -->
+                        <!-- MODIFICATION: Ajout span pour statut -->
                         <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
+                               <input type="checkbox" id="deepthink-checkbox" name="use_deepthink_visual">
+                               <span>Utiliser DeepThink</span>  <!-- Mettre le texte dans un span pour le style :disabled -->
                                <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>
+                                   <span class="tooltip-text">Utilise un modèle plus avancé (Gemini Pro) pour une meilleure qualité, mais peut être plus lent. Limité à 1 utilisation par jour.</span>
                                </div>
                            </label>
+                            <span id="deepthink-status" class="text-xs text-gray-500"></span> <!-- Indicateur de statut -->
                         </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">
@@ -639,9 +659,12 @@
     </footer>
 
     <script>
-        // Gestionnaire global pour les fichiers ajoutés (évite les doublons)
-        const uploadedFiles = new Map();
+        // --- Constantes ---
+        const DEEPTHINK_STORAGE_KEY = 'deepThinkLastUsedDate'; // Clé localStorage
 
+        // --- Gestionnaire de fichiers ---
+        const uploadedFiles = new Map();
+        // ... (initializeFileUpload, highlightDropZone, unhighlightDropZone, handleFiles, renderPreview, removeFile restent identiques) ...
         function initializeFileUpload() {
             const dropZone = document.getElementById('drop-zone');
             const fileInput = document.getElementById('image-upload');
@@ -666,7 +689,6 @@
             fileInput.addEventListener('change', () => {
                 const files = fileInput.files;
                 handleFiles(files);
-                // Réinitialiser l'input pour permettre de re-sélectionner le même fichier
                 fileInput.value = '';
             });
 
@@ -681,25 +703,19 @@
             }
 
             function handleFiles(files) {
-                const currentFiles = fileInput.files; // Nécéssaire pour DataTransferItemList
+                const currentFiles = fileInput.files;
                 const dataTransfer = new DataTransfer();
-
-                // Ajouter les fichiers déjà présents dans uploadedFiles
                  uploadedFiles.forEach(file => dataTransfer.items.add(file));
-
                 for (let i = 0; i < files.length; i++) {
                     const file = files[i];
                     if (!file.type.startsWith('image/')) continue;
-
-                    // Eviter les doublons basés sur le nom et la taille
                     const fileId = `${file.name}-${file.size}`;
                     if (uploadedFiles.has(fileId)) continue;
-
                     uploadedFiles.set(fileId, file);
-                    dataTransfer.items.add(file); // Ajouter le nouveau fichier à DataTransfer
+                    dataTransfer.items.add(file);
                     renderPreview(file, fileId);
                 }
-                 fileInput.files = dataTransfer.files; // Mettre à jour l'input file
+                 fileInput.files = dataTransfer.files;
             }
 
             function renderPreview(file, fileId) {
@@ -707,14 +723,12 @@
                     reader.onload = (e) => {
                         const previewItem = document.createElement('div');
                         previewItem.classList.add('image-preview-item', 'scale-in');
-                        previewItem.dataset.fileId = fileId; // Stocker l'ID unique
+                        previewItem.dataset.fileId = fileId;
                         previewItem.innerHTML = `
                             <img src="${e.target.result}" alt="${file.name}">
                             <button class="remove-image" title="Supprimer"><i class="fas fa-times"></i></button>
                         `;
                         imagePreview.appendChild(previewItem);
-
-                        // Remove image event
                         previewItem.querySelector('.remove-image').addEventListener('click', () => {
                             removeFile(fileId, previewItem);
                          });
@@ -723,14 +737,10 @@
             }
 
             function removeFile(fileId, previewElement) {
-                 uploadedFiles.delete(fileId); // Retirer du Map
-
-                 // Mettre à jour l'input file
+                 uploadedFiles.delete(fileId);
                  const dataTransfer = new DataTransfer();
                  uploadedFiles.forEach(file => dataTransfer.items.add(file));
                  fileInput.files = dataTransfer.files;
-
-                 // Retirer l'aperçu de l'UI
                  previewElement.style.opacity = '0';
                  previewElement.style.transform = 'scale(0.9)';
                  setTimeout(() => {
@@ -741,7 +751,10 @@
             }
         }
 
-        function sauvegarderReponse(titre, contenu) {
+
+        // --- Gestion des sauvegardes ---
+        // ... (sauvegarderReponse, displayNotification, supprimerSauvegarde, afficherSauvegardes, closeModal restent identiques) ...
+         function sauvegarderReponse(titre, contenu) {
             const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
             const dateSauvegarde = new Date().toISOString();
             const MAX_SAUVEGARDES = 20;
@@ -818,13 +831,7 @@
 
             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 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');
@@ -832,29 +839,17 @@
                 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="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>
+                            <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>
+                            <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>
-                `;
+                    <div class="backup-content mt-4 text-sm text-gray-700 prose max-w-none border-t border-gray-100 pt-3"></div>`;
                 backupsList.appendChild(sauvegardeDiv);
 
                 const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
@@ -864,21 +859,15 @@
                     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 = '';
+                            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);
+                        setTimeout(() => { MathJax.typesetPromise([backupContentDiv]).catch(err => console.error('MathJax error:', err)); }, 50);
                     } else {
-                         backupContentDiv.classList.remove('backup-content-expanded');
-                         backupContentDiv.innerHTML = '';
+                         backupContentDiv.classList.remove('backup-content-expanded'); backupContentDiv.innerHTML = '';
                     }
                 });
 
@@ -886,15 +875,8 @@
                 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 icon = copyButton.querySelector('i'); icon.className = 'fas fa-check text-green-500'; setTimeout(() => { icon.className = 'fas fa-copy'; }, 2000);
+                    }).catch(err => { console.error('Copy error:', err); displayNotification("Erreur copie", "error"); });
                 });
 
                 const deleteButton = sauvegardeDiv.querySelector('.delete-btn');
@@ -905,41 +887,22 @@
                     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
+                    const originalIndex = originalSauvegardes.findIndex(s => s.date === itemToDelete?.date && s.titre === itemToDelete?.titre);
 
-                    if (originalIndex === -1) {
-                        console.error("Impossible de trouver l'élément à supprimer dans le stockage original.");
-                        displayNotification("Erreur lors de la suppression", "error");
-                        return;
-                    }
+                    if (originalIndex === -1) { console.error("Item not found for deletion."); displayNotification("Erreur suppression", "error"); return; }
 
                     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>
-                    `;
+                            <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">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);
-
                     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);
-                     });
+                    confirmationModal.querySelector('.confirm-btn').addEventListener('click', () => { supprimerSauvegarde(originalIndex); closeModal(confirmationModal); });
+                     confirmationModal.addEventListener('click', (event) => { if (event.target === confirmationModal) closeModal(confirmationModal); });
                 });
             });
         }
@@ -947,93 +910,113 @@
         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);
+             setTimeout(() => { if (document.body.contains(modalElement)) document.body.removeChild(modalElement); }, 300);
+        }
+
+
+        // --- Gestion DeepThink ---
+        /**
+         * Vérifie si DeepThink a déjà été utilisé aujourd'hui et met à jour l'UI.
+         */
+        function checkDeepThinkAvailability() {
+            const checkbox = document.getElementById('deepthink-checkbox');
+            const statusSpan = document.getElementById('deepthink-status');
+            if (!checkbox || !statusSpan) return; // Safety check
+
+            const lastUsedDateStr = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
+            const todayStr = new Date().toISOString().split('T')[0]; // YYYY-MM-DD format
+
+            if (lastUsedDateStr === todayStr) {
+                checkbox.checked = false; // Ensure it's unchecked if disabled
+                checkbox.disabled = true;
+                statusSpan.textContent = "(déjà utilisé aujourd'hui)";
+                statusSpan.classList.add('text-red-500'); // Make status noticeable
+            } else {
+                checkbox.disabled = false;
+                statusSpan.textContent = ""; // Clear status
+                 statusSpan.classList.remove('text-red-500');
+            }
         }
 
-
+        // --- Soumission des formulaires ---
         async function submitFrancaisForm() {
             const form = document.getElementById('francais-form');
             const output = document.getElementById('francais-output');
             const sujetTextarea = document.getElementById('sujet-francais');
-            const deepThinkCheckbox = document.getElementById('deepthink-checkbox'); // MODIFICATION: Récupérer la checkbox
+            const deepThinkCheckbox = document.getElementById('deepthink-checkbox');
 
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
 
                 const sujetValue = sujetTextarea.value.trim();
+                const isDeepThinkChecked = deepThinkCheckbox.checked; // Store initial checked state
+
+                // --- Validation avant envoi ---
                 if (!sujetValue) {
-                    output.innerHTML = `
-                    <div class="alert-message alert-warning">
-                        <i class="fas fa-exclamation-triangle"></i>
-                        <div>
-                            <p>Champ obligatoire</p>
-                            <p>Veuillez entrer un sujet avant de générer.</p>
-                        </div>
-                    </div>`;
-                     sujetTextarea.focus();
-                     sujetTextarea.classList.add('border-red-500');
-                     setTimeout(() => sujetTextarea.classList.remove('border-red-500'), 3000);
+                    output.innerHTML = `<div class="alert-message alert-warning"><i class="fas fa-exclamation-triangle"></i><div><p>Champ obligatoire</p><p>Veuillez entrer un sujet.</p></div></div>`;
+                    sujetTextarea.focus();
+                    sujetTextarea.classList.add('border-red-500');
+                    setTimeout(() => sujetTextarea.classList.remove('border-red-500'), 3000);
                     return;
                 }
 
+                // MODIFICATION: Vérifier la limite DeepThink avant l'envoi si coché
+                if (isDeepThinkChecked) {
+                    const lastUsedDateStr = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
+                    const todayStr = new Date().toISOString().split('T')[0];
+                    if (lastUsedDateStr === todayStr) {
+                         output.innerHTML = `<div class="alert-message alert-warning"><i class="fas fa-exclamation-triangle"></i><div><p>Limite atteinte</p><p>Vous avez déjà utilisé DeepThink aujourd'hui.</p></div></div>`;
+                         checkDeepThinkAvailability(); // Re-disable checkbox just in case
+                         return; // Stop submission
+                    }
+                }
+                // --- Fin Validation ---
+
+
+                // --- Affichage chargement ---
                 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 class="loader mb-4"><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>' : ''}
+                     ${isDeepThinkChecked ? '<p class="text-xs text-blue-500 mt-1">Mode DeepThink activé</p>' : ''}
                 </div>`;
 
+                // --- Préparation et Envoi ---
                 const formData = new FormData(form);
-                // MODIFICATION: Ajouter l'état de la checkbox aux données envoyées
-                formData.append('use_deepthink', deepThinkCheckbox.checked);
+                formData.append('use_deepthink', isDeepThinkChecked); // Use stored checked state
 
                 try {
-                    const response = await fetch('/api/francais', {
-                        method: 'POST',
-                        body: formData
-                    });
-
+                    const response = await fetch('/api/francais', { method: 'POST', body: formData });
                     const result = await response.json();
 
-                    if (!response.ok) {
-                         throw new Error(result.output || `Erreur HTTP ${response.status}`);
-                    }
+                    if (!response.ok) throw new Error(result.output || `Erreur HTTP ${response.status}`);
 
+                    // --- Affichage Succès ---
                     output.style.opacity = '0';
-                    output.style.transition = ''; // Remove transition before changing content
+                    output.style.transition = '';
                     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';
                     });
 
-
+                    // --- Sauvegarde & Mise à jour Limite DeepThink ---
                     const titreSauvegarde = sujetValue.length > 100 ? sujetValue.substring(0, 97) + '...' : sujetValue;
-                     const deepThinkSuffix = deepThinkCheckbox.checked ? ' [DeepThink]' : ''; // Ajoute un suffixe au titre si DeepThink est utilisé
+                    const deepThinkSuffix = isDeepThinkChecked ? ' [DeepThink]' : '';
                     sauvegarderReponse(titreSauvegarde + deepThinkSuffix, result.output);
 
-                    MathJax.typesetPromise([output]).catch(function (err) {
-                         console.error('MathJax typesetting error:', err);
-                    });
+                    // MODIFICATION: Si DeepThink a été utilisé avec succès, enregistrer la date et mettre à jour l'UI
+                    if (isDeepThinkChecked) {
+                        const todayStr = new Date().toISOString().split('T')[0];
+                        localStorage.setItem(DEEPTHINK_STORAGE_KEY, todayStr);
+                        checkDeepThinkAvailability(); // Met à jour l'état de la checkbox et le message
+                    }
 
-                } catch (error) {
-                     console.error("Erreur lors de la soumission:", error);
-                     output.innerHTML = `
-                    <div class="alert-message alert-danger">
-                        <i class="fas fa-exclamation-circle"></i>
-                        <div>
-                            <p>Une erreur est survenue</p>
-                            <p>${error.message || "Veuillez réessayer ou vérifier votre connexion."}</p>
-                        </div>
-                    </div>`;
+                    MathJax.typesetPromise([output]).catch(err => console.error('MathJax error:', err));
+
+                } catch (error) { // --- Gestion Erreur ---
+                     console.error("Erreur soumission (français):", error);
+                     output.innerHTML = `<div class="alert-message alert-danger"><i class="fas fa-exclamation-circle"></i><div><p>Erreur</p><p>${error.message || "Vérifiez la console pour détails."}</p></div></div>`;
                 }
             });
         }
@@ -1045,147 +1028,76 @@
 
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
-
-                 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>
-                         <div>
-                             <p>Aucune image</p>
-                             <p>Veuillez ajouter au moins une image pour l'analyse.</p>
-                         </div>
-                     </div>`;
+                 if (uploadedFiles.size === 0) {
+                     output.innerHTML = `<div class="alert-message alert-warning"><i class="fas fa-exclamation-triangle"></i><div><p>Aucune image</p><p>Ajoutez au moins une image.</p></div></div>`;
                     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 class="loader mb-4"><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();
-                 uploadedFiles.forEach((file) => {
-                     formData.append('images', file, file.name);
-                 });
-
+                 uploadedFiles.forEach((file) => formData.append('images', file, file.name));
                 try {
-                    const response = await fetch('/api/etude-texte', {
-                        method: 'POST',
-                        body: formData
-                    });
-
+                    const response = await fetch('/api/etude-texte', { method: 'POST', body: formData });
                     const result = await response.json();
-
-                    if (!response.ok) {
-                        throw new Error(result.output || `Erreur HTTP ${response.status}`);
-                    }
-
+                    if (!response.ok) throw new Error(result.output || `Erreur HTTP ${response.status}`);
                     output.style.opacity = '0';
-                    output.style.transition = ''; // Remove transition before changing content
+                    output.style.transition = '';
                     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';
-                    });
-
-                    const titre = `Analyse d'image(s) - ${new Date().toLocaleDateString('fr-FR')}`;
+                    requestAnimationFrame(() => { output.style.transition = 'opacity 0.3s ease-in-out'; output.style.opacity = '1'; });
+                    const titre = `Analyse image(s) - ${new Date().toLocaleDateString('fr-FR')}`;
                     sauvegarderReponse(titre, result.output);
-
-                    MathJax.typesetPromise([output]).catch(function (err) {
-                         console.error('MathJax typesetting error:', err);
-                    });
-
+                    MathJax.typesetPromise([output]).catch(err => console.error('MathJax error:', err));
                 } catch (error) {
-                     console.error("Erreur lors de l'analyse:", error);
-                     output.innerHTML = `
-                    <div class="alert-message alert-danger">
-                        <i class="fas fa-exclamation-circle"></i>
-                        <div>
-                            <p>Une erreur est survenue</p>
-                             <p>${error.message || "Veuillez réessayer ou vérifier votre connexion."}</p>
-                         </div>
-                    </div>`;
+                     console.error("Erreur soumission (étude texte):", error);
+                     output.innerHTML = `<div class="alert-message alert-danger"><i class="fas fa-exclamation-circle"></i><div><p>Erreur</p><p>${error.message || "Vérifiez la console pour détails."}</p></div></div>`;
                 }
             });
         }
 
-        // Animation des cartes au défilement
-        function animateOnScroll() {
+        // --- Animations & Améliorations UI ---
+        // ... (animateOnScroll, enhanceTextareaFocus, enhanceRadioButtons restent identiques) ...
+         function animateOnScroll() {
             const cards = document.querySelectorAll('.card-hover');
-            if (!('IntersectionObserver' in window)) {
-                 cards.forEach(card => card.style.opacity = '1');
-                 return;
-            }
+            if (!('IntersectionObserver' in window)) { cards.forEach(card => card.style.opacity = '1'); return; }
             const observer = new IntersectionObserver((entries) => {
                 entries.forEach((entry) => {
                     if (entry.isIntersecting) {
-                        // Use requestAnimationFrame for smoother start
-                        requestAnimationFrame(() => {
-                            entry.target.style.opacity = '1';
-                            entry.target.style.transform = 'translateY(0)';
-                        });
+                        requestAnimationFrame(() => { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; });
                         observer.unobserve(entry.target);
                     }
                 });
             }, { threshold: 0.1 });
-
-            cards.forEach(card => {
-                card.style.opacity = '0';
-                card.style.transform = 'translateY(30px)';
-                // Rely on the .scale-in animation defined in CSS for entrance
-                observer.observe(card);
-            });
+            cards.forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(30px)'; observer.observe(card); });
         }
-
-        // Effet de focus amélioré pour les zones de texte et compteur de caractères
         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' : ''}`;
-                 textarea.classList.remove('border-red-500');
+                const length = textarea.value.length; counter.textContent = `${length} caractère${length !== 1 ? 's' : ''}`; textarea.classList.remove('border-red-500');
             });
         }
-
-        // Effet de hover pour les boutons radio
         function enhanceRadioButtons() {
              const radioGroups = document.querySelectorAll('input[type="radio"] + span');
              radioGroups.forEach(label => {
-                const input = label.previousElementSibling;
-                if (input.disabled) return;
-
-                label.addEventListener('mouseenter', () => {
-                    if (!input.checked) {
-                         // Use Tailwind classes for consistency
-                        label.classList.add('border-blue-400', 'shadow-md', 'transform' ,'-translate-y-0.5');
-                    }
-                });
-                label.addEventListener('mouseleave', () => {
-                     if (!input.checked) {
-                         label.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-0.5');
-                     }
-                });
+                const input = label.previousElementSibling; if (input.disabled) return;
+                label.addEventListener('mouseenter', () => { if (!input.checked) label.classList.add('border-blue-400', 'shadow-md', 'transform' ,'-translate-y-0.5'); });
+                label.addEventListener('mouseleave', () => { if (!input.checked) label.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-0.5'); });
                  input.addEventListener('change', () => {
                      const groupName = input.name;
                      document.querySelectorAll(`input[name="${groupName}"] + span`).forEach(otherLabel => {
-                         if (otherLabel !== label) {
-                             otherLabel.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-0.5', 'border-primary'); // Ensure clean state
-                         } else {
-                             label.classList.remove('shadow-md', 'transform', '-translate-y-0.5'); // Remove hover effects if checked
-                         }
+                         if (otherLabel !== label) otherLabel.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-0.5', 'border-primary');
+                         else label.classList.remove('shadow-md', 'transform', '-translate-y-0.5');
                      });
                  });
             });
         }
 
-        // Initialisation
+
+        // --- Initialisation Générale ---
         document.addEventListener('DOMContentLoaded', () => {
             initializeFileUpload();
             submitFrancaisForm();
@@ -1193,27 +1105,17 @@
             animateOnScroll();
             enhanceTextareaFocus();
             enhanceRadioButtons();
+            checkDeepThinkAvailability(); // MODIFICATION: Vérifier la limite au chargement
             afficherSauvegardes();
 
             // MathJax Config
-            window.MathJax = {
-                 tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$', '$$'], ['\\[', '\\]']] },
-                 svg: { fontCache: 'global' },
-                 options: { skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' }
-            };
+            window.MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$', '$$'], ['\\[', '\\]']] }, svg: { fontCache: 'global' }, options: { skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' } };
 
-            // Welcome Message
+            // Welcome Message (session based)
             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>
-                        <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>`;
+                 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">Assistant 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>`;
                  document.body.appendChild(welcomeMessageContainer);
                  const welcomeMessage = welcomeMessageContainer.firstElementChild;
                 setTimeout(() => { welcomeMessage.classList.remove('opacity-0', 'translate-y-4'); }, 500);