Update templates/index.html

templates/index.html

@@ -222,9 +222,9 @@
         <header class="bg-white shadow-sm py-6">
             <div class="container mx-auto px-4">
                 <div class="flex items-center justify-between">
-                    <a href="https://mariam-241.vercel.app/indeex" class="text-3xl font-bold text-primary-700 flex items-center">
+                    <a href="#" class="text-3xl font-bold text-primary-700 flex items-center">
                         <i class="fas fa-home mr-3 text-primary-500"></i>
-                        Accueil 
+                        Mariam Quizz 
                     </a>
                     <div class="flex space-x-2">
                         <button id="themeToggle" class="p-2 rounded-full hover:bg-gray-100">
@@ -361,7 +361,8 @@
             </div>
         </main>
 
-        <footer class="bg-gray-900 text-white py-8 mt-20">
+        <!-- MODIFICATION ICI: Ajout de 'hidden md:block' -->
+        <footer class="hidden md:block bg-gray-900 text-white py-8 mt-20">
             <div class="container mx-auto px-4">
                 <div class="flex flex-col md:flex-row justify-between items-center">
                     <div class="mb-4 md:mb-0">
@@ -378,7 +379,7 @@
                     </div>
                 </div>
                 <div class="mt-8 border-t border-gray-800 pt-6 text-sm text-gray-400 text-center">
-                    &copy; 2025 Mémorisation Facile. Tous droits réservés.
+                    © 2025 Mémorisation Facile. Tous droits réservés.
                 </div>
             </div>
         </footer>
@@ -398,7 +399,7 @@
         
         // Gestion du thème clair/sombre
         themeToggle.addEventListener('click', function() {
-            document.body.classList.toggle('dark-mode');
+            document.body.classList.toggle('dark-mode'); // Vous aurez besoin d'ajouter des styles pour .dark-mode si vous voulez un vrai thème sombre
             const icon = this.querySelector('i');
             if (icon.classList.contains('fa-moon')) {
                 icon.classList.remove('fa-moon');
@@ -407,239 +408,325 @@
                 icon.classList.remove('fa-sun');
                 icon.classList.add('fa-moon');
             }
+            // Implémentation basique pour l'exemple: changer le fond du body
+            if (document.body.classList.contains('dark-mode')) {
+                 document.body.style.backgroundColor = '#1f2937'; // Un gris sombre
+                 document.body.style.color = '#f3f4f6'; // Un gris clair pour le texte
+            } else {
+                document.body.style.backgroundColor = '#f8fafc'; // Retour au fond clair
+                document.body.style.color = 'initial'; // Retour à la couleur de texte par défaut
+            }
         });
         
         // Animation de chargement
         function simulateLoading() {
+            loadingIndicator.classList.remove('hidden'); // Assurez-vous que le chargement est visible
+            progressBar.style.width = '0%'; // Reset progress bar
+            // Reset steps visual state
+            [step2, step3, step4].forEach(step => {
+                step.className = 'w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center mr-3';
+                step.innerHTML = '<i class="fas fa-hourglass text-white text-xs"></i>';
+            });
+            // Start step 1 visual state
+             const step1IconContainer = loadingSteps.children[0].querySelector('div');
+            step1IconContainer.className = 'w-6 h-6 rounded-full bg-primary-500 flex items-center justify-center mr-3';
+            step1IconContainer.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
+            step2.innerHTML = '<i class="fas fa-spinner text-white text-xs animate-spin"></i>'; // Start step 2 loading
+
             let progress = 0;
             const interval = setInterval(() => {
                 progress += 1;
-                progressBar.style.width = `${progress}%`;
-                
+                progressBar.style.width = `${Math.min(progress, 100)}%`; // Ne pas dépasser 100%
+
                 if (progress === 25) {
                     step2.classList.remove('bg-gray-200');
                     step2.classList.add('bg-primary-500');
                     step2.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
+                    step3.innerHTML = '<i class="fas fa-spinner text-white text-xs animate-spin"></i>';
                 } else if (progress === 60) {
                     step3.classList.remove('bg-gray-200');
                     step3.classList.add('bg-primary-500');
                     step3.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
                     step4.innerHTML = '<i class="fas fa-spinner text-white text-xs animate-spin"></i>';
                 } else if (progress === 95) {
-                    step4.classList.remove('bg-gray-200');
+                     step4.classList.remove('bg-gray-200');
                     step4.classList.add('bg-primary-500');
                     step4.innerHTML = '<i class="fas fa-check text-white text-xs"></i>';
                 }
-                
+
                 if (progress >= 100) {
                     clearInterval(interval);
+                    // Ne cachez pas l'indicateur ici, laissez la fonction principale le faire après le fetch
                 }
-            }, 50);
-            
-            return interval;
+            }, 50); // 50ms * 100 = 5 secondes pour l'animation complète
+
+            return interval; // Retourne l'ID de l'intervalle pour pouvoir l'arrêter
         }
-        
+
         // Fonction pour créer des confettis
         function createConfetti() {
             const confettiCount = 100;
             const colors = ['#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
-            
+
             for (let i = 0; i < confettiCount; i++) {
                 const confetti = document.createElement('div');
-                confetti.className = 'confetti';
+                confetti.className = 'confetti fixed top-0 pointer-events-none z-50'; // Assurez-vous qu'ils sont bien positionnés et visibles
                 confetti.style.left = `${Math.random() * 100}vw`;
                 confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                 confetti.style.width = `${Math.random() * 10 + 5}px`;
                 confetti.style.height = `${Math.random() * 10 + 5}px`;
-                confetti.style.animationDuration = `${Math.random() * 3 + 2}s`;
-                document.body.appendChild(confetti);
+                 // Ajuster l'animation pour partir du haut
+                confetti.style.animation = `confetti-fall ${Math.random() * 3 + 2}s linear forwards`;
+                confetti.style.transform = `translateY(-20px) rotate(${Math.random() * 360}deg)`; // Position initiale légèrement au-dessus
+                confetti.style.opacity = '1'; // Doit être visible au début
                 
+                document.body.appendChild(confetti);
+
                 setTimeout(() => {
                     confetti.remove();
-                }, 5000);
+                }, 5000); // Durée max avant suppression
             }
         }
 
+
         // Gestion des flashcards
         function flipCard(card) {
             card.classList.toggle('flipped');
         }
-        
+
         generateBtn.addEventListener('click', function() {
             const topic = topicInput.value.trim();
+             // Retirer les anciens messages d'erreur s'il y en a
+            const existingError = topicInput.parentElement.querySelector('.text-red-500');
+            if (existingError) {
+                existingError.remove();
+            }
+            // Retirer les anciens conteneurs d'erreur globaux
+            document.querySelectorAll('.error-container-global').forEach(el => el.remove());
+
+
             if (!topic) {
                 // Animation de secouement sur l'input
                 topicInput.classList.add('border-red-500');
-                topicInput.classList.add('animate-bounce');
+                topicInput.classList.add('animate-bounce'); // Attention, 'animate-bounce' fait rebondir, pas secouer. Il faudrait une animation custom pour secouer.
                 setTimeout(() => {
                     topicInput.classList.remove('animate-bounce');
                     topicInput.classList.remove('border-red-500');
                 }, 1000);
-                
-                // Afficher un message d'erreur
+
+                // Afficher un message d'erreur sous l'input
                 const errorMsg = document.createElement('div');
                 errorMsg.className = 'text-red-500 text-sm mt-1 ml-2';
                 errorMsg.textContent = 'Veuillez entrer un sujet';
                 topicInput.parentElement.appendChild(errorMsg);
-                setTimeout(() => {
-                    errorMsg.remove();
-                }, 3000);
-                
+
                 return;
             }
 
             const contentType = document.querySelector('input[name="contentType"]:checked').value;
 
-            // Afficher le chargement et cacher les anciens résultats
-            loadingIndicator.classList.remove('hidden');
+            // Cacher les anciens résultats et afficher le chargement
             flashcardsContainer.classList.add('hidden');
             quizContainer.classList.add('hidden');
             flashcardsContainer.innerHTML = '';
             quizContainer.innerHTML = '';
-            
+            loadingIndicator.classList.remove('hidden');
+
             // Simuler l'animation de chargement
             const loadingInterval = simulateLoading();
+            const minLoadingTime = 3000; // Temps minimum d'affichage du chargement (en ms)
+            const startTime = Date.now();
 
-            // Envoi de la requête
-            fetch('/generate', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ topic, type: contentType }),
-            })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`Erreur HTTP: ${response.status}`);
-                }
-                return response.json();
-            })
-            .then(data => {
-                // Assurons-nous que l'animation montre au moins 2 secondes
+
+            // ---- DEBUT BLOC SIMULATION (À REMPLACER PAR VOTRE VRAI FETCH) ----
+            // Simule une réponse de l'API après un délai
+            setTimeout(() => {
+                 const elapsedTime = Date.now() - startTime;
+                 const remainingTime = Math.max(0, minLoadingTime - elapsedTime);
+
+                 // Simuler des données de réponse
+                 let fakeData;
+                 if (contentType === 'flashcards') {
+                     fakeData = {
+                         flashcards: [
+                             { question: `Question 1 sur ${topic}?`, answer: `Réponse 1 sur ${topic}` },
+                             { question: `Question 2 sur ${topic}?`, answer: `Réponse 2 sur ${topic}` },
+                             { question: `Question 3 sur ${topic}?`, answer: `Réponse 3 sur ${topic}` },
+                             { question: `Question 4 sur ${topic}?`, answer: `Réponse 4 sur ${topic}` },
+                             { question: `Question 5 sur ${topic}?`, answer: `Réponse 5 sur ${topic}` }
+                         ]
+                     };
+                 } else {
+                    const options = [`Option A pour ${topic}`, `Option B pour ${topic}`, `Option C pour ${topic}`, `Option D pour ${topic}`];
+                     fakeData = {
+                         quiz: [
+                             { question: `Quiz 1: Quelle est la capitale de ${topic}?`, options: [...options].sort(() => Math.random() - 0.5), correctAnswer: options[0], explanation: `Explication pour quiz 1 sur ${topic}.` },
+                             { question: `Quiz 2: Comment fonctionne ${topic}?`, options: [...options].sort(() => Math.random() - 0.5), correctAnswer: options[1], explanation: `Explication pour quiz 2 sur ${topic}.` },
+                             { question: `Quiz 3: Pourquoi ${topic} est important?`, options: [...options].sort(() => Math.random() - 0.5), correctAnswer: options[2], explanation: `Explication pour quiz 3 sur ${topic}.` }
+                         ]
+                     };
+                 }
+                 // Simuler une erreur parfois
+                 // fakeData = { error: "Désolé, une erreur simulée s'est produite." };
+
+                // Attendre la fin du temps minimum de chargement avant de traiter la réponse
                 setTimeout(() => {
-                    clearInterval(loadingInterval);
-                    progressBar.style.width = '100%';
-                    
-                    setTimeout(() => {
-                        loadingIndicator.classList.add('hidden');
-                        
-                        if (data.error) {
-                            // Afficher une erreur élégante
-                            const errorContainer = document.createElement('div');
-                            errorContainer.className = 'bg-red-50 border-l-4 border-red-500 p-4 rounded-md mt-4';
-                            errorContainer.innerHTML = `
-                                <div class="flex">
-                                    <div class="flex-shrink-0">
-                                        <i class="fas fa-exclamation-circle text-red-500"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-sm text-red-700">
-                                            ${data.error}
-                                        </p>
-                                    </div>
-                                </div>
-                            `;
-                            document.querySelector('.max-w-3xl').appendChild(errorContainer);
-                            return;
-                        }
+                    clearInterval(loadingInterval); // Arrêter l'intervalle de la barre de progression
+                    progressBar.style.width = '100%'; // S'assurer que la barre est pleine
 
-                        if (contentType === 'flashcards' && data.flashcards) {
-                            flashcardsContainer.classList.remove('hidden');
-                            displayFlashcards(data.flashcards);
-                            // Créer un effet de confettis
-                            createConfetti();
-                        } else if (contentType === 'quiz' && data.quiz) {
-                            quizContainer.classList.remove('hidden');
-                            displayQuiz(data.quiz);
-                            // Créer un effet de confettis
-                            createConfetti();
-                        } else {
-                            // Afficher une erreur élégante
-                            const errorContainer = document.createElement('div');
-                            errorContainer.className = 'bg-red-50 border-l-4 border-red-500 p-4 rounded-md mt-4';
-                            errorContainer.innerHTML = `
-                                <div class="flex">
-                                    <div class="flex-shrink-0">
-                                        <i class="fas fa-exclamation-circle text-red-500"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-sm text-red-700">
-                                            Aucune donnée reçue ou format incorrect.
-                                        </p>
-                                    </div>
-                                </div>
-                            `;
-                            document.querySelector('.max-w-3xl').appendChild(errorContainer);
-                        }
-                    }, 500);
-                }, 2000);
-            })
-            .catch(error => {
-                clearInterval(loadingInterval);
-                loadingIndicator.classList.add('hidden');
-                console.error('Erreur lors de la génération:', error);
-                
-                // Afficher une erreur élégante
-                const errorContainer = document.createElement('div');
-                errorContainer.className = 'bg-red-50 border-l-4 border-red-500 p-4 rounded-md mt-4';
-                errorContainer.innerHTML = `
-                    <div class="flex">
-                        <div class="flex-shrink-0">
-                            <i class="fas fa-exclamation-circle text-red-500"></i>
-                        </div>
-                        <div class="ml-3">
-                            <p class="text-sm text-red-700">
-                                Erreur lors de la génération: ${error.message}.
-                            </p>
-                        </div>
-                    </div>
-                `;
-                document.querySelector('.max-w-3xl').appendChild(errorContainer);
-            });
+                    // Cacher l'indicateur de chargement après un court délai pour montrer la fin
+                     setTimeout(() => {
+                         loadingIndicator.classList.add('hidden');
+
+                         if (fakeData.error) {
+                             displayGlobalError(fakeData.error);
+                         } else if (contentType === 'flashcards' && fakeData.flashcards) {
+                             flashcardsContainer.classList.remove('hidden');
+                             displayFlashcards(fakeData.flashcards);
+                             createConfetti();
+                         } else if (contentType === 'quiz' && fakeData.quiz) {
+                             quizContainer.classList.remove('hidden');
+                             displayQuiz(fakeData.quiz);
+                             createConfetti();
+                         } else {
+                            displayGlobalError("Aucune donnée reçue ou format incorrect.");
+                         }
+                     }, 300); // Court délai pour voir la barre à 100%
+                }, remainingTime);
+
+            }, 1500); // Délai simulé de réponse de l'API (1.5s)
+            // ---- FIN BLOC SIMULATION ----
+
+            /*
+            // ---- VOTRE VRAI FETCH (DÉCOMMENTER ET ADAPTER) ----
+             fetch('/generate', {
+                 method: 'POST',
+                 headers: {
+                     'Content-Type': 'application/json',
+                 },
+                 body: JSON.stringify({ topic, type: contentType }),
+             })
+             .then(response => {
+                 if (!response.ok) {
+                      // Essayer de lire le message d'erreur du corps si possible
+                     return response.text().then(text => {
+                         throw new Error(`Erreur HTTP: ${response.status} - ${text || response.statusText}`);
+                     });
+                 }
+                 return response.json();
+             })
+             .then(data => {
+                 const elapsedTime = Date.now() - startTime;
+                 const remainingTime = Math.max(0, minLoadingTime - elapsedTime);
+
+                 setTimeout(() => {
+                     clearInterval(loadingInterval);
+                     progressBar.style.width = '100%';
+
+                     setTimeout(() => {
+                         loadingIndicator.classList.add('hidden');
+
+                         if (data.error) {
+                            displayGlobalError(data.error);
+                         } else if (contentType === 'flashcards' && data.flashcards) {
+                             flashcardsContainer.classList.remove('hidden');
+                             displayFlashcards(data.flashcards);
+                             createConfetti();
+                         } else if (contentType === 'quiz' && data.quiz) {
+                             quizContainer.classList.remove('hidden');
+                             displayQuiz(data.quiz);
+                             createConfetti();
+                         } else {
+                             displayGlobalError("Aucune donnée reçue ou format incorrect.");
+                         }
+                     }, 300);
+                 }, remainingTime);
+             })
+             .catch(error => {
+                 const elapsedTime = Date.now() - startTime;
+                 const remainingTime = Math.max(0, minLoadingTime - elapsedTime);
+
+                 setTimeout(() => {
+                    clearInterval(loadingInterval);
+                    loadingIndicator.classList.add('hidden');
+                    console.error('Erreur lors de la génération:', error);
+                    displayGlobalError(`Erreur lors de la génération: ${error.message}. Veuillez réessayer.`);
+                }, remainingTime);
+             });
+             // ---- FIN VRAI FETCH ----
+             */
         });
+         // Fonction pour afficher une erreur globale
+        function displayGlobalError(message) {
+            const errorContainer = document.createElement('div');
+            errorContainer.className = 'error-container-global bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md mt-6 mb-6'; // Ajout de marge
+            errorContainer.innerHTML = `
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <i class="fas fa-exclamation-triangle text-red-500 fa-lg"></i>
+                    </div>
+                    <div class="ml-3">
+                        <h3 class="text-sm font-medium">Une erreur est survenue</h3>
+                        <p class="text-sm mt-1">
+                            ${message}
+                        </p>
+                    </div>
+                </div>
+            `;
+             // Insérer après la section de configuration
+             const configSection = document.querySelector('.bg-white.rounded-xl.shadow-lg.p-8.mb-10');
+             if (configSection) {
+                configSection.parentNode.insertBefore(errorContainer, configSection.nextSibling);
+             } else {
+                 // Fallback si la section de config n'est pas trouvée
+                 document.querySelector('main .max-w-3xl').appendChild(errorContainer);
+             }
+        }
+
+
+       function displayFlashcards(flashcards) {
+            flashcardsContainer.innerHTML = ''; // Vider le conteneur
 
-        function displayFlashcards(flashcards) {
             const header = document.createElement('div');
             header.className = 'mb-8 text-center';
             header.innerHTML = `
                 <h2 class="text-3xl font-bold text-gray-800 mb-2">Vos Flashcards (${flashcards.length})</h2>
-                <p >Cliquez sur une carte pour la retourner et voir la réponse.</p>
-                    <p class="text-gray-600">
-                        <i class="far fa-lightbulb mr-1"></i> Astuce : Essayez de répondre mentalement avant de retourner la carte
-                        </p>
-                <p><div class="flex items-center justify-center space-x-4 mt-6">
-                </div></p>
-                
+                <p class="text-gray-600">Cliquez sur une carte pour la retourner et voir la réponse.</p>
+                <p class="text-gray-500 text-sm mt-1">
+                    <i class="far fa-lightbulb mr-1"></i> Astuce : Essayez de répondre mentalement avant de retourner la carte.
+                </p>
             `;
             flashcardsContainer.appendChild(header);
-            
+
             const flashcardsGrid = document.createElement('div');
             flashcardsGrid.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6';
             flashcardsContainer.appendChild(flashcardsGrid);
-            
+
             flashcards.forEach((card, index) => {
                 const cardElement = document.createElement('div');
+                // Ajouter un délai d'animation basé sur l'index pour un effet d'apparition décalé
+                cardElement.style.animation = `fadeInUp 0.5s ease-out ${index * 0.1}s forwards`;
+                cardElement.style.opacity = '0'; // Commencer invisible pour l'animation
                 cardElement.className = 'flashcard cursor-pointer';
                 cardElement.onclick = function() { flipCard(this); };
                 cardElement.innerHTML = `
                     <div class="flashcard-inner">
                         <div class="flashcard-front">
-                            <div class="w-full">
-                                <div class="absolute top-2 left-2 text-xs text-gray-400">#${index + 1}</div>
-                                <h3 class="text-lg font-semibold mb-2 text-center">${card.question}</h3>
-                                <div class="text-center mt-4">
+                            <div class="w-full flex flex-col justify-between h-full">
+                                <div class="text-left text-xs text-gray-400">#${index + 1}</div>
+                                <h3 class="text-lg font-semibold text-center flex-grow flex items-center justify-center px-2">${card.question}</h3>
+                                <div class="text-center mt-auto">
                                     <span class="text-xs text-gray-500">Cliquez pour voir la réponse</span>
                                 </div>
                             </div>
                         </div>
-                    
                         <div class="flashcard-back">
-                            <div class="w-full">
-                                <div class="absolute top-2 right-2 text-xs text-white opacity-70">#${index + 1}</div>
-                                <div class="text-center">
+                             <div class="w-full flex flex-col justify-between h-full">
+                                <div class="text-right text-xs text-white opacity-70">#${index + 1}</div>
+                                <div class="text-center flex-grow flex items-center justify-center px-2">
                                     <p class="font-medium">${card.answer}</p>
                                 </div>
-                                <div class="absolute bottom-2 right-2">
+                                <div class="text-right mt-auto">
                                     <span class="text-xs text-white opacity-70">Cliquez pour retourner</span>
                                 </div>
                             </div>
@@ -648,53 +735,58 @@
                 `;
                 flashcardsGrid.appendChild(cardElement);
             });
-            
-            // Ajouter des boutons de navigation et de contrôle
+
+            // Ajouter les contrôles après les cartes
             const controls = document.createElement('div');
-            controls.className = 'mt-10 flex flex-col items-center justify-center';
-            controls.innerHTML = `
-                <div class="flex items-center space-x-4 mb-6">
-                    <button class="px-4 py-2 bg-primary-100 hover:bg-primary-200 text-primary-700 rounded-md transition duration-300 flex items-center">
-                        <i class="fas fa-redo-alt mr-2"></i> Recommencer
-                    </button>
-                    <button id="newTopicBtn" class="px-4 py-2 bg-primary-600 hover:bg-primary-700 text-white rounded-md transition duration-300 flex items-center">
+            controls.className = 'mt-10 flex flex-col items-center justify-center space-y-4';
+             controls.innerHTML = `
+                <div class="flex items-center space-x-4">
+                     <button id="newTopicBtn" class="btn-primary">
                         <i class="fas fa-plus mr-2"></i> Nouveau sujet
                     </button>
+                     <button id="restartFlashcardsBtn" class="btn-secondary">
+                         <i class="fas fa-redo-alt mr-2"></i> Recommencer (retourner tout)
+                    </button>
                 </div>
-               
-            `;
+                <!-- Ajouter d'autres boutons si nécessaire -->
+             `;
             flashcardsContainer.appendChild(controls);
-            
+
             // Ajouter des interactions aux boutons
-            document.getElementById('printBtn').addEventListener('click', function() {
-                window.print();
-            });
-            
-            document.getElementById('saveBtn').addEventListener('click', function() {
-                alert('Flashcards sauvegardées !');
-            });
-            
-            document.getElementById('shareBtn').addEventListener('click', function() {
-                alert('Lien de partage copié dans le presse-papiers !');
-            });
-            
-            document.getElementById('newTopicBtn').addEventListener('click', function() {
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth'
-                });
+             document.getElementById('newTopicBtn').addEventListener('click', function() {
+                 // Cacher les résultats actuels
+                flashcardsContainer.classList.add('hidden');
+                flashcardsContainer.innerHTML = ''; // Vider pour la prochaine génération
+                quizContainer.classList.add('hidden');
+                quizContainer.innerHTML = '';
+
+                 // Remonter en haut et focus
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+                topicInput.value = ''; // Vider le champ sujet
                 topicInput.focus();
+             });
+             
+             document.getElementById('restartFlashcardsBtn').addEventListener('click', function() {
+                const allCards = flashcardsContainer.querySelectorAll('.flashcard.flipped');
+                allCards.forEach(card => card.classList.remove('flipped'));
+                // Optionnel : Scroll vers la première carte
+                 const firstCard = flashcardsContainer.querySelector('.flashcard');
+                 if(firstCard) {
+                     firstCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                 }
             });
         }
 
-        function displayQuiz(quizQuestions) {
+       function displayQuiz(quizQuestions) {
+             quizContainer.innerHTML = ''; // Vider le conteneur
+
             const header = document.createElement('div');
             header.className = 'mb-8 text-center';
             header.innerHTML = `
                 <h2 class="text-3xl font-bold text-gray-800 mb-2">Votre Quiz (${quizQuestions.length} questions)</h2>
                 <p class="text-gray-600">Testez vos connaissances en répondant aux questions</p>
                 <div class="flex items-center justify-center mt-6">
-                    <div class="bg-white px-4 py-2 rounded-full shadow-sm flex items-center">
+                    <div class="bg-white px-4 py-2 rounded-full shadow-sm flex items-center border border-gray-200">
                         <span class="text-primary-700 font-medium">Score: </span>
                         <span id="score" class="ml-1 text-primary-700 font-bold">0</span>
                         <span class="mx-1 text-gray-400">/</span>
@@ -703,222 +795,302 @@
                 </div>
             `;
             quizContainer.appendChild(header);
-            
-            // Créer un conteneur pour les questions
+
             const questionsContainer = document.createElement('div');
             questionsContainer.className = 'space-y-8';
             quizContainer.appendChild(questionsContainer);
-            
-            // Variable pour suivre le score
+
             let currentScore = 0;
-            
+            let answeredQuestions = 0; // Compteur pour savoir quand afficher les résultats
+
             quizQuestions.forEach((question, qIndex) => {
                 const questionElement = document.createElement('div');
-                questionElement.className = 'bg-white rounded-xl shadow-md p-6 transition-all duration-300';
+                questionElement.className = 'bg-white rounded-xl shadow-md p-6 transition-all duration-300 question-card'; // Ajout de classe pour ciblage
                 questionElement.setAttribute('id', `question-${qIndex}`);
-                
+                // Animation d'apparition
+                 questionElement.style.animation = `fadeInUp 0.5s ease-out ${qIndex * 0.15}s forwards`;
+                 questionElement.style.opacity = '0';
+
                 let optionsHtml = '';
-                const safeCorrectAnswer = question.correctAnswer.replace(/"/g, '&quot;');
-                
-                question.options.forEach((option, oIndex) => {
+                // Assurez-vous que correctAnswer est une chaîne pour la comparaison
+                 const safeCorrectAnswer = String(question.correctAnswer).replace(/"/g, '"');
+
+                // Mélanger les options une seule fois pour cette question
+                const shuffledOptions = [...question.options].sort(() => Math.random() - 0.5);
+
+                shuffledOptions.forEach((option, oIndex) => {
+                    const safeOption = String(option).replace(/"/g, '"'); // Sécuriser aussi les options
                     optionsHtml += `
                         <div class="quiz-option mb-3" id="option-${qIndex}-${oIndex}">
-                            <input type="radio" id="q${qIndex}-o${oIndex}" name="question-${qIndex}" value="${option}" data-correct="${safeCorrectAnswer}">
-                            <label for="q${qIndex}-o${oIndex}" class="group">
-                                ${option}
-                                <span class="hidden success-icon absolute right-4 text-green-500">
+                            <input type="radio" id="q${qIndex}-o${oIndex}" name="question-${qIndex}" value="${safeOption}" data-correct="${safeCorrectAnswer}">
+                            <label for="q${qIndex}-o${oIndex}" class="group flex items-center">
+                                <span class="flex-grow">${option}</span>
+                                <span class="ml-2 hidden success-icon text-green-500 text-lg">
                                     <i class="fas fa-check-circle"></i>
                                 </span>
-                                <span class="hidden error-icon absolute right-4 text-red-500">
+                                <span class="ml-2 hidden error-icon text-red-500 text-lg">
                                     <i class="fas fa-times-circle"></i>
                                 </span>
                             </label>
                         </div>
                     `;
                 });
-                
+
                 questionElement.innerHTML = `
                     <div class="flex items-center justify-between mb-4">
-                        <span class="bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded">Question ${qIndex + 1}/${quizQuestions.length}</span>
-                        <span class="text-gray-400 text-sm">
-                            <i class="far fa-lightbulb"></i>
-                        </span>
+                        <span class="bg-primary-100 text-primary-800 text-xs font-medium px-2.5 py-0.5 rounded-full">Question ${qIndex + 1}/${quizQuestions.length}</span>
+                        <!-- On pourrait ajouter une icône d'info/aide ici si pertinent -->
                     </div>
-                    <h3 class="text-xl font-medium text-gray-800 mb-4">${question.question}</h3>
-                    <div class="options mt-5">
+                    <h3 class="text-lg md:text-xl font-medium text-gray-800 mb-5">${question.question}</h3>
+                    <div class="options mt-5 space-y-3"> <!-- Ajout space-y pour l'espacement -->
                         ${optionsHtml}
                     </div>
-                    <div class="explanation hidden mt-6 p-4 bg-blue-50 border border-blue-100 rounded-lg" id="explanation-${qIndex}">
+                     <div class="explanation hidden mt-6 p-4 bg-sky-50 border border-sky-200 rounded-lg" id="explanation-${qIndex}">
                         <div class="flex items-start">
                             <div class="flex-shrink-0 mt-0.5">
-                                <i class="fas fa-info-circle text-blue-500"></i>
+                                <i class="fas fa-info-circle text-sky-500"></i>
                             </div>
                             <div class="ml-3">
-                                <h4 class="text-sm font-medium text-blue-800">Explication</h4>
-                                <div class="mt-1 text-sm text-blue-700">${question.explanation}</div>
+                                <h4 class="text-sm font-semibold text-sky-800">Explication</h4>
+                                <div class="mt-1 text-sm text-sky-700">${question.explanation || "Pas d'explication fournie."}</div>
                             </div>
                         </div>
                     </div>
                 `;
                 questionsContainer.appendChild(questionElement);
-                
-                // Ajouter des gestionnaires d'événements pour les options
-                const options = questionElement.querySelectorAll('input[type="radio"]');
-                options.forEach((option) => {
-                    option.addEventListener('change', function() {
-                        const optionId = this.id;
-                        const [_, qIdx, oIdx] = optionId.match(/q(\d+)-o(\d+)/);
-                        const selected = this.value;
-                        const correct = this.getAttribute('data-correct');
+
+                const optionsInputs = questionElement.querySelectorAll('input[type="radio"]');
+                optionsInputs.forEach((optionInput) => {
+                    optionInput.addEventListener('change', function() {
+                        // Empêcher de répondre à nouveau si déjà répondu
+                        if (questionElement.dataset.answered === 'true') return;
+                        questionElement.dataset.answered = 'true'; // Marquer comme répondu
+                        answeredQuestions++;
+
+
+                        const qIdx = qIndex; // Utiliser qIndex directement
+                        const selectedValue = this.value;
+                        const correctAnswer = this.getAttribute('data-correct');
+                         const parentOptionDiv = this.parentElement; // Le div .quiz-option
                         const explanationElement = document.getElementById(`explanation-${qIdx}`);
-                        
-                        // Vérifier la réponse
-                        let delay = 0; // Initialiser le délai
-                        if (selected === correct) {
+
+                        // Désactiver toutes les options pour cette question
+                        optionsInputs.forEach(opt => opt.disabled = true);
+
+                        let isCorrect = false;
+                        if (selectedValue === correctAnswer) {
                             // Réponse correcte
-                            document.getElementById(`option-${qIdx}-${oIdx}`).classList.add('correct');
-                            currentScore++;
+                            parentOptionDiv.classList.add('correct'); // Appliquer sur le div parent
+                             parentOptionDiv.querySelector('.success-icon').classList.remove('hidden');
+                             currentScore++;
                             document.getElementById('score').textContent = currentScore;
-
-                            // Afficher une animation de succès
-                            const successIcon = this.nextElementSibling.querySelector('.success-icon');
-                            successIcon.classList.remove('hidden');
-                            delay = 2000; // 2 secondes pour une réponse correcte
+                            isCorrect = true;
                         } else {
                             // Réponse incorrecte
-                            document.getElementById(`option-${qIdx}-${oIdx}`).classList.add('incorrect');
-
-                            // Afficher une animation d'erreur
-                            const errorIcon = this.nextElementSibling.querySelector('.error-icon');
-                            errorIcon.classList.remove('hidden');
-
-                            // Mettre en évidence la bonne réponse
-                            options.forEach((opt, idx) => {
-                                if (opt.value === correct) {
-                                    document.getElementById(`option-${qIdx}-${idx}`).classList.add('correct');
-                                    const successIcon = opt.nextElementSibling.querySelector('.success-icon');
-                                    successIcon.classList.remove('hidden');
+                             parentOptionDiv.classList.add('incorrect');
+                             parentOptionDiv.querySelector('.error-icon').classList.remove('hidden');
+
+                             // Trouver et surligner la bonne réponse
+                             optionsInputs.forEach(opt => {
+                                if (opt.value === correctAnswer) {
+                                    const correctParentDiv = opt.parentElement;
+                                    correctParentDiv.classList.add('correct');
+                                     correctParentDiv.querySelector('.success-icon').classList.remove('hidden');
                                 }
                             });
-                            delay = 5000; // 5 secondes pour une réponse incorrecte
                         }
 
-                        // Désactiver toutes les autres options
-                        options.forEach((opt) => {
-                            if (opt !== this) {
-                                opt.disabled = true;
-                            }
-                        });
-
                         // Afficher l'explication
                         explanationElement.classList.remove('hidden');
+                         explanationElement.style.animation = 'fadeIn 0.5s ease-in'; // Petite animation pour l'explication
 
-                        // Animer le passage à la question suivante
-                        setTimeout(() => {
-                            const nextQuestion = document.getElementById(`question-${parseInt(qIdx) + 1}`);
-                            if (nextQuestion) {
-                                window.scrollTo({
-                                    top: nextQuestion.offsetTop - 20,
-                                    behavior: 'smooth'
-                                });
-                            } else {
-                                // C'était la dernière question, afficher un récapitulatif
-                                if (parseInt(qIdx) === quizQuestions.length - 1) {
-                                    displayQuizResults(currentScore, quizQuestions.length);
-                                }
-                            }
-                        }, delay);
+                        // Si toutes les questions ont été répondues, afficher les résultats finaux
+                        if (answeredQuestions === quizQuestions.length) {
+                             // Délai avant d'afficher les résultats pour laisser le temps de voir la dernière explication
+                             setTimeout(() => {
+                                displayQuizResults(currentScore, quizQuestions.length);
+                            }, isCorrect ? 1500 : 2500); // Plus long si incorrect
+                        } else {
+                             // Optionnel: Scroll automatique vers la question suivante après un délai
+                             const nextQuestion = document.getElementById(`question-${qIdx + 1}`);
+                             if (nextQuestion) {
+                                setTimeout(() => {
+                                     nextQuestion.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                                 }, isCorrect ? 1000 : 2000); // Délai plus court si correct
+                             }
+                        }
                     });
                 });
             });
         }
-        
+
+
         function displayQuizResults(score, total) {
-            const percentage = (score / total) * 100;
-            let resultClass, resultIcon, resultMessage;
-            
+             // Supprimer les anciens résultats s'il y en a
+            const existingResults = quizContainer.querySelector('.quiz-results');
+            if (existingResults) existingResults.remove();
+
+            const percentage = total > 0 ? Math.round((score / total) * 100) : 0;
+            let resultClass, resultIcon, resultMessage, colorClass;
+
             if (percentage >= 80) {
                 resultClass = 'bg-green-50 border-green-500 text-green-800';
-                resultIcon = '<i class="fas fa-trophy text-3xl text-yellow-500 mb-3"></i>';
+                resultIcon = '<i class="fas fa-trophy text-4xl text-yellow-400 mb-4"></i>';
                 resultMessage = 'Excellent ! Vous maîtrisez ce sujet.';
-            } else if (percentage >= 60) {
+                colorClass = 'bg-green-500';
+            } else if (percentage >= 50) {
                 resultClass = 'bg-blue-50 border-blue-500 text-blue-800';
-                resultIcon = '<i class="fas fa-medal text-3xl text-blue-500 mb-3"></i>';
+                 resultIcon = '<i class="fas fa-award text-4xl text-blue-500 mb-4"></i>';
                 resultMessage = 'Bon travail ! Continuez vos efforts.';
+                colorClass = 'bg-blue-500';
             } else {
                 resultClass = 'bg-red-50 border-red-500 text-red-800';
-                resultIcon = '<i class="fas fa-book-open text-3xl text-red-500 mb-3"></i>';
+                 resultIcon = '<i class="fas fa-book-reader text-4xl text-red-500 mb-4"></i>';
                 resultMessage = 'Continuez à étudier pour améliorer vos connaissances.';
+                 colorClass = 'bg-red-500';
             }
-            
+
             const resultsElement = document.createElement('div');
-            resultsElement.className = `mt-10 p-6 rounded-xl shadow-lg border-l-4 ${resultClass} text-center`;
+             resultsElement.className = `quiz-results mt-12 p-6 rounded-xl shadow-lg border-t-4 ${resultClass} text-center`; // Border top
+             resultsElement.style.animation = 'fadeInUp 0.6s ease-out';
             resultsElement.innerHTML = `
                 <div class="flex flex-col items-center">
                     ${resultIcon}
-                    <h3 class="text-2xl font-bold mb-2">Résultat final: ${score}/${total}</h3>
-                    <p class="mb-4">${resultMessage}</p>
-                    <div class="w-full max-w-xs bg-gray-200 rounded-full h-4 mb-4">
-                        <div class="h-4 rounded-full ${percentage >= 80 ? 'bg-green-500' : percentage >= 60 ? 'bg-blue-500' : 'bg-red-500'}" style="width: ${percentage}%"></div>
+                    <h3 class="text-2xl font-bold mb-2">Résultat final</h3>
+                    <p class="text-3xl font-bold mb-3">${score} / ${total}</p>
+                    <div class="w-full max-w-xs bg-gray-200 rounded-full h-5 mb-4 overflow-hidden border border-gray-300">
+                        <div class="h-full rounded-full ${colorClass} text-xs font-medium text-white text-center p-0.5 leading-none flex items-center justify-center" style="width: ${percentage}%">
+                           ${percentage}%
+                        </div>
                     </div>
-                    <div class="flex space-x-4 mt-6">
-                        <button id="retryQuizBtn" class="btn-secondary text-sm">
-                            <i class="fas fa-redo mr-2"></i> Réessayer
+                     <p class="mb-6">${resultMessage}</p>
+                    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 mt-4">
+                        <button id="retryQuizBtn" class="btn-secondary">
+                            <i class="fas fa-redo mr-2"></i> Réessayer le Quiz
                         </button>
-                        <button id="newQuizBtn" class="btn-primary text-sm">
-                            <i class="fas fa-plus mr-2"></i> Nouveau quiz
+                        <button id="newQuizBtnResults" class="btn-primary">
+                            <i class="fas fa-plus mr-2"></i> Nouveau Sujet
                         </button>
                     </div>
                 </div>
             `;
-            quizContainer.appendChild(resultsElement);
-            
+             quizContainer.appendChild(resultsElement);
+
             // Animation de confettis si le score est bon
             if (percentage >= 70) {
                 createConfetti();
             }
-            
+
+            // Scroll vers les résultats
+            resultsElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+
+
             // Ajouter des interactions aux boutons
             document.getElementById('retryQuizBtn').addEventListener('click', function() {
-                const radios = document.querySelectorAll('input[type="radio"]');
-                radios.forEach(radio => {
-                    radio.checked = false;
-                    radio.disabled = false;
-                });
-                
-                const options = document.querySelectorAll('.quiz-option');
-                options.forEach(option => {
-                    option.classList.remove('correct', 'incorrect');
-                });
-                
-                const explanations = document.querySelectorAll('.explanation');
-                explanations.forEach(exp => {
-                    exp.classList.add('hidden');
-                });
-                
-                const icons = document.querySelectorAll('.success-icon, .error-icon');
-                icons.forEach(icon => {
-                    icon.classList.add('hidden');
-                });
-                
+                 // Cacher les résultats
                 resultsElement.remove();
+                // Réinitialiser le score affiché
                 document.getElementById('score').textContent = '0';
-                
-                window.scrollTo({
-                    top: quizContainer.offsetTop,
-                    behavior: 'smooth'
+                // Réactiver et déselectionner toutes les options, cacher les icônes/explications
+                 const allQuestions = quizContainer.querySelectorAll('.question-card');
+                 allQuestions.forEach(qElement => {
+                    qElement.dataset.answered = 'false'; // Réinitialiser l'état "répondu"
+                    const radios = qElement.querySelectorAll('input[type="radio"]');
+                    radios.forEach(radio => {
+                        radio.checked = false;
+                        radio.disabled = false;
+                    });
+                     const optionsDivs = qElement.querySelectorAll('.quiz-option');
+                    optionsDivs.forEach(div => {
+                        div.classList.remove('correct', 'incorrect');
+                         div.querySelectorAll('.success-icon, .error-icon').forEach(icon => icon.classList.add('hidden'));
+                    });
+                     const explanation = qElement.querySelector('.explanation');
+                    if (explanation) explanation.classList.add('hidden');
                 });
+
+                 // Remonter à la première question
+                 const firstQuestion = document.getElementById('question-0');
+                 if (firstQuestion) {
+                    firstQuestion.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                 }
+                 // Réinitialiser les compteurs internes
+                 currentScore = 0;
+                 answeredQuestions = 0;
             });
-            
-            document.getElementById('newQuizBtn').addEventListener('click', function() {
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth'
-                });
+
+             document.getElementById('newQuizBtnResults').addEventListener('click', function() {
+                 // Cacher les résultats actuels
+                quizContainer.classList.add('hidden');
+                quizContainer.innerHTML = ''; // Vider pour la prochaine génération
+                flashcardsContainer.classList.add('hidden');
+                flashcardsContainer.innerHTML = '';
+
+                 // Remonter en haut et focus
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+                topicInput.value = ''; // Vider le champ sujet
                 topicInput.focus();
             });
         }
-        
+
+         // Ajouter des animations CSS simples
+        const styleSheet = document.createElement("style");
+        styleSheet.type = "text/css";
+        styleSheet.innerText = `
+             @keyframes fadeInUp {
+                 from {
+                     opacity: 0;
+                     transform: translateY(20px);
+                 }
+                 to {
+                     opacity: 1;
+                     transform: translateY(0);
+                 }
+             }
+             @keyframes fadeIn {
+                 from { opacity: 0; }
+                 to { opacity: 1; }
+             }
+             /* Style pour le dark mode (très basique) */
+             body.dark-mode { background-color: #111827; color: #d1d5db; }
+             body.dark-mode .bg-white { background-color: #1f2937; border-color: #374151; }
+             body.dark-mode .bg-gray-50 { background-color: #374151; }
+             body.dark-mode .text-gray-800 { color: #f9fafb; }
+             body.dark-mode .text-gray-600 { color: #9ca3af; }
+             body.dark-mode .text-gray-700 { color: #d1d5db; }
+             body.dark-mode .text-gray-500 { color: #6b7280; }
+             body.dark-mode .text-gray-400 { color: #4b5563; }
+             body.dark-mode .border-gray-200 { border-color: #374151; }
+             body.dark-mode .border-gray-300 { border-color: #4b5563; }
+             body.dark-mode .shadow-sm { box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.05); }
+             body.dark-mode .shadow-lg { box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.05), 0 4px 6px -2px rgba(255, 255, 255, 0.03); }
+             body.dark-mode .shadow-md { box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.06), 0 2px 4px -1px rgba(255, 255, 255, 0.04); }
+             body.dark-mode input[type="text"] { background-color: #374151; border-color: #4b5563; color: #f3f4f6; }
+             body.dark-mode input[type="text"]::placeholder { color: #6b7280; }
+             body.dark-mode .quiz-option label { border-color: #374151; }
+             body.dark-mode .quiz-option label:hover { background-color: #4b5563; }
+             body.dark-mode .quiz-option input[type="radio"]:checked + label { background-color: #0c4a6e; border-color: #0ea5e9; color: white; } /* Adjust primary dark check */
+             body.dark-mode .quiz-option input[type="radio"]:checked + label:before { border-color: #0ea5e9; background-color: #0ea5e9; box-shadow: inset 0 0 0 4px #0c4a6e; }
+             body.dark-mode .flashcard-front { background-color: #1f2937; color: #f3f4f6; border-left-color: #0ea5e9; }
+             /* Ajuster les couleurs primaires pour le dark mode si nécessaire */
+             body.dark-mode .bg-primary-50 { background-color: #0c4a6e; }
+             body.dark-mode .bg-primary-100 { background-color: #075985; }
+             body.dark-mode .text-primary-600 { color: #38bdf8; }
+             body.dark-mode .text-primary-700 { color: #7dd3fc; }
+             body.dark-mode .text-primary-800 { color: #bae6fd; }
+             body.dark-mode .border-primary-500 { border-color: #38bdf8; }
+             body.dark-mode .peer-checked\\:bg-primary-50:checked ~ label { background-color: #0c4a6e; }
+             body.dark-mode .peer-checked\\:border-primary-500:checked ~ label { border-color: #38bdf8; }
+             body.dark-mode .btn-primary { background-color: #0284c7; hover:bg-primary-700; } /* Exemple d'ajustement bouton */
+             body.dark-mode .btn-secondary { background-color: #374151; color:#38bdf8; border-color:#38bdf8; hover:bg-gray-600 } /* Exemple d'ajustement bouton */
+             body.dark-mode #themeToggle i { color: #e5e7eb; } /* Icône du thème */
+              body.dark-mode .progress-bar-container { background-color: #374151; }
+             body.dark-mode .progress-bar { background-color: #0ea5e9; }
+             body.dark-mode .bg-gradient-to-b { background-image: linear-gradient(to bottom, #0c4a6e, #111827); } /* Gradient dark */
+             body.dark-mode header { background-color: #1f2937; } /* Header dark */
+         `;
+        document.head.appendChild(styleSheet);
+
         // Focus sur le champ de saisie au chargement
         window.addEventListener('load', () => {
             topicInput.focus();