Update templates/maj.html

templates/maj.html

@@ -14,9 +14,7 @@
         inlineMath: [['$', '$']],
         displayMath: [['$$', '$$']],
         processEscapes: true,
-        // packages: {'[+]': ['autoload','ams']} // Ancienne config
-        // CORRECTION: Ajout de 'textmacros' pour mieux supporter \textbf et autres commandes textuelles DANS les maths.
-        packages: {'[+]': ['autoload','ams', 'textmacros']}
+        packages: {'[+]': ['autoload','ams', 'textmacros']} // 'textmacros' ajouté
       },
       options: {
         enableMenu: false,
@@ -58,6 +56,7 @@
       background: #2563eb;
     }
 
+    /* Style du loader */
     .loader {
       width: 48px;
       height: 48px;
@@ -72,87 +71,110 @@
       100% { transform: rotate(360deg); }
     }
 
+    /* Style de la boîte de réflexion */
     .thought-box {
       transition: max-height 0.3s ease-out;
       max-height: 0;
       overflow: hidden;
     }
     .thought-box.open {
-      max-height: 500px; /* Ajusté si nécessaire */
+      max-height: 500px; /* Ou une valeur suffisante */
     }
 
+    /* Style des conteneurs de contenu */
     #thoughtsContent, #answerContent {
       max-height: 500px;
       overflow-y: auto;
       scroll-behavior: smooth;
-      /* white-space: pre-wrap; */ /* Peut interférer avec le rendu HTML/Markdown/MathJax, désactivé pour être sûr */
       word-wrap: break-word; /* Assure le retour à la ligne */
     }
-     /* Style pour le contenu LaTeX brut (avant rendu MathJax), utile pour déboguer */
-    #answerContent mjx-container { 
-        margin-top: 0.5em;
-        margin-bottom: 0.5em;
+     /* Espacement pour les équations MathJax */
+    #answerContent mjx-container {
+        display: block; /* Assure que chaque équation display est sur sa ligne */
+        margin-top: 0.8em;
+        margin-bottom: 0.8em;
     }
 
-
+    /* Style de l'aperçu image */
     .preview-image {
       max-width: 300px;
       max-height: 300px;
       object-fit: contain;
     }
 
+    /* Style du timestamp */
     .timestamp {
       color: #3b82f6;
       font-size: 0.9em;
       margin-left: 8px;
     }
 
-    /* Styles pour les tables (si générées par Markdown ou MathJax) */
+    /* Styles pour les tables */
     table {
       border-collapse: collapse;
       width: 100%;
+      margin-top: 1rem; /* Ajout espace avant table */
       margin-bottom: 1rem;
       border: 1px solid #d1d5db;
     }
     th, td {
       border: 1px solid #d1d5db;
-      padding: 0.5rem;
+      padding: 0.5rem 0.75rem; /* Ajustement padding */
       text-align: left;
     }
     th {
       background-color: #f3f4f6;
       font-weight: 600;
     }
+    /* Conteneur pour tables responsives */
     .table-responsive {
       overflow-x: auto;
+      -webkit-overflow-scrolling: touch; /* Pour un défilement plus fluide sur iOS */
     }
 
+     /* Avertissement performance */
     .performance-warning {
-        color: red;
+        color: #dc2626; /* Rouge plus standard */
         font-weight: bold;
-        font-size: 1.2em;
+        /* font-size: 1.2em; */ /* Taille peut être gérée par Tailwind si appliqué ailleurs */
         margin-top: 10px;
         margin-bottom: 25px;
         text-align: center;
+        padding: 0.5rem;
+        background-color: #fee2e2; /* Fond rouge léger */
+        border: 1px solid #fecaca; /* Bordure rouge léger */
+        border-radius: 0.375rem; /* rounded-md */
     }
+
+    /* Styles pour la classe 'prose' si Tailwind Typography n'est pas chargé */
+    /* Vous pouvez étendre cela si nécessaire */
+    .prose p { margin-bottom: 1em; }
+    .prose h1, .prose h2, .prose h3 { margin-bottom: 0.8em; margin-top: 1.5em; font-weight: 600; }
+    .prose ul, .prose ol { margin-left: 1.5em; margin-bottom: 1em; }
+    .prose li > p { margin-bottom: 0.5em; } /* Espace dans les listes */
+    .prose code { background-color: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
+    .prose pre { background-color: #f3f4f6; padding: 1em; border-radius: 0.375rem; overflow-x: auto; }
+    .prose pre code { background-color: transparent; padding: 0; border-radius: 0; }
+    .prose blockquote { border-left: 4px solid #d1d5db; padding-left: 1em; margin-left: 0; font-style: italic; color: #4b5563; }
+
   </style>
 </head>
-<body class="p-4 bg-gray-50"> {/* Ajout d'un fond léger */}
-  <div class="max-w-4xl mx-auto bg-white p-6 rounded-lg shadow-md"> {/* Ajout d'une carte pour le contenu */}
-    <header class="p-6 text-center mb-8 border-b"> {/* Ajout bordure */}
-      <h1 class="text-4xl font-bold text-blue-600">Mariam - M-0</h1>
-      <p class="text-gray-600 mt-2">Solution Mathématique/Physique/Chimie Intelligente</p> {/* Ajout mt-2 */}
-       <p class="performance-warning">
+<body class="p-4 bg-gray-100"> {/* Fond légèrement différent */}
+  <div class="max-w-4xl mx-auto bg-white p-6 md:p-8 rounded-lg shadow-lg"> {/* Ombre plus prononcée, padding adaptatif */}
+    <header class="pb-6 text-center mb-8 border-b border-gray-200"> {/* Bordure plus légère */}
+      <h1 class="text-3xl md:text-4xl font-bold text-blue-600">Mariam - M-0</h1>
+      <p class="text-gray-600 mt-2">Solution Mathématique/Physique/Chimie Intelligente</p>
+       <div class="performance-warning mt-4 text-sm md:text-base"> {/* Utilisation de la classe stylée */}
         Vous utilisez actuellement les modèles/performances moyens. Accédez à des performances supérieures avec un abonnement premium !
-      </p>
+      </div>
     </header>
 
     <main>
       <form id="problemForm" class="space-y-6" novalidate>
-        <div class="uploadArea p-8 text-center relative rounded-md" aria-label="Zone de dépôt d'image"> {/* Ajout rounded-md */}
+        <div class="uploadArea p-6 md:p-8 text-center relative rounded-md cursor-pointer" aria-label="Zone de dépôt d'image">
           <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image">
-          <div class="space-y-3">
-            <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
+          <div class="space-y-3 flex flex-col items-center justify-center"> {/* Centrage vertical */}
+            <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center mb-3"> {/* Ajout mb */}
               <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
               </svg>
@@ -162,11 +184,11 @@
           </div>
         </div>
 
-        <div id="imagePreview" class="hidden text-center mt-4"> {/* Ajout mt-4 */}
-          <img id="previewImage" class="preview-image mx-auto border rounded" alt="Prévisualisation de l'image sélectionnée"> {/* Ajout border rounded */}
+        <div id="imagePreview" class="hidden text-center mt-4">
+          <img id="previewImage" class="preview-image mx-auto border border-gray-300 rounded" alt="Prévisualisation de l'image sélectionnée">
         </div>
 
-        <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
+        <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
           Résoudre le problème
         </button>
       </form>
@@ -176,36 +198,47 @@
         <p class="mt-4 text-gray-600">Analyse en cours...</p>
       </div>
 
-      <section id="solution" class="hidden mt-8 space-y-6">
-         {/* Section Réflexion */}
-        <div class="border rounded-md shadow-sm"> {/* Ajout bordure/ombre */}
-          <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-3 bg-gray-100 rounded-t-md"> {/* Style bouton */}
-            <span class="font-medium text-gray-700">Processus de Réflexion</span>
-            <span id="timestamp" class="timestamp"></span>
+      <section id="solution" class="hidden mt-10 space-y-8"> {/* Augmentation espace */}
+
+         <!-- Section Réflexion -->
+        <div class="border border-gray-200 rounded-md shadow-sm overflow-hidden"> {/* Ajout overflow-hidden */}
+          <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-3 bg-gray-100 border-b border-gray-200 hover:bg-gray-200 focus:outline-none">
+            <span class="font-medium text-gray-800">Processus de Réflexion</span>
+            <span class="flex items-center">
+              <span id="timestamp" class="timestamp mr-2"></span>
+              <!-- Chevron pour indiquer l'ouverture/fermeture -->
+              <svg class="w-4 h-4 text-gray-600 transition-transform duration-300" id="thoughtsChevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+            </span>
           </button>
-          <div id="thoughtsBox" class="thought-box border-t"> {/* Ajout bordure */}
-            {/* Utilisation de prose pour améliorer le style du contenu Markdown */}
-            <div id="thoughtsContent" class="p-4 text-gray-600 prose prose-sm max-w-none"></div> 
+          <div id="thoughtsBox" class="thought-box">
+            <!-- prose-sm pour taille texte plus petite, max-w-none pour utiliser toute la largeur -->
+            <div id="thoughtsContent" class="p-4 text-gray-700 prose prose-sm max-w-none">
+                <!-- Contenu Markdown/Texte inséré par JS -->
+            </div>
           </div>
         </div>
 
-        {/* Section Solution */}
-        <div class="border rounded-md shadow-sm"> {/* Ajout bordure/ombre */}
-          <div class="flex justify-between items-center p-3 bg-gray-100 rounded-t-md border-b"> {/* Style titre */}
+        <!-- Section Solution -->
+        <div class="border border-gray-200 rounded-md shadow-sm overflow-hidden">
+          <div class="flex justify-between items-center p-3 bg-gray-100 border-b border-gray-200">
             <h3 class="text-xl font-bold text-gray-800">Solution</h3>
           </div>
-          {/* table-responsive peut rester sur le conteneur pour le cas où une table serait générée */}
-          <div id="answerContent" class="p-4 text-gray-700 table-responsive">
-             {/* Le contenu LaTeX sera inséré ici */}
-             {/* NOTE IMPORTANTE POUR \medskip : */}
-             {/* MathJax (comme LaTeX) applique \medskip pour l'espace vertical ENTRE les blocs $$...$$ */}
-             {/* ou via \\[<dimension>] dans des environnements comme align*. */}
-             {/* Si le backend envoie \medskip A L'INTERIEUR d'un bloc $$...$$, il sera probablement ignoré. */}
-             {/* La correction doit se faire côté backend pour générer du LaTeX standard. */}
+          <div id="answerContentWrapper" class="table-responsive"> <!-- Wrapper pour table responsive si nécessaire -->
+              <div id="answerContent" class="p-4 text-gray-700">
+                 <!-- Le contenu LaTeX/HTML sera inséré ici -->
+                 <!-- Les commentaires problématiques ont été enlevés d'ici -->
+                 <!-- Rappel (pour le développeur) : La gestion de \medskip doit se faire côté backend -->
+                 <!-- en générant du LaTeX standard (espace entre $$...$$ ou \\[dim] dans align etc.) -->
+              </div>
           </div>
         </div>
       </section>
     </main>
+
+    <footer class="mt-10 text-center text-gray-500 text-sm pt-6 border-t border-gray-200">
+        Mariam M-0 - Interface de test
+    </footer>
+
   </div>
 
   <script>
@@ -218,6 +251,7 @@
       const answerContent = document.getElementById('answerContent');
       const thoughtsToggle = document.getElementById('thoughtsToggle');
       const thoughtsBox = document.getElementById('thoughtsBox');
+      const thoughtsChevron = document.getElementById('thoughtsChevron'); // Pour l'icône
       const imagePreview = document.getElementById('imagePreview');
       const previewImage = document.getElementById('previewImage');
       const timestamp = document.getElementById('timestamp');
@@ -230,139 +264,165 @@
       let updateTimeout = null;
       let mathJaxProcessing = false; // Flag pour éviter les rendus concurrents
 
+      // --- Fonctions Timer ---
       const updateTimestamp = () => {
         if (startTime) {
           const seconds = Math.floor((Date.now() - startTime) / 1000);
           timestamp.textContent = `${seconds}s`;
+        } else {
+          timestamp.textContent = ''; // Effacer si pas de timer
         }
       };
-
       const startTimer = () => {
         startTime = Date.now();
+        if (timerInterval) clearInterval(timerInterval); // Clear existing interval if any
         timerInterval = setInterval(updateTimestamp, 1000);
-        updateTimestamp();
+        updateTimestamp(); // Initial display
       };
-
       const stopTimer = () => {
         clearInterval(timerInterval);
-        // Ne pas réinitialiser startTime ici pour conserver la durée finale
-        // startTime = null; 
-        // Ne pas effacer le timestamp final
+        timerInterval = null;
+        // Garder l'affichage final du temps
       };
+      const resetTimer = () => {
+         stopTimer();
+         startTime = null;
+         updateTimestamp(); // Clear display
+      }
 
+      // --- Gestion Fichier ---
       const handleFileSelect = file => {
-        if (!file) return;
+        if (!file || !file.type.startsWith('image/')) {
+           previewImage.src = '';
+           imagePreview.classList.add('hidden');
+           if(file) alert("Veuillez sélectionner un fichier image valide.");
+           return;
+        }
         const reader = new FileReader();
         reader.onload = e => {
           previewImage.src = e.target.result;
           imagePreview.classList.remove('hidden');
         };
+        reader.onerror = () => {
+            alert("Erreur lors de la lecture du fichier.");
+            previewImage.src = '';
+            imagePreview.classList.add('hidden');
+        }
         reader.readAsDataURL(file);
       };
 
+      // --- Toggle Réflexion ---
       thoughtsToggle.addEventListener('click', () => {
-        thoughtsBox.classList.toggle('open');
+        const isOpen = thoughtsBox.classList.toggle('open');
+        thoughtsChevron.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
       });
 
+      // --- Input Image & Drag/Drop ---
       imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
-
       const dropZone = document.querySelector('.uploadArea');
       dropZone.addEventListener('dragover', e => {
         e.preventDefault();
-        dropZone.classList.add('border-blue-400'); // Utiliser une classe Tailwind existante
+        dropZone.classList.add('border-blue-400', 'bg-blue-50'); // Style plus visible
       });
       dropZone.addEventListener('dragleave', e => {
         e.preventDefault();
-        dropZone.classList.remove('border-blue-400');
+        dropZone.classList.remove('border-blue-400', 'bg-blue-50');
       });
       dropZone.addEventListener('drop', e => {
         e.preventDefault();
-        dropZone.classList.remove('border-blue-400');
+        dropZone.classList.remove('border-blue-400', 'bg-blue-50');
         if (e.dataTransfer.files.length > 0) {
-            imageInput.files = e.dataTransfer.files; // Assigne les fichiers déposés à l'input
-            handleFileSelect(e.dataTransfer.files[0]); // Met à jour l'aperçu
+            imageInput.files = e.dataTransfer.files;
+            handleFileSelect(e.dataTransfer.files[0]);
         }
       });
 
-      // --- Fonction de rendu MathJax ---
+      // --- Rendu MathJax ---
       const typesetContentIfReady = async () => {
-         // Vérifie si MathJax est prêt ET qu'un rendu n'est pas déjà en cours
         if (window.mathJaxReady && !mathJaxProcessing && typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
-           mathJaxProcessing = true; // Bloque les rendus concurrents
+           mathJaxProcessing = true;
            console.log("Début du rendu MathJax...");
            try {
-                // Cible explicitement les conteneurs où MathJax doit agir
-                // Si 'thoughtsContent' peut contenir du LaTeX, ajoutez-le au tableau.
-                // MathJax.startup.document.elements = [answerContent, thoughtsContent];
-                MathJax.startup.document.elements = [answerContent]; // Cible answerContent
-                await MathJax.typesetPromise();
+                // MathJax.startup.document.elements = [answerContent, thoughtsContent]; // Si besoin pour les 2
+                MathJax.startup.document.elements = [answerContent];
+                await MathJax.typesetPromise([answerContent]); // Cibler explicitement améliore parfois perf
                 console.log("Rendu MathJax terminé.");
-                // Fait défiler vers le bas APRÈS le rendu MathJax
-                answerContent.scrollTop = answerContent.scrollHeight;
-                // Si thoughtsContent est aussi traité:
-                // thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+                // Scroll après rendu
+                // Utiliser requestAnimationFrame pour s'assurer que le DOM est stable après MathJax
+                requestAnimationFrame(() => {
+                    answerContent.scrollTop = answerContent.scrollHeight;
+                    // if (thoughtsContent traité) thoughtsContent.scrollTop = thoughtsContent.scrollHeight;
+                });
+
            } catch (error) {
                console.error("Erreur pendant MathJax typesetPromise:", error);
            } finally {
-               mathJaxProcessing = false; // Libère le verrou
+               mathJaxProcessing = false;
                console.log("Flag MathJax débloqué.");
+               // Relancer un check si une mise à jour était en attente pendant le traitement
+               if (updateTimeout) {
+                   clearTimeout(updateTimeout);
+                   updateTimeout = null;
+                   scheduleUpdate(0); // Planifier une mise à jour immédiate
+               }
            }
         } else if (mathJaxProcessing) {
-            console.log('Rendu MathJax déjà en cours, report...');
-            // On pourrait replanifier ici si nécessaire, mais le scheduleUpdate devrait suffire
+            console.log('Rendu MathJax déjà en cours, mise à jour reportée.');
+            // La mise à jour sera replanifiée dans le finally
+        } else if (!window.mathJaxReady) {
+            console.log('MathJax pas prêt, report du rendu...');
+            setTimeout(() => scheduleUpdate(100), 250); // Réessayer plus tard
         } else {
-            console.log('MathJax pas prêt ou indéfini, report du rendu...');
-            // Réessayer un peu plus tard
-            setTimeout(scheduleUpdate, 300); 
+             console.log('Condition inconnue empêchant le rendu MathJax.');
         }
       };
 
-      // --- Fonction de mise à jour de l'affichage ---
+      // --- Mise à jour Affichage ---
       const updateDisplay = () => {
-        // Utilise Marked pour thoughtsContent (supposant Markdown)
-        // Vérifie si marked est chargé
+        // Marked pour thoughtsContent
         if (typeof marked !== 'undefined' && marked.parse) {
-             // Utilise { async: false } pour éviter les problèmes potentiels avec le rendu asynchrone de marked
-             // avant que MathJax ne s'exécute, bien que ce soit généralement pour les highlighters.
-             // Plus sûr de garder le flux synchrone ici.
-             thoughtsContent.innerHTML = marked.parse(thoughtsBuffer || '', { async: false });
+             try {
+                thoughtsContent.innerHTML = marked.parse(thoughtsBuffer || '', { async: false });
+             } catch (e) {
+                console.error("Erreur Marked.parse:", e);
+                thoughtsContent.textContent = thoughtsBuffer; // Fallback
+             }
         } else {
-             console.warn("Marked.js n'est pas chargé ou `parse` n'est pas une fonction.");
              thoughtsContent.textContent = thoughtsBuffer; // Fallback texte brut
         }
 
-        // Insère le contenu brut dans answerContent (MathJax s'en chargera)
+        // Contenu brut pour answerContent
         answerContent.innerHTML = answerBuffer;
 
-        // Déclenche le rendu MathJax sur le contenu mis à jour
-        // L'appel à typeset est maintenant géré via scheduleUpdate pour éviter les conflits
-        // await typesetContentIfReady(); // Déplacé dans scheduleUpdate/appel direct
-
-        // Scrolling géré DANS typesetContentIfReady après le rendu
-
         updateTimeout = null; // Réinitialise le timeout
-        // Déclenche le rendu MathJax immédiatement après la mise à jour du DOM
-        typesetContentIfReady(); 
+        // Déclenche le rendu MathJax après la mise à jour du DOM
+        typesetContentIfReady();
       };
 
-      const scheduleUpdate = () => {
-        if (updateTimeout) return; // Si une mise à jour est déjà programmée, ne rien faire
-        // Délai court pour regrouper les mises à jour rapides du stream
-        updateTimeout = setTimeout(updateDisplay, 150); // Délai réduit
+      // --- Planification Mise à jour (Debounce) ---
+      const scheduleUpdate = (delay = 100) => { // délai par défaut
+        if (mathJaxProcessing) {
+            console.log("Mise à jour différée car MathJax est en cours.");
+            // La mise à jour sera déclenchée à la fin du rendu MathJax
+            return;
+        }
+        if (updateTimeout) clearTimeout(updateTimeout); // Annule le précédent timeout
+        updateTimeout = setTimeout(updateDisplay, delay); // Programme la nouvelle mise à jour
       };
 
-      // Configure Marked (si utilisé pour thoughtsContent)
+      // --- Configuration Marked ---
       if (typeof marked !== 'undefined') {
           marked.setOptions({
-            gfm: true,     // Active GitHub Flavored Markdown
-            breaks: true,  // Convertit les sauts de ligne simples en <br>
-            mangle: false, // Désactive l'obfuscation des emails (souvent inutile ici)
-            headerIds: false // Désactive la génération d'ID pour les titres (moins de conflits potentiels)
+            gfm: true,
+            breaks: true,
+            mangle: false,
+            headerIds: false
           });
       } else {
           console.warn("Marked.js n'est pas chargé. 'thoughtsContent' sera affiché en texte brut.");
       }
 
+      // --- Soumission Formulaire ---
       form.addEventListener('submit', async e => {
         e.preventDefault();
         const file = imageInput.files[0];
@@ -371,29 +431,35 @@
           return;
         }
 
-        startTimer();
+        resetTimer(); // Remet le timer à zéro
+        startTimer(); // Démarre le timer
         loader.classList.remove('hidden');
         solutionSection.classList.add('hidden');
-        thoughtsContent.innerHTML = '';
-        answerContent.innerHTML = '';
+        thoughtsContent.innerHTML = ''; // Clear previous content
+        answerContent.innerHTML = '';   // Clear previous content
         thoughtsBuffer = '';
         answerBuffer = '';
         currentMode = null;
-        thoughtsBox.classList.add('open'); // Ouvre par défaut
+        if (!thoughtsBox.classList.contains('open')) { // Ouvre si fermé
+            thoughtsToggle.click();
+        }
 
         const formData = new FormData();
         formData.append('image', file);
 
         try {
-          const response = await fetch('/solved', { // Assurez-vous que l'URL est correcte
+          // Remplacez '/solved' par votre endpoint réel si différent
+          const response = await fetch('/solved', {
             method: 'POST',
             body: formData
           });
 
           if (!response.ok) {
-              // Essayer de lire le corps de l'erreur si possible
-              let errorBody = await response.text();
-              throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}. ${errorBody ? 'Détails: ' + errorBody : ''}`);
+              let errorBody = 'Impossible de lire les détails de l'erreur.';
+              try {
+                  errorBody = await response.text();
+              } catch (readError) { /* Ignore si on ne peut pas lire */ }
+              throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}. ${errorBody}`);
           }
           if (!response.body) {
               throw new Error("La réponse ne contient pas de corps (ReadableStream).");
@@ -404,15 +470,19 @@
           let buffer = '';
           let firstChunkReceived = false;
 
+          // --- Traitement Stream ---
           const processChunk = async ({ done, value }) => {
             if (done) {
-              // Traiter le reste du buffer s'il y en a (important !)
+              // Traitement buffer final
               if (buffer.startsWith('data:')) {
                 try {
-                    const data = JSON.parse(buffer.slice(5));
-                    if (data.content) {
-                      if (currentMode === 'thinking') thoughtsBuffer += data.content;
-                      else if (currentMode === 'answering') answerBuffer += data.content;
+                    const jsonData = buffer.slice(5).trim();
+                    if(jsonData) {
+                        const data = JSON.parse(jsonData);
+                        if (data.content) {
+                          if (currentMode === 'thinking') thoughtsBuffer += data.content;
+                          else if (currentMode === 'answering') answerBuffer += data.content;
+                        }
                     }
                 } catch(jsonError){
                      console.error("Erreur JSON dans le buffer final:", jsonError, "Buffer:", buffer);
@@ -421,26 +491,23 @@
                  console.warn("Données restantes non traitées dans le buffer final:", buffer);
               }
 
-              // Assurer une dernière mise à jour de l'affichage après la fin du stream
-              if (updateTimeout) clearTimeout(updateTimeout); // Annule le timeout programmé
-              updateDisplay(); // Force la mise à jour finale immédiate
-              stopTimer(); 
+              // Mise à jour finale
+              scheduleUpdate(0); // Force la mise à jour immédiate
+              stopTimer();
               console.log("Stream terminé.");
-              return true; // Indique que le stream est terminé
+              return true; // Stream fini
             }
 
-            // Ajoute le nouveau chunk au buffer
+            // Traitement chunk courant
             buffer += decoder.decode(value, { stream: true });
-            // Sépare le buffer en lignes basées sur '\n\n' (standard pour SSE)
             const lines = buffer.split('\n\n');
-            // La dernière partie peut être incomplète, on la garde dans le buffer
-            buffer = lines.pop() || '';
+            buffer = lines.pop() || ''; // Garde le reste pour le prochain chunk
 
             for (const line of lines) {
-              if (!line.startsWith('data:')) continue; // Ignore les lignes non valides (commentaires, lignes vides...)
+              if (!line.startsWith('data:')) continue;
               try {
-                  const jsonData = line.slice(5).trim(); // Enlève 'data:' et les espaces
-                  if (!jsonData) continue; // Ignore si vide après 'data:'
+                  const jsonData = line.slice(5).trim();
+                  if (!jsonData) continue;
                   const data = JSON.parse(jsonData);
 
                   if (data.mode) {
@@ -457,17 +524,16 @@
                     } else if (currentMode === 'answering') {
                       answerBuffer += data.content;
                     }
-                    // Programme une mise à jour (regroupée)
-                    scheduleUpdate();
+                    scheduleUpdate(); // Planifie une mise à jour (regroupée)
                   }
               } catch(jsonError) {
                   console.error("Erreur JSON dans le stream:", jsonError, "Ligne:", line);
               }
             }
-            return false; // Indique que le stream n'est pas terminé
+            return false; // Stream continue
           };
 
-          // Boucle de lecture du stream
+          // Boucle lecture stream
           let streamFinished = false;
           while (!streamFinished) {
               const { done, value } = await reader.read();
@@ -476,11 +542,14 @@
 
         } catch (error) {
           console.error('Erreur lors de la requête ou du traitement du stream:', error);
-          // Affiche une erreur plus détaillée à l'utilisateur
-          answerContent.innerHTML = `<p class="text-red-600 font-bold">Une erreur est survenue :</p><p class="text-red-500 mt-2">${error.message}</p>`;
-          solutionSection.classList.remove('hidden'); // Affiche la section pour montrer l'erreur
+          stopTimer(); // Arrête le timer en cas d'erreur aussi
           loader.classList.add('hidden');
-          stopTimer();
+          // Affiche l'erreur dans la section solution
+          answerContent.innerHTML = `<div class="p-4 bg-red-100 border border-red-300 text-red-700 rounded-md">
+              <p class="font-bold">Une erreur est survenue :</p>
+              <p class="mt-2 text-sm">${error.message}</p>
+            </div>`;
+          solutionSection.classList.remove('hidden'); // Affiche la section pour voir l'erreur
         }
       });
     });