Update templates/histoire.html

templates/histoire.html

@@ -4,27 +4,27 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Histoire et Géographie - Assistant Académique</title>
-  
+
   <!-- Feuilles de style et polices -->
   <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-  
+
   <!-- Scripts et Tailwind -->
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
-  
+
   <style>
     /* Police et réglages de base */
     body {
       font-family: 'Poppins', sans-serif;
-      background-color: #f1f5f9;
+      background-color: #f1f5f9; /* slate-100 */
       scroll-behavior: smooth;
     }
     /* Couleur et dégradé de la navigation et du footer */
     .gradient-bg {
-      background: linear-gradient(120deg, #1a365d 0%, #2563eb 100%);
+      background: linear-gradient(120deg, #1a365d 0%, #2563eb 100%); /* Adjusted colors */
     }
     /* Cartes et transitions */
     .card {
@@ -48,16 +48,24 @@
     }
     .form-input:focus {
       transform: scale(1.01);
-      border-color: #2563eb;
+      border-color: #2563eb; /* blue-600 */
       box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
     }
+    /* Style pour le champ invalide */
+    .form-input.invalid {
+      border-color: #ef4444; /* red-500 */
+    }
+    .form-input.invalid:focus {
+      border-color: #ef4444; /* red-500 */
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3); /* red-500 with opacity */
+    }
     /* Prévisualisation d'images */
     .image-preview {
       max-width: 200px;
       max-height: 200px;
       margin: 10px;
       border: 1px solid #ccc;
-      border-radius: 0.375rem;
+      border-radius: 0.375rem; /* rounded-md */
     }
     /* Style Markdown optimisé */
     .markdown-output {
@@ -71,7 +79,7 @@
       line-height: 1.6;
       font-size: 16px;
     }
-    .markdown-output h1, .markdown-output h2, 
+    .markdown-output h1, .markdown-output h2,
     .markdown-output h3, .markdown-output h4 {
       margin: 1.5em 0 0.5em;
       line-height: 1.3;
@@ -84,6 +92,7 @@
       margin: 0.5em 0;
       line-height: 1.4;
     }
+    /* Responsive Markdown */
     @media (max-width: 768px) {
       .markdown-output { font-size: 15px; }
       .markdown-output p { margin: 0.8em 0; }
@@ -92,28 +101,57 @@
       .markdown-output h2 { font-size: 1.5em; }
       .markdown-output h3 { font-size: 1.3em; }
       .markdown-output h4 { font-size: 1.1em; }
-      .markdown-output pre {
+      .markdown-output pre { /* Styling for code blocks */
         padding: 1em;
         overflow-x: auto;
-        white-space: pre-wrap;
-        word-wrap: break-word;
+        white-space: pre-wrap; /* Allow wrapping */
+        word-wrap: break-word; /* Break long words */
+        background-color: #f3f4f6; /* gray-100 */
+        border-radius: 0.375rem; /* rounded-md */
+      }
+      .markdown-output code { /* Styling for inline code */
+        word-break: break-word; /* Break long words */
+        background-color: #e5e7eb; /* gray-200 */
+        padding: 0.2em 0.4em;
+        border-radius: 0.25rem; /* rounded-sm */
+      }
+      /* Responsive table wrapper */
+      .table-wrapper {
+        overflow-x: auto;
+        width: 100%;
+      }
+      .markdown-output table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 1em 0;
+      }
+      .markdown-output th, .markdown-output td {
+        border: 1px solid #d1d5db; /* gray-300 */
+        padding: 0.5em;
+        text-align: left;
+      }
+      .markdown-output th {
+        background-color: #f3f4f6; /* gray-100 */
       }
-      .markdown-output code { word-break: break-word; }
     }
     /* Bouton Retour en haut */
     #back-to-top {
       position: fixed;
       bottom: 30px;
       right: 30px;
-      background-color: #2563eb;
+      background-color: #2563eb; /* blue-600 */
       color: #fff;
       border-radius: 50%;
-      padding: 0.75rem;
+      padding: 0.75rem; /* Adjusted padding */
       cursor: pointer;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.3s ease, visibility 0.3s ease;
       z-index: 50;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+    #back-to-top:hover {
+      background-color: #1d4ed8; /* blue-700 */
     }
     #back-to-top.show {
       opacity: 1;
@@ -135,7 +173,7 @@
       </div>
     </nav>
   </header>
-  
+
   <!-- Contenu principal -->
   <main role="main" class="container mx-auto p-6">
     <!-- Section d'introduction -->
@@ -145,7 +183,7 @@
         Générez des dissertations structurées et détaillées pour vos devoirs d'histoire et de géographie.
       </p>
     </section>
-    
+
     <!-- Bloc Dissertation d'Histoire Type 1 & 3 -->
     <section class="mb-8" data-aos="fade-up">
       <div class="bg-white rounded-xl shadow-xl p-8 card">
@@ -153,34 +191,35 @@
           <i class="fas fa-landmark text-blue-600 text-2xl mr-3"></i>
           <h2 class="text-2xl font-bold text-gray-800">Dissertation d'Histoire - Type 1 & 3</h2>
         </div>
-        <form id="histoire-form" class="space-y-6" aria-label="Formulaire dissertation histoire">
+        <form id="histoire-form" class="space-y-6" aria-label="Formulaire dissertation histoire" novalidate> <!-- novalidate désactive la validation navigateur par défaut pour laisser JS gérer -->
           <div class="space-y-2">
             <label for="sujet-histoire" class="text-sm font-medium text-gray-700">
-              <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation
+              <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation <span class="text-red-500">*</span>
             </label>
-            <textarea name="sujet-histoire" id="sujet-histoire" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Entrez le sujet de votre dissertation..."></textarea>
+            <textarea name="sujet-histoire" id="sujet-histoire" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" placeholder="Entrez le sujet de votre dissertation..." required aria-describedby="sujet-histoire-error"></textarea>
+            <div id="sujet-histoire-error" class="text-red-600 text-sm mt-1 hidden" role="alert">Le champ sujet est obligatoire.</div>
           </div>
           <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div class="space-y-2">
               <label for="pointt1-histoire" class="text-sm font-medium text-gray-700">
                 <i class="fas fa-list-ol mr-2"></i>Premier point
               </label>
-              <input type="text" name="pointt1-histoire" id="pointt1-histoire" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Premier point...">
+              <input type="text" name="pointt1-histoire" id="pointt1-histoire" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" placeholder="Premier point...">
             </div>
             <div class="space-y-2">
               <label for="point2-histoire" class="text-sm font-medium text-gray-700">
                 <i class="fas fa-list-ol mr-2"></i>Deuxième point
               </label>
-              <input type="text" name="point2-histoire" id="point2-histoire" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Deuxième point...">
+              <input type="text" name="point2-histoire" id="point2-histoire" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" placeholder="Deuxième point...">
             </div>
             <div class="space-y-2">
               <label for="point3-histoire" class="text-sm font-medium text-gray-700">
                 <i class="fas fa-list-ol mr-2"></i>Troisième point
               </label>
-              <input type="text" name="point3-histoire" id="point3-histoire" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Troisième point...">
+              <input type="text" name="point3-histoire" id="point3-histoire" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" placeholder="Troisième point...">
             </div>
           </div>
-          <button type="submit" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-blue-700 transition-colors duration-200">
+          <button type="submit" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-blue-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
             <i class="fas fa-magic mr-2"></i>
             <span>Générer la dissertation</span>
           </button>
@@ -188,7 +227,7 @@
         <div id="histoire-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden" aria-live="polite"></div>
       </div>
     </section>
-    
+
     <!-- Bloc Histoire Type 2 (Images) -->
     <section class="mb-8" data-aos="fade-up">
       <div class="bg-white rounded-xl shadow-xl p-8 card">
@@ -196,21 +235,22 @@
           <i class="fas fa-scroll text-green-600 text-2xl mr-3"></i>
           <h2 class="text-2xl font-bold text-gray-800">Histoire - Type 2 (Images)</h2>
         </div>
-        <form id="histoire-type2-form" class="space-y-6" enctype="multipart/form-data" aria-label="Formulaire histoire images">
+        <form id="histoire-type2-form" class="space-y-6" enctype="multipart/form-data" aria-label="Formulaire histoire images" novalidate>
           <div class="space-y-2">
             <label for="sujet-histoire-type2" class="text-sm font-medium text-gray-700">
-              <i class="fas fa-pen-fancy mr-2"></i>Sujet
+              <i class="fas fa-pen-fancy mr-2"></i>Sujet <span class="text-red-500">*</span>
             </label>
-            <textarea name="sujet-histoire-type2" id="sujet-histoire-type2" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Entrez le sujet..."></textarea>
+            <textarea name="sujet-histoire-type2" id="sujet-histoire-type2" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring focus:ring-green-200 focus:ring-opacity-50" placeholder="Entrez le sujet..." required aria-describedby="sujet-histoire-type2-error"></textarea>
+            <div id="sujet-histoire-type2-error" class="text-red-600 text-sm mt-1 hidden" role="alert">Le champ sujet est obligatoire.</div>
           </div>
           <div class="space-y-2">
             <label for="images-histoire-type2" class="text-sm font-medium text-gray-700">
               <i class="fas fa-images mr-2"></i>Images (Multiple)
             </label>
-            <input type="file" name="images-histoire-type2" id="images-histoire-type2" multiple class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm">
-            <div id="image-preview-histoire-type2" class="flex flex-wrap"></div>
+            <input type="file" name="images-histoire-type2" id="images-histoire-type2" multiple accept="image/*" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-green-50 file:text-green-700 hover:file:bg-green-100 focus:border-green-500 focus:ring focus:ring-green-200 focus:ring-opacity-50">
+            <div id="image-preview-histoire-type2" class="flex flex-wrap mt-2"></div>
           </div>
-          <button type="submit" class="w-full bg-green-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-green-700 transition-colors duration-200">
+          <button type="submit" class="w-full bg-green-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-green-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
             <i class="fas fa-magic mr-2"></i>
             <span>Générer l'analyse</span>
           </button>
@@ -218,7 +258,7 @@
         <div id="histoire-type2-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden" aria-live="polite"></div>
       </div>
     </section>
-    
+
     <!-- Bloc Dissertation de Géographie Type 1 & 3 -->
     <section class="mb-8" data-aos="fade-up">
       <div class="bg-white rounded-xl shadow-xl p-8 card">
@@ -226,34 +266,35 @@
           <i class="fas fa-globe-europe text-purple-600 text-2xl mr-3"></i>
           <h2 class="text-2xl font-bold text-gray-800">Dissertation de Géographie - Type 1 & 3</h2>
         </div>
-        <form id="geographie-form" class="space-y-6" aria-label="Formulaire dissertation géographie">
+        <form id="geographie-form" class="space-y-6" aria-label="Formulaire dissertation géographie" novalidate>
           <div class="space-y-2">
             <label for="sujet-geographie" class="text-sm font-medium text-gray-700">
-              <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation
+              <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation <span class="text-red-500">*</span>
             </label>
-            <textarea name="sujet-geographie" id="sujet-geographie" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Entrez le sujet de votre dissertation..."></textarea>
+            <textarea name="sujet-geographie" id="sujet-geographie" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50" placeholder="Entrez le sujet de votre dissertation..." required aria-describedby="sujet-geographie-error"></textarea>
+            <div id="sujet-geographie-error" class="text-red-600 text-sm mt-1 hidden" role="alert">Le champ sujet est obligatoire.</div>
           </div>
           <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div class="space-y-2">
               <label for="point1-geographie" class="text-sm font-medium text-gray-700">
                 <i class="fas fa-list-ol mr-2"></i>Premier point
               </label>
-              <input type="text" name="point1-geographie" id="point1-geographie" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Premier argument...">
+              <input type="text" name="point1-geographie" id="point1-geographie" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50" placeholder="Premier argument...">
             </div>
             <div class="space-y-2">
               <label for="point2-geographie" class="text-sm font-medium text-gray-700">
                 <i class="fas fa-list-ol mr-2"></i>Deuxième point
               </label>
-              <input type="text" name="point2-geographie" id="point2-geographie" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Deuxième argument...">
+              <input type="text" name="point2-geographie" id="point2-geographie" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50" placeholder="Deuxième argument...">
             </div>
             <div class="space-y-2">
               <label for="point3-geographie" class="text-sm font-medium text-gray-700">
                 <i class="fas fa-list-ol mr-2"></i>Troisième point
               </label>
-              <input type="text" name="point3-geographie" id="point3-geographie" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Troisième argument...">
+              <input type="text" name="point3-geographie" id="point3-geographie" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200 focus:ring-opacity-50" placeholder="Troisième argument...">
             </div>
           </div>
-          <button type="submit" class="w-full bg-purple-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-purple-700 transition-colors duration-200">
+          <button type="submit" class="w-full bg-purple-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-purple-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
             <i class="fas fa-magic mr-2"></i>
             <span>Générer la dissertation</span>
           </button>
@@ -261,7 +302,7 @@
         <div id="geographie-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden" aria-live="polite"></div>
       </div>
     </section>
-    
+
     <!-- Bloc Géographie Type 2 (Images) -->
     <section class="mb-8" data-aos="fade-up">
       <div class="bg-white rounded-xl shadow-xl p-8 card">
@@ -269,21 +310,22 @@
           <i class="fas fa-map-marked-alt text-yellow-600 text-2xl mr-3"></i>
           <h2 class="text-2xl font-bold text-gray-800">Géographie - Type 2 (Images)</h2>
         </div>
-        <form id="geographie-type2-form" class="space-y-6" enctype="multipart/form-data" aria-label="Formulaire géographie images">
+        <form id="geographie-type2-form" class="space-y-6" enctype="multipart/form-data" aria-label="Formulaire géographie images" novalidate>
           <div class="space-y-2">
             <label for="sujet-geographie-type2" class="text-sm font-medium text-gray-700">
-              <i class="fas fa-pen-fancy mr-2"></i>Sujet
+              <i class="fas fa-pen-fancy mr-2"></i>Sujet <span class="text-red-500">*</span>
             </label>
-            <textarea name="sujet-geographie-type2" id="sujet-geographie-type2" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm" placeholder="Entrez le sujet..."></textarea>
+            <textarea name="sujet-geographie-type2" id="sujet-geographie-type2" rows="3" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-yellow-500 focus:ring focus:ring-yellow-200 focus:ring-opacity-50" placeholder="Entrez le sujet..." required aria-describedby="sujet-geographie-type2-error"></textarea>
+            <div id="sujet-geographie-type2-error" class="text-red-600 text-sm mt-1 hidden" role="alert">Le champ sujet est obligatoire.</div>
           </div>
           <div class="space-y-2">
             <label for="images-geographie-type2" class="text-sm font-medium text-gray-700">
               <i class="fas fa-images mr-2"></i>Images (Multiple)
             </label>
-            <input type="file" name="images-geographie-type2" id="images-geographie-type2" multiple class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm">
-            <div id="image-preview-geographie-type2" class="flex flex-wrap"></div>
+            <input type="file" name="images-geographie-type2" id="images-geographie-type2" multiple accept="image/*" class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-yellow-50 file:text-yellow-700 hover:file:bg-yellow-100 focus:border-yellow-500 focus:ring focus:ring-yellow-200 focus:ring-opacity-50">
+            <div id="image-preview-geographie-type2" class="flex flex-wrap mt-2"></div>
           </div>
-          <button type="submit" class="w-full bg-yellow-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-yellow-700 transition-colors duration-200">
+          <button type="submit" class="w-full bg-yellow-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center hover:bg-yellow-700 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed">
             <i class="fas fa-magic mr-2"></i>
             <span>Générer l'analyse</span>
           </button>
@@ -292,36 +334,39 @@
       </div>
     </section>
   </main>
-  
+
   <!-- Bouton Retour en haut -->
   <button id="back-to-top" aria-label="Retour en haut">
     <i class="fas fa-arrow-up"></i>
   </button>
-  
+
   <!-- Pied de page -->
   <footer class="gradient-bg mt-12 py-6" role="contentinfo">
     <div class="container mx-auto px-6 text-center text-white">
       <p class="text-sm">© 2024 Mariam - Tous droits réservés</p>
     </div>
   </footer>
-  
+
   <!-- Scripts personnalisés -->
   <script>
     window.addEventListener('load', function() {
+      // Initialisation AOS (Animations au scroll)
       AOS.init({
         duration: 800,
         once: true,
         offset: 100
       });
-  
+
+      // Configuration de Marked (convertisseur Markdown vers HTML)
       marked.setOptions({
-        breaks: true,
-        gfm: true,
-        headerIds: false,
-        renderer: new marked.Renderer()
+        breaks: true, // Convertit les sauts de ligne simples en <br>
+        gfm: true,    // Active les spécificités GitHub Flavored Markdown (tableaux, etc.)
+        headerIds: false, // Ne génère pas d'ID pour les titres
+        renderer: new marked.Renderer() // Utilise le rendu par défaut
       });
-  
-      function showLoading(outputId) {
+
+      // Fonction pour afficher l'indicateur de chargement
+      function showLoading(outputId, formButton) {
         const output = document.getElementById(outputId);
         output.classList.remove('hidden');
         output.innerHTML = `
@@ -330,96 +375,194 @@
             <span class="text-gray-600">Génération en cours...</span>
           </div>
         `;
+        // Désactiver le bouton pendant le chargement
+        if (formButton) formButton.disabled = true;
+      }
+
+      // Fonction pour cacher l'indicateur de chargement et réactiver le bouton
+      function hideLoading(outputId, formButton) {
+         const output = document.getElementById(outputId);
+         // Ne cache pas l'output si on va afficher un résultat ou une erreur juste après
+         // output.classList.add('hidden');
+         // output.innerHTML = ''; // Optionnel : vider le contenu
+         if (formButton) formButton.disabled = false;
       }
-  
+
+      // Fonction principale pour gérer la soumission des formulaires
       async function submitForm(formId, outputId, endpoint) {
         const form = document.getElementById(formId);
         const output = document.getElementById(outputId);
-  
+        const submitButton = form.querySelector('button[type="submit"]');
+
+        // Trouver le champ sujet spécifique à ce formulaire
+        const subjectField = form.querySelector('textarea[id^="sujet-"]'); // Trouve le textarea dont l'ID commence par "sujet-"
+        if (!subjectField) {
+            console.error(`Champ sujet non trouvé pour le formulaire ${formId}`);
+            return; // Arrêter si le champ sujet n'existe pas
+        }
+        const errorMsgElement = form.querySelector('#' + subjectField.id + '-error'); // Trouve le div d'erreur correspondant
+
         form.addEventListener('submit', async (e) => {
-          e.preventDefault();
-          showLoading(outputId);
-  
+          e.preventDefault(); // Toujours prévenir le comportement par défaut
+
+          // --- Validation du sujet ---
+          const subjectValue = subjectField.value.trim();
+          let isValid = true;
+
+          // Réinitialiser l'état d'erreur visuel avant la validation
+          subjectField.classList.remove('invalid');
+          if (errorMsgElement) errorMsgElement.classList.add('hidden');
+          // Ne pas cacher l'output ici, seulement le vider si on est sûr de le remplacer
+          // output.classList.add('hidden');
+
+          if (subjectValue === '') {
+            isValid = false;
+            subjectField.classList.add('invalid'); // Ajouter style d'erreur
+            if (errorMsgElement) errorMsgElement.classList.remove('hidden'); // Afficher message d'erreur
+            subjectField.focus(); // Mettre le focus sur le champ
+          }
+          // --- Fin Validation ---
+
+          // Si le formulaire n'est pas valide, arrêter ici
+          if (!isValid) {
+            return;
+          }
+
+          // Si valide, continuer : afficher le chargement et envoyer la requête
+          showLoading(outputId, submitButton);
+
           try {
             const formData = new FormData(form);
             const response = await fetch(endpoint, {
               method: 'POST',
               body: formData
+              // Ajouter des headers si nécessaire (ex: 'Accept': 'application/json')
             });
-  
-            if (!response.ok) throw new Error(`Erreur HTTP: ${response.status}`);
-  
+
+            // Cacher le loading seulement après avoir reçu la réponse
+            // (que ce soit un succès ou une erreur HTTP)
+            // hideLoading(outputId, submitButton); // Fait avant l'affichage du résultat/erreur
+
+            if (!response.ok) {
+                // Essayer de lire le corps de l'erreur si possible
+                let errorBody = `Erreur HTTP: ${response.status}`;
+                try {
+                    const errorData = await response.json();
+                    errorBody += ` - ${errorData.message || JSON.stringify(errorData)}`;
+                } catch(jsonError) {
+                    // Si le corps de l'erreur n'est pas du JSON, utiliser le texte brut
+                    try {
+                        const errorText = await response.text();
+                        errorBody += ` - ${errorText}`;
+                    } catch (textError) {
+                        // Ignorer si même le texte ne peut être lu
+                    }
+                }
+               throw new Error(errorBody);
+            }
+
             const result = await response.json();
-            output.classList.remove('hidden');
+            // Vérifier si la réponse contient bien la propriété 'output'
+            if (typeof result.output !== 'string') {
+                throw new Error("La réponse du serveur n'a pas le format attendu.");
+            }
+
+            output.classList.remove('hidden'); // S'assurer que la zone est visible
+            // Utilisation de DOMPurify si inclus, sinon directement marked.parse
+             // const sanitizedHtml = typeof DOMPurify !== 'undefined' ? DOMPurify.sanitize(marked.parse(result.output)) : marked.parse(result.output);
             output.innerHTML = `
               <div class="markdown-output prose max-w-none">
                 ${marked.parse(result.output)}
               </div>
             `;
-  
-            // Adaptation des tableaux pour mobile
+
+            // Adaptation des tableaux générés pour mobile
             Array.from(output.getElementsByTagName('table')).forEach(table => {
-              table.parentNode.style.overflow = 'auto';
-              table.style.minWidth = '100%';
+                const wrapper = document.createElement('div');
+                wrapper.classList.add('table-wrapper');
+                table.parentNode.insertBefore(wrapper, table);
+                wrapper.appendChild(table);
             });
+
           } catch (error) {
-            output.classList.remove('hidden');
+            console.error(`Erreur lors de la soumission du formulaire ${formId}:`, error);
+            output.classList.remove('hidden'); // S'assurer que la zone d'erreur est visible
             output.innerHTML = `
-              <div class="bg-red-50 border-l-4 border-red-500 p-4">
+              <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4" role="alert">
                 <div class="flex items-center">
-                  <i class="fas fa-exclamation-circle text-red-500"></i>
-                  <p class="ml-3 text-red-700">Une erreur est survenue : ${error.message}</p>
+                  <i class="fas fa-exclamation-triangle mr-3"></i>
+                  <div>
+                    <p class="font-bold">Une erreur est survenue</p>
+                    <p>${error.message || "Impossible de contacter le serveur ou erreur inattendue."}</p>
+                  </div>
                 </div>
               </div>
             `;
+          } finally {
+             // Réactiver le bouton dans tous les cas (succès, erreur fetch, erreur traitement)
+             hideLoading(outputId, submitButton); // Déplacé ici pour s'assurer qu'il est toujours réactivé
           }
         });
       }
-  
-      // Initialisation des formulaires
+
+      // Initialisation des gestionnaires pour chaque formulaire
       submitForm('histoire-form', 'histoire-output', '/api/histoire');
       submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2');
       submitForm('geographie-form', 'geographie-output', '/api/geographie');
       submitForm('geographie-type2-form', 'geographie-type2-output', '/api/geographie-type2');
-  
-      // Prévisualisation des images
+
+      // Fonction pour gérer la prévisualisation des images
       function handleImagePreviews(inputId, previewContainerId) {
         const input = document.getElementById(inputId);
         const previewContainer = document.getElementById(previewContainerId);
-  
+
+        if (!input || !previewContainer) return; // Ne rien faire si les éléments n'existent pas
+
         input.addEventListener('change', function() {
-          previewContainer.innerHTML = '';
-          Array.from(this.files).forEach(file => {
-            if (file.type.startsWith('image/')) {
-              const reader = new FileReader();
-              reader.onload = (e) => {
-                const img = document.createElement('img');
-                img.src = e.target.result;
-                img.classList.add('image-preview');
-                previewContainer.appendChild(img);
-              };
-              reader.readAsDataURL(file);
-            }
-          });
+          previewContainer.innerHTML = ''; // Vider les prévisualisations précédentes
+          if (this.files) {
+            Array.from(this.files).forEach(file => {
+              if (file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                  const img = document.createElement('img');
+                  img.src = e.target.result;
+                  img.alt = `Prévisualisation de ${file.name}`; // Texte alternatif
+                  img.classList.add('image-preview', 'object-cover'); // object-cover pour éviter la déformation
+                  previewContainer.appendChild(img);
+                };
+                reader.readAsDataURL(file);
+              } else {
+                 // Optionnel : Afficher un message si le fichier n'est pas une image
+                 const errorMsg = document.createElement('p');
+                 errorMsg.textContent = `${file.name} n'est pas une image valide.`;
+                 errorMsg.classList.add('text-red-600', 'text-sm', 'm-2');
+                 previewContainer.appendChild(errorMsg);
+              }
+            });
+          }
         });
       }
-  
+
+      // Lier la prévisualisation aux champs d'upload d'images
       handleImagePreviews('images-histoire-type2', 'image-preview-histoire-type2');
       handleImagePreviews('images-geographie-type2', 'image-preview-geographie-type2');
-  
-      // Bouton Retour en haut
+
+      // Gestion du bouton "Retour en haut"
       const backToTopBtn = document.getElementById('back-to-top');
-      window.addEventListener('scroll', () => {
-        if (window.scrollY > 300) {
-          backToTopBtn.classList.add('show');
-        } else {
-          backToTopBtn.classList.remove('show');
-        }
-      });
-      backToTopBtn.addEventListener('click', () => {
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      });
+      if (backToTopBtn) {
+          window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+              backToTopBtn.classList.add('show');
+            } else {
+              backToTopBtn.classList.remove('show');
+            }
+          });
+          backToTopBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          });
+      }
     });
   </script>
 </body>
-</html>
+</html>