Update templates/index.html

templates/index.html

@@ -7,7 +7,7 @@
     <title>Mariam AI - Assistant Français Intelligent</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <!-- MathJax retiré -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
@@ -20,7 +20,7 @@
             --accent: #6366f1;
             --success: #38a169;
             --danger: #e53e3e;
-            --warning: #f97316; /* Ajout pour messages d'avertissement */
+            --warning: #f97316;
             --background: #f7fafc;
             --card-bg: rgba(255, 255, 255, 0.95);
         }
@@ -29,11 +29,13 @@
             font-family: 'Plus Jakarta Sans', sans-serif;
             background-color: #fafafa;
             scroll-behavior: smooth;
+            -webkit-tap-highlight-color: transparent; /* Remove blue tap highlight on mobile */
         }
 
         .glassmorphism {
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px); /* Safari */
             border: 1px solid rgba(255, 255, 255, 0.3);
             box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
         }
@@ -50,29 +52,17 @@
         .gradient-text {
             background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
             -webkit-background-clip: text;
+            background-clip: text;
             -webkit-text-fill-color: transparent;
+            text-fill-color: transparent; /* Standard property */
         }
 
         .loading-dot {
             animation: bounce 1.4s infinite;
         }
-
-        .loading-dot:nth-child(2) {
-            animation-delay: 0.2s;
-        }
-
-        .loading-dot:nth-child(3) {
-            animation-delay: 0.4s;
-        }
-
-        @keyframes bounce {
-            0%, 80%, 100% {
-                transform: translateY(0);
-            }
-            40% {
-                transform: translateY(-6px);
-            }
-        }
+        .loading-dot:nth-child(2) { animation-delay: 0.2s; }
+        .loading-dot:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
 
         .custom-radio:checked+span {
             background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
@@ -80,502 +70,187 @@
             border-color: var(--primary);
         }
 
-        /* Styles pour les messages d'erreur/avertissement */
-        .alert-message {
-            display: flex;
-            align-items: flex-start; /* Align items start for better text wrapping */
-            /* space-x-3 equivalent using margin on icon */
-            padding: 1rem; /* p-4 */
-            border-radius: 0.5rem; /* rounded-lg */
-            border-width: 1px;
-            border-style: solid;
-        }
-        .alert-message i {
-             margin-right: 0.75rem; /* space-x-3 equivalent */
-             font-size: 1.25rem; /* text-xl */
-             margin-top: 0.125rem; /* slight top margin for better alignment */
-        }
-        .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 */
-            line-height: 1.4; /* Improved line height for wrap */
-        }
-
-        .alert-warning {
-             color: #92400e; /* text-amber-700 */
-             background-color: #fffbeb; /* bg-amber-50 */
-             border-color: #fde68a /* border-amber-200 */
-        }
-        .alert-warning i {
-            color: var(--warning); /* text-amber-500 */
-        }
-        .alert-warning div p:last-child {
-             color: #b45309; /* text-amber-600 */
-        }
-
-        .alert-danger {
-             color: #991b1b; /* text-red-700 */
-             background-color: #fef2f2; /* bg-red-50 */
-             border-color: #fecaca; /* border-red-200 */
-        }
-        .alert-danger i {
-             color: var(--danger); /* text-red-500 */
-        }
-         .alert-danger div p:last-child {
-             color: #b91c1c; /* text-red-600 */
-        }
-
+        /* Styles pour les messages d'alerte */
+        .alert-message { display: flex; align-items: flex-start; padding: 1rem; border-radius: 0.5rem; border-width: 1px; border-style: solid; }
+        .alert-message i { margin-right: 0.75rem; font-size: 1.25rem; margin-top: 0.125rem; flex-shrink: 0; }
+        .alert-message div p:first-child { font-weight: 500; }
+        .alert-message div p:last-child { font-size: 0.875rem; margin-top: 0.25rem; line-height: 1.4; }
+        .alert-warning { color: #92400e; background-color: #fffbeb; border-color: #fde68a; }
+        .alert-warning i { color: var(--warning); }
+        .alert-warning div p:last-child { color: #b45309; }
+        .alert-danger { color: #991b1b; background-color: #fef2f2; border-color: #fecaca; }
+        .alert-danger i { color: var(--danger); }
+        .alert-danger div p:last-child { color: #b91c1c; }
 
         /* Animations */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .fade-in {
-            animation: fadeIn 0.3s ease-out forwards;
-        }
-
-        @keyframes scaleIn {
-            from { transform: scale(0.95); opacity: 0; }
-            to { transform: scale(1); opacity: 1; }
-        }
-
-        .scale-in {
-            animation: scaleIn 0.3s ease-out forwards;
-        }
-
-        .backup-item {
-            cursor: pointer;
-            transition: all 0.25s ease;
-        }
-
-        .backup-item:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
-        }
-
-        .backup-content {
-            display: none;
-            margin-top: 10px;
-            max-height: 0;
-            overflow: hidden;
-            transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out, padding-top 0.3s ease-out; /* Added padding-top */
-            opacity: 0;
-            padding-top: 0; /* Start with no padding */
-        }
-
-        .backup-content-expanded {
-            display: block;
-            max-height: 3000px; /* Augmenté pour les longs contenus */
-            opacity: 1;
-            margin-top: 1rem; /* mt-4 */
-            padding-top: 0.75rem; /* pt-3 */
-        }
-
-
-        /* Styles for multiple image upload */
-        .image-preview {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 12px;
-            margin-top: 15px;
-        }
-
-        .image-preview-item {
-            position: relative;
-            width: 110px;
-            height: 110px;
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.2s ease;
-        }
-
-        .image-preview-item:hover {
-            transform: scale(1.05);
-        }
-
-        .image-preview-item img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-
-        .remove-image {
-            position: absolute;
-            top: 5px;
-            right: 5px;
-            background-color: rgba(0, 0, 0, 0.6);
-            color: white;
-            border: none;
-            border-radius: 50%;
-            width: 22px;
-            height: 22px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            font-size: 12px;
-            opacity: 0;
-            transition: opacity 0.2s, transform 0.2s;
-        }
-
-        .image-preview-item:hover .remove-image {
-            opacity: 1;
-        }
-
-        .remove-image:hover {
-            background-color: rgba(0, 0, 0, 0.8);
-            transform: scale(1.1);
-        }
-
-        /* Style pour préserver les espaces dans le markdown */
-        .prose {
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            overflow-wrap: break-word;
-            color: #2d3748;
-            line-height: 1.7;
-        }
-
-        .prose h1, .prose h2, .prose h3, .prose h4 {
-            color: var(--primary-dark);
-            margin-top: 1.5em;
-            margin-bottom: 0.5em;
-            font-weight: 600;
-        }
-
-        .prose p {
-            margin-bottom: 1em;
-        }
-
-        .prose ul, .prose ol {
-            padding-left: 1.5em;
-            margin-bottom: 1em;
-        }
-
-        .prose blockquote {
-            border-left: 4px solid var(--primary);
-            padding-left: 1em;
-            font-style: italic;
-            color: var(--secondary);
-            margin: 1em 0;
-        }
-
-        /* Loading animation */
-        .loader {
-            display: inline-block;
-            position: relative;
-            width: 80px;
-            height: 20px;
-        }
-
-        .loader div {
-            position: absolute;
-            top: 8px;
-            width: 13px;
-            height: 13px;
-            border-radius: 50%;
-            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);}
-        }
-
-        /* Focus styles */
-        .focus-ring {
-            position: relative;
-        }
-
-        .focus-ring:focus-within::after {
-            content: '';
-            position: absolute;
-            top: -3px;
-            left: -3px;
-            right: -3px;
-            bottom: -3px;
-            border-radius: 14px;
-            border: 2px solid rgba(59, 130, 246, 0.3);
-            pointer-events: none;
-            animation: focusIn 0.2s ease-out forwards;
-        }
-
-        @keyframes focusIn {
-            from { opacity: 0; transform: scale(0.98); }
-            to { opacity: 1; transform: scale(1); }
-        }
-
-        /* Style optionnel pour améliorer la lisibilité sur mobile */
-        @media (max-width: 640px) {
-            .prose {
-                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 pour la checkbox DeepThink */
-        .deepthink-label {
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            font-size: 0.875rem; /* text-sm */
-            color: var(--secondary);
-        }
-        .deepthink-label input[type="checkbox"] {
-            appearance: none;
-            width: 1.25em;
-            height: 1.25em;
-            border: 2px solid #cbd5e0; /* border-gray-300 */
-            border-radius: 0.375rem; /* rounded-md */
-            margin-right: 0.5em;
-            position: relative;
-            top: 1px;
-            transition: all 0.2s ease-in-out;
-            cursor: pointer; /* Add cursor pointer */
-        }
-        .deepthink-label input[type="checkbox"]:checked {
-            background-color: var(--primary);
-            border-color: var(--primary);
-        }
-        .deepthink-label input[type="checkbox"]:checked::after {
-            content: '\f00c'; /* FontAwesome check icon */
-            font-family: 'Font Awesome 6 Free';
-            font-weight: 900;
-            color: white;
-            font-size: 0.8em;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-        }
-        .deepthink-label input[type="checkbox"]:disabled {
-            background-color: #e2e8f0; /* gray-200 */
-            border-color: #cbd5e0; /* gray-300 */
-            cursor: not-allowed;
-        }
-         .deepthink-label input[type="checkbox"]:disabled + span { /* Style text when disabled */
-             color: #a0aec0; /* gray-400 */
-         }
-        .deepthink-label input[type="checkbox"]:disabled:checked::after {
-             color: #a0aec0; /* gray-400 */
-        }
-
-        .deepthink-label:hover input[type="checkbox"]:not(:disabled) {
-             border-color: var(--primary-dark);
-        }
-        .deepthink-tooltip {
-            position: relative;
-            display: inline-flex; /* Use inline-flex for alignment */
-            align-items: center; /* Align icon vertically */
-            margin-left: 6px;
-        }
-        .deepthink-tooltip .tooltip-text {
-            visibility: hidden;
-            width: 220px;
-            background-color: #2d3748; /* gray-800 */
-            color: #fff;
-            text-align: center;
-            border-radius: 6px;
-            padding: 6px 10px;
-            position: absolute;
-            z-index: 10;
-            bottom: 135%;
-            left: 50%;
-            margin-left: -110px;
-            opacity: 0;
-            transition: opacity 0.3s;
-            font-size: 0.75rem; /* text-xs */
-            line-height: 1.4;
-            pointer-events: none; /* Prevent tooltip from interfering */
-        }
-        .deepthink-tooltip .tooltip-text::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            margin-left: -5px;
-            border-width: 5px;
-            border-style: solid;
-            border-color: #2d3748 transparent transparent transparent;
-        }
-        .deepthink-tooltip:hover .tooltip-text {
-            visibility: visible;
-            opacity: 1;
-        }
-        /* MODIFICATION: Style pour le statut DeepThink */
-        #deepthink-status {
-            font-style: italic;
-            margin-left: 0.5rem; /* ml-2 */
-        }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+        .fade-in { animation: fadeIn 0.3s ease-out forwards; }
+        @keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+        .scale-in { animation: scaleIn 0.3s ease-out forwards; }
+
+        /* Sauvegardes */
+        .backup-item { cursor: pointer; transition: all 0.25s ease; }
+        .backup-item:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); }
+        .backup-content { display: none; margin-top: 10px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out, padding-top 0.3s ease-out; opacity: 0; padding-top: 0; }
+        .backup-content-expanded { display: block; max-height: 3000px; opacity: 1; margin-top: 1rem; padding-top: 0.75rem; }
+
+        /* Upload Images */
+        .image-preview { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
+        .image-preview-item { position: relative; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease; }
+        .image-preview-item:hover { transform: scale(1.05); }
+        .image-preview-item img { width: 100%; height: 100%; object-fit: cover; }
+        .remove-image { position: absolute; top: 4px; right: 4px; background-color: rgba(0, 0, 0, 0.6); color: white; border: none; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; opacity: 0; transition: opacity 0.2s, transform 0.2s; }
+        .image-preview-item:hover .remove-image { opacity: 1; }
+        .remove-image:hover { background-color: rgba(0, 0, 0, 0.8); transform: scale(1.1); }
+
+        /* Style Prose (Zone de sortie) */
+        .prose { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; color: #2d3748; line-height: 1.7; font-size: 0.95rem; /* légèrement plus petit par défaut */ }
+        @media (min-width: 640px) { .prose { font-size: 1rem; } } /* Taille normale sur sm+ */
+        .prose h1, .prose h2, .prose h3, .prose h4 { color: var(--primary-dark); margin-top: 1.5em; margin-bottom: 0.5em; font-weight: 600; }
+        .prose p { margin-bottom: 1em; }
+        .prose ul, .prose ol { padding-left: 1.5em; margin-bottom: 1em; }
+        .prose blockquote { border-left: 4px solid var(--primary); padding-left: 1em; font-style: italic; color: var(--secondary); margin: 1em 0; }
+        .prose code { background-color: #edf2f7; /* gray-200 */ padding: 0.2em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
+        .prose pre { background-color: #1a202c; /* gray-900 */ color: #e2e8f0; /* gray-200 */ padding: 1em; border-radius: 0.375rem; overflow-x: auto; }
+        .prose pre code { background-color: transparent; padding: 0; border-radius: 0; font-size: 0.875em; }
+
+        /* Loader */
+        .loader { display: inline-block; position: relative; width: 64px; height: 16px; /* Smaller */ }
+        .loader div { position: absolute; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); animation-timing-function: cubic-bezier(0, 1, 1, 0); }
+        .loader div:nth-child(1) { left: 6px; animation: loader1 0.6s infinite; }
+        .loader div:nth-child(2) { left: 6px; animation: loader2 0.6s infinite; }
+        .loader div:nth-child(3) { left: 26px; animation: loader2 0.6s infinite; }
+        .loader div:nth-child(4) { left: 45px; 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(20px, 0); } }
+        @keyframes loader3 { 0% { transform: scale(1); } 100% { transform: scale(0); } }
+
+        /* Focus Ring */
+        .focus-ring { position: relative; }
+        .focus-ring:focus-within::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 14px; border: 2px solid rgba(59, 130, 246, 0.3); pointer-events: none; animation: focusIn 0.2s ease-out forwards; }
+        @keyframes focusIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
+
+        /* DeepThink Checkbox */
+        .deepthink-label { display: flex; align-items: center; cursor: pointer; font-size: 0.875rem; color: var(--secondary); }
+        .deepthink-label input[type="checkbox"] { appearance: none; width: 1.25em; height: 1.25em; border: 2px solid #cbd5e0; border-radius: 0.375rem; margin-right: 0.5em; position: relative; top: 1px; transition: all 0.2s ease-in-out; cursor: pointer; flex-shrink: 0; }
+        .deepthink-label input[type="checkbox"]:checked { background-color: var(--primary); border-color: var(--primary); }
+        .deepthink-label input[type="checkbox"]:checked::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; color: white; font-size: 0.8em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+        .deepthink-label input[type="checkbox"]:disabled { background-color: #e2e8f0; border-color: #cbd5e0; cursor: not-allowed; }
+        .deepthink-label input[type="checkbox"]:disabled + span { color: #a0aec0; }
+        .deepthink-label input[type="checkbox"]:disabled:checked::after { color: #a0aec0; }
+        .deepthink-label:hover input[type="checkbox"]:not(:disabled) { border-color: var(--primary-dark); }
+        .deepthink-tooltip { position: relative; display: inline-flex; align-items: center; margin-left: 6px; }
+        .deepthink-tooltip .tooltip-text { visibility: hidden; width: 200px; background-color: #2d3748; color: #fff; text-align: center; border-radius: 6px; padding: 6px 10px; position: absolute; z-index: 10; bottom: 135%; left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; line-height: 1.4; pointer-events: none; }
+        .deepthink-tooltip .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #2d3748 transparent transparent transparent; }
+        .deepthink-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
+        #deepthink-status { font-style: italic; margin-left: 0.5rem; }
 
     </style>
 </head>
 
-<body class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50">
+<body class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 text-gray-800">
     <nav class="glassmorphism sticky top-0 z-50 border-b border-blue-100">
-        <div class="container mx-auto px-6 py-4">
+        <div class="container mx-auto px-4 sm:px-6 py-3 sm:py-4"> {/* Ajustement padding nav */}
             <div class="flex items-center justify-between">
-                <div class="flex items-center space-x-4">
+                <div class="flex items-center space-x-3 sm:space-x-4">
                     <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg p-2 shadow-lg transform hover:scale-110 transition-transform duration-300">
-                        <i class="fas fa-robot text-white text-xl"></i>
+                        <i class="fas fa-robot text-white text-lg sm:text-xl"></i> {/* Taille icône */}
                     </div>
-                    <h1 class="text-2xl font-bold gradient-text">Mariam AI</h1>
+                    <h1 class="text-xl sm:text-2xl font-bold gradient-text">Mariam AI</h1> {/* Taille titre */}
                 </div>
-                <div class="text-blue-900 font-medium bg-blue-50 py-1 px-4 rounded-full shadow-sm">Assistant Français Intelligent</div>
+                <div class="text-xs sm:text-sm text-blue-900 font-medium bg-blue-50 py-1 px-3 sm:px-4 rounded-full shadow-sm hidden sm:block">Assistant Français</div> {/* Masqué sur xs */}
+                <div class="text-xs text-blue-900 font-medium bg-blue-50 py-1 px-3 rounded-full shadow-sm sm:hidden">Assistant</div> {/* Version courte pour xs */}
             </div>
         </div>
     </nav>
 
-    <main class="container mx-auto px-6 py-12">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+    <main class="container mx-auto px-4 sm:px-6 py-8 sm:py-12"> {/* Ajustement padding main */}
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8">
             <!-- Section Travail Argumentatif -->
             <div class="card-hover glassmorphism rounded-2xl overflow-hidden scale-in">
-                <div class="p-8">
-                    <div class="flex items-center space-x-4 mb-8">
-                        <div class="bg-blue-100 rounded-lg p-3 transform rotate-3">
-                            <i class="fas fa-pen-fancy text-blue-600 text-xl"></i>
+                <div class="p-6 sm:p-8"> {/* Ajustement padding carte */}
+                    <div class="flex items-center space-x-3 sm:space-x-4 mb-6 sm:mb-8">
+                        <div class="bg-blue-100 rounded-lg p-2 sm:p-3 transform rotate-3">
+                            <i class="fas fa-pen-fancy text-blue-600 text-lg sm:text-xl"></i>
                         </div>
-                        <h2 class="text-2xl font-bold text-gray-800">Travail Argumentatif</h2>
+                        <h2 class="text-xl sm:text-2xl font-bold text-gray-800">Travail Argumentatif</h2>
                     </div>
-                    <form id="francais-form" class="space-y-8">
-                        <div class="space-y-3">
+                    <form id="francais-form" class="space-y-6 sm:space-y-8"> {/* Ajustement espacement */}
+                        <div class="space-y-2">
                             <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"
+                                    class="w-full px-3 py-2 sm:px-4 sm:py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:outline-none transition-all duration-200 resize-none text-base"
                                     placeholder="Entrez votre sujet ici..." required></textarea>
                             </div>
                             <div class="text-xs text-gray-400 text-right" id="character-count">0 caractères</div>
                         </div>
 
-                        <div class="space-y-4">
+                        <div class="space-y-3">
                             <label class="block text-sm font-medium text-gray-700 flex items-center">
                                 <i class="fas fa-tasks mr-2 text-blue-500"></i>Type d'argumentation
                             </label>
-                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+                            {/* Grid s'adapte déjà bien (2 cols par défaut, 4 sur sm+) */}
+                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
                                 <label class="relative">
-                                    <input type="radio" name="choix" value="Etaye"
-                                        class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
-                                    <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">
-                                        Étayer
-                                    </span>
+                                    <input type="radio" name="choix" value="Etaye" class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
+                                    <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">Étayer</span>
                                 </label>
                                 <label class="relative">
-                                    <input type="radio" name="choix" value="refute"
-                                        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">
-                                        Réfuter
-                                    </span>
+                                    <input type="radio" name="choix" value="refute" 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">Réfuter</span>
                                 </label>
                                 <label class="relative">
-                                    <input type="radio" name="choix" value="discuter"
-                                        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">
-                                        Discuter
-                                    </span>
+                                    <input type="radio" name="choix" value="discuter" 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">Discuter</span>
                                 </label>
                                 <label class="relative">
-                                    <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>
+                                    <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>
                                 </label>
                             </div>
                         </div>
 
-                        <div class="space-y-4">
+                        <div class="space-y-3">
                             <label class="block text-sm font-medium text-gray-700 flex items-center">
                                 <i class="fas fa-feather-alt mr-2 text-blue-500"></i>Style d'écriture
                             </label>
-                            <div class="grid grid-cols-2 gap-4">
+                            <div class="grid grid-cols-2 gap-3 sm:gap-4">
                                 <label class="relative">
-                                    <input type="radio" name="style" value="raffiné"
-                                        class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
-                                    <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">
-                                        Raffiné
-                                    </span>
+                                    <input type="radio" name="style" value="raffiné" class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
+                                    <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">Raffiné</span>
                                 </label>
                                 <label class="relative">
-                                    <input type="radio" name="style" value="Normal"
-                                        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">
-                                        Normal
-                                    </span>
+                                    <input type="radio" name="style" value="Normal" 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">Normal</span>
                                 </label>
                             </div>
                         </div>
 
-                        <!-- MODIFICATION: Ajout span pour statut -->
-                        <div class="flex items-center justify-start pt-2">
+                        <div class="flex items-center justify-start pt-1 sm:pt-2">
                            <label for="deepthink-checkbox" class="deepthink-label">
                                <input type="checkbox" id="deepthink-checkbox" name="use_deepthink_visual">
-                               <span>Utiliser DeepThink</span>  <!-- Mettre le texte dans un span pour le style :disabled -->
+                               <span class="text-sm">Utiliser DeepThink</span>
                                <div class="deepthink-tooltip">
-                                   <i class="fas fa-info-circle text-gray-400"></i>
-                                   <span class="tooltip-text">Utilise un modèle plus avancé pour une meilleure qualité, mais peut être plus lent. Limité à 1 utilisation par jour.</span>
+                                   <i class="fas fa-info-circle text-gray-400 ml-1"></i>
+                                   <span class="tooltip-text">Modèle avancé (Gemini Pro). Plus lent, meilleure qualité. Limité: 1/jour.</span>
                                </div>
                            </label>
-                            <span id="deepthink-status" class="text-xs text-gray-500"></span> <!-- Indicateur de statut -->
+                            <span id="deepthink-status" class="text-xs text-gray-500 ml-2"></span>
                         </div>
-                        <!-- Fin de la modification -->
 
                         <button type="submit"
-                            class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white px-6 py-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg">
-                            <div class="flex items-center justify-center space-x-3">
+                            class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white px-5 py-3 sm:px-6 sm:py-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg text-base">
+                            <div class="flex items-center justify-center space-x-2 sm:space-x-3">
                                 <i class="fas fa-magic"></i>
                                 <span>Générer</span>
                             </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]">
+                    {/* Ajustement padding et min-height */}
+                    <div id="francais-output" class="mt-6 sm:mt-8 p-4 sm:p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[150px]">
                         <!-- Le contenu généré sera inséré ici -->
                     </div>
                 </div>
@@ -583,50 +258,52 @@
 
             <!-- Section Étude de texte -->
             <div class="card-hover glassmorphism rounded-2xl overflow-hidden scale-in" style="animation-delay: 0.1s;">
-                <div class="p-8">
-                    <div class="flex items-center space-x-4 mb-8">
-                        <div class="bg-blue-100 rounded-lg p-3 transform -rotate-3">
-                            <i class="fas fa-file-alt text-blue-600 text-xl"></i>
+                 <div class="p-6 sm:p-8"> {/* Ajustement padding carte */}
+                    <div class="flex items-center space-x-3 sm:space-x-4 mb-6 sm:mb-8">
+                        <div class="bg-blue-100 rounded-lg p-2 sm:p-3 transform -rotate-3">
+                            <i class="fas fa-file-alt text-blue-600 text-lg sm:text-xl"></i>
                         </div>
-                        <h2 class="text-2xl font-bold text-gray-800">Étude de texte</h2>
+                        <h2 class="text-xl sm:text-2xl font-bold text-gray-800">Étude de texte</h2>
                     </div>
-                    <form id="etude-texte-form" class="space-y-8" enctype="multipart/form-data">
-                        <div class="space-y-4">
+                    <form id="etude-texte-form" class="space-y-6 sm:space-y-8" enctype="multipart/form-data">
+                        <div class="space-y-3">
                             <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"
+                            <div class="border-3 border-dashed border-gray-300 rounded-xl p-6 sm: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 class="space-y-3 sm:space-y-4">
+                                    <div class="bg-blue-50 rounded-full w-14 h-14 sm:w-16 sm: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-2xl sm: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>
+                                    <p class="text-sm text-gray-600 font-medium">Glissez/cliquez pour ajouter</p>
+                                    <p class="text-xs text-gray-400">PNG, JPG, WEBP (max 10MB)</p>
                                 </div>
                             </div>
                             <div id="image-preview" class="image-preview"></div>
                         </div>
 
                         <button type="submit"
-                            class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white px-6 py-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg">
-                            <div class="flex items-center justify-center space-x-3">
+                            class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white px-5 py-3 sm:px-6 sm:py-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg text-base">
+                            <div class="flex items-center justify-center space-x-2 sm:space-x-3">
                                 <i class="fas fa-search"></i>
                                 <span>Analyser</span>
                             </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]">
+                     {/* Ajustement padding et min-height */}
+                     <div id="etude-texte-output" class="mt-6 sm:mt-8 p-4 sm:p-6 bg-blue-50 rounded-xl prose max-w-none shadow-inner min-h-[150px]">
                         <!-- Le contenu analysé sera inséré ici -->
                     </div>
                 </div>
             </div>
         </div>
-        <div class="mt-12">
-            <h2 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
-                <i class="fas fa-save mr-3 text-blue-500"></i>
+
+        <!-- Section Sauvegardes -->
+        <div class="mt-10 sm:mt-12">
+            <h2 class="text-xl sm:text-2xl font-bold text-gray-800 mb-4 sm:mb-6 flex items-center">
+                <i class="fas fa-save mr-2 sm:mr-3 text-blue-500"></i>
                 Sauvegardes
             </h2>
             <div id="backups-list" class="space-y-4">
@@ -635,23 +312,21 @@
         </div>
     </main>
 
-    <footer class="bg-gray-50 border-t border-gray-200 py-6 mt-16">
-        <div class="container mx-auto px-6">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="flex items-center space-x-2 mb-4 md:mb-0">
+    <footer class="bg-gray-50 border-t border-gray-200 py-5 sm:py-6 mt-12 sm:mt-16">
+        <div class="container mx-auto px-4 sm:px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center space-y-3 md:space-y-0">
+                <div class="flex items-center space-x-2">
                     <div class="bg-blue-600 rounded-lg p-1 shadow">
                         <i class="fas fa-robot text-white text-sm"></i>
                     </div>
                     <span class="text-gray-600 text-sm">Mariam AI</span>
                 </div>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
-                        <i class="fas fa-question-circle"></i>
-                        <span class="ml-1 text-sm">Aide</span>
+                <div class="flex space-x-4 sm:space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors text-xs sm:text-sm flex items-center">
+                        <i class="fas fa-question-circle mr-1"></i> Aide
                     </a>
-                    <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors">
-                        <i class="fas fa-shield-alt"></i>
-                        <span class="ml-1 text-sm">Confidentialité</span>
+                    <a href="#" class="text-gray-500 hover:text-blue-600 transition-colors text-xs sm:text-sm flex items-center">
+                        <i class="fas fa-shield-alt mr-1"></i> Confidentialité
                     </a>
                 </div>
             </div>
@@ -660,80 +335,50 @@
 
     <script>
         // --- Constantes ---
-        const DEEPTHINK_STORAGE_KEY = 'deepThinkLastUsedDate'; // Clé localStorage
+        const DEEPTHINK_STORAGE_KEY = 'deepThinkLastUsedDate';
 
         // --- Gestionnaire de fichiers ---
         const uploadedFiles = new Map();
-        // ... (initializeFileUpload, highlightDropZone, unhighlightDropZone, handleFiles, renderPreview, removeFile restent identiques) ...
         function initializeFileUpload() {
             const dropZone = document.getElementById('drop-zone');
             const fileInput = document.getElementById('image-upload');
             const imagePreview = document.getElementById('image-preview');
+            if(!dropZone || !fileInput || !imagePreview) return; // Safety check
 
             dropZone.addEventListener('click', () => fileInput.click());
+            ['dragenter', 'dragover'].forEach(ev => dropZone.addEventListener(ev, highlightDropZone));
+            ['dragleave', 'drop'].forEach(ev => dropZone.addEventListener(ev, unhighlightDropZone));
+            dropZone.addEventListener('drop', (e) => { e.preventDefault(); handleFiles(e.dataTransfer.files); });
+            fileInput.addEventListener('change', () => { handleFiles(fileInput.files); fileInput.value = ''; });
 
-            ['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);
-                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 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;
                 const dataTransfer = new DataTransfer();
-                 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;
+                uploadedFiles.forEach(file => dataTransfer.items.add(file));
+                Array.from(files).forEach(file => {
+                    if (!file.type.startsWith('image/')) return;
                     const fileId = `${file.name}-${file.size}`;
-                    if (uploadedFiles.has(fileId)) continue;
+                    if (uploadedFiles.has(fileId)) return;
                     uploadedFiles.set(fileId, file);
                     dataTransfer.items.add(file);
                     renderPreview(file, fileId);
-                }
-                 fileInput.files = dataTransfer.files;
+                });
+                fileInput.files = dataTransfer.files;
             }
 
             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;
-                        previewItem.innerHTML = `
-                            <img src="${e.target.result}" alt="${file.name}">
-                            <button class="remove-image" title="Supprimer"><i class="fas fa-times"></i></button>
-                        `;
-                        imagePreview.appendChild(previewItem);
-                        previewItem.querySelector('.remove-image').addEventListener('click', () => {
-                            removeFile(fileId, previewItem);
-                         });
-                    };
-                    reader.readAsDataURL(file);
+                 reader.onload = (e) => {
+                     const previewItem = document.createElement('div');
+                     previewItem.classList.add('image-preview-item', 'scale-in');
+                     previewItem.dataset.fileId = fileId;
+                     previewItem.innerHTML = `<img src="${e.target.result}" alt="${file.name}"><button class="remove-image" title="Supprimer"><i class="fas fa-times"></i></button>`;
+                     imagePreview.appendChild(previewItem);
+                     previewItem.querySelector('.remove-image').addEventListener('click', (e) => { e.stopPropagation(); removeFile(fileId, previewItem); });
+                 };
+                 reader.readAsDataURL(file);
             }
 
             function removeFile(fileId, previewElement) {
@@ -743,166 +388,151 @@
                  fileInput.files = dataTransfer.files;
                  previewElement.style.opacity = '0';
                  previewElement.style.transform = 'scale(0.9)';
-                 setTimeout(() => {
-                      if (imagePreview.contains(previewElement)) {
-                           imagePreview.removeChild(previewElement);
-                      }
-                 }, 300);
+                 setTimeout(() => { if (imagePreview.contains(previewElement)) imagePreview.removeChild(previewElement); }, 300);
             }
         }
 
-
         // --- Gestion des sauvegardes ---
-        // ... (sauvegarderReponse, displayNotification, supprimerSauvegarde, afficherSauvegardes, closeModal restent identiques) ...
-         function sauvegarderReponse(titre, contenu) {
+        function sauvegarderReponse(titre, contenu) {
             const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
             const dateSauvegarde = new Date().toISOString();
             const MAX_SAUVEGARDES = 20;
-            if (sauvegardes.length >= MAX_SAUVEGARDES) {
-                 sauvegardes.shift();
-            }
-            sauvegardes.push({
-                titre: titre || "Sauvegarde sans titre",
-                contenu,
-                date: dateSauvegarde
-            });
+            if (sauvegardes.length >= MAX_SAUVEGARDES) sauvegardes.shift();
+            sauvegardes.push({ titre: titre || "Sauvegarde", contenu, date: dateSauvegarde });
             try {
                  localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
+                 displayNotification("Sauvegardé", "success"); // Shorter message
+                 afficherSauvegardes();
             } catch (e) {
-                console.error("Erreur lors de la sauvegarde dans localStorage (peut-être plein):", e);
-                displayNotification("Erreur de sauvegarde: Espace de stockage local plein.", "error");
-                return;
+                console.error("Erreur sauvegarde localStorage:", e);
+                displayNotification("Erreur sauvegarde: Stockage plein?", "error");
             }
-            displayNotification("Sauvegardé avec succès", "success");
-            afficherSauvegardes();
         }
 
         function displayNotification(message, type = 'success') {
              const notification = document.createElement('div');
-             const bgColor = type === 'success' ? 'bg-green-50 border-green-200 text-green-700' : type === 'error' ? 'bg-red-50 border-red-200 text-red-700' : 'bg-yellow-50 border-yellow-200 text-yellow-700';
-             const iconClass = type === 'success' ? 'fa-check-circle text-green-500' : type === 'error' ? 'fa-exclamation-circle text-red-500' : 'fa-exclamation-triangle text-yellow-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 max-w-sm`; // z-index élevé, max-width
-             notification.innerHTML = `
-                <i class="fas ${iconClass} mr-3 text-lg flex-shrink-0"></i>
-                <span class="text-sm font-medium">${message}</span>
-            `;
-            document.body.appendChild(notification);
-
+             const colors = {
+                 success: 'bg-green-50 border-green-200 text-green-700',
+                 error: 'bg-red-50 border-red-200 text-red-700',
+                 warning: 'bg-yellow-50 border-yellow-200 text-yellow-700'
+             };
+             const icons = { success: 'fa-check-circle text-green-500', error: 'fa-exclamation-circle text-red-500', warning: 'fa-exclamation-triangle text-yellow-500' };
+             notification.className = `fixed bottom-4 right-4 sm:bottom-6 sm:right-6 border ${colors[type] || colors.success} px-4 py-3 rounded-lg shadow-lg z-[100] flex items-center scale-in max-w-[calc(100%-2rem)] sm:max-w-sm`; // Responsive max-width
+             notification.innerHTML = `<i class="fas ${icons[type] || icons.success} mr-3 text-lg flex-shrink-0"></i><span class="text-sm font-medium">${message}</span>`;
+             document.body.appendChild(notification);
+             const duration = type === 'error' ? 6000 : 3000;
              setTimeout(() => {
-                notification.style.opacity = '0';
-                notification.style.transform = 'translateY(10px)';
-                setTimeout(() => {
-                    if (document.body.contains(notification)) {
-                         document.body.removeChild(notification);
-                    }
-                }, 300);
-            }, type === 'error' ? 6000 : 3000); // Longer display for errors
-        }
-
-
-        function supprimerSauvegarde(index) {
-            let sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-            sauvegardes.splice(index, 1);
-            localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
-            afficherSauvegardes();
+                notification.style.opacity = '0'; notification.style.transform = 'scale(0.9)'; notification.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+                setTimeout(() => { if (document.body.contains(notification)) document.body.removeChild(notification); }, 300);
+            }, duration);
+        }
+
+        function supprimerSauvegarde(originalIndex) {
+             try {
+                let sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+                if (originalIndex >= 0 && originalIndex < sauvegardes.length) {
+                    sauvegardes.splice(originalIndex, 1);
+                    localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
+                    afficherSauvegardes();
+                } else {
+                    console.error("Index de suppression invalide:", originalIndex);
+                    displayNotification("Erreur suppression: Index invalide", "error");
+                }
+            } catch (e) {
+                 console.error("Erreur suppression sauvegarde:", e);
+                 displayNotification("Erreur suppression", "error");
+            }
         }
 
-
         function afficherSauvegardes() {
-            const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-            sauvegardes.sort((a, b) => new Date(b.date) - new Date(a.date));
             const backupsList = document.getElementById('backups-list');
+            if(!backupsList) return;
+            let sauvegardes = [];
+            try {
+                 sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+            } catch(e) { console.error("Erreur lecture sauvegardes:", e); }
+
+            sauvegardes.sort((a, b) => new Date(b.date) - new Date(a.date));
             backupsList.innerHTML = '';
 
             if (sauvegardes.length === 0) {
-                backupsList.innerHTML = `
-                    <div class="bg-blue-50 rounded-lg p-8 text-center">
-                        <div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-sm">
-                            <i class="fas fa-folder-open text-blue-300 text-2xl"></i>
-                        </div>
-                        <p class="text-gray-600">Aucune sauvegarde pour le moment.</p>
-                        <p class="text-sm text-gray-500 mt-2">Vos réponses générées apparaîtront ici.</p>
-                    </div>
-                `;
+                backupsList.innerHTML = `<div class="bg-blue-50 rounded-lg p-6 sm:p-8 text-center"><div class="bg-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4 shadow-sm"><i class="fas fa-folder-open text-blue-300 text-2xl"></i></div><p class="text-gray-600 text-sm sm:text-base">Aucune sauvegarde.</p><p class="text-xs sm:text-sm text-gray-500 mt-2">Vos réponses apparaîtront ici.</p></div>`;
                 return;
             }
 
             sauvegardes.forEach((sauvegarde, index) => {
                 const date = new Date(sauvegarde.date);
                 const formattedDate = date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
-                const displayTitle = sauvegarde.titre.length > 60 ? sauvegarde.titre.substring(0, 57) + '...' : sauvegarde.titre;
+                const displayTitle = (sauvegarde.titre || "Sans titre").length > 50 ? sauvegarde.titre.substring(0, 47) + '...' : (sauvegarde.titre || "Sans titre");
 
                 const sauvegardeDiv = document.createElement('div');
-                sauvegardeDiv.dataset.index = index;
+                sauvegardeDiv.dataset.originalDate = sauvegarde.date; // Use date for more reliable deletion lookup
                 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">
-                        <div class="bg-blue-100 rounded-lg p-2 mr-3 flex-shrink-0"> <i class="fas fa-file-alt text-blue-600"></i> </div>
-                        <div class="flex-grow overflow-hidden">
-                            <h3 class="text-lg font-semibold text-gray-800 truncate" title="${sauvegarde.titre}">${displayTitle}</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 class="bg-blue-100 rounded-lg p-2 mr-3 flex-shrink-0"> <i class="fas fa-file-alt text-blue-600 text-sm"></i> </div>
+                        <div class="flex-grow overflow-hidden mr-2">
+                            <h3 class="text-base sm:text-lg font-semibold text-gray-800 truncate" title="${sauvegarde.titre || 'Sans titre'}">${displayTitle}</h3>
+                            <p class="text-xs sm:text-sm text-gray-600 mb-1 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">
-                            <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 class="flex space-x-1 sm:space-x-2 ml-auto flex-shrink-0">
+                            <button class="text-gray-400 hover:text-blue-600 focus:outline-none copy-btn p-1 rounded-full hover:bg-gray-100" title="Copier"> <i class="fas fa-copy text-xs sm:text-sm"></i> </button>
+                            <button class="text-gray-400 hover:text-red-600 focus:outline-none delete-btn p-1 rounded-full hover:bg-gray-100" title="Supprimer"> <i class="fas fa-trash-alt text-xs sm:text-sm"></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"></div>`;
+                    <div class="backup-content text-sm text-gray-700 prose max-w-none border-t border-gray-100"></div>`;
                 backupsList.appendChild(sauvegardeDiv);
 
                 const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
                 const headerDiv = sauvegardeDiv.querySelector('.item-header');
 
-                headerDiv.addEventListener('click', (e) => {
+                headerDiv.addEventListener('click', () => {
                     const isExpanded = backupContentDiv.classList.contains('backup-content-expanded');
                     document.querySelectorAll('.backup-content-expanded').forEach(content => {
-                        if (content !== backupContentDiv) {
-                            content.classList.remove('backup-content-expanded'); content.innerHTML = '';
-                         }
+                        if (content !== backupContentDiv) { content.classList.remove('backup-content-expanded'); content.innerHTML = ''; }
                     });
                     if (!isExpanded) {
-                        backupContentDiv.innerHTML = marked.parse(sauvegarde.contenu);
+                        try { backupContentDiv.innerHTML = marked.parse(sauvegarde.contenu || ''); } catch(e) { backupContentDiv.innerHTML = "Erreur d'affichage du contenu."; console.error(e); }
                         backupContentDiv.classList.add('backup-content-expanded');
-                        setTimeout(() => { MathJax.typesetPromise([backupContentDiv]).catch(err => console.error('MathJax error:', err)); }, 50);
+                        // MathJax retiré
                     } else {
                          backupContentDiv.classList.remove('backup-content-expanded'); backupContentDiv.innerHTML = '';
                     }
                 });
 
-                const copyButton = sauvegardeDiv.querySelector('.copy-btn');
-                copyButton.addEventListener('click', (e) => {
+                sauvegardeDiv.querySelector('.copy-btn').addEventListener('click', (e) => {
                     e.stopPropagation();
-                    navigator.clipboard.writeText(sauvegarde.contenu).then(() => {
-                        const icon = copyButton.querySelector('i'); icon.className = 'fas fa-check text-green-500'; setTimeout(() => { icon.className = 'fas fa-copy'; }, 2000);
+                    navigator.clipboard.writeText(sauvegarde.contenu || '').then(() => {
+                        const icon = e.currentTarget.querySelector('i'); icon.className = 'fas fa-check text-green-500 text-xs sm:text-sm'; setTimeout(() => { icon.className = 'fas fa-copy text-xs sm:text-sm'; }, 2000);
                     }).catch(err => { console.error('Copy error:', err); displayNotification("Erreur copie", "error"); });
                 });
 
-                const deleteButton = sauvegardeDiv.querySelector('.delete-btn');
-                deleteButton.addEventListener('click', (e) => {
+                sauvegardeDiv.querySelector('.delete-btn').addEventListener('click', (e) => {
                     e.stopPropagation();
-                    const itemIndex = parseInt(sauvegardeDiv.dataset.index, 10);
-                    const storedSauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-                    storedSauvegardes.sort((a, b) => new Date(b.date) - new Date(a.date));
-                    const itemToDelete = storedSauvegardes[itemIndex];
-                    const originalSauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-                    const originalIndex = originalSauvegardes.findIndex(s => s.date === itemToDelete?.date && s.titre === itemToDelete?.titre);
+                    const itemDate = sauvegardeDiv.dataset.originalDate;
+
+                    // Trouver l'index original basé sur la date (plus fiable que l'index d'affichage trié)
+                     let originalIndex = -1;
+                     try {
+                         const originalSauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
+                         originalIndex = originalSauvegardes.findIndex(s => s.date === itemDate);
+                     } catch (err) { console.error("Erreur recherche sauvegarde:", err); }
 
-                    if (originalIndex === -1) { console.error("Item not found for deletion."); displayNotification("Erreur suppression", "error"); return; }
+
+                    if (originalIndex === -1) { console.error("Item not found for deletion by date:", itemDate); displayNotification("Erreur suppression", "error"); return; }
 
                     const confirmationModal = document.createElement('div');
-                    confirmationModal.className = 'fixed inset-0 flex items-center justify-center z-[100] bg-black bg-opacity-30 scale-in';
+                    confirmationModal.className = 'fixed inset-0 flex items-center justify-center z-[100] bg-black bg-opacity-50 scale-in p-4'; // Ajout p-4 pour mobile
                     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>
+                        <div class="bg-white rounded-lg p-5 sm:p-6 max-w-sm w-full 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-base sm:text-lg font-semibold text-gray-800">Confirmation</h3> </div>
                             <p class="text-gray-600 mb-6 text-sm">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); closeModal(confirmationModal); });
-                     confirmationModal.addEventListener('click', (event) => { if (event.target === confirmationModal) closeModal(confirmationModal); });
+                    confirmationModal.addEventListener('click', (event) => { if (event.target === confirmationModal) closeModal(confirmationModal); });
                 });
             });
         }
@@ -915,26 +545,23 @@
 
 
         // --- Gestion DeepThink ---
-        /**
-         * Vérifie si DeepThink a déjà été utilisé aujourd'hui et met à jour l'UI.
-         */
         function checkDeepThinkAvailability() {
             const checkbox = document.getElementById('deepthink-checkbox');
             const statusSpan = document.getElementById('deepthink-status');
-            if (!checkbox || !statusSpan) return; // Safety check
-
-            const lastUsedDateStr = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
-            const todayStr = new Date().toISOString().split('T')[0]; // YYYY-MM-DD format
-
-            if (lastUsedDateStr === todayStr) {
-                checkbox.checked = false; // Ensure it's unchecked if disabled
-                checkbox.disabled = true;
-                statusSpan.textContent = "(déjà utilisé aujourd'hui)";
-                statusSpan.classList.add('text-red-500'); // Make status noticeable
-            } else {
-                checkbox.disabled = false;
-                statusSpan.textContent = ""; // Clear status
-                 statusSpan.classList.remove('text-red-500');
+            if (!checkbox || !statusSpan) return;
+            try {
+                const lastUsedDateStr = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
+                const todayStr = new Date().toISOString().split('T')[0];
+                if (lastUsedDateStr === todayStr) {
+                    checkbox.checked = false; checkbox.disabled = true;
+                    statusSpan.textContent = "(utilisé)"; statusSpan.classList.add('text-red-500');
+                } else {
+                    checkbox.disabled = false; statusSpan.textContent = ""; statusSpan.classList.remove('text-red-500');
+                }
+            } catch (e) {
+                 console.error("Erreur accès localStorage (DeepThink):", e);
+                 checkbox.disabled = true; // Disable if error
+                 statusSpan.textContent = "(erreur)";
             }
         }
 
@@ -944,79 +571,73 @@
             const output = document.getElementById('francais-output');
             const sujetTextarea = document.getElementById('sujet-francais');
             const deepThinkCheckbox = document.getElementById('deepthink-checkbox');
+            const submitButton = form.querySelector('button[type="submit"]'); // Get button for disabling
+
+             if(!form || !output || !sujetTextarea || !deepThinkCheckbox || !submitButton) return; // Safety check
 
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
+                const originalButtonContent = submitButton.innerHTML; // Store original content
+                submitButton.disabled = true; // Disable button
+                submitButton.innerHTML = `<div class="flex items-center justify-center"><div class="loader"><div></div><div></div><div></div><div></div></div><span class="ml-2">Génération...</span></div>`; // Show loader in button
 
                 const sujetValue = sujetTextarea.value.trim();
-                const isDeepThinkChecked = deepThinkCheckbox.checked; // Store initial checked state
+                const isDeepThinkChecked = deepThinkCheckbox.checked;
 
-                // --- Validation avant envoi ---
+                // Validation
                 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.</p></div></div>`;
-                    sujetTextarea.focus();
-                    sujetTextarea.classList.add('border-red-500');
-                    setTimeout(() => sujetTextarea.classList.remove('border-red-500'), 3000);
+                    sujetTextarea.focus(); sujetTextarea.classList.add('border-red-500'); setTimeout(() => sujetTextarea.classList.remove('border-red-500'), 3000);
+                    submitButton.disabled = false; submitButton.innerHTML = originalButtonContent; // Re-enable button
                     return;
                 }
-
-                // MODIFICATION: Vérifier la limite DeepThink avant l'envoi si coché
                 if (isDeepThinkChecked) {
-                    const lastUsedDateStr = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
-                    const todayStr = new Date().toISOString().split('T')[0];
-                    if (lastUsedDateStr === todayStr) {
-                         output.innerHTML = `<div class="alert-message alert-warning"><i class="fas fa-exclamation-triangle"></i><div><p>Limite atteinte</p><p>Vous avez déjà utilisé DeepThink aujourd'hui.</p></div></div>`;
-                         checkDeepThinkAvailability(); // Re-disable checkbox just in case
-                         return; // Stop submission
-                    }
+                     try {
+                        const lastUsedDateStr = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
+                        const todayStr = new Date().toISOString().split('T')[0];
+                        if (lastUsedDateStr === todayStr) {
+                            output.innerHTML = `<div class="alert-message alert-warning"><i class="fas fa-exclamation-triangle"></i><div><p>Limite atteinte</p><p>DeepThink déjà utilisé aujourd'hui.</p></div></div>`;
+                            checkDeepThinkAvailability();
+                            submitButton.disabled = false; submitButton.innerHTML = originalButtonContent; // Re-enable button
+                            return;
+                        }
+                    } catch(e) { /* Ignore localStorage error here, proceed without check */ }
                 }
-                // --- Fin Validation ---
 
+                // Clear previous output and show minimal loader
+                 output.innerHTML = `<div class="flex justify-center items-center p-6"><div class="loader"><div></div><div></div><div></div><div></div></div></div>`;
 
-                // --- Affichage chargement ---
-                output.innerHTML = `
-                <div class="flex flex-col items-center justify-center py-8">
-                    <div class="loader mb-4"><div></div><div></div><div></div><div></div></div>
-                    <p class="text-sm font-medium text-gray-600">Génération en cours...</p>
-                     ${isDeepThinkChecked ? '<p class="text-xs text-blue-500 mt-1">Mode DeepThink activé</p>' : ''}
-                </div>`;
 
-                // --- Préparation et Envoi ---
                 const formData = new FormData(form);
-                formData.append('use_deepthink', isDeepThinkChecked); // Use stored checked state
+                formData.append('use_deepthink', isDeepThinkChecked);
 
                 try {
                     const response = await fetch('/api/francais', { method: 'POST', body: formData });
                     const result = await response.json();
-
                     if (!response.ok) throw new Error(result.output || `Erreur HTTP ${response.status}`);
 
-                    // --- Affichage Succès ---
-                    output.style.opacity = '0';
-                    output.style.transition = '';
-                    output.innerHTML = marked.parse(result.output);
-                    requestAnimationFrame(() => {
-                        output.style.transition = 'opacity 0.3s ease-in-out';
-                        output.style.opacity = '1';
-                    });
+                    // Render output
+                    try { output.innerHTML = marked.parse(result.output || ''); } catch (e) { output.innerHTML = "Erreur d'affichage de la réponse."; console.error(e); }
 
-                    // --- Sauvegarde & Mise à jour Limite DeepThink ---
-                    const titreSauvegarde = sujetValue.length > 100 ? sujetValue.substring(0, 97) + '...' : sujetValue;
+                    const titreSauvegarde = sujetValue.substring(0, 50) + (sujetValue.length > 50 ? '...' : ''); // Shorter title
                     const deepThinkSuffix = isDeepThinkChecked ? ' [DeepThink]' : '';
                     sauvegarderReponse(titreSauvegarde + deepThinkSuffix, result.output);
 
-                    // MODIFICATION: Si DeepThink a été utilisé avec succès, enregistrer la date et mettre à jour l'UI
                     if (isDeepThinkChecked) {
-                        const todayStr = new Date().toISOString().split('T')[0];
-                        localStorage.setItem(DEEPTHINK_STORAGE_KEY, todayStr);
-                        checkDeepThinkAvailability(); // Met à jour l'état de la checkbox et le message
+                         try {
+                            const todayStr = new Date().toISOString().split('T')[0];
+                            localStorage.setItem(DEEPTHINK_STORAGE_KEY, todayStr);
+                            checkDeepThinkAvailability();
+                        } catch(e) { console.error("Erreur sauvegarde date DeepThink:", e); }
                     }
+                    // MathJax retiré
 
-                    MathJax.typesetPromise([output]).catch(err => console.error('MathJax error:', err));
-
-                } catch (error) { // --- Gestion Erreur ---
+                } catch (error) {
                      console.error("Erreur soumission (français):", error);
-                     output.innerHTML = `<div class="alert-message alert-danger"><i class="fas fa-exclamation-circle"></i><div><p>Erreur</p><p>${error.message || "Vérifiez la console pour détails."}</p></div></div>`;
+                     output.innerHTML = `<div class="alert-message alert-danger"><i class="fas fa-exclamation-circle"></i><div><p>Erreur</p><p>${error.message || "Vérifiez la console."}</p></div></div>`;
+                } finally {
+                     submitButton.disabled = false; // Always re-enable button
+                     submitButton.innerHTML = originalButtonContent; // Restore original content
                 }
             });
         }
@@ -1025,72 +646,75 @@
             const form = document.getElementById('etude-texte-form');
             const output = document.getElementById('etude-texte-output');
             const fileInput = document.getElementById('image-upload');
+            const submitButton = form.querySelector('button[type="submit"]'); // Get button for disabling
+
+             if(!form || !output || !fileInput || !submitButton) return; // Safety check
 
             form.addEventListener('submit', async (e) => {
                 e.preventDefault();
+                const originalButtonContent = submitButton.innerHTML; // Store original content
+                submitButton.disabled = true; // Disable button
+                submitButton.innerHTML = `<div class="flex items-center justify-center"><div class="loader"><div></div><div></div><div></div><div></div></div><span class="ml-2">Analyse...</span></div>`; // Show loader in button
+
+
                  if (uploadedFiles.size === 0) {
                      output.innerHTML = `<div class="alert-message alert-warning"><i class="fas fa-exclamation-triangle"></i><div><p>Aucune image</p><p>Ajoutez au moins une image.</p></div></div>`;
+                     submitButton.disabled = false; submitButton.innerHTML = originalButtonContent; // Re-enable button
                     return;
                 }
-                output.innerHTML = `
-                <div class="flex flex-col items-center justify-center py-8">
-                    <div class="loader mb-4"><div></div><div></div><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>`;
+
+                 // Clear previous output and show minimal loader
+                 output.innerHTML = `<div class="flex justify-center items-center p-6"><div class="loader"><div></div><div></div><div></div><div></div></div></div>`;
+
                 const formData = new FormData();
                  uploadedFiles.forEach((file) => formData.append('images', file, file.name));
                 try {
                     const response = await fetch('/api/etude-texte', { method: 'POST', body: formData });
                     const result = await response.json();
                     if (!response.ok) throw new Error(result.output || `Erreur HTTP ${response.status}`);
-                    output.style.opacity = '0';
-                    output.style.transition = '';
-                    output.innerHTML = marked.parse(result.output);
-                    requestAnimationFrame(() => { output.style.transition = 'opacity 0.3s ease-in-out'; output.style.opacity = '1'; });
+
+                    try { output.innerHTML = marked.parse(result.output || ''); } catch (e) { output.innerHTML = "Erreur d'affichage de la réponse."; console.error(e); }
+
                     const titre = `Analyse image(s) - ${new Date().toLocaleDateString('fr-FR')}`;
                     sauvegarderReponse(titre, result.output);
-                    MathJax.typesetPromise([output]).catch(err => console.error('MathJax error:', err));
+                    // MathJax retiré
                 } catch (error) {
                      console.error("Erreur soumission (étude texte):", error);
-                     output.innerHTML = `<div class="alert-message alert-danger"><i class="fas fa-exclamation-circle"></i><div><p>Erreur</p><p>${error.message || "Vérifiez la console pour détails."}</p></div></div>`;
+                     output.innerHTML = `<div class="alert-message alert-danger"><i class="fas fa-exclamation-circle"></i><div><p>Erreur</p><p>${error.message || "Vérifiez la console."}</p></div></div>`;
+                } finally {
+                     submitButton.disabled = false; // Always re-enable button
+                     submitButton.innerHTML = originalButtonContent; // Restore original content
                 }
             });
         }
 
         // --- Animations & Améliorations UI ---
-        // ... (animateOnScroll, enhanceTextareaFocus, enhanceRadioButtons restent identiques) ...
          function animateOnScroll() {
             const cards = document.querySelectorAll('.card-hover');
             if (!('IntersectionObserver' in window)) { cards.forEach(card => card.style.opacity = '1'); return; }
             const observer = new IntersectionObserver((entries) => {
                 entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        requestAnimationFrame(() => { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; });
-                        observer.unobserve(entry.target);
-                    }
+                    if (entry.isIntersecting) { requestAnimationFrame(() => { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; }); observer.unobserve(entry.target); }
                 });
-            }, { threshold: 0.1 });
-            cards.forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(30px)'; observer.observe(card); });
+            }, { threshold: 0.05 }); // Lower threshold for earlier trigger
+            cards.forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; observer.observe(card); }); // Smaller initial translate
         }
         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' : ''}`; textarea.classList.remove('border-red-500');
-            });
+            if(!textarea || !counter) return;
+            textarea.addEventListener('input', () => { const length = textarea.value.length; counter.textContent = `${length} caractère${length !== 1 ? 's' : ''}`; textarea.classList.remove('border-red-500'); });
         }
         function enhanceRadioButtons() {
-             const radioGroups = document.querySelectorAll('input[type="radio"] + span');
-             radioGroups.forEach(label => {
+             document.querySelectorAll('input[type="radio"] + span').forEach(label => {
                 const input = label.previousElementSibling; if (input.disabled) return;
-                label.addEventListener('mouseenter', () => { if (!input.checked) label.classList.add('border-blue-400', 'shadow-md', 'transform' ,'-translate-y-0.5'); });
-                label.addEventListener('mouseleave', () => { if (!input.checked) label.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-0.5'); });
+                label.addEventListener('mouseenter', () => { if (!input.checked) label.classList.add('border-blue-400', 'shadow-md', 'transform' ,'-translate-y-px'); }); // Smaller translate
+                label.addEventListener('mouseleave', () => { if (!input.checked) label.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-px'); });
                  input.addEventListener('change', () => {
                      const groupName = input.name;
                      document.querySelectorAll(`input[name="${groupName}"] + span`).forEach(otherLabel => {
-                         if (otherLabel !== label) otherLabel.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-0.5', 'border-primary');
-                         else label.classList.remove('shadow-md', 'transform', '-translate-y-0.5');
+                         if (otherLabel !== label) otherLabel.classList.remove('border-blue-400', 'shadow-md', 'transform', '-translate-y-px', 'border-primary');
+                         else label.classList.remove('shadow-md', 'transform', '-translate-y-px');
                      });
                  });
             });
@@ -1105,27 +729,28 @@
             animateOnScroll();
             enhanceTextareaFocus();
             enhanceRadioButtons();
-            checkDeepThinkAvailability(); // MODIFICATION: Vérifier la limite au chargement
+            checkDeepThinkAvailability();
             afficherSauvegardes();
-
-            // MathJax Config
-            window.MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']], displayMath: [['$$', '$$'], ['\\[', '\\]']] }, svg: { fontCache: 'global' }, options: { skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'], ignoreHtmlClass: 'tex2jax_ignore', processHtmlClass: 'tex2jax_process' } };
+            // MathJax retiré
 
             // Welcome Message (session based)
-            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">Assistant 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);
-                welcomeMessage.querySelector('.close-welcome').addEventListener('click', () => closeWelcomeMessage(welcomeMessage));
-                setTimeout(() => { if (document.body.contains(welcomeMessage)) closeWelcomeMessage(welcomeMessage); }, 7000);
-                 sessionStorage.setItem('welcomeShown', 'true');
-             }
+            try {
+                const showWelcome = sessionStorage.getItem('welcomeShown') !== 'true';
+                if (showWelcome) {
+                    const welcomeMessageContainer = document.createElement('div');
+                    welcomeMessageContainer.innerHTML = `<div class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 bg-white rounded-xl shadow-lg p-4 sm:p-5 transform transition-all duration-500 opacity-0 translate-y-4 max-w-[calc(100%-2rem)] sm:max-w-xs z-[100]"><div class="flex items-start space-x-3 sm:space-x-4"><div class="bg-gradient-to-r from-blue-500 to-blue-700 rounded-full p-2 sm:p-3 mt-1 flex-shrink-0"> <i class="fas fa-robot text-white text-lg sm: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">Assistant prêt.</p> </div></div><button class="absolute top-1 right-1 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);
+                    welcomeMessage.querySelector('.close-welcome').addEventListener('click', () => closeWelcomeMessage(welcomeMessage));
+                    setTimeout(() => { if (document.body.contains(welcomeMessage)) closeWelcomeMessage(welcomeMessage); }, 7000);
+                    sessionStorage.setItem('welcomeShown', 'true');
+                }
+            } catch(e) { console.warn("Erreur accès sessionStorage (Welcome Msg):", e); }
+
              function closeWelcomeMessage(element) {
-                 element.classList.add('opacity-0', 'translate-y-4');
-                 setTimeout(() => { if (element.parentElement) element.parentElement.remove(); }, 500);
+                 element.classList.add('opacity-0', 'translate-y-4'); element.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
+                 setTimeout(() => { if (element?.parentElement) element.parentElement.remove(); }, 300);
              }
         });
     </script>