Update templates/index.html

templates/index.html

@@ -62,8 +62,26 @@
             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 {
+            text-align: center;
+        }
+        .content-box .feature-list h2 {
             text-align: center;
         }
+         .content-box .upload-section {
+             text-align: center;
+         }
+         .content-box .upgrade-section {
+             text-align: center;
+             margin-top: 30px;
+             padding: 20px;
+             border-top: 1px solid #ddd;
+         }
+
 
         h1 {
             color: var(--primary-color);
@@ -73,7 +91,8 @@
         .feature-list {
             list-style-type: none;
             padding: 0;
-            margin: 30px 0;
+            margin: 30px auto; /* Centrer la liste elle-même */
+            max-width: 600px; /* Limiter la largeur pour meilleure lisibilité */
             text-align: left;
         }
 
@@ -88,6 +107,11 @@
             color: var(--accent-color);
             margin-right: 10px;
             font-size: 1.2rem;
+            width: 20px; /* Donner une largeur fixe pour l'alignement */
+            text-align: center;
+        }
+        .feature-list .fa-times-circle {
+            color: #aaa; /* Griser l'icône aussi */
         }
 
         .cta-button {
@@ -99,7 +123,7 @@
             text-decoration: none;
             font-weight: bold;
             transition: all 0.3s ease;
-            margin: 20px 10px;
+            margin: 10px; /* Ajustement marge */
             border: none;
             cursor: pointer;
         }
@@ -110,11 +134,6 @@
             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
         }
 
-        .upgrade-section {
-            margin-top: 30px;
-            padding: 20px;
-            border-top: 1px solid #ddd;
-        }
 
         footer {
             text-align: center;
@@ -123,67 +142,86 @@
             font-size: 0.9rem;
         }
 
+        #solutionOutput {
+            margin-top: 30px;
+            text-align: left;
+            display: none; /* Initialement caché */
+        }
+        #solutionOutput h3 {
+             text-align: center; /* Centrer le titre "Solution :" */
+             color: var(--primary-color);
+             margin-bottom: 20px;
+        }
+
         #solution {
-            background: #fff;
+            background: transparent; /* Le fond sera sur les divs enfants */
             padding: 0;
             border-radius: 8px;
             text-align: left;
             line-height: 1.8;
             font-size: 16px;
-            background-color: transparent;
             box-shadow: var(--box-shadow);
-            overflow: hidden;
+            overflow: hidden; /* Pour que les border-radius s'appliquent aux enfants */
+            margin-top: 20px; /* Espace entre indicateur et contenu */
         }
 
-        #solution > div {
+        /* Style de base pour tous les blocs dans #solution */
+        #solution > div, #solution > section { /* Accepter div ou section */
             padding: 20px;
             margin: 0;
-            border-radius: 0;
+            border-radius: 0; /* Sera ajusté pour first/last child */
             overflow-x: auto;
-            background-color: #f9f9f9;
-            border-left: 4px solid var(--primary-color);
-            border-bottom: 1px solid #eee;
+            background-color: #f9f9f9; /* Fond par défaut */
+            border-bottom: 1px solid #eee; /* Séparateur par défaut */
+             /* Ajout pour débordement horizontal */
+            word-wrap: break-word; /* Pour casser les mots longs si nécessaire */
+            overflow-wrap: break-word; /* Standard CSS */
         }
 
         .code-section {
-            background-color: transparent !important;
+            background-color: transparent !important; /* Le fond est géré par header/content */
             padding: 0 !important;
-            border-left: none !important;
-            border-bottom: none !important;
+            border-bottom: none !important; /* Le content aura la bordure */
         }
 
         .output-section {
             background-color: var(--output-bg) !important;
-            border-left: none !important;
+            border-left: 4px solid var(--secondary-color); /* Distinction visuelle */
+            padding-left: calc(20px - 4px);
         }
 
         .step-section {
+            background-color: #ffffff; /* Fond blanc pour les étapes normales */
             border-left: 4px solid var(--primary-color);
-            padding-left: calc(20px - 4px);
-            background-color: #f9f9f9;
+            padding-left: calc(20px - 4px); /* Compenser la bordure */
             font-size: 16px;
             line-height: 1.8;
         }
 
-        /* Amélioration du rendu LaTeX avec KaTeX */
+        /* --- Amélioration du rendu KaTeX --- */
         .step-section .katex {
-            font-size: 1.1em;
-            line-height: 1.2;
+            font-size: 1.1em; /* Légèrement plus grand que le texte normal */
+            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 */
         }
 
         .step-section .katex-display {
-            margin: 1em 0;
-            display: block;
-            text-align: center;
-        }
-
+            display: block; /* Comportement block pour $$...$$ */
+            text-align: center; /* Centrer les équations display */
+            margin: 1em 0; /* Espacement vertical */
+            overflow-x: auto; /* Permet le scroll horizontal si équation trop large */
+            overflow-y: hidden;
+            padding: 0.5em 0; /* Un peu d'espace interne */
+        }
+        /* Ceci est le conteneur interne créé par KaTeX */
         .step-section .katex-display > .katex {
-            display: inline-block;
-            text-align: center;
-            max-width: 100%;
+             display: inline-block; /* Permet le centrage et évite la pleine largeur */
+             text-align: initial; /* Texte de l'équation aligné à gauche par défaut */
+             max-width: 100%;
         }
+        /* --- Fin Amélioration KaTeX --- */
 
         .code-header {
             background-color: #343a40;
@@ -194,8 +232,6 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
         }
 
         .code-content {
@@ -207,94 +243,41 @@
             font-family: 'Courier New', monospace;
             font-size: 14px;
             line-height: 1.5;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        /* Règles pour les coins arrondis */
-        #solution > div:first-child {
-            border-top-left-radius: 8px;
-            border-top-right-radius: 8px;
+            border-bottom: 1px solid #444; /* Bordure sous le code */
         }
 
+        /* --- Règles pour les coins arrondis --- */
+        #solution > *:first-child,
         #solution > .code-section:first-child .code-header {
             border-top-left-radius: 8px;
             border-top-right-radius: 8px;
         }
 
-        #solution > .output-section:first-child {
-            border-top-left-radius: 8px;
-            border-top-right-radius: 8px;
-        }
-
-        #solution > div:last-child {
-            border-bottom-left-radius: 8px;
-            border-bottom-right-radius: 8px;
-            border-bottom: none;
-        }
-
+        #solution > *:last-child,
         #solution > .code-section:last-child .code-content {
             border-bottom-left-radius: 8px;
             border-bottom-right-radius: 8px;
+            border-bottom: none; /* Pas de bordure en bas du dernier élément */
         }
 
-        #solution > .output-section:last-child {
-            border-bottom-left-radius: 8px;
-            border-bottom-right-radius: 8px;
-            border-bottom: none;
-        }
-
-        #solution > div:only-child {
-            border-radius: 8px;
-            border-bottom: none;
-        }
-
-        #solution > .code-section:only-child .code-header {
-            border-top-left-radius: 8px;
-            border-top-right-radius: 8px;
-        }
-
-        #solution > .code-section:only-child .code-content {
-            border-bottom-left-radius: 8px;
-            border-bottom-right-radius: 8px;
-        }
-
-        #solution > .output-section:only-child {
+        #solution > *:only-child {
             border-radius: 8px;
-            border-bottom: none;
-        }
-
-        #solution > div:not(:last-child) {
-            border-bottom: 1px solid #eee;
-        }
-
-        #solution > .code-section {
-            border-bottom: none;
-        }
-
-        #solution > .output-section:not(:last-child) {
-            border-bottom: 1px solid #ddd;
         }
 
-        /* Amélioration du rendu Markdown */
+        /* --- Amélioration du rendu Markdown --- */
         .step-section ul, .step-section ol {
-            display: block;
             margin-block-start: 1em;
             margin-block-end: 1em;
-            padding-inline-start: 30px;
-            margin-inline-start: 0px;
-            margin-inline-end: 0px;
+            padding-inline-start: 30px; /* Indentation standard */
         }
 
         .step-section ul li, .step-section ol li {
-            display: list-item;
             margin-bottom: 0.5em;
         }
-
         /* Meilleur espacement pour les listes imbriquées */
-        .step-section ul ul, 
-        .step-section ol ol, 
-        .step-section ul ol, 
+        .step-section ul ul,
+        .step-section ol ol,
+        .step-section ul ol,
         .step-section ol ul {
             margin-block-start: 0.5em;
             margin-block-end: 0.5em;
@@ -303,56 +286,65 @@
         /* Amélioration des tables en Markdown */
         .step-section table {
             border-collapse: collapse;
-            width: 100%;
-            margin: 1em 0;
+            width: auto; /* Ne prend que la largeur nécessaire */
+            max-width: 100%; /* Empêche le débordement */
+            margin: 1em auto; /* Centrer les tableaux */
+            border: 1px solid #ccc; /* Bordure extérieure */
         }
-
-        .step-section th, 
+        .step-section th,
         .step-section td {
             border: 1px solid #ddd;
             padding: 8px 12px;
             text-align: left;
         }
-
         .step-section th {
             background-color: #f2f2f2;
             font-weight: bold;
         }
-
         .step-section tr:nth-child(even) {
             background-color: #f9f9f9;
         }
 
-        /* Meilleur rendu des blocs de code en Markdown */
+        /* Meilleur rendu des blocs de code en Markdown (pas Python) */
         .step-section pre {
-            background-color: #f5f5f5;
+            background-color: #f0f0f0; /* Légèrement différent du fond Python */
             border-radius: 4px;
             padding: 12px;
             overflow-x: auto;
             margin: 1em 0;
+            border: 1px solid #ddd;
         }
-
-        .step-section code {
+        .step-section pre code { /* Style pour le code dans pre */
+            background-color: transparent; /* Le fond est sur pre */
+            padding: 0;
+            border-radius: 0;
+            font-size: 0.95em; /* Un peu plus petit */
+        }
+         /* Style pour `code` inline */
+        .step-section code:not(pre *) {
             font-family: 'Courier New', Courier, monospace;
-            background-color: #f5f5f5;
-            padding: 2px 4px;
+            background-color: #e8e8e8;
+            padding: 2px 5px;
             border-radius: 3px;
             font-size: 0.9em;
+            color: #c7254e; /* Couleur pour code inline */
         }
 
         .thinking-indicator, .executing-indicator, .answering-indicator {
             display: flex;
             align-items: center;
+            justify-content: center; /* Centrer le contenu */
             padding: 12px 15px;
-            margin: 10px 0;
+            margin: 0 auto 20px auto; /* Centrer l'indicateur lui-même */
             border-radius: 8px;
             font-size: 0.95rem;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            max-width: 400px; /* Limiter la largeur */
         }
 
-        .thinking-indicator { background-color: #e3f2fd; color: #1565c0; }
-        .executing-indicator { background-color: #ede7f6; color: #5e35b1; }
-        .answering-indicator { background-color: #e8f5e9; color: #2e7d32; }
+        .thinking-indicator { background-color: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
+        .executing-indicator { background-color: #ede7f6; color: #5e35b1; border: 1px solid #d1c4e9; }
+        .answering-indicator { background-color: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
 
         .indicator-icon {
             margin-right: 12px;
@@ -361,36 +353,49 @@
         }
 
         @keyframes pulse {
-            0% { opacity: 0.6; }
-            50% { opacity: 1; }
-            100% { opacity: 0.6; }
+            0% { opacity: 0.6; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.05); }
+            100% { opacity: 0.6; transform: scale(1); }
         }
 
         /* Améliorations supplémentaires pour Markdown */
         .step-section blockquote {
-            border-left: 4px solid #ddd;
+            border-left: 4px solid #ccc; /* Gris standard */
             margin: 1em 0;
-            padding: 0.5em 10px;
-            color: #666;
-            font-style: italic;
+            padding: 0.5em 15px;
+            color: #555;
             background-color: #f9f9f9;
         }
+        .step-section blockquote p:last-child {
+            margin-bottom: 0; /* Éviter double marge dans blockquote */
+        }
 
-        .step-section h1, 
-        .step-section h2, 
-        .step-section h3, 
-        .step-section h4, 
-        .step-section h5, 
+        .step-section hr {
+            border: none;
+            border-top: 1px solid #eee;
+            margin: 2em 0;
+        }
+
+        .step-section h1,
+        .step-section h2,
+        .step-section h3,
+        .step-section h4,
+        .step-section h5,
         .step-section h6 {
             margin-top: 1.5em;
-            margin-bottom: 0.5em;
+            margin-bottom: 0.8em;
             color: var(--primary-color);
+            font-weight: 600; /* Un peu plus gras */
+            padding-bottom: 0.2em;
+            border-bottom: 1px solid #eee; /* Souligner légèrement les titres */
         }
-
-        .step-section h1 { font-size: 1.8em; }
+        .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; }
+
     </style>
 </head>
 <body>
@@ -417,16 +422,17 @@
             </div>
 
             <div class="upload-section">
+                 <h2>Soumettez votre problème</h2>
                 <form id="imageForm" enctype="multipart/form-data">
                     <input type="file" id="imageInput" name="image" accept="image/*" style="display: none;">
                     <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>
                 </form>
 
-                <p id="uploadStatus"></p>
-                <div id="imagePreview" style="display: none; margin: 20px auto; max-width: 500px;">
-                    <img id="preview" style="width: 100%; border-radius: 8px; box-shadow: var(--box-shadow);">
+                <div id="imagePreview" style="display: none; margin: 20px auto; max-width: 400px; max-height: 300px; overflow: hidden; border: 1px solid #ddd; border-radius: 8px;">
+                    <img id="preview" style="display: block; width: 100%; height: auto; border-radius: 8px;">
                 </div>
 
                 <button id="solveButton" class="cta-button" style="display: none; background-color: var(--secondary-color);">
@@ -434,15 +440,16 @@
                 </button>
             </div>
 
-            <div id="solutionOutput" style="margin-top: 30px; text-align: left; display: none;">
+             <!-- Section pour afficher la solution -->
+            <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>
                 </div>
-                <!-- Container for the dynamically added content blocks -->
+                <!-- Container pour les blocs de contenu dynamiques -->
                 <div id="solution">
-                    <!-- Content will be added here by JS -->
+                    <!-- Le contenu (steps, code, output) sera ajouté ici par JS -->
                 </div>
             </div>
 
@@ -461,34 +468,44 @@
     <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 (remplacement de MathJax pour de meilleures performances) -->
+    <!-- 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>
 
     <script>
         // Configuration de marked pour le rendu Markdown
         marked.setOptions({
-            gfm: true, // GitHub Flavored Markdown
-            breaks: true, // Convertit les retours à la ligne en <br>
-            smartLists: true, // Listes intelligentes
-            smartypants: true, // Typographie intelligente (guillemets, tirets, etc.)
-            xhtml: true // XHTML conforme
+            gfm: true,
+            breaks: true, // Convertit les simples retours à la ligne en <br> (peut être désactivé si non souhaité)
+            smartLists: true,
+            smartypants: true,
+            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)
+                const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                return hljs.highlight(code, { language }).value;
+            }
         });
 
-        // Fonction pour rendre le LaTeX avec KaTeX dans un élément
-        function renderMathInElement(element) {
-            renderMathInElement(element, {
-                delimiters: [
-                    {left: '$$', right: '$$', display: true},
-                    {left: '$', right: '$', display: false},
-                    {left: '\\(', right: '\\)', display: false},
-                    {left: '\\[', right: '\\]', display: true}
-                ],
-                throwOnError: false,
-                trust: true,
-                strict: false
-            });
-        }
+        // Configuration de KaTeX (options globales)
+        const katexOptions = {
+            delimiters: [
+                {left: '$$', right: '$$', display: true},
+                {left: '$', right: '$', display: false},
+                {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
+             strict: (errorCode) => {
+                 // Permet d'ignorer certaines erreurs "mineures" si nécessaire
+                 if (errorCode === 'unicodeTextInMathMode') {
+                     return 'ignore'; // Ou 'warn'
+                 }
+                 return 'warn'; // Affiche les erreurs dans la console sans planter
+             }
+        };
 
         document.getElementById('imageInput').addEventListener('change', function(event) {
             const file = event.target.files[0];
@@ -499,6 +516,9 @@
                     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 = '';
                 }
                 reader.readAsDataURL(file);
             }
@@ -506,23 +526,24 @@
 
         document.getElementById('solveButton').addEventListener('click', function() {
             const formData = new FormData(document.getElementById('imageForm'));
-            const solutionOutput = document.getElementById('solutionOutput');
+            const solutionOutputDiv = document.getElementById('solutionOutput');
             const loadingIndicator = document.getElementById('loadingIndicator');
             const solutionContainer = document.getElementById('solution');
 
-            solutionOutput.style.display = 'block';
-            loadingIndicator.style.display = 'flex';
+            solutionOutputDiv.style.display = 'block'; // Afficher la section solution
+            loadingIndicator.style.display = 'flex'; // Afficher l'indicateur de chargement
             solutionContainer.innerHTML = ''; // Effacer la solution précédente
+             // Scroller pour rendre l'indicateur visible
+            loadingIndicator.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
-            fetch('/solved', { // En supposant que l'endpoint Flask est '/solved'
+            fetch('/solved', { // Endpoint Flask
                 method: 'POST',
                 body: formData
             })
             .then(response => {
                 if (!response.ok) {
-                    // Tenter de lire le message d'erreur du corps si disponible
                     return response.text().then(text => {
-                        throw new Error(`Erreur serveur: ${response.status} ${response.statusText}\n${text}`);
+                        throw new Error(`Erreur serveur: ${response.status} ${response.statusText}\n${text || '(Aucun détail)'}`);
                     });
                 }
                 const reader = response.body.getReader();
@@ -532,161 +553,145 @@
                 function processStream({ done, value }) {
                     if (done) {
                         loadingIndicator.style.display = 'none';
-                        // Forcer le retraitement du LaTeX lorsque terminé pour la solution entière
+                        // Passe finale de rendu KaTeX pour être sûr
                         try {
-                            renderMathInElement(solutionContainer);
+                            renderMathInElement(solutionContainer, katexOptions);
                         } catch (e) {
-                            console.error('Erreur de rendu LaTeX final:', e);
+                            console.error('Erreur de rendu KaTeX final:', e);
                         }
                         return;
                     }
 
                     buffer += decoder.decode(value, { stream: true });
-                    // Séparer par double saut de ligne pour les messages SSE, mais garder le dernier morceau incomplet
-                    const messages = buffer.split(/\r?\n\r?\n/);
-                    buffer = messages.pop(); // Stocker le dernier morceau potentiellement incomplet
+                    const messages = buffer.split(/\r?\n\r?\n/); // Sépare les messages SSE
+                    buffer = messages.pop(); // Garde le dernier morceau potentiellement incomplet
 
-                    for (const message of messages) {
-                        // Traiter uniquement les lignes commençant par 'data: ' pour SSE
+                    messages.forEach(message => {
                         if (message.startsWith('data: ')) {
                             try {
-                                const data = JSON.parse(message.substr(6)); // Extraire JSON après 'data: '
+                                const data = JSON.parse(message.substring(6)); // Extrait le JSON
 
-                                // Gérer les mises à jour de mode
+                                // --- 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: 'Rédaction...', class: 'answering-indicator' },
-                                        executing_code: { icon: 'fa-code', text: 'Exécution...', class: 'executing-indicator' },
-                                        code_result: { icon: 'fa-terminal', text: 'Résultats...', class: 'executing-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];
-                                    if (modeInfo) {
-                                        loadingIndicator.className = modeInfo.class;
-                                        loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`;
-                                        loadingIndicator.style.display = 'flex';
-                                    } else {
-                                        loadingIndicator.className = 'thinking-indicator';
-                                        loadingIndicator.innerHTML = `<i class="fas fa-sync-alt indicator-icon fa-spin"></i><span>Traitement...</span>`;
-                                        loadingIndicator.style.display = 'flex';
-                                    }
+                                    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';
                                 }
 
-                                // Gérer les blocs de contenu
+                                // --- 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 du serveur
+                                    tempDiv.innerHTML = content; // Analyser le fragment HTML reçu
 
                                     const codeSection = tempDiv.querySelector('.code-section');
                                     const outputSection = tempDiv.querySelector('.output-section');
+                                    const stepSection = tempDiv.querySelector('.step-section'); // Peut être directement le contenu
 
                                     if (codeSection) {
+                                        // C'est une section de code Python dédiée
                                         solutionContainer.appendChild(codeSection);
-                                        // Surligner le code dans la section ajoutée
                                         codeSection.querySelectorAll('pre code').forEach((block) => {
-                                            hljs.highlightElement(block);
+                                            hljs.highlightElement(block); // Appliquer highlight.js
                                         });
                                     } else if (outputSection) {
+                                        // C'est une section de sortie de code
                                         solutionContainer.appendChild(outputSection);
                                     } else {
-                                        // Traiter la section d'étape de texte/LaTeX normale avec Markdown amélioré
+                                        // C'est une section d'étape (texte, Markdown, LaTeX)
+                                        // Créer un conteneur propre pour cette étape
                                         const stepDiv = document.createElement('div');
-                                        stepDiv.className = 'step-section';
-                                        
-                                        // Traitement Markdown avancé avec marked.js
-                                        // Conversion du contenu en Markdown valide pour les listes, les tableaux, etc.
-                                        const markdownContent = content
-                                            // Préservation des délimiteurs LaTeX
-                                            .replace(/\$\$([\s\S]*?)\$\$/g, (match) => {
-                                                return match.replace(/\n/g, '\\n');
-                                            })
-                                            .replace(/\$([\s\S]*?)\$/g, (match) => {
-                                                return match.replace(/\n/g, '\\n');
-                                            });
-                                        
-                                        try {
-                                            // Conversion Markdown vers HTML
-                                            const htmlContent = marked.parse(markdownContent);
-                                            
-                                            // Restauration des sauts de ligne dans les formules LaTeX
-                                            const fixedHtmlContent = htmlContent
-                                                .replace(/\$\$([\s\S]*?)\$\$/g, (match) => {
-                                                    return match.replace(/\\n/g, '\n');
-                                                })
-                                                .replace(/\$([\s\S]*?)\$/g, (match) => {
-                                                    return match.replace(/\\n/g, '\n');
-                                                });
-                                            
-                                            stepDiv.innerHTML = fixedHtmlContent;
-                                        } catch (e) {
-                                            console.error('Erreur de traitement Markdown:', e);
-                                            stepDiv.innerHTML = content; // Fallback en cas d'erreur
-                                        }
-                                        
-                                        solutionContainer.appendChild(stepDiv);
-                                        
-                                        // Rendu LaTeX avec KaTeX dans cette section spécifique
+                                        stepDiv.className = 'step-section'; // Appliquer la classe pour le style
+
                                         try {
-                                            renderMathInElement(stepDiv);
+                                            // 1. Convertir le Markdown en HTML en utilisant marked.js
+                                            const htmlContent = marked.parse(content);
+                                            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);
+
                                         } catch (e) {
-                                            console.error('Erreur de rendu LaTeX:', 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);
                                         }
                                     }
                                 }
 
-                                // Gérer les messages d'erreur
+                                // --- Gérer les erreurs spécifiques ---
                                 if (data.error) {
                                     const errorDiv = document.createElement('div');
-                                    errorDiv.className = 'step-section';
+                                    // 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 = '#ffeeee';
+                                    errorDiv.style.backgroundColor = '#fff0f0';
                                     errorDiv.style.borderColor = 'red';
-                                    errorDiv.textContent = `Erreur: ${data.error}`;
+                                    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';
                                 }
+
                             } catch (e) {
-                                console.error('Erreur d\'analyse JSON ou de traitement du message:', e, message);
+                                console.error('Erreur analyse JSON ou traitement message SSE:', e, message);
                                 const errorDiv = document.createElement('div');
-                                errorDiv.className = 'step-section';
+                                errorDiv.className = 'step-section error-message';
                                 errorDiv.style.color = 'orange';
-                                errorDiv.textContent = `Erreur traitement message: ${message.substring(0, 100)}...`;
+                                errorDiv.style.backgroundColor = '#fff8e1';
+                                errorDiv.style.borderColor = 'orange';
+                                errorDiv.textContent = `Erreur de traitement du message reçu: ${message.substring(0, 150)}...`;
                                 solutionContainer.appendChild(errorDiv);
                                 loadingIndicator.style.display = 'none';
                             }
                         }
-                    }
+                    });
+
+                    // Défiler vers le bas pour voir le nouveau contenu au fur et à mesure
+                     solutionContainer.lastChild?.scrollIntoView({ behavior: 'smooth', block: 'end' });
 
-                    // Défiler vers le bas du conteneur de solution à mesure que du nouveau contenu arrive
-                    solutionOutput.scrollTop = solutionOutput.scrollHeight;
 
                     // Continuer à lire le flux
                     return reader.read().then(processStream);
                 }
 
-                // Commencer à traiter le flux
-                return reader.read().then(processStream);
+                // Démarrer le traitement du flux
+                reader.read().then(processStream);
             })
             .catch(error => {
-                // Gérer les erreurs pendant le fetch ou de la vérification de réponse initiale
+                console.error('Erreur Fetch ou connexion:', error);
                 const errorDiv = document.createElement('div');
-                errorDiv.className = 'step-section';
+                errorDiv.className = 'step-section error-message';
                 errorDiv.style.color = 'red';
-                errorDiv.style.backgroundColor = '#ffeeee';
+                errorDiv.style.backgroundColor = '#fff0f0';
                 errorDiv.style.borderColor = 'red';
-                errorDiv.textContent = `Erreur de connexion ou du serveur: ${error}`;
+                errorDiv.innerHTML = `<strong>Erreur de connexion ou serveur :</strong> ${error.message || error}`;
                 solutionContainer.appendChild(errorDiv);
                 loadingIndicator.style.display = 'none';
-                console.error('Erreur fetch:', error);
+                 errorDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
             });
         });
 
-        // Auto-render KaTeX function
+        // Premier rendu KaTeX au chargement de la page (pour tout contenu statique éventuel)
         document.addEventListener('DOMContentLoaded', function() {
-            document.querySelectorAll('.step-section').forEach(function(element) {
-                renderMathInElement(element);
-            });
+             try {
+                 // Utilise document.body pour scanner toute la page initiale
+                 renderMathInElement(document.body, katexOptions);
+             } catch (e) {
+                 console.error('Erreur KaTeX initiale:', e)
+             }
         });
     </script>
 </body>