Update templates/index.html

templates/index.html

@@ -62,11 +62,9 @@
             box-shadow: var(--box-shadow);
             padding: 30px;
             margin-bottom: 30px;
-            /* text-align: center; enlevé pour que le contenu dynamique ne soit pas centré par défaut */
         }
 
-        /* Ajustement pour le contenu généré */
-        .content-box > h1, .content-box > p {
+        .content-box > h1, .content-box > p:first-of-type { /* Cibler le premier paragraphe après h1 */
             text-align: center;
         }
         .content-box .feature-list h2 {
@@ -75,6 +73,10 @@
          .content-box .upload-section {
              text-align: center;
          }
+         .content-box .upload-section h2 {
+             color: var(--primary-color);
+             margin-bottom: 20px;
+         }
          .content-box .upgrade-section {
              text-align: center;
              margin-top: 30px;
@@ -126,6 +128,7 @@
             margin: 10px; /* Ajustement marge */
             border: none;
             cursor: pointer;
+            font-size: 1rem; /* Taille de police cohérente */
         }
 
         .cta-button:hover {
@@ -178,6 +181,7 @@
             overflow-wrap: break-word; /* Standard CSS */
         }
 
+        /* --- Sections spécifiques --- */
         .code-section {
             background-color: transparent !important; /* Le fond est géré par header/content */
             padding: 0 !important;
@@ -188,15 +192,35 @@
             background-color: var(--output-bg) !important;
             border-left: 4px solid var(--secondary-color); /* Distinction visuelle */
             padding-left: calc(20px - 4px);
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 0.95em;
+            white-space: pre-wrap; /* Respecter les retours à la ligne et espaces de la sortie */
+            word-break: break-all; /* Casser les longues lignes sans espaces */
         }
 
         .step-section {
             background-color: #ffffff; /* Fond blanc pour les étapes normales */
             border-left: 4px solid var(--primary-color);
             padding-left: calc(20px - 4px); /* Compenser la bordure */
-            font-size: 16px;
+            font-size: 1rem; /* Taille de base */
             line-height: 1.8;
         }
+        .error-message { /* Style pour les messages d'erreur injectés */
+             color: #a94442; /* Rouge foncé */
+             background-color: #f2dede; /* Rose pâle */
+             border-color: #ebccd1 !important; /* Bordure rouge plus pâle */
+             border-left-width: 4px !important;
+             border-style: solid;
+        }
+        .error-message strong {
+            color: #a94442;
+        }
+        .error-message pre { /* Si l'erreur contient du code brut */
+            background-color: #eacccc;
+            color: #843534;
+            border-color: #d9a9a9;
+        }
+
 
         /* --- Amélioration du rendu KaTeX --- */
         .step-section .katex {
@@ -204,18 +228,22 @@
             line-height: normal; /* Laisser KaTeX gérer */
             text-indent: 0;
             text-rendering: auto;
-            /* display: inline-block; */ /* Peut causer des problèmes de wrapping, à tester si besoin */
+            /* Eviter le saut de ligne au milieu d'une formule inline si possible */
+            white-space: nowrap;
         }
 
         .step-section .katex-display {
             display: block; /* Comportement block pour $$...$$ */
             text-align: center; /* Centrer les équations display */
-            margin: 1em 0; /* Espacement vertical */
+            margin: 1.2em 0; /* Espacement vertical un peu plus grand */
             overflow-x: auto; /* Permet le scroll horizontal si équation trop large */
             overflow-y: hidden;
-            padding: 0.5em 0; /* Un peu d'espace interne */
+            padding: 0.5em 0.2em; /* Un peu d'espace interne, moins sur les côtés */
+            /* background-color: #fdfdfd; */ /* Optionnel : léger fond différent */
+            /* border: 1px solid #eee; */ /* Optionnel : bordure légère */
+            /* border-radius: 4px; */ /* Optionnel : coins arrondis */
         }
-        /* Ceci est le conteneur interne créé par KaTeX */
+        /* Conteneur interne créé par KaTeX */
         .step-section .katex-display > .katex {
              display: inline-block; /* Permet le centrage et évite la pleine largeur */
              text-align: initial; /* Texte de l'équation aligné à gauche par défaut */
@@ -223,11 +251,12 @@
         }
         /* --- Fin Amélioration KaTeX --- */
 
+        /* --- Sections de Code Dédiées (Python) --- */
         .code-header {
             background-color: #343a40;
             color: white;
             padding: 10px 15px;
-            font-size: 14px;
+            font-size: 0.9em; /* Plus petit */
             font-family: 'Courier New', monospace;
             display: flex;
             justify-content: space-between;
@@ -241,12 +270,27 @@
             color: #e6e6e6;
             overflow-x: auto;
             font-family: 'Courier New', monospace;
-            font-size: 14px;
+            font-size: 0.9em; /* Plus petit */
             line-height: 1.5;
             border-bottom: 1px solid #444; /* Bordure sous le code */
         }
+        .code-content pre { /* S'assurer que pre dans le bloc code est stylé correctement */
+             margin: 0;
+             padding: 0;
+             background-color: transparent;
+             border: none;
+             border-radius: 0;
+        }
+         .code-content pre code {
+              font-size: 1em; /* Hérite de .code-content */
+              line-height: inherit;
+              background-color: transparent;
+              color: inherit;
+              padding: 0;
+         }
+        /* --- Fin Sections de Code Dédiées --- */
 
-        /* --- Règles pour les coins arrondis --- */
+        /* --- Règles pour les coins arrondis et bordures --- */
         #solution > *:first-child,
         #solution > .code-section:first-child .code-header {
             border-top-left-radius: 8px;
@@ -263,18 +307,32 @@
         #solution > *:only-child {
             border-radius: 8px;
         }
+        /* Supprimer la bordure du bas si le suivant est une section de code */
+        #solution > *:not(:last-child):not(.code-section) {
+             border-bottom: 1px solid #eee;
+        }
+        #solution > .code-section + * { /* Si un élément suit une section code */
+            border-top: 1px solid #eee; /* Ajouter une ligne de séparation au dessus */
+        }
+        #solution > .code-section .code-content {
+             border-bottom: none; /* Pas de double bordure */
+        }
+
 
         /* --- Amélioration du rendu Markdown --- */
+        .step-section *:first-child { margin-top: 0; } /* Éviter marge sup en début de bloc */
+        .step-section *:last-child { margin-bottom: 0; } /* Éviter marge inf en fin de bloc */
+
+        .step-section p { margin-bottom: 1em; } /* Espacement standard paragraphe */
+
         .step-section ul, .step-section ol {
             margin-block-start: 1em;
             margin-block-end: 1em;
             padding-inline-start: 30px; /* Indentation standard */
         }
-
         .step-section ul li, .step-section ol li {
             margin-bottom: 0.5em;
         }
-        /* Meilleur espacement pour les listes imbriquées */
         .step-section ul ul,
         .step-section ol ol,
         .step-section ul ol,
@@ -284,11 +342,14 @@
         }
 
         /* Amélioration des tables en Markdown */
+        .step-section .table-wrapper { /* Conteneur pour le défilement horizontal */
+            overflow-x: auto;
+            margin: 1em 0;
+        }
         .step-section table {
             border-collapse: collapse;
-            width: auto; /* Ne prend que la largeur nécessaire */
-            max-width: 100%; /* Empêche le débordement */
-            margin: 1em auto; /* Centrer les tableaux */
+            width: 100%; /* Prend la largeur du wrapper */
+            min-width: 400px; /* Largeur minimale pour éviter écrasement */
             border: 1px solid #ccc; /* Bordure extérieure */
         }
         .step-section th,
@@ -305,31 +366,36 @@
             background-color: #f9f9f9;
         }
 
-        /* Meilleur rendu des blocs de code en Markdown (pas Python) */
+        /* Rendu des blocs de code en Markdown (pas Python dédié) */
         .step-section pre {
-            background-color: #f0f0f0; /* Légèrement différent du fond Python */
+            background-color: #f5f5f5;
             border-radius: 4px;
             padding: 12px;
             overflow-x: auto;
             margin: 1em 0;
             border: 1px solid #ddd;
+            line-height: 1.45; /* Consistant avec hljs */
         }
         .step-section pre code { /* Style pour le code dans pre */
-            background-color: transparent; /* Le fond est sur pre */
+            background-color: transparent;
             padding: 0;
             border-radius: 0;
             font-size: 0.95em; /* Un peu plus petit */
+            color: #333; /* Couleur de base du code */
         }
          /* Style pour `code` inline */
         .step-section code:not(pre *) {
-            font-family: 'Courier New', Courier, monospace;
-            background-color: #e8e8e8;
-            padding: 2px 5px;
+            font-family: Consolas, 'Courier New', Courier, monospace; /* Police plus adaptée */
+            background-color: #f0f0f0; /* Gris clair */
+            padding: 3px 6px; /* Un peu plus d'espace */
             border-radius: 3px;
             font-size: 0.9em;
-            color: #c7254e; /* Couleur pour code inline */
+            color: #c7254e; /* Couleur style "rouge" pour code inline */
+            border: 1px solid #e8e8e8;
+            word-break: break-word; /* Casser si trop long */
         }
 
+        /* --- Indicateurs de statut --- */
         .thinking-indicator, .executing-indicator, .answering-indicator {
             display: flex;
             align-items: center;
@@ -351,6 +417,7 @@
             animation: pulse 1.5s infinite ease-in-out;
             font-size: 1.1rem;
         }
+        /* --- Fin Indicateurs --- */
 
         @keyframes pulse {
             0% { opacity: 0.6; transform: scale(1); }
@@ -358,11 +425,11 @@
             100% { opacity: 0.6; transform: scale(1); }
         }
 
-        /* Améliorations supplémentaires pour Markdown */
+        /* --- Améliorations supplémentaires pour Markdown --- */
         .step-section blockquote {
             border-left: 4px solid #ccc; /* Gris standard */
-            margin: 1em 0;
-            padding: 0.5em 15px;
+            margin: 1.5em 0; /* Plus de marge verticale */
+            padding: 0.8em 15px; /* Plus de padding */
             color: #555;
             background-color: #f9f9f9;
         }
@@ -372,7 +439,7 @@
 
         .step-section hr {
             border: none;
-            border-top: 1px solid #eee;
+            border-top: 2px solid #eee; /* Ligne plus visible */
             margin: 2em 0;
         }
 
@@ -382,19 +449,27 @@
         .step-section h4,
         .step-section h5,
         .step-section h6 {
-            margin-top: 1.5em;
+            margin-top: 1.8em; /* Plus d'espace avant les titres */
             margin-bottom: 0.8em;
             color: var(--primary-color);
             font-weight: 600; /* Un peu plus gras */
-            padding-bottom: 0.2em;
+            padding-bottom: 0.3em;
             border-bottom: 1px solid #eee; /* Souligner légèrement les titres */
+            line-height: 1.3; /* Ajuster interligne titre */
         }
+         .step-section h1:first-child, /* Pas de marge sup pour le tout premier titre */
+         .step-section h2:first-child,
+         .step-section h3:first-child,
+         .step-section h4:first-child,
+         .step-section h5:first-child,
+         .step-section h6:first-child { margin-top: 0; }
+
         .step-section h1 { font-size: 1.8em; border-bottom-width: 2px; }
         .step-section h2 { font-size: 1.6em; }
         .step-section h3 { font-size: 1.4em; }
         .step-section h4 { font-size: 1.2em; }
-        .step-section h5 { font-size: 1.1em; }
-        .step-section h6 { font-size: 1.0em; color: #666; }
+        .step-section h5 { font-size: 1.1em; color: var(--secondary-color); } /* Couleur différente pour H5/H6 */
+        .step-section h6 { font-size: 1.0em; color: #666; font-style: italic;}
 
     </style>
 </head>
@@ -412,9 +487,9 @@
             <div class="feature-list">
                 <h2>Fonctionnalités disponibles :</h2>
                 <ul class="feature-list">
-                    <li><i class="fas fa-check-circle"></i> Résolution de problèmes mathématiques basiques</li>
+                    <li><i class="fas fa-check-circle"></i> Résolution de problèmes mathématiques</li>
                     <li><i class="fas fa-check-circle"></i> 3 résolutions gratuites par jour</li>
-                    <li><i class="fas fa-check-circle"></i> Explication des étapes de résolution</li>
+                    <li><i class="fas fa-check-circle"></i> Explication détaillée des étapes</li>
                     <li><i class="fas fa-times-circle"></i> <span style="color: #999;">Mode d'exécution de code avancé (version Pro)</span></li>
                     <li><i class="fas fa-times-circle"></i> <span style="color: #999;">Résolutions illimitées (version Pro)</span></li>
                     <li><i class="fas fa-times-circle"></i> <span style="color: #999;">Support prioritaire (version Pro)</span></li>
@@ -428,7 +503,7 @@
                     <button type="button" id="uploadButton" class="cta-button" onclick="document.getElementById('imageInput').click()">
                         <i class="fas fa-upload"></i> Télécharger une image
                     </button>
-                     <p id="uploadStatus" style="margin-top: 10px; font-size: 0.9em; color: #555;"></p>
+                     <p id="uploadStatus" style="margin-top: 10px; font-size: 0.9em; color: #555; min-height: 1.2em;"></p>
                 </form>
 
                 <div id="imagePreview" style="display: none; margin: 20px auto; max-width: 400px; max-height: 300px; overflow: hidden; border: 1px solid #ddd; border-radius: 8px;">
@@ -444,8 +519,7 @@
             <div id="solutionOutput"> <!-- Initialement caché via CSS -->
                 <h3>Solution :</h3>
                 <div id="loadingIndicator" class="thinking-indicator" style="display: none;">
-                    <i class="fas fa-brain indicator-icon"></i>
-                    <span>Je réfléchis au problème...</span>
+                    <!-- Contenu mis à jour par JS -->
                 </div>
                 <!-- Container pour les blocs de contenu dynamiques -->
                 <div id="solution">
@@ -465,30 +539,43 @@
         </footer>
     </div>
 
+    <!-- JS Libraries -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
-
-    <!-- KaTeX Scripts -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/contrib/auto-render.min.js"></script>
+    <!-- Marked.js est déjà chargé dans le <head> -->
 
     <script>
-        // Configuration de marked pour le rendu Markdown
+        // --- Configuration Marked.js ---
         marked.setOptions({
             gfm: true,
-            breaks: true, // Convertit les simples retours à la ligne en <br> (peut être désactivé si non souhaité)
+            breaks: false, // Standard GFM: ne pas convertir les simples retours à la ligne en <br>
+            pedantic: false,
             smartLists: true,
-            smartypants: true,
+            smartypants: false, // Désactiver pour éviter interférence avec $
             xhtml: true,
-             highlight: function(code, lang) {
-                // Utilise highlight.js pour la coloration syntaxique DANS les blocs de code Markdown
-                // (différent des blocs de code Python dédiés)
+            highlight: function(code, lang) {
+                // Utilise highlight.js pour la coloration dans les blocs ```lang ... ```
                 const language = hljs.getLanguage(lang) ? lang : 'plaintext';
-                return hljs.highlight(code, { language }).value;
-            }
+                return hljs.highlight(code, { language, ignoreIllegals: true }).value;
+            },
+             // Ajouter un wrapper pour les tables pour permettre le scroll horizontal
+             renderer: (function() {
+                const renderer = new marked.Renderer();
+                // Conserver le rendu par défaut pour la plupart des éléments
+                const defaultTableRenderer = renderer.table;
+                renderer.table = function(header, body) {
+                    // Appeler le rendu par défaut pour obtenir le HTML de la table
+                    const tableHtml = defaultTableRenderer.call(this, header, body);
+                    // Envelopper la table dans un div pour le style et le défilement
+                    return `<div class="table-wrapper">${tableHtml}</div>`;
+                };
+                return renderer;
+            })()
         });
 
-        // Configuration de KaTeX (options globales)
+        // --- Configuration KaTeX ---
         const katexOptions = {
             delimiters: [
                 {left: '$$', right: '$$', display: true},
@@ -496,201 +583,340 @@
                 {left: '\\(', right: '\\)', display: false},
                 {left: '\\[', right: '\\]', display: true}
             ],
-            throwOnError: false, // Ne pas bloquer toute la page en cas d'erreur LaTeX
-            // trust: true, // Activer seulement si besoin de commandes comme \htmlClass
+            throwOnError: false, // Ne pas bloquer en cas d'erreur LaTeX mineure
              strict: (errorCode) => {
-                 // Permet d'ignorer certaines erreurs "mineures" si nécessaire
+                 // Gérer ou ignorer certains avertissements KaTeX si nécessaire
                  if (errorCode === 'unicodeTextInMathMode') {
                      return 'ignore'; // Ou 'warn'
                  }
-                 return 'warn'; // Affiche les erreurs dans la console sans planter
-             }
+                 // 'warn' affiche l'erreur dans la console sans arrêter le rendu
+                 // 'error' arrêterait le rendu de cette formule
+                 return 'warn';
+             },
+             macros: { // Optionnel: Définir des macros LaTeX personnalisées
+                 // "\\RR": "\\mathbb{R}"
+             },
+             // trust: (context) => context.command === '\\htmlClass' // Activer si besoin de commandes spécifiques
         };
 
+        // --- Gestion Upload Image ---
         document.getElementById('imageInput').addEventListener('change', function(event) {
             const file = event.target.files[0];
+            const uploadStatus = document.getElementById('uploadStatus');
+            const imagePreviewDiv = document.getElementById('imagePreview');
+            const previewImg = document.getElementById('preview');
+            const solveButton = document.getElementById('solveButton');
+            const solutionOutputDiv = document.getElementById('solutionOutput');
+            const solutionContainer = document.getElementById('solution');
+
             if (file) {
                 const reader = new FileReader();
                 reader.onload = function(e) {
-                    document.getElementById('preview').src = e.target.result;
-                    document.getElementById('imagePreview').style.display = 'block';
-                    document.getElementById('solveButton').style.display = 'inline-block';
-                    document.getElementById('uploadStatus').textContent = `Image sélectionnée : ${file.name}`;
-                    // Cacher l'ancienne solution si une nouvelle image est chargée
-                    document.getElementById('solutionOutput').style.display = 'none';
-                    document.getElementById('solution').innerHTML = '';
+                    previewImg.src = e.target.result;
+                    imagePreviewDiv.style.display = 'block';
+                    solveButton.style.display = 'inline-block';
+                    uploadStatus.textContent = `Image sélectionnée : ${file.name}`;
+                    // Cacher l'ancienne solution et l'indicateur
+                    solutionOutputDiv.style.display = 'none';
+                    solutionContainer.innerHTML = '';
+                    document.getElementById('loadingIndicator').style.display = 'none';
                 }
                 reader.readAsDataURL(file);
+                uploadStatus.textContent = 'Chargement de l\'aperçu...';
+            } else {
+                 imagePreviewDiv.style.display = 'none';
+                 solveButton.style.display = 'none';
+                 uploadStatus.textContent = '';
             }
         });
 
+        // --- Gestion Clic Bouton Résoudre ---
         document.getElementById('solveButton').addEventListener('click', function() {
             const formData = new FormData(document.getElementById('imageForm'));
             const solutionOutputDiv = document.getElementById('solutionOutput');
             const loadingIndicator = document.getElementById('loadingIndicator');
             const solutionContainer = document.getElementById('solution');
 
+            // Vérifier s'il y a une image sélectionnée
+            if (!document.getElementById('imageInput').files[0]) {
+                alert("Veuillez d'abord sélectionner une image.");
+                return;
+            }
+
             solutionOutputDiv.style.display = 'block'; // Afficher la section solution
+            loadingIndicator.innerHTML = `<i class="fas fa-spinner fa-spin indicator-icon"></i><span>Envoi de l'image...</span>`;
+            loadingIndicator.className = 'thinking-indicator'; // Classe par défaut
             loadingIndicator.style.display = 'flex'; // Afficher l'indicateur de chargement
             solutionContainer.innerHTML = ''; // Effacer la solution précédente
-             // Scroller pour rendre l'indicateur visible
+
+            // Scroller pour rendre l'indicateur visible
             loadingIndicator.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
-            fetch('/solved', { // Endpoint Flask
+            fetch('/solved', { // Endpoint Flask (adapter si nécessaire)
                 method: 'POST',
                 body: formData
             })
             .then(response => {
-                if (!response.ok) {
-                    return response.text().then(text => {
-                        throw new Error(`Erreur serveur: ${response.status} ${response.statusText}\n${text || '(Aucun détail)'}`);
-                    });
-                }
+                if (!response.ok || !response.body) {
+                     // Tenter de lire le message d'erreur du corps si disponible
+                     return response.text().then(text => {
+                         let errorMsg = `Erreur serveur: ${response.status} ${response.statusText}`;
+                         if (text) {
+                             // Essayer d'extraire un message d'erreur plus précis si c'est du JSON
+                             try {
+                                 const errorJson = JSON.parse(text);
+                                 errorMsg += `\n${errorJson.error || errorJson.message || text}`;
+                             } catch (e) {
+                                 errorMsg += `\n${text}`; // Afficher le texte brut si ce n'est pas du JSON
+                             }
+                         } else {
+                             errorMsg += "\nAucun détail supplémentaire fourni par le serveur.";
+                         }
+                         throw new Error(errorMsg);
+                     });
+                 }
+                // Préparation à la lecture du flux SSE
                 const reader = response.body.getReader();
                 const decoder = new TextDecoder();
                 let buffer = '';
+                let currentMode = 'thinking'; // Suivre l'état actuel
+
+                // Mettre à jour l'indicateur pour le premier état
+                updateLoadingIndicator('thinking');
 
                 function processStream({ done, value }) {
                     if (done) {
-                        loadingIndicator.style.display = 'none';
-                        // Passe finale de rendu KaTeX pour être sûr
+                        // Le flux est terminé
+                        if (solutionContainer.innerHTML === '') {
+                             // Si rien n'a été affiché, montrer un message
+                             displayError("Aucune réponse reçue du serveur après la fin du flux.", solutionContainer);
+                        }
+                        loadingIndicator.style.display = 'none'; // Cacher l'indicateur final
+                        // Optionnel : Passe finale de rendu KaTeX pour toute la solution
                         try {
-                            renderMathInElement(solutionContainer, katexOptions);
+                           if (window.renderMathInElement) { // Vérifier si la fonction existe
+                                renderMathInElement(solutionContainer, katexOptions);
+                           }
                         } catch (e) {
                             console.error('Erreur de rendu KaTeX final:', e);
                         }
                         return;
                     }
 
+                    // Ajouter les nouvelles données au buffer
                     buffer += decoder.decode(value, { stream: true });
-                    const messages = buffer.split(/\r?\n\r?\n/); // Sépare les messages SSE
-                    buffer = messages.pop(); // Garde le dernier morceau potentiellement incomplet
 
-                    messages.forEach(message => {
+                    // Traiter les messages complets dans le buffer (séparés par \n\n)
+                    let boundary = buffer.indexOf('\n\n');
+                    while (boundary >= 0) {
+                        const message = buffer.substring(0, boundary).trim(); // Prendre un message complet
+                        buffer = buffer.substring(boundary + 2); // Enlever le message traité du buffer
+
                         if (message.startsWith('data: ')) {
                             try {
-                                const data = JSON.parse(message.substring(6)); // Extrait le JSON
+                                const data = JSON.parse(message.substring(6)); // Extraire le JSON
 
                                 // --- Gérer les mises à jour de mode ---
-                                if (data.mode) {
-                                    const modes = {
-                                        thinking: { icon: 'fa-brain', text: 'Je réfléchis...', class: 'thinking-indicator' },
-                                        answering: { icon: 'fa-pencil-alt', text: 'Je rédige la réponse...', class: 'answering-indicator' },
-                                        executing_code: { icon: 'fa-play', text: 'Exécution du code...', class: 'executing-indicator' }, // Icône différente
-                                        code_result: { icon: 'fa-terminal', text: 'Traitement des résultats...', class: 'executing-indicator' }
-                                    };
-                                    const modeInfo = modes[data.mode] || { icon: 'fa-sync-alt fa-spin', text: 'Traitement...', class: 'thinking-indicator' }; // Fallback
-
-                                    loadingIndicator.className = `${modeInfo.class}`; // Assigner la classe CSS
-                                    loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`;
-                                    loadingIndicator.style.display = 'flex';
+                                if (data.mode && data.mode !== currentMode) {
+                                    currentMode = data.mode;
+                                    updateLoadingIndicator(currentMode);
+                                    loadingIndicator.style.display = 'flex'; // Assurer qu'il est visible
                                 }
 
                                 // --- Gérer les blocs de contenu ---
                                 if (data.content) {
-                                    loadingIndicator.style.display = 'none'; // Cacher l'indicateur quand le contenu arrive
-                                    const content = data.content;
-                                    const tempDiv = document.createElement('div');
-                                    tempDiv.innerHTML = content; // Analyser le fragment HTML reçu
+                                    loadingIndicator.style.display = 'none'; // Cacher l'indicateur dès qu'on reçoit du contenu
+                                    const rawContent = data.content;
 
+                                    // Détecter si c'est du code/output dédié ou un step normal
+                                    // On se base sur la présence de classes spécifiques envoyées par le serveur
+                                    const tempDiv = document.createElement('div');
+                                    tempDiv.innerHTML = rawContent; // Parser temporairement pour inspection
                                     const codeSection = tempDiv.querySelector('.code-section');
                                     const outputSection = tempDiv.querySelector('.output-section');
-                                    const stepSection = tempDiv.querySelector('.step-section'); // Peut être directement le contenu
+
+                                    let elementToAppend; // L'élément final à ajouter au DOM
 
                                     if (codeSection) {
-                                        // C'est une section de code Python dédiée
-                                        solutionContainer.appendChild(codeSection);
-                                        codeSection.querySelectorAll('pre code').forEach((block) => {
-                                            hljs.highlightElement(block); // Appliquer highlight.js
+                                        // --- Section Code Python Dédiée ---
+                                        elementToAppend = codeSection;
+                                        // Appliquer highlight.js sur les blocs de code DANS cette section
+                                        elementToAppend.querySelectorAll('pre code').forEach((block) => {
+                                            // Vérifier si hljs est chargé
+                                            if (window.hljs) {
+                                               hljs.highlightElement(block);
+                                            } else {
+                                               console.warn("highlight.js (hljs) non trouvé.");
+                                            }
                                         });
+
                                     } else if (outputSection) {
-                                        // C'est une section de sortie de code
-                                        solutionContainer.appendChild(outputSection);
+                                        // --- Section Output de Code ---
+                                        elementToAppend = outputSection;
+                                        // Pas de traitement spécial nécessaire ici (styles CSS gèrent l'affichage)
+
                                     } else {
-                                        // C'est une section d'étape (texte, Markdown, LaTeX)
-                                        // Créer un conteneur propre pour cette étape
+                                        // --- Section d'Étape (Markdown + LaTeX) ---
                                         const stepDiv = document.createElement('div');
-                                        stepDiv.className = 'step-section'; // Appliquer la classe pour le style
+                                        stepDiv.className = 'step-section';
+                                        elementToAppend = stepDiv;
 
                                         try {
-                                            // 1. Convertir le Markdown en HTML en utilisant marked.js
-                                            const htmlContent = marked.parse(content);
+                                            let processedMdContent = rawContent;
+                                            const latexPlaceholders = {};
+                                            let placeholderIndex = 0;
+                                            const placeholderPrefix = "___KXTEMP_"; // Préfixe court et unique
+
+                                            // 1. Protéger $$...$$ (Display Math)
+                                            // Regex: trouve $$ suivi de n'importe quoi (non-gourmand) jusqu'à $$
+                                            processedMdContent = processedMdContent.replace(/(\$\$[\s\S]*?\$\$)/g, (match) => {
+                                                const placeholder = `${placeholderPrefix}D${placeholderIndex++}___`;
+                                                latexPlaceholders[placeholder] = match;
+                                                return placeholder;
+                                            });
+
+                                            // 2. Protéger $...$ (Inline Math)
+                                            // Regex: trouve un $ non précédé par \ ou un autre $, suivi de caractères (non-$), jusqu'au prochain $ non précédé par \.
+                                            // Attention: cette regex est simplifiée et peut avoir des edge cases.
+                                             processedMdContent = processedMdContent.replace(/(?<![\$\\])\$([^$]+?)\$(?![\$])/g, (match) => {
+                                                 // (?<![\$\\]) : Ne pas être précédé par $ ou \
+                                                 // \$ : Le dollar de début
+                                                 // ([^$]+?) : Contenu (au moins un caractère, non gourmand)
+                                                 // \$ : Le dollar de fin
+                                                 // (?![\$]) : Ne pas être suivi par un $
+                                                 const placeholder = `${placeholderPrefix}I${placeholderIndex++}___`;
+                                                 latexPlaceholders[placeholder] = match;
+                                                 return placeholder;
+                                             });
+
+
+                                            // 3. Parser le Markdown *avec* les placeholders
+                                            let htmlContent = marked.parse(processedMdContent);
+
+                                            // 4. Restaurer le LaTeX original à partir des placeholders
+                                            // Utiliser une fonction pour la robustesse
+                                            htmlContent = htmlContent.replace(new RegExp(placeholderPrefix + "(D|I)(\\d+)___", "g"), (match) => {
+                                                 return latexPlaceholders[match] || match; // Remplace ou laisse le placeholder si non trouvé
+                                             });
+
+                                            // 5. Injecter le HTML final dans le div
                                             stepDiv.innerHTML = htmlContent;
 
-                                            // 2. Ajouter le div au conteneur principal
-                                            solutionContainer.appendChild(stepDiv);
-
-                                            // 3. Rendre le LaTeX DANS ce div spécifique avec KaTeX
-                                            renderMathInElement(stepDiv, katexOptions);
+                                            // 6. Rendre le LaTeX DANS ce div spécifique avec KaTeX (après ajout au DOM)
+                                            // Note: KaTeX sera appelé après l'ajout au DOM ci-dessous
 
                                         } catch (e) {
-                                            console.error('Erreur pendant le traitement Markdown ou KaTeX:', e);
-                                            // En cas d'erreur, afficher le contenu brut pour le débogage
-                                            stepDiv.innerHTML = `<p>Erreur de rendu :</p><pre>${content.replace(/</g, "<")}</pre>`;
-                                            solutionContainer.appendChild(stepDiv);
+                                            console.error('Erreur pendant le traitement Markdown/Placeholder:', e);
+                                            // En cas d'erreur majeure, afficher le contenu brut
+                                            stepDiv.innerHTML = `<p class="error-message"><strong>Erreur de rendu Markdown :</strong> ${e.message}</p><pre>${rawContent.replace(/</g, "<")}</pre>`;
                                         }
                                     }
-                                }
 
-                                // --- Gérer les erreurs spécifiques ---
+                                    // --- Ajouter l'élément préparé au conteneur ---
+                                    if (elementToAppend) {
+                                        solutionContainer.appendChild(elementToAppend);
+
+                                        // --- Appeler KaTeX si c'était une step-section ---
+                                        if (elementToAppend.classList.contains('step-section')) {
+                                            try {
+                                                 if (window.renderMathInElement) {
+                                                    renderMathInElement(elementToAppend, katexOptions);
+                                                 } else {
+                                                    console.warn("KaTeX auto-render (renderMathInElement) non trouvé.");
+                                                 }
+                                            } catch (renderError) {
+                                                console.error('Erreur rendu KaTeX sur le bloc:', renderError, elementToAppend);
+                                                // Afficher un message d'erreur dans le bloc lui-même
+                                                const errorDiv = document.createElement('div');
+                                                errorDiv.className = 'error-message';
+                                                errorDiv.innerHTML = `<strong>Erreur Rendu LaTeX:</strong> ${renderError.message || renderError}`;
+                                                elementToAppend.appendChild(errorDiv);
+                                            }
+                                        }
+
+                                        // Faire défiler pour voir le nouveau contenu
+                                        elementToAppend.scrollIntoView({ behavior: 'smooth', block: 'end' });
+                                    }
+                                } // Fin if(data.content)
+
+                                // --- Gérer les erreurs spécifiques envoyées par le serveur ---
                                 if (data.error) {
-                                    const errorDiv = document.createElement('div');
-                                    // Utiliser une classe existante ou créer une classe 'error-section'
-                                    errorDiv.className = 'step-section error-message'; // Réutiliser step-section avec une classe d'erreur
-                                    errorDiv.style.color = 'red';
-                                    errorDiv.style.backgroundColor = '#fff0f0';
-                                    errorDiv.style.borderColor = 'red';
-                                    errorDiv.innerHTML = `<strong>Erreur :</strong> ${marked.parse(data.error || 'Une erreur inconnue est survenue.')}`; // Permet le markdown dans l'erreur
-                                    solutionContainer.appendChild(errorDiv);
-                                    loadingIndicator.style.display = 'none';
+                                    displayError(`Erreur reçue du serveur: ${data.error}`, solutionContainer);
+                                    loadingIndicator.style.display = 'none'; // Cacher l'indicateur en cas d'erreur fatale
                                 }
 
                             } catch (e) {
                                 console.error('Erreur analyse JSON ou traitement message SSE:', e, message);
-                                const errorDiv = document.createElement('div');
-                                errorDiv.className = 'step-section error-message';
-                                errorDiv.style.color = 'orange';
-                                errorDiv.style.backgroundColor = '#fff8e1';
-                                errorDiv.style.borderColor = 'orange';
-                                errorDiv.textContent = `Erreur de traitement du message reçu: ${message.substring(0, 150)}...`;
-                                solutionContainer.appendChild(errorDiv);
+                                displayError(`Erreur interne lors du traitement de la réponse: ${message.substring(0, 150)}...`, solutionContainer);
                                 loadingIndicator.style.display = 'none';
                             }
+                        } else if (message.trim() !== '') {
+                            // Ignorer les lignes vides mais logguer les autres lignes non-SSE
+                            console.warn("Message SSE ignoré (ne commence pas par 'data:'):", message);
                         }
-                    });
-
-                    // Défiler vers le bas pour voir le nouveau contenu au fur et à mesure
-                     solutionContainer.lastChild?.scrollIntoView({ behavior: 'smooth', block: 'end' });
 
+                        // Chercher la prochaine limite de message
+                        boundary = buffer.indexOf('\n\n');
+                    } // Fin while boundary
 
                     // Continuer à lire le flux
-                    return reader.read().then(processStream);
-                }
+                    reader.read().then(processStream);
+                } // Fin processStream
 
                 // Démarrer le traitement du flux
                 reader.read().then(processStream);
+
             })
             .catch(error => {
+                // Gérer les erreurs de fetch initial (connexion, DNS, etc.) ou les erreurs levées plus tôt
                 console.error('Erreur Fetch ou connexion:', error);
-                const errorDiv = document.createElement('div');
-                errorDiv.className = 'step-section error-message';
-                errorDiv.style.color = 'red';
-                errorDiv.style.backgroundColor = '#fff0f0';
-                errorDiv.style.borderColor = 'red';
-                errorDiv.innerHTML = `<strong>Erreur de connexion ou serveur :</strong> ${error.message || error}`;
-                solutionContainer.appendChild(errorDiv);
-                loadingIndicator.style.display = 'none';
-                 errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                displayError(`Erreur de communication avec le serveur: ${error.message || error}`, solutionContainer);
+                loadingIndicator.style.display = 'none'; // Cacher l'indicateur
             });
         });
 
-        // Premier rendu KaTeX au chargement de la page (pour tout contenu statique éventuel)
+        // --- Fonction pour mettre à jour l'indicateur de chargement ---
+        function updateLoadingIndicator(mode) {
+            const loadingIndicator = document.getElementById('loadingIndicator');
+            const modes = {
+                thinking: { icon: 'fa-brain', text: 'Je réfléchis au problème...', class: 'thinking-indicator' },
+                answering: { icon: 'fa-pencil-alt', text: 'Je rédige la réponse...', class: 'answering-indicator' },
+                executing_code: { icon: 'fa-play', text: 'Exécution du code Python...', class: 'executing-indicator' },
+                code_result: { icon: 'fa-terminal', text: 'Analyse des résultats du code...', class: 'executing-indicator' },
+                // Ajouter d'autres modes si nécessaire
+                default: { icon: 'fa-sync-alt fa-spin', text: 'Traitement en cours...', class: 'thinking-indicator' }
+            };
+            const modeInfo = modes[mode] || modes.default;
+
+            loadingIndicator.className = modeInfo.class; // Appliquer la classe CSS pour le style
+            loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`;
+        }
+
+        // --- Fonction pour afficher les erreurs de manière cohérente ---
+        function displayError(errorMessage, container) {
+            const errorDiv = document.createElement('div');
+            // Utiliser la classe CSS définie pour les erreurs
+            errorDiv.className = 'step-section error-message';
+            // Utiliser marked pour permettre un formatage simple dans les erreurs si besoin
+            try {
+                errorDiv.innerHTML = `<strong>Erreur :</strong> ${marked.parseInline(errorMessage || 'Une erreur inconnue est survenue.')}`;
+            } catch (e) { // Fallback si marked échoue
+                 errorDiv.innerHTML = `<strong>Erreur :</strong> ${errorMessage || 'Une erreur inconnue est survenue.'}`;
+            }
+            container.appendChild(errorDiv);
+            errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+
+
+        // --- Initialisation au chargement de la page ---
         document.addEventListener('DOMContentLoaded', function() {
+             // Optionnel : Rendre le LaTeX statique si présent dans la page initiale
              try {
-                 // Utilise document.body pour scanner toute la page initiale
-                 renderMathInElement(document.body, katexOptions);
+                 if (window.renderMathInElement) {
+                     renderMathInElement(document.body, katexOptions);
+                 }
              } catch (e) {
-                 console.error('Erreur KaTeX initiale:', e)
+                 console.error('Erreur KaTeX initiale sur le corps de la page:', e)
              }
         });
     </script>