Spaces:

Docfile
/

Mariam-france

Running

App Files Files Community

Docfile commited on Apr 8

Commit

a4fc9a3

verified ·

1 Parent(s): b1fdf62

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +487 -231

templates/index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
@@ -19,6 +20,7 @@
             --accent: #6366f1;
             --success: #38a169;
             --danger: #e53e3e;
             --background: #f7fafc;
             --card-bg: rgba(255, 255, 255, 0.95);
         }
@@ -78,27 +80,51 @@
             border-color: var(--primary);
         }
-        .disabled-option {
-            background: #f9fafb;
-            color: #9ca3af;
-            border-color: #e5e7eb;
-            cursor: not-allowed;
-            position: relative;
         }
-        .coming-soon-badge {
-            position: absolute;
-            top: -8px;
-            right: -8px;
-            background: #f97316;
-            color: white;
-            font-size: 8px;
-            padding: 2px 6px;
-            border-radius: 10px;
-            font-weight: 600;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
         /* Animations */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
@@ -129,19 +155,19 @@
         }
         .backup-content {
-    display: none;
-    margin-top: 10px;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease, opacity 0.3s ease;
-    opacity: 0;
-}
-.backup-content-expanded {
-    display: block;
-    max-height: 2000px;
-    opacity: 1;
-}
         /* Styles for multiple image upload */
         .image-preview {
@@ -239,7 +265,7 @@
             width: 80px;
             height: 20px;
         }
         .loader div {
             position: absolute;
             top: 8px;
@@ -249,37 +275,37 @@
             background: var(--primary);
             animation-timing-function: cubic-bezier(0, 1, 1, 0);
         }
         .loader div:nth-child(1) {
             left: 8px;
             animation: loader1 0.6s infinite;
         }
         .loader div:nth-child(2) {
             left: 8px;
             animation: loader2 0.6s infinite;
         }
         .loader div:nth-child(3) {
             left: 32px;
             animation: loader2 0.6s infinite;
         }
         .loader div:nth-child(4) {
             left: 56px;
             animation: loader3 0.6s infinite;
         }
         @keyframes loader1 {
             0% {transform: scale(0);}
             100% {transform: scale(1);}
         }
         @keyframes loader2 {
             0% {transform: translate(0, 0);}
             100% {transform: translate(24px, 0);}
         }
         @keyframes loader3 {
             0% {transform: scale(1);}
             100% {transform: scale(0);}
@@ -314,6 +340,9 @@
                 font-size: 0.95rem;
                 line-height: 1.6;
             }
         }
     </style>
 </head>
@@ -347,12 +376,12 @@
                     <form id="francais-form" class="space-y-8">
                         <div class="space-y-3">
                             <label for="sujet-francais" class="block text-sm font-medium text-gray-700 flex items-center">
-                                <i class="fas fa-book-open mr-2 text-blue-500"></i>Sujet
                             </label>
                             <div class="focus-ring">
                                 <textarea id="sujet-francais" name="sujet" rows="4"
                                     class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:outline-none transition-all duration-200 resize-none"
-                                    placeholder="Entrez votre sujet ici..."></textarea>
                             </div>
                             <div class="text-xs text-gray-400 text-right" id="character-count">0 caractères</div>
                         </div>
@@ -387,11 +416,12 @@
                                     </span>
                                 </label>
                                 <label class="relative">
                                     <input type="radio" name="choix" value="dissertation"
-                                        class="absolute opacity-0 w-full h-full" disabled>
-                                    <span class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium disabled-option">
                                         Dissertation
-                                        <span class="coming-soon-badge">Bientôt</span>
                                     </span>
                                 </label>
                             </div>
@@ -429,7 +459,7 @@
                             </div>
                         </button>
                     </form>
-                    <div id="francais-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner">
                         <!-- Le contenu généré sera inséré ici -->
                     </div>
                 </div>
@@ -447,21 +477,21 @@
                     <form id="etude-texte-form" class="space-y-8" enctype="multipart/form-data">
                         <div class="space-y-4">
                             <label class="block text-sm font-medium text-gray-700 flex items-center">
-                                <i class="fas fa-image mr-2 text-blue-500"></i>Image du texte
                             </label>
                             <div class="border-3 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-all duration-200 group"
                                  id="drop-zone">
-                                <input type="file" id="image-upload" name="images" accept="image/*" class="hidden" multiple>
                                 <div class="space-y-4">
                                     <div class="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto transform transition-transform group-hover:scale-110 group-hover:rotate-6">
                                         <i class="fas fa-cloud-upload-alt text-3xl text-blue-500"></i>
                                     </div>
                                     <p class="text-sm text-gray-600 font-medium">Glissez vos images ici ou cliquez
                                         pour sélectionner</p>
-                                    <p class="text-xs text-gray-400">PNG, JPG jusqu'à 10MB</p>
                                 </div>
                             </div>
-                            <div id="image-preview" class="image-preview"></div>
                         </div>
                         <button type="submit"
@@ -472,7 +502,7 @@
                             </div>
                         </button>
                     </form>
-                    <div id="etude-texte-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner">
                         <!-- Le contenu analysé sera inséré ici -->
                     </div>
                 </div>
@@ -513,6 +543,9 @@
     </footer>
     <script>
         function initializeFileUpload() {
             const dropZone = document.getElementById('drop-zone');
             const fileInput = document.getElementById('image-upload');
@@ -521,22 +554,15 @@
             dropZone.addEventListener('click', () => fileInput.click());
             ['dragenter', 'dragover'].forEach(eventName => {
-                dropZone.addEventListener(eventName, (e) => {
-                    e.preventDefault();
-                    dropZone.classList.add('border-blue-500', 'bg-blue-50');
-                });
             });
             ['dragleave', 'drop'].forEach(eventName => {
-                dropZone.addEventListener(eventName, (e) => {
-                    e.preventDefault();
-                    dropZone.classList.remove('border-blue-500', 'bg-blue-50');
-                });
             });
             dropZone.addEventListener('drop', (e) => {
                 e.preventDefault();
-                dropZone.classList.remove('border-blue-500', 'bg-blue-50');
                 const files = e.dataTransfer.files;
                 handleFiles(files);
             });
@@ -544,17 +570,48 @@
             fileInput.addEventListener('change', () => {
                 const files = fileInput.files;
                 handleFiles(files);
             });
             function handleFiles(files) {
                 for (let i = 0; i < files.length; i++) {
                     const file = files[i];
                     if (!file.type.startsWith('image/')) continue;
-                    const reader = new FileReader();
                     reader.onload = (e) => {
                         const previewItem = document.createElement('div');
                         previewItem.classList.add('image-preview-item', 'scale-in');
                         previewItem.innerHTML = `
                             <img src="${e.target.result}" alt="${file.name}">
                             <button class="remove-image" title="Supprimer"><i class="fas fa-times"></i></button>
@@ -563,48 +620,80 @@
                         // Remove image event
                         previewItem.querySelector('.remove-image').addEventListener('click', () => {
-                            previewItem.style.opacity = '0';
-                            previewItem.style.transform = 'scale(0.9)';
-                            setTimeout(() => {
-                                imagePreview.removeChild(previewItem);
-                            }, 300);
-                        });
                     };
                     reader.readAsDataURL(file);
-                }
             }
         }
         function sauvegarderReponse(titre, contenu) {
             const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
             const dateSauvegarde = new Date().toISOString();
             sauvegardes.push({
-                titre,
                 contenu,
                 date: dateSauvegarde
             });
-            localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
-            // Animation de notification
-            const notification = document.createElement('div');
-            notification.className = 'fixed bottom-6 right-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg shadow-lg z-50 flex items-center scale-in';
-            notification.innerHTML = `
-                <i class="fas fa-check-circle text-green-500 mr-2"></i>
-                <span class="text-sm font-medium">Sauvegardé avec succès</span>
             `;
             document.body.appendChild(notification);
-            setTimeout(() => {
                 notification.style.opacity = '0';
                 notification.style.transform = 'translateY(10px)';
                 setTimeout(() => {
-                    document.body.removeChild(notification);
                 }, 300);
             }, 3000);
-            afficherSauvegardes();
         }
         function supprimerSauvegarde(index) {
             let sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
             sauvegardes.splice(index, 1);
@@ -612,12 +701,14 @@
             afficherSauvegardes();
         }
 function afficherSauvegardes() {
     const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
     const backupsList = document.getElementById('backups-list');
-    backupsList.innerHTML = '';
     if (sauvegardes.length === 0) {
         backupsList.innerHTML = `
             <div class="bg-blue-50 rounded-lg p-8 text-center">
@@ -640,118 +731,191 @@ function afficherSauvegardes() {
             hour: '2-digit',
             minute: '2-digit'
         });
         const sauvegardeDiv = document.createElement('div');
         sauvegardeDiv.className = 'bg-white rounded-lg shadow-md p-4 relative backup-item hover:bg-blue-50 transition-all duration-200';
         sauvegardeDiv.innerHTML = `
-            <div class="flex items-start">
-                <div class="bg-blue-100 rounded-lg p-2 mr-3">
                     <i class="fas fa-file-alt text-blue-600"></i>
                 </div>
-                <div class="flex-grow">
-                    <h3 class="text-lg font-semibold text-gray-800">${sauvegarde.titre}</h3>
                     <p class="text-sm text-gray-600 mb-2 flex items-center">
                         <i class="fas fa-clock text-xs mr-1 text-gray-400"></i>
                         ${formattedDate}
                     </p>
                 </div>
-                <div class="flex space-x-2">
-                    <button class="text-gray-400 hover:text-blue-600 focus:outline-none copy-btn" data-index="${index}">
                         <i class="fas fa-copy"></i>
                     </button>
-                    <button class="text-gray-400 hover:text-red-600 focus:outline-none delete-btn" data-index="${index}">
                         <i class="fas fa-trash-alt"></i>
                     </button>
                 </div>
             </div>
-            <div class="backup-content mt-4 text-sm text-gray-700 prose max-w-none border-t border-gray-100 pt-3" style="display: none;">${marked.parse(sauvegarde.contenu)}</div>
         `;
         backupsList.appendChild(sauvegardeDiv);
-        // Gestion de l'expansion/contraction du contenu
         const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
-        sauvegardeDiv.addEventListener('click', (e) => {
-            // Ignorer les clics sur les boutons
-            if (e.target.tagName === "BUTTON" || e.target.closest('button')) return;
             // Fermer tous les autres éléments ouverts
-            document.querySelectorAll('.backup-content').forEach(content => {
-                if (content !== backupContentDiv && content.style.display === 'block') {
-                    content.style.display = 'none';
-                }
             });
-            // Basculer l'affichage du contenu actuel
-            if (backupContentDiv.style.display === 'none') {
-                backupContentDiv.style.display = 'block';
                 setTimeout(() => {
-                    MathJax.typesetPromise([backupContentDiv]);
-                }, 100);
             } else {
-                backupContentDiv.style.display = 'none';
             }
         });
         // Bouton de copie
         const copyButton = sauvegardeDiv.querySelector('.copy-btn');
         copyButton.addEventListener('click', (e) => {
-            e.stopPropagation();
             navigator.clipboard.writeText(sauvegarde.contenu).then(() => {
-                copyButton.querySelector('i').className = 'fas fa-check';
                 setTimeout(() => {
-                    copyButton.querySelector('i').className = 'fas fa-copy';
                 }, 2000);
             });
         });
         // Bouton de suppression
         const deleteButton = sauvegardeDiv.querySelector('.delete-btn');
         deleteButton.addEventListener('click', (e) => {
-            e.stopPropagation();
             const confirmationModal = document.createElement('div');
-            confirmationModal.className = 'fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-30 scale-in';
             confirmationModal.innerHTML = `
                 <div class="bg-white rounded-lg p-6 max-w-sm mx-4 shadow-xl">
                     <div class="flex items-center mb-4">
                         <div class="bg-red-100 rounded-full p-2 mr-3">
                             <i class="fas fa-exclamation-triangle text-red-500"></i>
                         </div>
-                        <h3 class="text-lg font-semibold text-gray-800">Confirmation de suppression</h3>
                     </div>
-                    <p class="text-gray-600 mb-6">Êtes-vous sûr de vouloir supprimer cette sauvegarde ? Cette action est irréversible.</p>
                     <div class="flex justify-end space-x-3">
-                        <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 cancel-btn">Annuler</button>
-                        <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 confirm-btn">Supprimer</button>
                     </div>
                 </div>
             `;
             document.body.appendChild(confirmationModal);
             confirmationModal.querySelector('.cancel-btn').addEventListener('click', () => {
-                confirmationModal.style.opacity = '0';
-                setTimeout(() => {
-                    document.body.removeChild(confirmationModal);
-                }, 300);
             });
             confirmationModal.querySelector('.confirm-btn').addEventListener('click', () => {
-                supprimerSauvegarde(index);
-                confirmationModal.style.opacity = '0';
-                setTimeout(() => {
-                    document.body.removeChild(confirmationModal);
-                }, 300);
             });
         });
     });
 }
         async function submitFrancaisForm() {
             const form = document.getElementById('francais-form');
             const output = document.getElementById('francais-output');
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
                 output.innerHTML = `
                 <div class="flex flex-col items-center justify-center py-8">
                     <div class="loader mb-4">
@@ -760,7 +924,7 @@ function afficherSauvegardes() {
                         <div></div>
                         <div></div>
                     </div>
-                    <p class="text-sm font-medium text-gray-600">Génération en cours, veuillez patienter...</p>
                 </div>`;
                 const formData = new FormData(form);
@@ -769,29 +933,37 @@ function afficherSauvegardes() {
                         method: 'POST',
                         body: formData
                     });
                     if (!response.ok) {
-                        throw new Error('Erreur réseau');
                     }
-                    const result = await response.json();
                     output.style.opacity = '0';
                     setTimeout(() => {
                         output.innerHTML = marked.parse(result.output);
                         output.style.opacity = '1';
-                        const sujet = formData.get('sujet');
-                        sauvegarderReponse(sujet, result.output);
-                        MathJax.typesetPromise([output]);
-                    }, 300);
                 } catch (error) {
-                    output.innerHTML = `
-                    <div class="flex items-center space-x-3 text-red-500 bg-red-50 p-4 rounded-lg">
-                        <i class="fas fa-exclamation-circle text-xl"></i>
                         <div>
-                            <p class="font-medium">Une erreur est survenue</p>
-                            <p class="text-sm text-red-400 mt-1">Veuillez réessayer ou vérifier votre connexion internet.</p>
                         </div>
                     </div>`;
                 }
@@ -801,23 +973,24 @@ function afficherSauvegardes() {
         async function submitEtudeTexteForm() {
             const form = document.getElementById('etude-texte-form');
             const output = document.getElementById('etude-texte-output');
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
-                const imagePreview = document.getElementById('image-preview');
-                if (imagePreview.children.length === 0) {
-                    output.innerHTML = `
-                    <div class="flex items-center space-x-3 text-amber-500 bg-amber-50 p-4 rounded-lg">
-                        <i class="fas fa-exclamation-triangle text-xl"></i>
-                        <div>
-                            <p class="font-medium">Aucune image</p>
-                            <p class="text-sm text-amber-400 mt-1">Veuillez ajouter au moins une image pour l'analyse.</p>
-                        </div>
-                    </div>`;
-                    return;
                 }
                 output.innerHTML = `
                 <div class="flex flex-col items-center justify-center py-8">
                     <div class="loader mb-4">
@@ -826,41 +999,66 @@ function afficherSauvegardes() {
                         <div></div>
                         <div></div>
                     </div>
-                    <p class="text-sm font-medium text-gray-600">Analyse en cours, veuillez patienter...</p>
-                    <p class="text-xs text-gray-400 mt-2">Ce processus peut prendre quelques instants</p>
                 </div>`;
-                const formData = new FormData(form);
                 try {
                     const response = await fetch('/api/etude-texte', {
                         method: 'POST',
-                        body: formData
                     });
                     if (!response.ok) {
-                        throw new Error('Erreur réseau');
                     }
-                    const result = await response.json();
                     output.style.opacity = '0';
                     setTimeout(() => {
                         output.innerHTML = marked.parse(result.output);
                         output.style.opacity = '1';
                         // Titre par défaut pour les analyses d'images
-                        const titre = "Analyse d'image " + new Date().toLocaleString();
                         sauvegarderReponse(titre, result.output);
-                        MathJax.typesetPromise([output]);
-                    }, 300);
                 } catch (error) {
-                    output.innerHTML = `
-                    <div class="flex items-center space-x-3 text-red-500 bg-red-50 p-4 rounded-lg">
-                        <i class="fas fa-exclamation-circle text-xl"></i>
                         <div>
-                            <p class="font-medium">Une erreur est survenue</p>
-                            <p class="text-sm text-red-400 mt-1">Veuillez réessayer ou vérifier votre connexion internet.</p>
-                        </div>
                     </div>`;
                 }
             });
@@ -869,23 +1067,29 @@ function afficherSauvegardes() {
         // Animation des cartes au défilement
         function animateOnScroll() {
             const cards = document.querySelectorAll('.card-hover');
             const observer = new IntersectionObserver((entries) => {
-                entries.forEach((entry, index) => {
                     if (entry.isIntersecting) {
-                        setTimeout(() => {
-                            entry.target.style.opacity = '1';
-                            entry.target.style.transform = 'translateY(0)';
-                        }, index * 100);
                     }
                 });
             }, {
-                threshold: 0.1
             });
             cards.forEach(card => {
                 card.style.opacity = '0';
                 card.style.transform = 'translateY(30px)';
-                card.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
                 observer.observe(card);
             });
         }
@@ -894,32 +1098,53 @@ function afficherSauvegardes() {
         function enhanceTextareaFocus() {
             const textarea = document.getElementById('sujet-francais');
             const counter = document.getElementById('character-count');
             textarea.addEventListener('input', () => {
                 const length = textarea.value.length;
                 counter.textContent = `${length} caractère${length !== 1 ? 's' : ''}`;
             });
         }
         // Effet de hover pour les boutons radio
         function enhanceRadioButtons() {
-            const radioLabels = document.querySelectorAll('input[type="radio"]:not(:disabled) + span');
-            radioLabels.forEach(label => {
                 label.addEventListener('mouseenter', () => {
-                    if (!label.previousElementSibling.checked) {
-                        label.style.borderColor = '#3182ce';
-                        label.style.transform = 'translateY(-2px)';
-                        label.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
                     }
                 });
                 label.addEventListener('mouseleave', () => {
-                    if (!label.previousElementSibling.checked) {
-                        label.style.borderColor = '#e5e7eb';
-                        label.style.transform = 'translateY(0)';
-                        label.style.boxShadow = 'none';
-                    }
                 });
             });
         }
@@ -931,46 +1156,77 @@ function afficherSauvegardes() {
             animateOnScroll();
             enhanceTextareaFocus();
             enhanceRadioButtons();
-            // Message de bienvenue avec animation
-            const welcomeMessage = document.createElement('div');
-            welcomeMessage.innerHTML = `
-                <div class="fixed bottom-6 right-6 bg-white rounded-xl shadow-lg p-5 transform transition-all duration-500 opacity-0 translate-y-4 max-w-xs z-50">
-                    <div class="flex items-center space-x-4">
-                        <div class="bg-gradient-to-r from-blue-500 to-blue-700 rounded-full p-3">
-                            <i class="fas fa-robot text-white text-xl"></i>
-                        </div>
-                        <div>
-                            <p class="text-sm font-semibold text-gray-800">Bienvenue sur Mariam AI</p>
-                            <p class="text-xs text-gray-500 mt-1">Votre assistant français intelligent est prêt à vous accompagner.</p>
                         </div>
                     </div>
-                    <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 focus:outline-none close-welcome">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-            `;
-            document.body.appendChild(welcomeMessage);
-            setTimeout(() => {
-                welcomeMessage.firstElementChild.classList.remove('opacity-0', 'translate-y-4');
-            }, 1000);
-            // Bouton de fermeture pour le message de bienvenue
-            welcomeMessage.querySelector('.close-welcome').addEventListener('click', () => {
-                welcomeMessage.firstElementChild.classList.add('opacity-0', 'translate-y-4');
-                setTimeout(() => welcomeMessage.remove(), 500);
-            });
-            setTimeout(() => {
-                if (document.body.contains(welcomeMessage)) {
-                    welcomeMessage.firstElementChild.classList.add('opacity-0', 'translate-y-4');
-                    setTimeout(() => welcomeMessage.remove(), 500);
-                }
-            }, 7000);
-            afficherSauvegardes(); // Appel de la fonction pour afficher les sauvegardes
         });
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
             --accent: #6366f1;
             --success: #38a169;
             --danger: #e53e3e;
+            --warning: #f97316; /* Ajout pour messages d'avertissement */
             --background: #f7fafc;
             --card-bg: rgba(255, 255, 255, 0.95);
         }
             border-color: var(--primary);
         }
+        /* Styles pour les messages d'erreur/avertissement */
+        .alert-message {
+            display: flex;
+            align-items: center;
+            space-x: 3; /* Ne fonctionnera pas ici, utilisez margin sur l'icône */
+            padding: 1rem; /* p-4 */
+            border-radius: 0.5rem; /* rounded-lg */
+        }
+        .alert-message i {
+             margin-right: 0.75rem; /* space-x-3 equivalent */
+             font-size: 1.25rem; /* text-xl */
+        }
+        .alert-message div p:first-child {
+            font-weight: 500; /* font-medium */
+        }
+         .alert-message div p:last-child {
+            font-size: 0.875rem; /* text-sm */
+            margin-top: 0.25rem; /* mt-1 */
         }
+        .alert-warning {
+             color: #92400e; /* text-amber-700 (approximatif) */
+             background-color: #fffbeb; /* bg-amber-50 */
+             border: 1px solid #fde68a /* border-amber-200 (approximatif) */
+        }
+        .alert-warning i {
+            color: var(--warning); /* text-amber-500 */
+        }
+        .alert-warning div p:last-child {
+             color: #b45309; /* text-amber-600 (approximatif) */
         }
+        .alert-danger {
+             color: #991b1b; /* text-red-700 (approximatif) */
+             background-color: #fef2f2; /* bg-red-50 */
+             border: 1px solid #fecaca; /* border-red-200 (approximatif) */
+        }
+        .alert-danger i {
+             color: var(--danger); /* text-red-500 */
+        }
+         .alert-danger div p:last-child {
+             color: #b91c1c; /* text-red-600 (approximatif) */
+        }
         /* Animations */
         @keyframes fadeIn {
             from { opacity: 0; transform: translateY(10px); }
         }
         .backup-content {
+            display: none;
+            margin-top: 10px;
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease, opacity 0.3s ease;
+            opacity: 0;
+        }
+        .backup-content-expanded {
+            display: block;
+            max-height: 2000px; /* Augmenté pour les longs contenus */
+            opacity: 1;
+        }
         /* Styles for multiple image upload */
         .image-preview {
             width: 80px;
             height: 20px;
         }
         .loader div {
             position: absolute;
             top: 8px;
             background: var(--primary);
             animation-timing-function: cubic-bezier(0, 1, 1, 0);
         }
         .loader div:nth-child(1) {
             left: 8px;
             animation: loader1 0.6s infinite;
         }
         .loader div:nth-child(2) {
             left: 8px;
             animation: loader2 0.6s infinite;
         }
         .loader div:nth-child(3) {
             left: 32px;
             animation: loader2 0.6s infinite;
         }
         .loader div:nth-child(4) {
             left: 56px;
             animation: loader3 0.6s infinite;
         }
         @keyframes loader1 {
             0% {transform: scale(0);}
             100% {transform: scale(1);}
         }
         @keyframes loader2 {
             0% {transform: translate(0, 0);}
             100% {transform: translate(24px, 0);}
         }
         @keyframes loader3 {
             0% {transform: scale(1);}
             100% {transform: scale(0);}
                 font-size: 0.95rem;
                 line-height: 1.6;
             }
+            .grid-cols-4 { /* Assure que les boutons radio s'affichent bien */
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
         }
     </style>
 </head>
                     <form id="francais-form" class="space-y-8">
                         <div class="space-y-3">
                             <label for="sujet-francais" class="block text-sm font-medium text-gray-700 flex items-center">
+                                <i class="fas fa-book-open mr-2 text-blue-500"></i>Sujet <span class="text-red-500 ml-1">*</span>
                             </label>
                             <div class="focus-ring">
                                 <textarea id="sujet-francais" name="sujet" rows="4"
                                     class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:outline-none transition-all duration-200 resize-none"
+                                    placeholder="Entrez votre sujet ici..." required></textarea> <!-- Ajout de required -->
                             </div>
                             <div class="text-xs text-gray-400 text-right" id="character-count">0 caractères</div>
                         </div>
                                     </span>
                                 </label>
                                 <label class="relative">
+                                     <!-- MODIFICATION ICI: disabled retiré, span class mise à jour, badge retiré -->
                                     <input type="radio" name="choix" value="dissertation"
+                                        class="custom-radio absolute opacity-0 w-full h-full cursor-pointer">
+                                    <span class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">
                                         Dissertation
+                                        <!-- <span class="coming-soon-badge">Bientôt</span> -->
                                     </span>
                                 </label>
                             </div>
                             </div>
                         </button>
                     </form>
+                    <div id="francais-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[100px]"> <!-- Ajout de min-h -->
                         <!-- Le contenu généré sera inséré ici -->
                     </div>
                 </div>
                     <form id="etude-texte-form" class="space-y-8" enctype="multipart/form-data">
                         <div class="space-y-4">
                             <label class="block text-sm font-medium text-gray-700 flex items-center">
+                                <i class="fas fa-image mr-2 text-blue-500"></i>Image(s) du texte <span class="text-red-500 ml-1">*</span>
                             </label>
                             <div class="border-3 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-all duration-200 group"
                                  id="drop-zone">
+                                <input type="file" id="image-upload" name="images" accept="image/*" class="hidden" multiple> <!-- `multiple` permet plusieurs fichiers -->
                                 <div class="space-y-4">
                                     <div class="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto transform transition-transform group-hover:scale-110 group-hover:rotate-6">
                                         <i class="fas fa-cloud-upload-alt text-3xl text-blue-500"></i>
                                     </div>
                                     <p class="text-sm text-gray-600 font-medium">Glissez vos images ici ou cliquez
                                         pour sélectionner</p>
+                                    <p class="text-xs text-gray-400">PNG, JPG, WEBP jusqu'à 10MB</p>
                                 </div>
                             </div>
+                            <div id="image-preview" class="image-preview"></div> <!-- Prévisualisation des images -->
                         </div>
                         <button type="submit"
                             </div>
                         </button>
                     </form>
+                     <div id="etude-texte-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[100px]"> <!-- Ajout de min-h -->
                         <!-- Le contenu analysé sera inséré ici -->
                     </div>
                 </div>
     </footer>
     <script>
+        // Gestionnaire global pour les fichiers ajoutés (évite les doublons)
+        const uploadedFiles = new Map();
         function initializeFileUpload() {
             const dropZone = document.getElementById('drop-zone');
             const fileInput = document.getElementById('image-upload');
             dropZone.addEventListener('click', () => fileInput.click());
             ['dragenter', 'dragover'].forEach(eventName => {
+                dropZone.addEventListener(eventName, highlightDropZone);
             });
             ['dragleave', 'drop'].forEach(eventName => {
+                dropZone.addEventListener(eventName, unhighlightDropZone);
             });
             dropZone.addEventListener('drop', (e) => {
                 e.preventDefault();
                 const files = e.dataTransfer.files;
                 handleFiles(files);
             });
             fileInput.addEventListener('change', () => {
                 const files = fileInput.files;
                 handleFiles(files);
+                // Réinitialiser l'input pour permettre de re-sélectionner le même fichier
+                fileInput.value = '';
             });
+             function highlightDropZone(e) {
+                e.preventDefault();
+                dropZone.classList.add('border-blue-500', 'bg-blue-50');
+            }
+            function unhighlightDropZone(e) {
+                e.preventDefault();
+                 dropZone.classList.remove('border-blue-500', 'bg-blue-50');
+            }
             function handleFiles(files) {
+                const currentFiles = fileInput.files; // Nécéssaire pour DataTransferItemList
+                const dataTransfer = new DataTransfer();
+                // Ajouter les fichiers déjà présents dans uploadedFiles
+                 uploadedFiles.forEach(file => dataTransfer.items.add(file));
                 for (let i = 0; i < files.length; i++) {
                     const file = files[i];
                     if (!file.type.startsWith('image/')) continue;
+                    // Eviter les doublons basés sur le nom et la taille
+                    const fileId = `${file.name}-${file.size}`;
+                    if (uploadedFiles.has(fileId)) continue;
+                    uploadedFiles.set(fileId, file);
+                    dataTransfer.items.add(file); // Ajouter le nouveau fichier à DataTransfer
+                    renderPreview(file, fileId);
+                }
+                 fileInput.files = dataTransfer.files; // Mettre à jour l'input file
+            }
+            function renderPreview(file, fileId) {
+                 const reader = new FileReader();
                     reader.onload = (e) => {
                         const previewItem = document.createElement('div');
                         previewItem.classList.add('image-preview-item', 'scale-in');
+                        previewItem.dataset.fileId = fileId; // Stocker l'ID unique
                         previewItem.innerHTML = `
                             <img src="${e.target.result}" alt="${file.name}">
                             <button class="remove-image" title="Supprimer"><i class="fas fa-times"></i></button>
                         // Remove image event
                         previewItem.querySelector('.remove-image').addEventListener('click', () => {
+                            removeFile(fileId, previewItem);
+                         });
                     };
                     reader.readAsDataURL(file);
+            }
+            function removeFile(fileId, previewElement) {
+                 uploadedFiles.delete(fileId); // Retirer du Map
+                 // Mettre à jour l'input file
+                 const dataTransfer = new DataTransfer();
+                 uploadedFiles.forEach(file => dataTransfer.items.add(file));
+                 fileInput.files = dataTransfer.files;
+                 // Retirer l'aperçu de l'UI
+                 previewElement.style.opacity = '0';
+                 previewElement.style.transform = 'scale(0.9)';
+                 setTimeout(() => {
+                      imagePreview.removeChild(previewElement);
+                 }, 300);
             }
         }
         function sauvegarderReponse(titre, contenu) {
             const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
             const dateSauvegarde = new Date().toISOString();
+            // Limiter la taille des sauvegardes si nécessaire
+            const MAX_SAUVEGARDES = 20;
+            if (sauvegardes.length >= MAX_SAUVEGARDES) {
+                 sauvegardes.shift(); // Supprime la plus ancienne
+            }
             sauvegardes.push({
+                titre: titre || "Sauvegarde sans titre", // Titre par défaut
                 contenu,
                 date: dateSauvegarde
             });
+            try {
+                 localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
+            } catch (e) {
+                console.error("Erreur lors de la sauvegarde dans localStorage (peut-être plein):", e);
+                // Afficher une erreur à l'utilisateur si localStorage est plein
+                displayNotification("Erreur de sauvegarde: Espace de stockage local plein.", "error");
+                return; // Arrêter si la sauvegarde échoue
+            }
+            displayNotification("Sauvegardé avec succès", "success");
+            afficherSauvegardes(); // Mettre à jour la liste affichée
+        }
+        function displayNotification(message, type = 'success') {
+             const notification = document.createElement('div');
+             const bgColor = type === 'success' ? 'bg-green-50 border-green-200 text-green-700' : 'bg-red-50 border-red-200 text-red-700';
+             const iconClass = type === 'success' ? 'fa-check-circle text-green-500' : 'fa-exclamation-circle text-red-500';
+             notification.className = `fixed bottom-6 right-6 border ${bgColor} px-4 py-3 rounded-lg shadow-lg z-[100] flex items-center scale-in`; // z-index élevé
+             notification.innerHTML = `
+                <i class="fas ${iconClass} mr-2"></i>
+                <span class="text-sm font-medium">${message}</span>
             `;
             document.body.appendChild(notification);
+             setTimeout(() => {
                 notification.style.opacity = '0';
                 notification.style.transform = 'translateY(10px)';
                 setTimeout(() => {
+                    if (document.body.contains(notification)) {
+                         document.body.removeChild(notification);
+                    }
                 }, 300);
             }, 3000);
         }
         function supprimerSauvegarde(index) {
             let sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
             sauvegardes.splice(index, 1);
             afficherSauvegardes();
         }
 function afficherSauvegardes() {
     const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+    // Trier par date décroissante (plus récent en premier)
+    sauvegardes.sort((a, b) => new Date(b.date) - new Date(a.date));
     const backupsList = document.getElementById('backups-list');
+    backupsList.innerHTML = ''; // Vider la liste avant de la repeupler
     if (sauvegardes.length === 0) {
         backupsList.innerHTML = `
             <div class="bg-blue-50 rounded-lg p-8 text-center">
             hour: '2-digit',
             minute: '2-digit'
         });
+        // Tronquer le titre si trop long pour l'affichage initial
+        const displayTitle = sauvegarde.titre.length > 60 ? sauvegarde.titre.substring(0, 57) + '...' : sauvegarde.titre;
         const sauvegardeDiv = document.createElement('div');
+        // Utilise l'index original (avant tri) pour la suppression si nécessaire, ou l'index après tri si la suppression se base sur l'élément affiché.
+        // Ici on utilise l'index après tri car on supprime de la liste triée affichée.
+        sauvegardeDiv.dataset.index = index; // Utiliser cet index pour la suppression
         sauvegardeDiv.className = 'bg-white rounded-lg shadow-md p-4 relative backup-item hover:bg-blue-50 transition-all duration-200';
         sauvegardeDiv.innerHTML = `
+            <div class="flex items-start cursor-pointer item-header"> <!-- Ajout curseur et classe pour le clic -->
+                <div class="bg-blue-100 rounded-lg p-2 mr-3 flex-shrink-0"> <!-- flex-shrink-0 -->
                     <i class="fas fa-file-alt text-blue-600"></i>
                 </div>
+                <div class="flex-grow overflow-hidden"> <!-- overflow-hidden -->
+                    <h3 class="text-lg font-semibold text-gray-800 truncate" title="${sauvegarde.titre}">${displayTitle}</h3> <!-- truncate et title -->
                     <p class="text-sm text-gray-600 mb-2 flex items-center">
                         <i class="fas fa-clock text-xs mr-1 text-gray-400"></i>
                         ${formattedDate}
                     </p>
                 </div>
+                <div class="flex space-x-2 ml-2 flex-shrink-0"> <!-- ml-2 et flex-shrink-0 -->
+                    <button class="text-gray-400 hover:text-blue-600 focus:outline-none copy-btn p-1" title="Copier">
                         <i class="fas fa-copy"></i>
                     </button>
+                    <button class="text-gray-400 hover:text-red-600 focus:outline-none delete-btn p-1" title="Supprimer">
                         <i class="fas fa-trash-alt"></i>
                     </button>
                 </div>
             </div>
+            <div class="backup-content mt-4 text-sm text-gray-700 prose max-w-none border-t border-gray-100 pt-3">
+                <!-- Contenu chargé dynamiquement -->
+            </div>
         `;
         backupsList.appendChild(sauvegardeDiv);
+        // --- Event Listeners ---
         const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
+        const headerDiv = sauvegardeDiv.querySelector('.item-header');
+        // Gestion de l'expansion/contraction du contenu au clic sur l'en-tête
+        headerDiv.addEventListener('click', (e) => {
+             // Basculer l'affichage du contenu actuel
+            const isExpanded = backupContentDiv.classList.contains('backup-content-expanded');
             // Fermer tous les autres éléments ouverts
+            document.querySelectorAll('.backup-content-expanded').forEach(content => {
+                if (content !== backupContentDiv) {
+                    content.classList.remove('backup-content-expanded');
+                    content.innerHTML = ''; // Vider le contenu des autres
+                 }
             });
+            if (!isExpanded) {
+                // Charger et afficher le contenu
+                backupContentDiv.innerHTML = marked.parse(sauvegarde.contenu);
+                backupContentDiv.classList.add('backup-content-expanded');
+                // Lancer MathJax seulement après que le contenu soit visible
                 setTimeout(() => {
+                    MathJax.typesetPromise([backupContentDiv]).catch(function (err) {
+                         console.error('MathJax typesetting error:', err);
+                    });
+                }, 50); // petit délai pour s'assurer que l'élément est rendu
             } else {
+                 // Cacher le contenu
+                 backupContentDiv.classList.remove('backup-content-expanded');
+                 backupContentDiv.innerHTML = ''; // Vider le contenu quand on ferme
             }
         });
         // Bouton de copie
         const copyButton = sauvegardeDiv.querySelector('.copy-btn');
         copyButton.addEventListener('click', (e) => {
+            e.stopPropagation(); // Empêche le clic de déclencher l'expansion
             navigator.clipboard.writeText(sauvegarde.contenu).then(() => {
+                const icon = copyButton.querySelector('i');
+                icon.className = 'fas fa-check text-green-500'; // Icône de succès
                 setTimeout(() => {
+                    icon.className = 'fas fa-copy'; // Retour à l'icône normale
                 }, 2000);
+            }).catch(err => {
+                 console.error('Erreur de copie:', err);
+                 displayNotification("Erreur lors de la copie", "error");
             });
         });
         // Bouton de suppression
         const deleteButton = sauvegardeDiv.querySelector('.delete-btn');
         deleteButton.addEventListener('click', (e) => {
+            e.stopPropagation(); // Empêche le clic de déclencher l'expansion
+             // Utiliser l'index stocké dans le dataset
+            const itemIndex = parseInt(sauvegardeDiv.dataset.index, 10);
+            // Chercher l'index réel dans le localStorage (car l'affichage est trié)
+            const storedSauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+            storedSauvegardes.sort((a, b) => new Date(b.date) - new Date(a.date)); // Appliquer le même tri
+            const itemToDelete = storedSauvegardes[itemIndex];
+            // Retrouver l'index original dans le localStorage non trié
+            const originalSauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+            const originalIndex = originalSauvegardes.findIndex(s => s.date === itemToDelete.date && s.titre === itemToDelete.titre);
+            if (originalIndex === -1) {
+                console.error("Impossible de trouver l'élément à supprimer dans le stockage original.");
+                displayNotification("Erreur lors de la suppression", "error");
+                return;
+            }
+            // Afficher la modale de confirmation
             const confirmationModal = document.createElement('div');
+            confirmationModal.className = 'fixed inset-0 flex items-center justify-center z-[100] bg-black bg-opacity-30 scale-in'; // z-index élevé
             confirmationModal.innerHTML = `
                 <div class="bg-white rounded-lg p-6 max-w-sm mx-4 shadow-xl">
                     <div class="flex items-center mb-4">
                         <div class="bg-red-100 rounded-full p-2 mr-3">
                             <i class="fas fa-exclamation-triangle text-red-500"></i>
                         </div>
+                        <h3 class="text-lg font-semibold text-gray-800">Confirmation</h3>
                     </div>
+                    <p class="text-gray-600 mb-6 text-sm">Êtes-vous sûr de vouloir supprimer cette sauvegarde ?</p>
                     <div class="flex justify-end space-x-3">
+                        <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 cancel-btn text-sm">Annuler</button>
+                        <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 confirm-btn text-sm">Supprimer</button>
                     </div>
                 </div>
             `;
             document.body.appendChild(confirmationModal);
             confirmationModal.querySelector('.cancel-btn').addEventListener('click', () => {
+                closeModal(confirmationModal);
             });
             confirmationModal.querySelector('.confirm-btn').addEventListener('click', () => {
+                supprimerSauvegarde(originalIndex); // Utiliser l'index original pour supprimer
+                closeModal(confirmationModal);
             });
+             // Fermer la modale en cliquant à l'extérieur
+             confirmationModal.addEventListener('click', (event) => {
+                 if (event.target === confirmationModal) {
+                     closeModal(confirmationModal);
+                 }
+             });
         });
     });
 }
+function closeModal(modalElement) {
+     modalElement.style.opacity = '0';
+     setTimeout(() => {
+          if (document.body.contains(modalElement)) {
+             document.body.removeChild(modalElement);
+          }
+     }, 300);
+}
         async function submitFrancaisForm() {
             const form = document.getElementById('francais-form');
             const output = document.getElementById('francais-output');
+            const sujetTextarea = document.getElementById('sujet-francais'); // Récupérer le textarea
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
+                // MODIFICATION: Validation côté client
+                const sujetValue = sujetTextarea.value.trim();
+                if (!sujetValue) {
+                    output.innerHTML = `
+                    <div class="alert-message alert-warning">
+                        <i class="fas fa-exclamation-triangle"></i>
+                        <div>
+                            <p>Champ obligatoire</p>
+                            <p>Veuillez entrer un sujet avant de générer.</p>
+                        </div>
+                    </div>`;
+                     sujetTextarea.focus(); // Met le focus sur le champ vide
+                     sujetTextarea.classList.add('border-red-500'); // Ajoute une bordure rouge
+                     setTimeout(() => sujetTextarea.classList.remove('border-red-500'), 3000); // Retire la bordure après 3s
+                    return; // Arrête l'exécution si le champ est vide
+                }
                 output.innerHTML = `
                 <div class="flex flex-col items-center justify-center py-8">
                     <div class="loader mb-4">
                         <div></div>
                         <div></div>
                     </div>
+                    <p class="text-sm font-medium text-gray-600">Génération en cours...</p>
                 </div>`;
                 const formData = new FormData(form);
                         method: 'POST',
                         body: formData
                     });
+                    const result = await response.json(); // Toujours lire la réponse
                     if (!response.ok) {
+                         // Afficher l'erreur renvoyée par le serveur si disponible
+                         throw new Error(result.output || `Erreur HTTP ${response.status}`);
                     }
                     output.style.opacity = '0';
                     setTimeout(() => {
                         output.innerHTML = marked.parse(result.output);
                         output.style.opacity = '1';
+                        output.style.transition = 'opacity 0.3s ease-in-out'; // Transition douce
+                        // Utiliser le sujet comme titre, tronqué si nécessaire
+                         const titreSauvegarde = sujetValue.length > 100 ? sujetValue.substring(0, 97) + '...' : sujetValue;
+                        sauvegarderReponse(titreSauvegarde, result.output);
+                        // Lancer MathJax après l'insertion du contenu
+                         MathJax.typesetPromise([output]).catch(function (err) {
+                             console.error('MathJax typesetting error:', err);
+                        });
+                    }, 100); // Léger délai pour l'animation d'opacité
                 } catch (error) {
+                     console.error("Erreur lors de la soumission:", error);
+                     output.innerHTML = `
+                    <div class="alert-message alert-danger">
+                        <i class="fas fa-exclamation-circle"></i>
                         <div>
+                            <p>Une erreur est survenue</p>
+                            <p>${error.message || "Veuillez réessayer ou vérifier votre connexion."}</p>
                         </div>
                     </div>`;
                 }
         async function submitEtudeTexteForm() {
             const form = document.getElementById('etude-texte-form');
             const output = document.getElementById('etude-texte-output');
+            const fileInput = document.getElementById('image-upload'); // Récupérer l'input file
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
+                // Validation: Vérifier si au moins une image est sélectionnée
+                 if (fileInput.files.length === 0) {
+                     output.innerHTML = `
+                    <div class="alert-message alert-warning">
+                         <i class="fas fa-exclamation-triangle"></i>
+                         <div>
+                             <p>Aucune image</p>
+                             <p>Veuillez ajouter au moins une image pour l'analyse.</p>
+                         </div>
+                     </div>`;
+                    return; // Arrête l'exécution
                 }
                 output.innerHTML = `
                 <div class="flex flex-col items-center justify-center py-8">
                     <div class="loader mb-4">
                         <div></div>
                         <div></div>
                     </div>
+                    <p class="text-sm font-medium text-gray-600">Analyse en cours...</p>
+                    <p class="text-xs text-gray-400 mt-2">Cela peut prendre un moment</p>
                 </div>`;
+                const formData = new FormData();
+                 // Ajouter uniquement les fichiers valides de notre Map `uploadedFiles`
+                 if (uploadedFiles.size === 0) {
+                      // Double vérification (normalement impossible si fileInput.files > 0)
+                      output.innerHTML = `
+                        <div class="alert-message alert-warning">
+                            <i class="fas fa-exclamation-triangle"></i>
+                            <div>
+                                <p>Aucune image valide</p>
+                                <p>Veuillez vérifier les images sélectionnées.</p>
+                            </div>
+                        </div>`;
+                        return;
+                 }
+                 uploadedFiles.forEach((file) => {
+                     formData.append('images', file, file.name);
+                 });
                 try {
                     const response = await fetch('/api/etude-texte', {
                         method: 'POST',
+                        body: formData // Utiliser notre formData construit
                     });
+                    const result = await response.json(); // Toujours lire la réponse
                     if (!response.ok) {
+                        // Afficher l'erreur renvoyée par le serveur si disponible
+                        throw new Error(result.output || `Erreur HTTP ${response.status}`);
                     }
                     output.style.opacity = '0';
                     setTimeout(() => {
                         output.innerHTML = marked.parse(result.output);
                         output.style.opacity = '1';
+                        output.style.transition = 'opacity 0.3s ease-in-out'; // Transition douce
                         // Titre par défaut pour les analyses d'images
+                        const titre = `Analyse d'image(s) - ${new Date().toLocaleDateString('fr-FR')}`;
                         sauvegarderReponse(titre, result.output);
+                         // Lancer MathJax après l'insertion du contenu
+                         MathJax.typesetPromise([output]).catch(function (err) {
+                             console.error('MathJax typesetting error:', err);
+                        });
+                    }, 100); // Léger délai pour l'animation d'opacité
                 } catch (error) {
+                     console.error("Erreur lors de l'analyse:", error);
+                     output.innerHTML = `
+                    <div class="alert-message alert-danger">
+                        <i class="fas fa-exclamation-circle"></i>
                         <div>
+                            <p>Une erreur est survenue</p>
+                             <p>${error.message || "Veuillez réessayer ou vérifier votre connexion."}</p>
+                         </div>
                     </div>`;
                 }
             });
         // Animation des cartes au défilement
         function animateOnScroll() {
             const cards = document.querySelectorAll('.card-hover');
+            // Si IntersectionObserver n'est pas supporté, on affiche directement
+            if (!('IntersectionObserver' in window)) {
+                 cards.forEach(card => card.style.opacity = '1');
+                 return;
+            }
             const observer = new IntersectionObserver((entries) => {
+                entries.forEach((entry) => { // Pas besoin d'index ici si le délai est fixe
                     if (entry.isIntersecting) {
+                        entry.target.style.opacity = '1';
+                        entry.target.style.transform = 'translateY(0)';
+                        observer.unobserve(entry.target); // N'observer qu'une fois
                     }
                 });
             }, {
+                threshold: 0.1 // Déclenche quand 10% est visible
             });
             cards.forEach(card => {
                 card.style.opacity = '0';
                 card.style.transform = 'translateY(30px)';
+                // Le style 'scale-in' gère déjà une animation, on ajuste le délai
+                // card.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
                 observer.observe(card);
             });
         }
         function enhanceTextareaFocus() {
             const textarea = document.getElementById('sujet-francais');
             const counter = document.getElementById('character-count');
             textarea.addEventListener('input', () => {
                 const length = textarea.value.length;
                 counter.textContent = `${length} caractère${length !== 1 ? 's' : ''}`;
+                 // Enlève la bordure d'erreur si l'utilisateur commence à taper
+                 textarea.classList.remove('border-red-500');
             });
         }
         // Effet de hover pour les boutons radio
         function enhanceRadioButtons() {
+             const radioGroups = document.querySelectorAll('input[type="radio"] + span');
+             radioGroups.forEach(label => {
+                const input = label.previousElementSibling;
+                if (input.disabled) return; // Ne pas appliquer aux boutons désactivés
                 label.addEventListener('mouseenter', () => {
+                    if (!input.checked) {
+                        label.classList.add('border-blue-400', 'shadow-md', '-translate-y-0.5');
                     }
                 });
                 label.addEventListener('mouseleave', () => {
+                    // Retirer les styles de survol seulement si non coché
+                     if (!input.checked) {
+                        label.classList.remove('border-blue-400', 'shadow-md', '-translate-y-0.5');
+                     }
                 });
+                 // Assurer que les styles sont retirés si un autre bouton est coché
+                 input.addEventListener('change', () => {
+                     // Retrouver tous les labels du même groupe
+                     const groupName = input.name;
+                     document.querySelectorAll(`input[name="${groupName}"] + span`).forEach(otherLabel => {
+                         if (otherLabel !== label) {
+                             otherLabel.classList.remove('border-blue-400', 'shadow-md', '-translate-y-0.5');
+                             // Rétablir la bordure par défaut si besoin
+                             if (!otherLabel.previousElementSibling.checked) {
+                                 otherLabel.classList.remove('border-primary'); // Si jamais elle était là
+                             }
+                         } else {
+                            // Appliquer les styles du bouton coché (gérés par :checked + span)
+                            // et retirer les styles de hover qui pourraient rester
+                             label.classList.remove('shadow-md', '-translate-y-0.5');
+                         }
+                     });
+                 });
             });
         }
             animateOnScroll();
             enhanceTextareaFocus();
             enhanceRadioButtons();
+            afficherSauvegardes(); // Afficher les sauvegardes au chargement
+            // Configuration MathJax (peut être mis dans <head> aussi)
+            window.MathJax = {
+                 tex: {
+                     inlineMath: [['$', '$'], ['\\(', '\\)']],
+                     displayMath: [['$$', '$$'], ['\\[', '\\]']]
+                 },
+                 svg: {
+                     fontCache: 'global'
+                 },
+                 options: {
+                     skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
+                     ignoreHtmlClass: 'tex2jax_ignore',
+                     processHtmlClass: 'tex2jax_process'
+                 }
+            };
+            // Message de bienvenue (optionnel)
+            const showWelcome = sessionStorage.getItem('welcomeShown') !== 'true';
+            if (showWelcome) {
+                 const welcomeMessageContainer = document.createElement('div');
+                 welcomeMessageContainer.innerHTML = `
+                    <div class="fixed bottom-6 right-6 bg-white rounded-xl shadow-lg p-5 transform transition-all duration-500 opacity-0 translate-y-4 max-w-xs z-[100]">
+                        <div class="flex items-start space-x-4">
+                            <div class="bg-gradient-to-r from-blue-500 to-blue-700 rounded-full p-3 mt-1 flex-shrink-0">
+                                <i class="fas fa-robot text-white text-xl"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm font-semibold text-gray-800">Bienvenue sur Mariam AI !</p>
+                                <p class="text-xs text-gray-500 mt-1">Votre assistant est prêt. Posez un sujet ou analysez un texte.</p>
+                            </div>
                         </div>
+                        <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 focus:outline-none close-welcome p-1">
+                            <i class="fas fa-times text-xs"></i>
+                        </button>
                     </div>
+                `;
+                 document.body.appendChild(welcomeMessageContainer);
+                 const welcomeMessage = welcomeMessageContainer.firstElementChild;
+                setTimeout(() => {
+                    welcomeMessage.classList.remove('opacity-0', 'translate-y-4');
+                 }, 500); // Délai avant apparition
+                const closeWelcomeButton = welcomeMessage.querySelector('.close-welcome');
+                 closeWelcomeButton.addEventListener('click', () => {
+                    closeWelcomeMessage(welcomeMessage);
+                 });
+                // Fermer automatiquement après un certain temps
+                 setTimeout(() => {
+                    if (document.body.contains(welcomeMessage)) {
+                         closeWelcomeMessage(welcomeMessage);
+                    }
+                }, 7000); // 7 secondes
+                 sessionStorage.setItem('welcomeShown', 'true'); // Marquer comme vu pour cette session
+             }
+             function closeWelcomeMessage(element) {
+                 element.classList.add('opacity-0', 'translate-y-4');
+                 setTimeout(() => {
+                      if (element.parentElement) {
+                         element.parentElement.remove();
+                      }
+                 }, 500); // Attend la fin de la transition
+             }
         });
     </script>
 </body>
+</html>