Update templates/index.html

templates/index.html

@@ -6,11 +6,12 @@
     <title>Math Solver - Version Gratuite</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css" rel="stylesheet">
-    <!-- Ajout de Marked.js pour le traitement Markdown -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
+    <!-- PAS BESOIN de marked.js pour cette approche -->
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script> -->
     <!-- CSS pour KaTeX -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
     <style>
+        /* --- Styles CSS (inchangés par rapport à la version précédente) --- */
         :root {
             --primary-color: #4a6fa5;
             --secondary-color: #166088;
@@ -62,20 +63,24 @@
             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 */
         }
 
-        .content-box > h1, .content-box > p:first-of-type { /* Cibler le premier paragraphe après h1 */
+        /* Ajustement pour le contenu généré */
+        .content-box > h1, .content-box > p:not(#uploadStatus) {
             text-align: center;
         }
-        .content-box .feature-list h2 {
-            text-align: center;
-        }
-         .content-box .upload-section {
+         .content-box .feature-list {
+             text-align: left; /* Garder le texte des features aligné à gauche */
+             max-width: 600px;
+             margin: 30px auto;
+         }
+         .content-box .feature-list h2 {
              text-align: center;
          }
-         .content-box .upload-section h2 {
-             color: var(--primary-color);
-             margin-bottom: 20px;
+         .content-box .upload-section {
+             text-align: center;
+             margin-top: 30px; /* Ajouter de l'espace avant */
          }
          .content-box .upgrade-section {
              text-align: center;
@@ -93,9 +98,6 @@
         .feature-list {
             list-style-type: none;
             padding: 0;
-            margin: 30px auto; /* Centrer la liste elle-même */
-            max-width: 600px; /* Limiter la largeur pour meilleure lisibilité */
-            text-align: left;
         }
 
         .feature-list li {
@@ -128,7 +130,6 @@
             margin: 10px; /* Ajustement marge */
             border: none;
             cursor: pointer;
-            font-size: 1rem; /* Taille de police cohérente */
         }
 
         .cta-button:hover {
@@ -169,11 +170,12 @@
         }
 
         /* Style de base pour tous les blocs dans #solution */
-        #solution > div, #solution > section { /* Accepter div ou section */
+         /* Utiliser 'section' pour les blocs pour plus de sémantique */
+        #solution > section {
             padding: 20px;
             margin: 0;
             border-radius: 0; /* Sera ajusté pour first/last child */
-            overflow-x: auto;
+            overflow-x: auto; /* Permet le scroll horizontal si contenu trop large */
             background-color: #f9f9f9; /* Fond par défaut */
             border-bottom: 1px solid #eee; /* Séparateur par défaut */
              /* Ajout pour débordement horizontal */
@@ -181,7 +183,6 @@
             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;
@@ -192,71 +193,51 @@
             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: 1rem; /* Taille de base */
+            font-size: 16px;
             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 {
             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;
-            /* Eviter le saut de ligne au milieu d'une formule inline si possible */
-            white-space: nowrap;
+            /* text-rendering: optimizeLegibility; */ /* Peut améliorer mais coûteux */
+             color: #333; /* Assurer la couleur du texte */
+             /* display: inline-block; */ /* Peut causer des problèmes de wrapping */
+             /* white-space: normal; */ /* Assurer le retour à la ligne si nécessaire */
         }
 
         .step-section .katex-display {
             display: block; /* Comportement block pour $$...$$ */
             text-align: center; /* Centrer les équations display */
-            margin: 1.2em 0; /* Espacement vertical un peu plus grand */
+            margin: 1em 0; /* Espacement vertical */
             overflow-x: auto; /* Permet le scroll horizontal si équation trop large */
             overflow-y: hidden;
-            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 */
+            padding: 0.5em 0.2em; /* Un peu d'espace interne, même horizontal */
+            background-color: #fdfdfd; /* Fond très légèrement différent pour les blocs */
+            border-radius: 4px;
         }
         /* 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 */
              max-width: 100%;
+             /* white-space: nowrap; */ /* Empêche le retour à la ligne DANS l'équation, utiliser scroll */
         }
         /* --- Fin Amélioration KaTeX --- */
 
-        /* --- Sections de Code Dédiées (Python) --- */
         .code-header {
             background-color: #343a40;
             color: white;
             padding: 10px 15px;
-            font-size: 0.9em; /* Plus petit */
+            font-size: 14px;
             font-family: 'Courier New', monospace;
             display: flex;
             justify-content: space-between;
@@ -270,132 +251,30 @@
             color: #e6e6e6;
             overflow-x: auto;
             font-family: 'Courier New', monospace;
-            font-size: 0.9em; /* Plus petit */
+            font-size: 14px;
             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 et bordures --- */
-        #solution > *:first-child,
-        #solution > .code-section:first-child .code-header {
+         /* --- Règles pour les coins arrondis (simplifié) --- */
+        #solution > section:first-child,
+        #solution > section.code-section:first-child .code-header {
             border-top-left-radius: 8px;
             border-top-right-radius: 8px;
         }
 
-        #solution > *:last-child,
-        #solution > .code-section:last-child .code-content {
+        #solution > section:last-child,
+        #solution > section.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 > *:only-child {
+        #solution > section: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;
-        }
-        .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;
-        }
 
-        /* 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: 100%; /* Prend la largeur du wrapper */
-            min-width: 400px; /* Largeur minimale pour éviter écrasement */
-            border: 1px solid #ccc; /* Bordure extérieure */
-        }
-        .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;
-        }
-
-        /* Rendu des blocs de code en Markdown (pas Python dédié) */
-        .step-section pre {
-            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;
-            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: 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 style "rouge" pour code inline */
-            border: 1px solid #e8e8e8;
-            word-break: break-word; /* Casser si trop long */
-        }
-
-        /* --- Indicateurs de statut --- */
+        /* --- Indicateurs --- */
         .thinking-indicator, .executing-indicator, .answering-indicator {
             display: flex;
             align-items: center;
@@ -407,7 +286,6 @@
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
             max-width: 400px; /* Limiter la largeur */
         }
-
         .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; }
@@ -417,165 +295,114 @@
             animation: pulse 1.5s infinite ease-in-out;
             font-size: 1.1rem;
         }
-        /* --- Fin Indicateurs --- */
-
         @keyframes pulse {
             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 #ccc; /* Gris standard */
-            margin: 1.5em 0; /* Plus de marge verticale */
-            padding: 0.8em 15px; /* Plus de padding */
-            color: #555;
-            background-color: #f9f9f9;
+        /* --- Classe pour les erreurs --- */
+        .error-message {
+             background-color: #fff0f0 !important;
+             color: red !important;
+             border-color: red !important;
+             font-weight: bold;
         }
-        .step-section blockquote p:last-child {
-            margin-bottom: 0; /* Éviter double marge dans blockquote */
+        .error-message code { /* Code dans les messages d'erreur */
+            background-color: #fdd;
+            color: #c00;
+            padding: 2px 4px;
+            border-radius: 3px;
+            font-family: monospace;
         }
 
-        .step-section hr {
-            border: none;
-            border-top: 2px solid #eee; /* Ligne plus visible */
-            margin: 2em 0;
-        }
-
-        .step-section h1,
-        .step-section h2,
-        .step-section h3,
-        .step-section h4,
-        .step-section h5,
-        .step-section h6 {
-            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.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; color: var(--secondary-color); } /* Couleur différente pour H5/H6 */
-        .step-section h6 { font-size: 1.0em; color: #666; font-style: italic;}
+        /* Styles spécifiques pour le contenu sans Markdown (peut nécessiter ajustement) */
+        .step-section p { /* Ajouter marge basique pour les paragraphes si pas de Markdown */
+            margin-bottom: 1em;
+        }
+        .step-section p:last-child {
+            margin-bottom: 0;
+        }
 
     </style>
 </head>
 <body>
     <div class="container">
         <header>
-            <div class="logo">Math Solver</div>
-            <div class="subtitle">La solution intelligente pour vos problèmes mathématiques</div>
+             <div class="logo">Math Solver</div>
+             <div class="subtitle">La solution intelligente pour vos problèmes mathématiques</div>
         </header>
 
         <div class="content-box">
-            <h1>Version Gratuite</h1>
-            <p>Vous utilisez actuellement la version gratuite de Math Solver qui vous permet de résoudre 3 problèmes par jour.</p>
-
-            <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</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 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>
-                </ul>
-            </div>
-
-            <div class="upload-section">
+             <h1>Version Gratuite</h1>
+             <p>Vous utilisez actuellement la version gratuite de Math Solver qui vous permet de résoudre 3 problèmes par jour.</p>
+
+             <div class="feature-list">
+                 <h2>Fonctionnalités disponibles :</h2>
+                 <!-- Liste des fonctionnalités -->
+                 <ul>
+                     <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> 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-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>
+                 </ul>
+             </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>
+                 <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; min-height: 1.2em;"></p>
-                </form>
+                 </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;">
-                    <img id="preview" style="display: block; width: 100%; height: auto; border-radius: 8px;">
-                </div>
+                 <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);">
-                    <i class="fas fa-calculator"></i> Résoudre ce problème
-                </button>
-            </div>
+                 <button id="solveButton" class="cta-button" style="display: none; background-color: var(--secondary-color);">
+                     <i class="fas fa-calculator"></i> Résoudre ce problème
+                 </button>
+             </div>
 
              <!-- Section pour afficher la solution -->
-            <div id="solutionOutput"> <!-- Initialement caché via CSS -->
-                <h3>Solution :</h3>
-                <div id="loadingIndicator" class="thinking-indicator" style="display: none;">
-                    <!-- Contenu mis à jour par JS -->
-                </div>
-                <!-- Container pour les blocs de contenu dynamiques -->
-                <div id="solution">
-                    <!-- Le contenu (steps, code, output) sera ajouté ici par JS -->
-                </div>
-            </div>
-
-            <div class="upgrade-section">
-                <h2>Besoin de plus de puissance ?</h2>
-                <p>Passez à la version Pro pour des fonctionnalités avancées et des résolutions illimitées.</p>
-                <a href="#" class="cta-button">Passer à la version Pro</a>
-            </div>
-        </div>
-
-        <footer>
-            <p>© 2025 Math Solver. Tous droits réservés.</p>
-        </footer>
-    </div>
-
-    <!-- JS Libraries -->
+             <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 pour les blocs de contenu dynamiques -->
+                 <div id="solution">
+                     <!-- Le contenu (steps, code, output) sera ajouté ici par JS -->
+                 </div>
+             </div>
+
+             <div class="upgrade-section">
+                 <h2>Besoin de plus de puissance ?</h2>
+                 <p>Passez à la version Pro pour des fonctionnalités avancées et des résolutions illimitées.</p>
+                 <a href="#" class="cta-button">Passer à la version Pro</a>
+             </div>
+         </div>
+
+         <footer>
+             <p>© 2025 Math Solver. Tous droits réservés.</p>
+         </footer>
+     </div>
+
     <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 Marked.js ---
-        marked.setOptions({
-            gfm: true,
-            breaks: false, // Standard GFM: ne pas convertir les simples retours à la ligne en <br>
-            pedantic: false,
-            smartLists: true,
-            smartypants: false, // Désactiver pour éviter interférence avec $
-            xhtml: true,
-            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, 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 KaTeX ---
+        // Configuration de KaTeX (options globales)
         const katexOptions = {
             delimiters: [
                 {left: '$$', right: '$$', display: true},
@@ -583,341 +410,213 @@
                 {left: '\\(', right: '\\)', display: false},
                 {left: '\\[', right: '\\]', display: true}
             ],
-            throwOnError: false, // Ne pas bloquer en cas d'erreur LaTeX mineure
-             strict: (errorCode) => {
-                 // Gérer ou ignorer certains avertissements KaTeX si nécessaire
+            throwOnError: false, // Ne pas bloquer toute la page en cas d'erreur LaTeX
+             strict: (errorCode, errorMsg, token) => {
+                 // Log plus détaillé des erreurs KaTeX pour le débogage
+                 // console.warn(`KaTeX ${errorCode}: ${errorMsg}`, token);
                  if (errorCode === 'unicodeTextInMathMode') {
-                     return 'ignore'; // Ou 'warn'
+                     return 'ignore'; // Permet certains caractères unicode si besoin
                  }
-                 // '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}"
+                 return 'warn'; // Affiche les autres erreurs dans la console sans planter
              },
-             // trust: (context) => context.command === '\\htmlClass' // Activer si besoin de commandes spécifiques
+             // IMPORTANT: Pour autoriser le rendu dans différentes situations
+             // trust: true peut être nécessaire si le contenu vient d'une source
+             // non sûre et utilise des commandes spécifiques, mais essayons sans d'abord.
+             // trust: true,
+             output: 'htmlAndMathml' // Améliore l'accessibilité
         };
 
-        // --- Gestion Upload Image ---
+        // Fonction pour déclencher le rendu KaTeX sur un élément spécifique
+        // En utilisant setTimeout pour s'assurer que le DOM est mis à jour
+        function triggerKatexRender(element) {
+            // Utiliser setTimeout pour décaler légèrement l'exécution
+            setTimeout(() => {
+                try {
+                    if (window.renderMathInElement) {
+                        window.renderMathInElement(element, katexOptions);
+                    } else {
+                        console.error("renderMathInElement n'est pas disponible. Vérifiez le chargement de KaTeX auto-render.");
+                    }
+                } catch (e) {
+                    console.error('Erreur lors du rendu KaTeX sur élément:', e, element);
+                }
+            }, 0); // 0 ms de délai suffit généralement
+        }
+
+
         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) {
-                    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';
+                    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}`;
+                    document.getElementById('solutionOutput').style.display = 'none';
+                    document.getElementById('solution').innerHTML = '';
                 }
                 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
+            solutionOutputDiv.style.display = 'block';
+            loadingIndicator.style.display = 'flex';
+            solutionContainer.innerHTML = '';
             loadingIndicator.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
-            fetch('/solved', { // Endpoint Flask (adapter si nécessaire)
+            fetch('/solved', { // Endpoint Flask
                 method: 'POST',
                 body: formData
             })
             .then(response => {
-                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
+                if (!response.ok) {
+                    return response.text().then(text => {
+                        throw new Error(`Erreur serveur: ${response.status} ${response.statusText}\n${text || '(Aucun détail)'}`);
+                    });
+                }
                 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) {
-                        // 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 {
-                           if (window.renderMathInElement) { // Vérifier si la fonction existe
-                                renderMathInElement(solutionContainer, katexOptions);
-                           }
-                        } catch (e) {
-                            console.error('Erreur de rendu KaTeX final:', e);
-                        }
+                        loadingIndicator.style.display = 'none';
+                        // Passe finale de rendu KaTeX pour être sûr (peut-être redondant mais sûr)
+                        triggerKatexRender(solutionContainer);
                         return;
                     }
 
-                    // Ajouter les nouvelles données au buffer
                     buffer += decoder.decode(value, { stream: true });
+                    const messages = buffer.split(/\r?\n\r?\n/);
+                    buffer = messages.pop();
 
-                    // 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
-
+                    messages.forEach(message => {
                         if (message.startsWith('data: ')) {
                             try {
-                                const data = JSON.parse(message.substring(6)); // Extraire le JSON
+                                const data = JSON.parse(message.substring(6));
 
                                 // --- Gérer les mises à jour de mode ---
-                                if (data.mode && data.mode !== currentMode) {
-                                    currentMode = data.mode;
-                                    updateLoadingIndicator(currentMode);
-                                    loadingIndicator.style.display = 'flex'; // Assurer qu'il est visible
+                                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' },
+                                        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' };
+
+                                    loadingIndicator.className = `${modeInfo.class}`;
+                                    loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`;
+                                    loadingIndicator.style.display = 'flex';
                                 }
 
                                 // --- Gérer les blocs de contenu ---
-                                if (data.content) {
-                                    loadingIndicator.style.display = 'none'; // Cacher l'indicateur dès qu'on reçoit du contenu
-                                    const rawContent = data.content;
+                                if (data.content !== undefined && data.content !== null) { // Vérifier existence et non-nullité
+                                    loadingIndicator.style.display = 'none';
+                                    const content = data.content;
+
+                                    // Créer un élément conteneur générique (section)
+                                    const blockElement = document.createElement('section');
 
-                                    // 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
+                                    // Analyser le fragment HTML reçu pour détecter le type de bloc
                                     const tempDiv = document.createElement('div');
-                                    tempDiv.innerHTML = rawContent; // Parser temporairement pour inspection
+                                    tempDiv.innerHTML = content;
+
                                     const codeSection = tempDiv.querySelector('.code-section');
                                     const outputSection = tempDiv.querySelector('.output-section');
 
-                                    let elementToAppend; // L'élément final à ajouter au DOM
-
                                     if (codeSection) {
-                                        // --- 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é.");
-                                            }
+                                        // C'est une section de code Python dédiée
+                                        // Remplacer le contenu de blockElement par codeSection
+                                        blockElement.outerHTML = codeSection.outerHTML;
+                                        // Il faut récupérer la référence au nouvel élément ajouté
+                                        const addedCodeSection = solutionContainer.appendChild(blockElement.cloneNode(true));
+                                        addedCodeSection.querySelectorAll('pre code').forEach((block) => {
+                                            hljs.highlightElement(block);
                                         });
+                                        // Déclencher KaTeX au cas où il y aurait du LaTeX dans les commentaires du code (?)
+                                        // triggerKatexRender(addedCodeSection); // Probablement pas nécessaire pour le code pur
 
                                     } else if (outputSection) {
-                                        // --- Section Output de Code ---
-                                        elementToAppend = outputSection;
-                                        // Pas de traitement spécial nécessaire ici (styles CSS gèrent l'affichage)
+                                        // C'est une section de sortie de code
+                                        blockElement.outerHTML = outputSection.outerHTML;
+                                        const addedOutputSection = solutionContainer.appendChild(blockElement.cloneNode(true));
+                                        // Déclencher KaTeX si la sortie peut contenir du LaTeX
+                                        triggerKatexRender(addedOutputSection);
 
                                     } else {
-                                        // --- Section d'Étape (Markdown + LaTeX) ---
-                                        const stepDiv = document.createElement('div');
-                                        stepDiv.className = 'step-section';
-                                        elementToAppend = stepDiv;
-
-                                        try {
-                                            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;
-
-                                            // 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/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>`;
-                                        }
+                                        // C'est une section d'étape (texte + LaTeX)
+                                        // **Approche simplifiée : injecter le HTML brut**
+                                        blockElement.className = 'step-section'; // Appliquer la classe pour le style
+                                        blockElement.innerHTML = content; // Injecter directement
+                                        solutionContainer.appendChild(blockElement);
+
+                                        // **Déclencher le rendu KaTeX sur ce bloc spécifique**
+                                        triggerKatexRender(blockElement);
                                     }
+                                }
 
-                                    // --- 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 ---
+                                // --- Gérer les erreurs spécifiques ---
                                 if (data.error) {
-                                    displayError(`Erreur reçue du serveur: ${data.error}`, solutionContainer);
-                                    loadingIndicator.style.display = 'none'; // Cacher l'indicateur en cas d'erreur fatale
+                                    const errorElement = document.createElement('section');
+                                    errorElement.className = 'step-section error-message'; // Utiliser classe d'erreur
+                                    // Utiliser innerHTML pour interpréter d'éventuelles balises simples (gras, etc.)
+                                    // ou juste textContent si l'erreur est toujours du texte brut.
+                                    errorElement.innerHTML = `<strong>Erreur :</strong> ${data.error || 'Une erreur inconnue est survenue.'}`;
+                                    solutionContainer.appendChild(errorElement);
+                                    loadingIndicator.style.display = 'none';
                                 }
 
                             } catch (e) {
                                 console.error('Erreur analyse JSON ou traitement message SSE:', e, message);
-                                displayError(`Erreur interne lors du traitement de la réponse: ${message.substring(0, 150)}...`, solutionContainer);
+                                const errorElement = document.createElement('section');
+                                errorElement.className = 'step-section error-message';
+                                errorElement.style.color = 'orange'; // Erreur de parsing client
+                                errorElement.style.backgroundColor = '#fff8e1';
+                                errorElement.style.borderColor = 'orange';
+                                errorElement.textContent = `Erreur de traitement du message reçu: ${message.substring(0, 150)}... (Voir console pour détails)`;
+                                solutionContainer.appendChild(errorElement);
                                 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: 'nearest' });
 
-                        // Chercher la prochaine limite de message
-                        boundary = buffer.indexOf('\n\n');
-                    } // Fin while boundary
 
                     // Continuer à lire le flux
-                    reader.read().then(processStream);
-                } // Fin processStream
+                    return reader.read().then(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);
-                displayError(`Erreur de communication avec le serveur: ${error.message || error}`, solutionContainer);
-                loadingIndicator.style.display = 'none'; // Cacher l'indicateur
+                const errorElement = document.createElement('section');
+                errorElement.className = 'step-section error-message';
+                errorElement.innerHTML = `<strong>Erreur de connexion ou serveur :</strong> ${error.message || error}`;
+                solutionContainer.appendChild(errorElement);
+                loadingIndicator.style.display = 'none';
+                 errorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
             });
         });
 
-        // --- 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 ---
+        // Premier rendu KaTeX au chargement (pour contenu statique éventuel)
         document.addEventListener('DOMContentLoaded', function() {
-             // Optionnel : Rendre le LaTeX statique si présent dans la page initiale
-             try {
-                 if (window.renderMathInElement) {
-                     renderMathInElement(document.body, katexOptions);
-                 }
-             } catch (e) {
-                 console.error('Erreur KaTeX initiale sur le corps de la page:', e)
-             }
+            // Inutile de le faire sur tout le body si le contenu est dynamique
+            // Mais on peut le laisser au cas où il y aurait du LaTeX statique
+            // triggerKatexRender(document.body);
+            console.log("DOM chargé, KaTeX auto-render prêt.");
         });
     </script>
 </body>