Update templates/philosophie.html

templates/philosophie.html

@@ -18,162 +18,25 @@
     /* Styles pour le Glow Up */
     :root { 
       font-family: 'Inter', sans-serif;
+      /* Variables pour des transitions plus fluides */
       --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       --transition-fast: all 0.15s ease-out;
-      --violet-gradient: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);
     }
     
+    /* Optimisations pour le scroll fluide */
     html {
       scroll-behavior: smooth;
       -webkit-overflow-scrolling: touch;
     }
     
     body {
+      /* Prévenir le reflow lors de la génération */
       will-change: scroll-position;
+      /* Améliorer les performances sur mobile */
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
     }
-
-    /* Loader magnifique avec animations */
-    .progress-container {
-      background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-      border: 2px solid #e2e8f0;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .progress-container::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: -100%;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.1), transparent);
-      animation: shimmer 2s infinite;
-    }
-
-    @keyframes shimmer {
-      0% { left: -100%; }
-      100% { left: 100%; }
-    }
-
-    .progress-bar {
-      background: var(--violet-gradient);
-      height: 100%;
-      transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-      position: relative;
-      overflow: hidden;
-      box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
-    }
-
-    .progress-bar::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
-      animation: progressGlow 2s ease-in-out infinite;
-    }
-
-    @keyframes progressGlow {
-      0%, 100% { transform: translateX(-100%) skewX(-15deg); }
-      50% { transform: translateX(200%) skewX(-15deg); }
-    }
-
-    .loading-dots {
-      display: inline-flex;
-      align-items: center;
-    }
-
-    .loading-dots span {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #8b5cf6;
-      margin: 0 2px;
-      animation: loadingDots 1.4s infinite ease-in-out both;
-    }
-
-    .loading-dots span:nth-child(1) { animation-delay: -0.32s; }
-    .loading-dots span:nth-child(2) { animation-delay: -0.16s; }
-
-    @keyframes loadingDots {
-      0%, 80%, 100% { 
-        transform: scale(0.8);
-        opacity: 0.5;
-      }
-      40% { 
-        transform: scale(1.2);
-        opacity: 1;
-      }
-    }
-
-    /* Animation de fondu pour le streaming */
-    .streaming-text {
-      opacity: 0;
-      animation: fadeInUp 0.6s ease-out forwards;
-    }
-
-    @keyframes fadeInUp {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    .word-by-word {
-      display: inline;
-      opacity: 0;
-      animation: wordFadeIn 0.3s ease-out forwards;
-    }
-
-    @keyframes wordFadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(10px) scale(0.95);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-      }
-    }
-
-    /* Pulse effect pour le contenu en cours de génération */
-    .generating-pulse {
-      animation: pulseGlow 2s ease-in-out infinite;
-    }
-
-    @keyframes pulseGlow {
-      0%, 100% {
-        box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
-        transform: scale(1);
-      }
-      50% {
-        box-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
-        transform: scale(1.01);
-      }
-    }
-
-    /* Styles pour le texte en cours de streaming */
-    .streaming-cursor::after {
-      content: '|';
-      animation: cursorBlink 1s infinite;
-      color: #8b5cf6;
-      margin-left: 2px;
-    }
-
-    @keyframes cursorBlink {
-      0%, 50% { opacity: 1; }
-      51%, 100% { opacity: 0; }
-    }
-
+    
     .collapsible { 
       cursor: pointer; 
       padding: 1rem; 
@@ -182,6 +45,7 @@
       text-align: left; 
       outline: none; 
       transition: var(--transition-fast);
+      /* Optimiser pour les interactions tactiles */
       touch-action: manipulation;
       -webkit-tap-highlight-color: transparent;
     }
@@ -195,11 +59,14 @@
       display: none; 
       overflow: hidden; 
       background-color: white;
+      /* Transition plus fluide pour l'ouverture */
       transition: var(--transition-smooth);
     }
     
+    /* Styles pour la lisibilité du Markdown généré */
     .prose { 
       max-width: 100% !important; 
+      /* Optimiser le rendu du texte */
       text-rendering: optimizeLegibility;
     }
     
@@ -207,6 +74,7 @@
       color: #374151; 
       word-wrap: break-word; 
       overflow-wrap: break-word;
+      /* Prévenir les débordements sur mobile */
       hyphens: auto;
       -webkit-hyphens: auto;
       -moz-hyphens: auto;
@@ -222,8 +90,10 @@
       line-height: 1.3; 
     }
     
+    /* Animation fadeIn optimisée */
     .animate-fadeIn { 
       animation: fadeIn 0.4s ease-out forwards;
+      /* Utiliser GPU pour l'animation */
       transform: translateZ(0);
       will-change: opacity, transform;
     }
@@ -238,7 +108,105 @@
         transform: translateY(0) translateZ(0); 
       } 
     }
-    
+
+    /* Styles pour le loader élégant */
+    .elegant-loader {
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 1rem;
+      padding: 2rem;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .loader-content {
+      text-align: center;
+      color: white;
+    }
+
+    .progress-container {
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50px;
+      padding: 4px;
+      margin: 1.5rem 0;
+      backdrop-filter: blur(10px);
+    }
+
+    .progress-bar {
+      background: linear-gradient(90deg, #60a5fa, #34d399, #fbbf24);
+      background-size: 200% 100%;
+      border-radius: 50px;
+      height: 12px;
+      width: 0%;
+      transition: width 0.3s ease;
+      animation: progressGradient 2s ease-in-out infinite;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+
+    @keyframes progressGradient {
+      0%, 100% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+    }
+
+    .loader-icon {
+      display: inline-block;
+      animation: float 3s ease-in-out infinite;
+      font-size: 3rem;
+      margin-bottom: 1rem;
+    }
+
+    @keyframes float {
+      0%, 100% { transform: translateY(0px) rotate(0deg); }
+      50% { transform: translateY(-10px) rotate(5deg); }
+    }
+
+    .thinking-particles {
+      display: flex;
+      justify-content: center;
+      gap: 0.5rem;
+      margin-top: 1rem;
+    }
+
+    .particle {
+      width: 8px;
+      height: 8px;
+      background: rgba(255, 255, 255, 0.8);
+      border-radius: 50%;
+      animation: particle-bounce 1.4s ease-in-out infinite both;
+    }
+
+    .particle:nth-child(1) { animation-delay: -0.32s; }
+    .particle:nth-child(2) { animation-delay: -0.16s; }
+    .particle:nth-child(3) { animation-delay: 0s; }
+
+    @keyframes particle-bounce {
+      0%, 80%, 100% { transform: scale(0.8) translateY(0); opacity: 0.7; }
+      40% { transform: scale(1.2) translateY(-10px); opacity: 1; }
+    }
+
+    /* Effet de pluie pour l'affichage du texte */
+    .rain-text {
+      opacity: 0;
+      transform: translateY(-20px);
+      animation: rainDrop 0.8s ease-out forwards;
+    }
+
+    @keyframes rainDrop {
+      0% {
+        opacity: 0;
+        transform: translateY(-20px) scale(0.95);
+      }
+      50% {
+        opacity: 0.7;
+        transform: translateY(5px) scale(1.02);
+      }
+      100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+
+    /* Styles pour Select2 */
     .select2-container--default .select2-selection--single { 
       border: 1px solid #d1d5db; 
       border-radius: 0.75rem; 
@@ -267,12 +235,14 @@
       box-shadow: 0 4px 6px -1px rgba(0,0,0,.1); 
     }
 
+    /* Styles pour l'aperçu de l'image */
     #image-preview { 
       max-height: 200px; 
       border-radius: 0.75rem; 
       box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); 
     }
 
+    /* Cacher le marqueur par défaut de <details> */
     summary { 
       list-style: none; 
     }
@@ -281,43 +251,62 @@
       display: none; 
     }
     
+    /* Optimisations mobiles */
     @media (max-width: 640px) {
+      /* Réduire les marges sur mobile pour plus d'espace */
       .max-w-3xl {
         max-width: 100%;
         margin-left: 0.5rem;
         margin-right: 0.5rem;
       }
       
+      /* Optimiser l'affichage des sections de contenu */
       #response, #thinking-wrapper {
+        /* Éviter les débordements horizontaux */
         overflow-x: hidden;
       }
       
+      /* Améliorer la lisibilité du texte généré */
       .prose {
         font-size: 0.95rem;
         line-height: 1.6;
       }
       
+      /* Réduire l'animation pour économiser la batterie */
       .animate-fadeIn {
         animation-duration: 0.2s;
       }
+
+      .elegant-loader {
+        padding: 1.5rem;
+        margin: 0.5rem;
+      }
     }
     
+    /* Conteneur de génération avec scroll optimisé */
     .generation-container {
+      /* Conteneur stable pour éviter les recalculs de layout */
       contain: layout style;
+      /* Optimiser les performances de scroll */
       transform: translateZ(0);
     }
     
+    /* Améliorer les performances du textarea */
     textarea {
+      /* Éviter les reflows pendant la saisie */
       resize: none;
+      /* Optimiser sur mobile */
       -webkit-appearance: none;
     }
     
+    /* Optimiser les boutons pour le tactile */
     button {
       touch-action: manipulation;
       -webkit-tap-highlight-color: transparent;
       transition: var(--transition-fast);
     }
     
+    /* Scroll fluide pour les éléments avec beaucoup de contenu */
     .content-scrollable {
       -webkit-overflow-scrolling: touch;
       scroll-behavior: smooth;
@@ -366,7 +355,7 @@
             </select>
           </div>
           
-          <!-- Conteneur pour les champs texte -->
+          <!-- Conteneur pour les champs texte (visible par défaut) -->
           <div id="text-input-container">
             <!-- Course Selection -->
             <div class="space-y-2">
@@ -382,7 +371,7 @@
             </div>
           </div>
 
-          <!-- Conteneur pour l'upload d'image -->
+          <!-- Conteneur pour l'upload d'image (caché par défaut) -->
           <div id="image-input-container" class="hidden">
              <div class="space-y-2">
                 <label for="image-upload" class="block text-sm font-medium text-gray-700">Charger un document pour analyse</label>
@@ -401,42 +390,33 @@
         </div>
       </div>
 
-      <!-- Loading Section -->
-      <div id="loading-section" class="hidden mt-8 generation-container">
-        <div class="bg-white border border-gray-200 rounded-xl shadow-lg p-8 generating-pulse">
-          <div class="text-center space-y-6">
-            <div class="mx-auto w-16 h-16 relative">
-              <svg class="w-16 h-16 text-violet-600 animate-spin" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-              </svg>
+      <!-- Elegant Loading Section -->
+      <div id="loading-section" class="hidden mt-8">
+        <div class="elegant-loader">
+          <div class="loader-content">
+            <div class="loader-icon">🧠</div>
+            <h3 class="text-xl font-bold mb-2">Réflexion en cours...</h3>
+            <p class="text-white/80 mb-4" id="loading-status">Analyse du sujet</p>
+            
+            <div class="progress-container">
+              <div class="progress-bar" id="progress-bar"></div>
             </div>
             
-            <div class="space-y-3">
-              <h3 class="text-xl font-semibold text-gray-800">Génération en cours</h3>
-              <p id="loading-message" class="text-gray-600">Initialisation de l'IA philosophique</p>
-              <div class="loading-dots">
-                <span></span>
-                <span></span>
-                <span></span>
-              </div>
+            <div class="flex justify-between text-sm text-white/70 mb-4">
+              <span>Progression</span>
+              <span id="progress-text">0%</span>
             </div>
             
-            <!-- Barre de progression -->
-            <div class="space-y-2">
-              <div class="flex justify-between text-sm text-gray-600">
-                <span>Progression</span>
-                <span id="progress-percentage">0%</span>
-              </div>
-              <div class="progress-container w-full h-3 rounded-full">
-                <div id="progress-bar" class="progress-bar w-0 rounded-full"></div>
-              </div>
+            <div class="thinking-particles">
+              <div class="particle"></div>
+              <div class="particle"></div>
+              <div class="particle"></div>
             </div>
           </div>
         </div>
       </div>
       
-      <!-- Thinking Process Section -->
+      <!-- Thinking Process Section (Collapsible) -->
       <div id="thinking-wrapper" class="hidden mt-8 generation-container">
         <details id="thinking-container" class="bg-white border border-gray-200 rounded-xl shadow-sm">
           <summary class="flex justify-between items-center p-4 cursor-pointer">
@@ -446,6 +426,7 @@
             </svg>
           </summary>
           <div id="thinking-process" class="p-4 border-t border-gray-200 text-sm text-gray-600 prose prose-sm max-w-none max-h-64 overflow-y-auto content-scrollable">
+            <!-- Le contenu du processus de pensée sera injecté ici -->
           </div>
         </details>
       </div>
@@ -453,10 +434,11 @@
       <!-- Response Section -->
       <div id="response" class="hidden mt-6 generation-container">
         <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 sm:p-8 prose prose-violet max-w-none">
+          <!-- Le contenu de la réponse sera injecté ici -->
         </div>
       </div>
       
-      <!-- Action Buttons -->
+      <!-- Action Buttons after generation -->
       <div id="action-buttons" class="hidden mt-6 grid grid-cols-1 sm:grid-cols-2 gap-4">
           <button id="copy-btn" class="w-full flex items-center justify-center py-3 px-6 rounded-xl bg-gray-100 text-gray-800 font-medium border border-gray-200 hover:bg-gray-200 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2">
             <svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>
@@ -468,6 +450,7 @@
       <div class="mt-12">
         <h3 class="text-xl font-bold text-gray-800 mb-4">Historique</h3>
         <div id="dissertations-list" class="space-y-3">
+          <!-- La liste des dissertations sauvegardées sera injectée ici -->
         </div>
       </div>
     </div>
@@ -485,263 +468,261 @@ $(document).ready(function() {
     $('#course-select').select2({
         placeholder: 'Optionnel : choisir un cours...',
         allowClear: true,
-        templateResult: function (course) { 
-            if (!course.id) { return course.text; } 
-            return $(`<span>${course.text}</span><span class="course-author">Pr. ${$(course.element).data('author')}</span>`); 
-        },
+        templateResult: function (course) { if (!course.id) { return course.text; } return $(`<span>${course.text}</span><span class="course-author">Pr. ${$(course.element).data('author')}</span>`); },
         templateSelection: function (course) { return course.text; },
     });
     marked.setOptions({ breaks: true, gfm: true, headerIds: false, mangle: false });
     moment.locale('fr');
     const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true });
 
-    // Variables pour le loader et streaming
-    let currentProgress = 0;
+    // Variables pour le système de chargement
     let progressInterval;
-    let streamingTimeout;
-
-    // Messages de chargement rotatifs
+    let currentProgress = 0;
+    let storedThinkingContent = '';
+    let storedResponseContent = '';
+    
+    // Messages de statut pour le loader
     const loadingMessages = [
-        "Initialisation de l'IA philosophique",
-        "Analyse du sujet proposé", 
-        "Recherche des concepts clés",
-        "Construction de l'argumentation",
-        "Structuration de la dissertation",
-        "Vérification de la cohérence",
-        "Finalisation de la réponse"
+        "Analyse du sujet...",
+        "Structuration des idées...",
+        "Recherche de références...",
+        "Développement de l'argumentation...",
+        "Formulation des conclusions...",
+        "Finalisation de la réponse..."
     ];
 
-    // Fonction pour simuler le progress loader
-    function startProgressLoader() {
-        currentProgress = 0;
-        let messageIndex = 0;
+    // Fonction pour démarrer le loader élégant
+    function startElegantLoader() {
+        // Cacher les sections précédentes
+        $('#thinking-wrapper, #response, #action-buttons').addClass('hidden');
         
+        // Afficher le loader
         $('#loading-section').removeClass('hidden').addClass('animate-fadeIn');
+        
+        // Reset du progrès
+        currentProgress = 0;
         $('#progress-bar').css('width', '0%');
-        $('#progress-percentage').text('0%');
+        $('#progress-text').text('0%');
         
-        // Animation du message
-        const messageInterval = setInterval(() => {
-            $('#loading-message').fadeOut(300, function() {
-                $(this).text(loadingMessages[messageIndex]).fadeIn(300);
-                messageIndex = (messageIndex + 1) % loadingMessages.length;
-            });
-        }, 2000);
-
-        // Animation de la barre de progression
+        // Animation du progrès avec messages dynamiques
         progressInterval = setInterval(() => {
-            if (currentProgress < 95) {
-                // Progression plus rapide au début, plus lente vers la fin
-                const increment = currentProgress < 30 ? Math.random() * 8 + 3 : 
-                                 currentProgress < 60 ? Math.random() * 4 + 2 : 
-                                 Math.random() * 2 + 0.5;
-                
-                currentProgress = Math.min(currentProgress + increment, 95);
-                updateProgressBar(currentProgress);
+            // Incrément intelligent du progrès
+            if (currentProgress < 30) {
+                currentProgress += Math.random() * 8 + 2; // 2-10% par étape
+            } else if (currentProgress < 70) {
+                currentProgress += Math.random() * 5 + 1; // 1-6% par étape
+            } else if (currentProgress < 95) {
+                currentProgress += Math.random() * 2 + 0.5; // 0.5-2.5% par étape
+            } else {
+                currentProgress = Math.min(currentProgress + 0.1, 99); // Très lent vers la fin
             }
-        }, 300);
-
-        // Nettoyer après 30 secondes max
-        setTimeout(() => {
-            clearInterval(messageInterval);
-            clearInterval(progressInterval);
-            completeProgress();
-        }, 30000);
-    }
-
-    function updateProgressBar(progress) {
-        $('#progress-bar').css('width', progress + '%');
-        $('#progress-percentage').text(Math.round(progress) + '%');
+            
+            // Mise à jour de l'interface
+            $('#progress-bar').css('width', currentProgress + '%');
+            $('#progress-text').text(Math.floor(currentProgress) + '%');
+            
+            // Changement des messages de statut
+            const messageIndex = Math.floor(currentProgress / 16.67); // 6 messages répartis sur 100%
+            if (messageIndex < loadingMessages.length) {
+                $('#loading-status').text(loadingMessages[messageIndex]);
+            }
+            
+        }, 200); // Mise à jour toutes les 200ms
     }
 
-    function completeProgress() {
-        clearInterval(progressInterval);
+    // Fonction pour terminer le loader et afficher le contenu
+    function finishLoaderAndDisplay() {
+        // Terminer le progrès à 100%
         currentProgress = 100;
-        updateProgressBar(100);
+        $('#progress-bar').css('width', '100%');
+        $('#progress-text').text('100%');
+        $('#loading-status').text('Génération terminée !');
         
+        clearInterval(progressInterval);
+        
+        // Attendre un peu puis masquer le loader et afficher le contenu
         setTimeout(() => {
-            $('#loading-section').fadeOut(500, function() {
-                startStreamingDisplay();
-            });
-        }, 800);
-    }
-
-    // Fonction pour démarrer l'affichage en streaming avec effet de fondu
-    function startStreamingDisplay() {
-        // Simuler des données reçues (remplacer par vraies données de l'API)
-        simulateStreamingData();
-    }
-
-    // Simulation du streaming avec de vraies données (remplacer par l'appel API réel)
-    function simulateStreamingData() {
-        // Exemple de données - remplacer par les vraies données de votre API
-        const sampleThinking = `## Analyse du sujet
-
-Le sujet "La liberté consiste-t-elle à faire tout ce que l'on veut ?" interroge la nature même de la liberté. Il faut distinguer entre liberté et licence, entre pouvoir et droit.
-
-## Plan envisagé
-1. La liberté comme absence de contraintes
-2. Les limites nécessaires à la liberté
-3. La liberté authentique comme autodétermination`;
-
-        const sampleResponse = `# La liberté consiste-t-elle à faire tout ce que l'on veut ?
-
-## Introduction
-
-La question de la liberté traverse toute l'histoire de la philosophie. À première vue, être libre semble signifier pouvoir agir selon ses désirs, sans contrainte. Cependant, cette conception spontanée de la liberté pose problème : peut-on vraiment identifier liberté et licence ? La liberté véritable ne suppose-t-elle pas au contraire certaines limites ?
-
-## I. La liberté comme absence de contraintes
-
-### A. La conception commune de la liberté
-
-Dans l'usage courant, être libre c'est faire ce que l'on veut, quand on le veut. Cette conception négative de la liberté la définit par l'absence d'obstacles extérieurs à nos actions.
-
-### B. La liberté naturelle selon Hobbes
-
-Thomas Hobbes définit la liberté comme "l'absence d'obstacles extérieurs". Dans l'état de nature, chaque individu a le droit à tout, y compris au corps d'autrui.
-
-## II. Les limites nécessaires à la liberté
-
-### A. La liberté des uns s'arrête où commence celle des autres
-
-John Stuart Mill, dans "De la liberté", établit le principe de non-nuisance : ma liberté ne doit pas porter atteinte à celle d'autrui.
-
-### B. Les contraintes comme conditions de la liberté
-
-Paradoxalement, certaines contraintes peuvent être libératrices. Les règles du jeu au tennis ne limitent pas le joueur, elles rendent le jeu possible.
-
-## III. La liberté authentique comme autodétermination
-
-### A. La liberté selon Kant
-
-Pour Kant, la vraie liberté n'est pas de suivre ses inclinations, mais d'agir selon des principes rationnels que l'on s'est donnés à soi-même.
-
-### B. L'autonomie comme essence de la liberté
-
-Être libre, c'est être autonome, c'est-à-dire se donner ses propres lois. Cela implique une maîtrise de soi et une réflexion sur ses actes.
-
-## Conclusion
-
-La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on veut. Une telle conception conduirait au chaos et à la négation même de la liberté. La véritable liberté réside dans l'autodétermination rationnelle, dans la capacité à agir selon des principes que l'on s'est librement choisis. Ainsi, les contraintes ne s'opposent pas nécessairement à la liberté ; elles peuvent même la rendre possible.`;
-
-        // Démarrer le streaming avec effet de fondu
-        startWordByWordStreaming(sampleThinking, sampleResponse);
-    }
-
-    // Fonction pour l'affichage mot par mot avec effet de fondu
-    function startWordByWordStreaming(thinkingText, responseText) {
-        // Afficher d'abord la section de pensée
-        $('#thinking-wrapper').removeClass('hidden').addClass('animate-fadeIn');
-        streamTextWordByWord('#thinking-process', thinkingText, 50, () => {
-            // Une fois la pensée terminée, afficher la réponse
-            $('#response').removeClass('hidden').addClass('animate-fadeIn');
-            streamTextWordByWord('#response > div', responseText, 30, () => {
-                // Une fois terminé, afficher les boutons d'action
-                $('#action-buttons').removeClass('hidden').addClass('animate-fadeIn');
-                Toast.fire({ icon: 'success', title: 'Génération terminée !' });
-                
-                // Sauvegarder la dissertation
-                let title;
-                if ($('#type-select').val() === '3') {
-                    const fileName = $('#image-upload')[0].files[0]?.name || "Analyse de document";
-                    title = `Analyse (Sujet Type 3): ${fileName}`;
-                } else {
-                    title = $('#question').val().trim();
-                }
-                saveDissertation(title, responseText);
-            });
-        });
+            $('#loading-section').addClass('hidden');
+            
+            // Afficher le processus de pensée s'il existe
+            if (storedThinkingContent) {
+                $('#thinking-wrapper').removeClass('hidden').addClass('animate-fadeIn');
+                displayContentWithRainEffect($('#thinking-process'), marked.parse(storedThinkingContent));
+            }
+            
+            // Afficher la réponse avec effet de pluie
+            if (storedResponseContent) {
+                $('#response').removeClass('hidden').addClass('animate-fadeIn');
+                displayContentWithRainEffect($('#response > div'), marked.parse(storedResponseContent));
+            }
+            
+        }, 800); // Délai pour laisser le temps de voir 100%
     }
 
-    // Fonction pour streamer le texte mot par mot
-    function streamTextWordByWord(selector, text, delay = 50, callback) {
-        const container = $(selector);
+    // Fonction pour afficher le contenu avec effet de pluie (goutte par goutte)
+    function displayContentWithRainEffect(container, htmlContent) {
         container.empty();
         
-        // Convertir le markdown en HTML
-        const htmlContent = marked.parse(text);
-        
-        // Créer un élément temporaire pour extraire le texte
+        // Créer un div temporaire pour parser le HTML
         const tempDiv = $('<div>').html(htmlContent);
         
-        // Fonction récursive pour traiter chaque nœud
-        function processNode(node, targetContainer) {
-            if (node.nodeType === Node.TEXT_NODE) {
-                // Nœud texte - streamer mot par mot
-                const words = node.textContent.split(/(\s+)/);
-                let wordIndex = 0;
-                
-                function addNextWord() {
-                    if (wordIndex < words.length) {
-                        const word = words[wordIndex];
-                        const span = $('<span>').addClass('word-by-word').text(word);
-                        span.css('animation-delay', '0s');
-                        targetContainer.append(span);
-                        
-                        setTimeout(() => {
-                            wordIndex++;
-                            addNextWord();
-                        }, delay);
-                    } else if (callback && node === tempDiv.get(0).lastChild) {
-                        setTimeout(callback, 500);
+        // Extraire tous les éléments et textes
+        const elements = [];
+        
+        function extractElements(node) {
+            $(node).contents().each(function() {
+                if (this.nodeType === Node.TEXT_NODE && this.textContent.trim()) {
+                    // Diviser le texte en mots
+                    const words = this.textContent.split(/(\s+)/);
+                    words.forEach(word => {
+                        if (word.trim()) {
+                            elements.push({
+                                type: 'text',
+                                content: word,
+                                parent: $(this).parent()[0] ? $(this).parent()[0].tagName.toLowerCase() : 'span'
+                            });
+                        } else if (word) {
+                            elements.push({
+                                type: 'space',
+                                content: word,
+                                parent: $(this).parent()[0] ? $(this).parent()[0].tagName.toLowerCase() : 'span'
+                            });
+                        }
+                    });
+                } else if (this.nodeType === Node.ELEMENT_NODE) {
+                    // Pour les éléments HTML complets (images, liens, etc.)
+                    if (['img', 'br', 'hr'].includes(this.tagName.toLowerCase())) {
+                        elements.push({
+                            type: 'element',
+                            content: this.outerHTML,
+                            parent: null
+                        });
+                    } else {
+                        extractElements(this);
                     }
                 }
+            });
+        }
+        
+        extractElements(tempDiv);
+        
+        // Variables pour la reconstruction
+        let currentElement = null;
+        let elementIndex = 0;
+        
+        // Fonction récursive pour afficher les éléments avec délai
+        function showNextElement() {
+            if (elementIndex >= elements.length) {
+                // Afficher les boutons d'action
+                $('#action-buttons').removeClass('hidden').addClass('animate-fadeIn');
+                Toast.fire({ icon: 'success', title: 'Génération terminée !' });
+                return;
+            }
+            
+            const item = elements[elementIndex];
+            
+            // Créer ou continuer l'élément parent
+            if (!currentElement || currentElement.prop('tagName').toLowerCase() !== item.parent) {
+                if (currentElement) {
+                    container.append(currentElement);
+                }
+                currentElement = $(`<${item.parent}></${item.parent}>`);
+            }
+            
+            // Créer un span pour l'animation
+            let span;
+            if (item.type === 'element') {
+                span = $(item.content);
+            } else {
+                span = $('<span>').text(item.content).addClass('rain-text');
+            }
+            
+            currentElement.append(span);
+            
+            // Animation de l'élément
+            setTimeout(() => {
+                span.removeClass('rain-text');
                 
-                addNextWord();
-                
-            } else if (node.nodeType === Node.ELEMENT_NODE) {
-                // Nœud élément - recréer l'élément et traiter ses enfants
-                const newElement = $(`<${node.tagName.toLowerCase()}>`);
-                
-                // Copier les attributs
-                Array.from(node.attributes).forEach(attr => {
-                    newElement.attr(attr.name, attr.value);
-                });
-                
-                targetContainer.append(newElement);
+                // Scroll fluide
+                const containerOffset = container.offset();
+                const windowHeight = $(window).height();
+                if (containerOffset && containerOffset.top > windowHeight * 0.7) {
+                    $('html, body').animate({
+                        scrollTop: containerOffset.top - windowHeight * 0.3
+                    }, 300);
+                }
                 
-                // Traiter les enfants
-                Array.from(node.childNodes).forEach(child => {
-                    processNode(child, newElement);
-                });
-            }
+                elementIndex++;
+                showNextElement();
+            }, 50 + Math.random() * 100); // Délai variable pour un effet plus naturel
         }
         
-        // Démarrer le traitement
-        Array.from(tempDiv.get(0).childNodes).forEach(child => {
-            processNode(child, container);
-        });
-        
-        // Auto-scroll pendant le streaming
-        const scrollInterval = setInterval(() => {
-            smoothScrollToBottom();
-        }, 200);
+        // Démarrer l'affichage
+        showNextElement();
         
+        // S'assurer que le dernier élément est ajouté
         setTimeout(() => {
-            clearInterval(scrollInterval);
-        }, (text.split(' ').length * delay) + 2000);
+            if (currentElement) {
+                container.append(currentElement);
+            }
+        }, elements.length * 80);
     }
 
-    // Fonction de scroll optimisée
-    function smoothScrollToBottom() {
-        const targetScrollTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight - 50);
-        window.scrollTo({
-            top: targetScrollTop,
-            behavior: 'smooth'
-        });
+    // Variables pour optimiser le scroll
+    let isScrolling = false;
+    let scrollTimer = null;
+    let lastScrollTime = 0;
+    
+    // Fonction de scroll optimisée avec throttling
+    function smoothScrollToBottom(force = false) {
+        const now = Date.now();
+        
+        // Throttling : éviter trop d'appels de scroll
+        if (!force && now - lastScrollTime < 100) {
+            return;
+        }
+        
+        lastScrollTime = now;
+        
+        // Annuler le timer précédent s'il existe
+        if (scrollTimer) {
+            clearTimeout(scrollTimer);
+        }
+        
+        // Utiliser requestAnimationFrame pour un scroll plus fluide
+        if (!isScrolling) {
+            isScrolling = true;
+            
+            requestAnimationFrame(() => {
+                // Scroll fluide vers le bas avec une marge
+                const targetScrollTop = Math.max(0, document.documentElement.scrollHeight - window.innerHeight - 50);
+                
+                // Utiliser la méthode native pour de meilleures performances
+                window.scrollTo({
+                    top: targetScrollTop,
+                    behavior: 'smooth'
+                });
+                
+                // Marquer comme terminé après l'animation
+                scrollTimer = setTimeout(() => {
+                    isScrolling = false;
+                }, 200);
+            });
+        }
     }
 
     // --- Gestion de l'interface ---
     $('#type-select').change(function() {
         const type = $(this).val();
         // Cacher les sections de résultat lors du changement de type
-        $('#loading-section, #thinking-wrapper, #response, #action-buttons').addClass('hidden');
+        $('#thinking-wrapper, #response, #action-buttons, #loading-section').addClass('hidden');
 
-        if (type === '3') { // Sujet Type 3
+        if (type === '3') { // Sujet Type 3 (anciennement Analyse d'image)
             $('#text-input-container').hide();
             $('#image-input-container').show().addClass('animate-fadeIn');
             $('#deepthink-btn').hide();
             $('#submit-btn').html('<svg class="h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" /></svg>Analyser le sujet');
+            $('label[for="image-upload"]').text("Charger un document pour analyse (image, etc.)");
         } else { // Dissertation texte
             $('#text-input-container').show().addClass('animate-fadeIn');
             $('#image-input-container').hide();
@@ -758,64 +739,19 @@ La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on
         }
     });
 
-    // --- Gestion des clics pour démarrer la génération ---
-    $('#submit-btn, #deepthink-btn').click(function() {
-        const type = $('#type-select').val();
-        const isDeepThink = $(this).attr('id') === 'deepthink-btn';
-        
-        if (type === '3') {
-            const imageFile = $('#image-upload')[0].files[0];
-            if (!imageFile) { 
-                Swal.fire('Erreur', 'Veuillez sélectionner un document.', 'error'); 
-                return; 
-            }
-        } else {
-            const question = $('#question').val().trim();
-            if (!question) { 
-                Swal.fire('Erreur', 'Veuillez saisir un sujet.', 'error'); 
-                return; 
-            }
-        }
+    // --- Logique de Génération avec Nouveau Système de Loading ---
+    async function handleStreamedGeneration(url, options) {
+        // Démarrer le loader élégant
+        startElegantLoader();
         
-        // Cacher les sections précédentes et démarrer le loader
-        $('#thinking-wrapper, #response, #action-buttons').addClass('hidden');
-        startProgressLoader();
-        
-        // Simuler une génération (remplacer par l'appel API réel)
-        setTimeout(() => {
-            completeProgress();
-        }, Math.random() * 3000 + 2000); // Entre 2 et 5 secondes
-        
-        /*
-        // Code pour l'appel API réel (décommenter et adapter) :
-        const data = type === '3' ? 
-            new FormData().append('image', $('#image-upload')[0].files[0]) :
-            { question: $('#question').val().trim(), type, courseId: $('#course-select').val() || null };
-        
-        const url = type === '3' ? '/stream_philo_image' : 
-                   isDeepThink ? '/stream_philo_deepthink' : '/stream_philo';
-        
-        handleRealStreamedGeneration(url, {
-            method: 'POST',
-            headers: type !== '3' ? { 'Content-Type': 'application/json' } : undefined,
-            body: type === '3' ? data : JSON.stringify(data)
-        });
-        */
-    });
+        // Réinitialiser le contenu stocké
+        storedThinkingContent = '';
+        storedResponseContent = '';
 
-    // Fonction pour les vrais appels API streamés (à utiliser quand l'API est prête)
-    async function handleRealStreamedGeneration(url, options) {
-        startProgressLoader();
-        
-        let fullResponseText = '', fullThinkingText = '';
-        
         try {
             const response = await fetch(url, options);
             if (!response.ok) throw new Error(await response.text());
 
-            // Compléter la barre de progression
-            completeProgress();
-            
             const reader = response.body.getReader();
             const decoder = new TextDecoder();
             let buffer = '';
@@ -827,16 +763,16 @@ La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on
                 buffer += decoder.decode(value, { stream: true });
                 const lines = buffer.split('\n');
                 buffer = lines.pop();
-                
+
                 for (const line of lines) {
                     if (line.trim() === '') continue;
                     try {
                         const data = JSON.parse(line.trim());
                         
                         if (data.type === 'thought') {
-                            fullThinkingText += data.content;
+                            storedThinkingContent += data.content;
                         } else if (data.type === 'answer') {
-                            fullResponseText += data.content;
+                            storedResponseContent += data.content;
                         } else if (data.type === 'error') {
                             throw new Error(data.content);
                         }
@@ -846,50 +782,65 @@ La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on
                 }
             }
             
-            // Démarrer l'affichage streaming avec les vraies données
-            startWordByWordStreaming(fullThinkingText, fullResponseText);
+            // Une fois le streaming terminé, finaliser le loader et afficher le contenu
+            finishLoaderAndDisplay();
+            
+            // Sauvegarder la dissertation
+            let title;
+            if ($('#type-select').val() === '3') {
+                const fileName = $('#image-upload')[0].files[0]?.name || "Analyse de document";
+                title = `Analyse (Sujet Type 3): ${fileName}`;
+            } else {
+                title = $('#question').val().trim();
+            }
+            saveDissertation(title, storedResponseContent);
 
         } catch (error) {
+            clearInterval(progressInterval);
             $('#loading-section').addClass('hidden');
             Swal.fire({ icon: 'error', title: 'Erreur', text: error.message || "Une erreur inconnue est survenue." });
         }
     }
 
+    // --- Gestion des Clics ---
+    $('#submit-btn, #deepthink-btn').click(function() {
+        const type = $('#type-select').val();
+        const isDeepThink = $(this).attr('id') === 'deepthink-btn';
+        
+        if (type === '3') {
+            const imageFile = $('#image-upload')[0].files[0];
+            if (!imageFile) { Swal.fire('Erreur', 'Veuillez sélectionner un document.', 'error'); return; }
+            const formData = new FormData();
+            formData.append('image', imageFile);
+            handleStreamedGeneration('/stream_philo_image', { method: 'POST', body: formData });
+        } else {
+            const question = $('#question').val().trim();
+            if (!question) { Swal.fire('Erreur', 'Veuillez saisir un sujet.', 'error'); return; }
+            const data = { question, type, courseId: $('#course-select').val() || null };
+            const url = isDeepThink ? '/stream_philo_deepthink' : '/stream_philo';
+            handleStreamedGeneration(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) });
+        }
+    });
+
     // --- Fonctions de gestion de l'historique ---
     function loadCourses() {
-        // Simuler le chargement des cours
-        const sampleCourses = [
-            { id: '1', title: 'Introduction à la philosophie politique', author: 'Martin' },
-            { id: '2', title: 'Éthique et morale', author: 'Dubois' },
-            { id: '3', title: 'Métaphysique contemporaine', author: 'Laurent' }
+        const courses = [
+            { id: 1, title: "Introduction à la philosophie", author: "Martin" },
+            { id: 2, title: "Éthique et morale", author: "Dubois" },
+            { id: 3, title: "Métaphysique moderne", author: "Bernard" },
+            { id: 4, title: "Philosophie politique", author: "Rousseau" },
+            { id: 5, title: "Esthétique et art", author: "Delacroix" }
         ];
         
         const select = $('#course-select');
-        sampleCourses.forEach(course => {
+        courses.forEach(course => {
             const newOption = new Option(course.title, course.id, false, false);
             $(newOption).data('author', course.author);
             select.append(newOption);
         });
         select.trigger('change');
-        
-        /*
-        // Code pour l'appel API réel :
-        $.ajax({
-          url: '/api/philosophy/courses',
-          method: 'GET',
-        }).done(function(courses) {
-            const select = $('#course-select');
-            courses.forEach(course => {
-              const newOption = new Option(course.title, course.id, false, false);
-              $(newOption).data('author', course.author);
-              select.append(newOption);
-            });
-            select.trigger('change');
-        }).fail(function() {
-            Toast.fire({ icon: 'error', title: 'Erreur de chargement des cours' });
-        });
-        */
     }
+    loadCourses();
 
     function saveDissertation(title, content) {
         if (!title || !content) return;
@@ -940,11 +891,12 @@ La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on
         });
     }
     
-    // Gestion des interactions avec l'historique
+    // Optimiser l'ouverture des dissertations avec une transition plus fluide
     $('#dissertations-list').on('click', '.collapsible', function() {
         const content = $(this).next('.content');
         const isVisible = content.is(':visible');
         
+        // Animation plus fluide avec easing
         content.stop(true, true).slideToggle({
             duration: 300,
             easing: 'swing',
@@ -960,13 +912,14 @@ La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on
     });
     
     $('#dissertations-list').on('click', '.delete-btn', function(e) {
-        e.stopPropagation();
+        e.stopPropagation(); // Empêcher le collapsible de se fermer
         const index = $(this).data('index');
         deleteDissertation(index);
     });
 
     $('#copy-btn').click(function() {
         const htmlToCopy = $('#response > div').html();
+        // Pour copier le Markdown brut (plus fidèle)
         const textToCopy = new DOMParser().parseFromString(htmlToCopy, 'text/html').body.textContent || "";
         navigator.clipboard.writeText(textToCopy).then(() => {
             Toast.fire({ icon: 'success', title: 'Copié dans le presse-papiers!' });
@@ -975,10 +928,11 @@ La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on
         });
     });
 
-    // Optimisations mobiles
+    // Optimisation pour les événements de scroll sur mobile
     let ticking = false;
     
     function updateScrollPosition() {
+        // Code pour gérer les changements de position de scroll si nécessaire
         ticking = false;
     }
     
@@ -989,11 +943,14 @@ La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on
         }
     }, { passive: true });
 
+    // Optimisation du resize pour mobile
     let resizeTimer;
     window.addEventListener('resize', function() {
         clearTimeout(resizeTimer);
         resizeTimer = setTimeout(function() {
+            // Recalculer les dimensions si nécessaire
             if (window.innerWidth <= 640) {
+                // Optimisations spécifiques mobile
                 $('body').addClass('mobile-optimized');
             } else {
                 $('body').removeClass('mobile-optimized');
@@ -1001,9 +958,11 @@ La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on
         }, 250);
     }, { passive: true });
 
+    // Optimisation tactile pour mobile
     if ('ontouchstart' in window) {
         $('body').addClass('touch-device');
         
+        // Améliorer les interactions tactiles
         $(document).on('touchstart', 'button, .collapsible', function() {
             $(this).addClass('touch-active');
         });
@@ -1014,8 +973,7 @@ La liberté ne peut se réduire à la simple capacité de faire tout ce que l'on
         });
     }
 
-    // Initialisation
-    loadCourses();
+    // Init
     updateSavedDissertationsList();
 });
 </script>