Upload philosophie.html

templates/philosophie.html

@@ -265,13 +265,13 @@
 
                     <!-- Course Selection -->
                      <div class="space-y-3">
-                        <label class="block text-sm font-medium text-gray-700">Sélection du cours</label>
+                        <label class="block text-sm font-medium text-gray-700">Sélection du cours (Optionnel)</label>
                             <select id="course-select" class="w-full">
-                                <option value="">Choisir un cours...</option>
+                                <option value="">Choisir un cours pour contextualiser...</option>
                              </select>
-                            <div class="course-meta hidden">
+                            <div class="course-meta hidden mt-2">
                             <div class="bg-gradient-to-r from-gray-50 to-white rounded-xl p-4 border border-gray-100">
-                                <div class="flex justify-between items-center">
+                                <div class="flex justify-between items-center text-sm">
                                     <span id="course-author" class="flex items-center space-x-2">
                                         <svg class="h-5 w-5 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
@@ -345,11 +345,22 @@
         </div>
     </div>
 
+    <!-- DeepThink Floating Action Button -->
+    <button id="deepthink-btn"
+            title="Utiliser DeepThink (1 fois/jour)"
+            class="fixed bottom-6 right-6 z-50 bg-gradient-to-br from-purple-600 to-blue-500 hover:from-purple-700 hover:to-blue-600 text-white p-4 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:hover:shadow-lg">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+        </svg>
+        <span class="sr-only">DeepThink</span> <!-- Screen reader text -->
+    </button>
+
 <script>
     $(document).ready(function() {
         // Initialisation de Select2
         $('#course-select').select2({
-            placeholder: 'Choisir un cours...',
+            placeholder: 'Choisir un cours pour contextualiser...',
+            allowClear: true, // Permet de déselectionner
             templateResult: function (course) {
                 if (!course.id) {
                     return course.text;
@@ -361,6 +372,7 @@
                 `);
             },
             templateSelection: function (course) {
+                 if (!course.id) { return course.text; } // Placeholder text
                 return course.text; // Seul le titre est affiché dans la sélection
             },
 
@@ -401,6 +413,7 @@
         }
         addButtonAnimation('submit-btn');
         addButtonAnimation('copy-btn');
+        addButtonAnimation('deepthink-btn'); // Add animation to deepthink button
 
       // Gestion du changement de type avec affichage personnalisé
         $('#type-select').change(function() {
@@ -442,6 +455,8 @@
                       $(newOption).data('author', course.author); // Ajouter l'auteur comme data
                      select.append(newOption);
                    });
+                   // Important: Trigger update after adding options for Select2
+                   select.trigger('change.select2');
                 })
 
             .fail(function() {
@@ -455,30 +470,35 @@
         // Gestion du changement de cours avec animations
           $('#course-select').on('change', function() {
              const courseId = $(this).val();
+             const $courseMeta = $('.course-meta'); // Cache the element
 
              if (courseId) {
                 $.ajax({
                     url: `/api/philosophy/courses/${courseId}`,
                     method: 'GET',
                     beforeSend: function() {
-                        $('.course-meta').addClass('animate-pulse');
+                        $courseMeta.addClass('animate-pulse').removeClass('hidden'); // Show pulsing placeholder
+                        // Clear previous data immediately for better UX
+                        $('#course-author span').text('');
+                        $('#course-date span').text('');
                     },
                     success: function(course) {
-                        $('.course-meta').removeClass('hidden animate-pulse')
-                            .addClass('animate-fadeIn');
                         $('#course-author span').text(`Pr. ${course.author}`);
                         $('#course-date span').text(new Date(course.updated_at).toLocaleDateString('fr-FR', {
                             day: 'numeric',
                             month: 'long',
                             year: 'numeric' }));
+                         // Fade in content after data is loaded
+                         $courseMeta.removeClass('animate-pulse').addClass('animate-fadeIn');
 
-                        // Afficher une notification de succès
-                        Toast.fire({
+                        // Afficher une notification de succès discrète
+                        /*Toast.fire({
                             icon: 'success',
-                            title: 'Cours chargé avec succès'
-                        });
+                            title: 'Cours chargé'
+                        });*/
                     },
                     error: function() {
+                        $courseMeta.addClass('hidden').removeClass('animate-pulse animate-fadeIn'); // Hide on error
                         Toast.fire({
                             icon: 'error',
                             title: 'Erreur',
@@ -487,11 +507,18 @@
                     }
                 });
             } else {
-                $('.course-meta').addClass('animate-fadeOut').on('animationend', function() {
-                    $(this).addClass('hidden').removeClass('animate-fadeOut');
-                });
+                 // Fade out if a course was previously selected, then hide
+                if (!$courseMeta.hasClass('hidden')) {
+                    $courseMeta.addClass('animate-fadeOut').on('animationend', function() {
+                         $(this).addClass('hidden').removeClass('animate-fadeOut animate-fadeIn');
+                          // Clear data when deselected
+                          $('#course-author span').text('');
+                          $('#course-date span').text('');
+                           // Unbind animationend to prevent multiple executions
+                           $(this).off('animationend');
+                     });
+                }
             }
-
         });
 
         // Gestion de la soumission avec conversion en Markdown et sauvegarde
@@ -499,7 +526,13 @@
             const question = $('#question').val().trim();
 
             if (!question) {
-                // Gestion de l'erreur si la question est vide (inchangée)
+                 Toast.fire({
+                    icon: 'warning',
+                    title: 'Sujet Requis',
+                    text: 'Veuillez saisir un sujet de dissertation.'
+                });
+                $('#question').addClass('animate-shake border-red-500').focus();
+                setTimeout(() => $('#question').removeClass('animate-shake border-red-500'), 600);
                 return;
             }
 
@@ -534,7 +567,7 @@
             };
 
             $.ajax({
-                url: '/submit_philo',
+                url: '/submit_philo', // Standard endpoint
                 method: 'POST',
                 contentType: 'application/json',
                 data: JSON.stringify(data),
@@ -556,11 +589,16 @@
                         timer: 2000
                     });
                 },
-                error: function() {
+                error: function(jqXHR) {
+                     Swal.close();
+                     let errorMsg = 'Une erreur est survenue lors de la génération de votre dissertation.';
+                     if (jqXHR.responseJSON && jqXHR.responseJSON.error) {
+                        errorMsg = jqXHR.responseJSON.error;
+                     }
                      Swal.fire({
                         icon: 'error',
                         title: 'Erreur de génération',
-                        text: 'Une erreur est survenue lors de la génération de votre dissertation.',
+                        text: errorMsg,
                         customClass: {
                             popup: 'rounded-2xl',
                             confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
@@ -570,9 +608,153 @@
             });
         });
 
+       // --- START: DeepThink Functionality ---
+        const DEEPTHINK_COOLDOWN_MS = 24 * 60 * 60 * 1000; // 24 hours in milliseconds
+        const DEEPTHINK_STORAGE_KEY = 'lastDeepThinkUsage';
+        const $deepThinkBtn = $('#deepthink-btn');
+
+        function checkDeepThinkCooldown() {
+            const lastUsage = localStorage.getItem(DEEPTHINK_STORAGE_KEY);
+            if (!lastUsage) {
+                $deepThinkBtn.prop('disabled', false).attr('title', 'Utiliser DeepThink (1 fois/jour)');
+                return true; // Available
+            }
+
+            const lastUsageTime = parseInt(lastUsage, 10);
+            const now = Date.now();
+            const timeElapsed = now - lastUsageTime;
+
+            if (timeElapsed >= DEEPTHINK_COOLDOWN_MS) {
+                $deepThinkBtn.prop('disabled', false).attr('title', 'Utiliser DeepThink (1 fois/jour)');
+                return true; // Available
+            } else {
+                const remainingTime = DEEPTHINK_COOLDOWN_MS - timeElapsed;
+                const hours = Math.floor(remainingTime / (60 * 60 * 1000));
+                const minutes = Math.floor((remainingTime % (60 * 60 * 1000)) / (60 * 1000));
+                $deepThinkBtn.prop('disabled', true).attr('title', `DeepThink disponible dans ${hours}h ${minutes}m`);
+                return false; // Not available
+            }
+        }
+
+        // Check cooldown on page load
+        checkDeepThinkCooldown();
+        // Periodically check cooldown (e.g., every minute) in case the tab stays open
+        setInterval(checkDeepThinkCooldown, 60000);
+
+
+        // Click handler for DeepThink button
+        $deepThinkBtn.click(function() {
+            if (!checkDeepThinkCooldown()) {
+                 Toast.fire({
+                    icon: 'warning',
+                    title: 'DeepThink Non Disponible',
+                    text: $deepThinkBtn.attr('title') // Show remaining time from title
+                });
+                return;
+            }
+
+            const question = $('#question').val().trim();
+
+            if (!question) {
+                 Toast.fire({
+                    icon: 'warning',
+                    title: 'Sujet Requis',
+                    text: 'Veuillez saisir un sujet avant d\'utiliser DeepThink.'
+                });
+                $('#question').addClass('animate-shake border-red-500').focus();
+                setTimeout(() => $('#question').removeClass('animate-shake border-red-500'), 600);
+                return;
+            }
+
+             // Use the same sophisticated loading animation, adjusted for DeepThink
+             Swal.fire({
+                 title: 'Génération DeepThink en cours',
+                 html: `
+                     <div class="space-y-4">
+                         <div class="flex justify-center">
+                             <div class="w-16 h-16 relative">
+                                 <div class="absolute inset-0 rounded-full border-4 border-purple-200 animate-ping"></div>
+                                 <div class="absolute inset-0 rounded-full border-4 border-purple-500 animate-pulse"></div>
+                             </div>
+                         </div>
+                         <div class="text-gray-600">
+                             <p class="animate-pulse">Analyse philosophique approfondie...</p>
+                             <p class="text-sm mt-2 text-gray-500">Cela peut prendre un peu plus de temps</p>
+                         </div>
+                     </div>
+                 `,
+                 allowOutsideClick: false,
+                 showConfirmButton: false,
+                 customClass: {
+                     popup: 'rounded-2xl'
+                 }
+             });
+
+            const data = {
+                question: question,
+                type: $('#type-select').val(),
+                courseId: $('#course-select').val() || null
+            };
+
+            $.ajax({
+                url: '/submit_philo_deepthink', // Call the NEW endpoint
+                method: 'POST',
+                contentType: 'application/json',
+                data: JSON.stringify(data),
+                success: function(data) {
+                    Swal.close();
+
+                    const htmlContent = marked.parse(data.response);
+                    // Display the dissertation (replaces previous content)
+                    $('#response > div').html(htmlContent);
+                    $('#response').removeClass('hidden').addClass('animate-fadeIn');
+                    $('#copy-btn').removeClass('hidden').addClass('animate-slideUp');
+
+                    // Save the dissertation locally (optional, but consistent)
+                    saveDissertation(question + " (DeepThink)", data.response);
+
+                    // RECORD the usage timestamp
+                    localStorage.setItem(DEEPTHINK_STORAGE_KEY, Date.now().toString());
+                    // Update button state immediately
+                    checkDeepThinkCooldown();
+
+                    Toast.fire({
+                        icon: 'success',
+                        title: 'DeepThink terminé!',
+                        text: 'Dissertation générée et sauvegardée.',
+                        timer: 2500
+                    });
+                },
+                error: function(jqXHR) {
+                    Swal.close(); // Close loading indicator on error too
+                    let errorMsg = 'Une erreur est survenue lors de la génération DeepThink.';
+                    if (jqXHR.responseJSON && jqXHR.responseJSON.error) {
+                        errorMsg = jqXHR.responseJSON.error;
+                    }
+                     Swal.fire({
+                        icon: 'error',
+                        title: 'Erreur DeepThink',
+                        text: errorMsg,
+                        customClass: {
+                            popup: 'rounded-2xl',
+                            confirmButton: 'bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200'
+                        }
+                    });
+                    // Do NOT update cooldown here, allow user to retry if it was a server error
+                }
+            });
+        });
+
+        // --- END: DeepThink Functionality ---
+
 
        function saveDissertation(title, content) {
             let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
+             // Limit the number of saved dissertations to avoid excessive storage use
+             const MAX_SAVED = 20;
+             if (savedDissertations.length >= MAX_SAVED) {
+                 savedDissertations.shift(); // Remove the oldest one
+             }
             savedDissertations.push({ title, content, timestamp: Date.now() });
             localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
            updateSavedDissertationsList();
@@ -580,15 +762,30 @@
         }
 
         function deleteDissertation(index) {
-             let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
-            savedDissertations.splice(index, 1);
-            localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
-            updateSavedDissertationsList();
-            Toast.fire({
-                icon: 'success',
-                title: 'Dissertation supprimée avec succès'
-            });
-
+             Swal.fire({
+                 title: 'Êtes-vous sûr?',
+                 text: "Cette action est irréversible!",
+                 icon: 'warning',
+                 showCancelButton: true,
+                 confirmButtonColor: '#d33',
+                 cancelButtonColor: '#3085d6',
+                 confirmButtonText: 'Oui, supprimer!',
+                 cancelButtonText: 'Annuler',
+                 customClass: {
+                    popup: 'rounded-2xl',
+                 }
+             }).then((result) => {
+                 if (result.isConfirmed) {
+                     let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
+                     savedDissertations.splice(index, 1);
+                     localStorage.setItem('dissertations', JSON.stringify(savedDissertations));
+                     updateSavedDissertationsList();
+                     Toast.fire({
+                         icon: 'success',
+                         title: 'Dissertation supprimée'
+                     });
+                 }
+             })
         }
 
         // Fonction pour afficher les dissertations sauvegardées (avec sections repliables et suppression)
@@ -597,40 +794,69 @@
             dissertationsList.empty(); // Vider la liste actuelle
 
             let savedDissertations = JSON.parse(localStorage.getItem('dissertations')) || [];
+             // Sort by timestamp descending (newest first)
+            savedDissertations.sort((a, b) => b.timestamp - a.timestamp);
+
 
            if (savedDissertations.length === 0) {
-                dissertationsList.append('<p class="text-gray-500">Aucune dissertation sauvegardée.</p>');
+                dissertationsList.append('<p class="text-center text-gray-500 italic py-4">Aucune dissertation sauvegardée pour le moment.</p>');
                 return;
             }
 
 
-
             savedDissertations.forEach((diss, index) => {
-                 const date = moment(diss.timestamp).format('LLL');
-
-                const collapsible = $(`<button class="collapsible rounded-xl border border-gray-100 flex justify-between w-full"><span>${diss.title}</span><span class="text-gray-500 text-sm">${date}</span></button>`);
-                const deleteButton = $('<button class="text-red-500 hover:text-red-700 ml-2">Supprimer</button>');
-                const content = $('<div class="content prose prose-violet max-w-none p-4"></div>').html(marked.parse(diss.content)); // Convertir en HTML
-
-                collapsible.append(deleteButton); // Ajouter le bouton supprimer
-                dissertationsList.append(collapsible, content);
-
-                 // Gestionnaire d'événement pour chaque section repliable
-                collapsible.click(function(event) {
-                    // Empêcher la propagation de l'événement click sur le bouton "Supprimer"
-                   if (event.target === deleteButton[0]) {
-                       return;
+                 const date = moment(diss.timestamp).format('LLL'); // Format: 5 juin 2024 15:53
+                 const uniqueId = `diss-${index}`; // Unique ID for content div
+
+                 const $collapsible = $(`
+                    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+                         <button class="collapsible bg-gray-50 hover:bg-gray-100 transition-colors duration-150 p-4 flex justify-between items-center w-full text-left focus:outline-none focus:ring-2 focus:ring-violet-300">
+                             <span class="font-medium text-gray-800 flex-1 mr-4 truncate" title="${diss.title}">${diss.title}</span>
+                            <div class="flex items-center space-x-3 flex-shrink-0">
+                                 <span class="text-gray-500 text-xs">${date}</span>
+                                 <button class="delete-dissertation text-red-500 hover:text-red-700 p-1 rounded hover:bg-red-100 transition-colors duration-150" data-index="${index}" title="Supprimer">
+                                     <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
+                                 </button>
+                                 <svg class="h-5 w-5 text-gray-400 transform transition-transform duration-200 chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+                             </div>
+                         </button>
+                     </div>
+                 `);
+
+                 // Add content div separately to control its visibility
+                 const $content = $(`<div id="${uniqueId}" class="content prose prose-violet max-w-none p-6 border-t border-gray-200"></div>`).html(marked.parse(diss.content));
+
+                 // Append collapsible header first, then the initially hidden content
+                 dissertationsList.append($collapsible.append($content));
+
+
+                 // Event handler for the collapsible button (excluding the delete button)
+                 $collapsible.find('.collapsible').click(function(event) {
+                    // Prevent toggling if the delete button was clicked
+                    if ($(event.target).closest('.delete-dissertation').length) {
+                        return;
                     }
+                    const $thisContent = $(this).siblings('.content');
+                    const $chevron = $(this).find('.chevron');
+
+                    $thisContent.slideToggle("fast", function() {
+                         // Add/remove 'active' class and rotate chevron after animation completes
+                        if ($thisContent.is(':visible')) {
+                             $collapsible.addClass('active');
+                             $chevron.addClass('rotate-180');
+                         } else {
+                            $collapsible.removeClass('active');
+                             $chevron.removeClass('rotate-180');
+                        }
+                    });
+                 });
 
-                    content.slideToggle("fast");
-                    collapsible.toggleClass("active");
+                 // Event handler for the delete button
+                 $collapsible.find('.delete-dissertation').click(function() {
+                    const indexToDelete = $(this).data('index');
+                    deleteDissertation(indexToDelete);
                 });
 
-                deleteButton.click(function() {
-                    // Supprimer la dissertation correspondante
-                    deleteDissertation(index);
-
-                });
             });
         }
 
@@ -647,27 +873,40 @@
                 const temp = document.createElement('div');
                 temp.innerHTML = responseDiv.innerHTML;
 
-                // Fonction récursive pour extraire le texte en préservant les sauts de ligne
+                // Fonction récursive améliorée pour extraire le texte avec un meilleur formatage
                 function extractText(node) {
                     let text = '';
                     node.childNodes.forEach(child => {
-                        if (child.nodeType === 3) { // Nœud texte
-                            text += child.textContent;
-                        } else if (child.nodeType === 1) { // Élément
-                            // Ajouter des sauts de ligne pour les éléments de bloc
-                            if (window.getComputedStyle(child).display === 'block') {
-                                text += '\n';
+                        if (child.nodeType === Node.TEXT_NODE) { // Nœud texte
+                             text += child.textContent;
+                         } else if (child.nodeType === Node.ELEMENT_NODE) { // Élément
+                             const tagName = child.tagName.toLowerCase();
+                             // Ajouter des sauts de ligne avant/après les éléments de bloc, sauf s'il y en a déjà
+                            const isBlock = window.getComputedStyle(child).display === 'block';
+                            if (isBlock && !text.endsWith('\n\n') && text.length > 0) {
+                                text += '\n'; // Un saut de ligne avant le bloc
                             }
-                            text += extractText(child);
-                            if (window.getComputedStyle(child).display === 'block') {
+
+                             if (tagName === 'br') {
+                                text += '\n';
+                            } else if (tagName === 'li') {
+                                text += '* '; // Marqueur pour les listes
+                                text += extractText(child);
+                                text += '\n';
+                            } else {
+                                text += extractText(child);
+                             }
+
+                             if (isBlock && !text.endsWith('\n') && tagName !== 'li') { // Ajouter un saut de ligne après le bloc si nécessaire
                                 text += '\n';
                             }
-                        }
+                         }
                     });
-                    return text;
+                     // Nettoyer les espaces multiples et les sauts de ligne excessifs
+                    return text.replace(/\n{3,}/g, '\n\n').trim();
                 }
 
-                textToCopy = extractText(temp).trim();
+                textToCopy = extractText(temp);
 
                 // Animation et copie
                 $(this).addClass('scale-95 bg-violet-100');
@@ -676,20 +915,21 @@
                 navigator.clipboard.writeText(textToCopy)
                     .then(() => {
                         $(this).removeClass('scale-95 bg-violet-100')
-                            .addClass('bg-green-50 text-green-700');
+                            .addClass('bg-green-50 text-green-700 border-green-200');
 
                         setTimeout(() => {
-                            $(this).removeClass('bg-green-50 text-green-700');
-                        }, 1000);
+                            $(this).removeClass('bg-green-50 text-green-700 border-green-200');
+                        }, 1200);
 
                         Toast.fire({
                             icon: 'success',
                             title: 'Copié avec succès',
-                            text: 'Le contenu a été copié dans votre presse-papiers',
+                            //text: 'Le contenu a été copié dans votre presse-papiers',
                             timer: 2000
                         });
                     })
                     .catch((err) => {
+                        console.error("Clipboard API failed: ", err);
                         // Fallback pour les appareils mobiles qui ne supportent pas l'API Clipboard
                         try {
                             // Créer un élément textarea temporaire
@@ -698,73 +938,90 @@
                             textarea.style.position = 'fixed'; // Évite le défilement
                             textarea.style.opacity = '0';
                             document.body.appendChild(textarea);
-                            
+
                             // Sélectionner et copier le texte
                             textarea.select();
+                            // Pour iOS
+                            if (navigator.userAgent.match(/ipad|iphone/i)) {
+                                const range = document.createRange();
+                                range.selectNodeContents(textarea);
+                                const selection = window.getSelection();
+                                selection.removeAllRanges();
+                                selection.addRange(range);
+                                textarea.setSelectionRange(0, 999999);
+                            }
                             document.execCommand('copy');
-                            
+
                             // Nettoyer
                             document.body.removeChild(textarea);
-                            
+
                             // Feedback positif
                             $(this).removeClass('scale-95 bg-violet-100')
-                                .addClass('bg-green-50 text-green-700');
+                                .addClass('bg-green-50 text-green-700 border-green-200');
 
                             setTimeout(() => {
-                                $(this).removeClass('bg-green-50 text-green-700');
-                            }, 1000);
+                                $(this).removeClass('bg-green-50 text-green-700 border-green-200');
+                            }, 1200);
 
                             Toast.fire({
                                 icon: 'success',
-                                title: 'Copié avec succès',
+                                title: 'Copié avec succès (Fallback)',
                                 timer: 2000
                             });
                         } catch (fallbackErr) {
+                             console.error("Fallback copy failed: ", fallbackErr);
                             // Si même le fallback échoue
                             $(this).removeClass('scale-95 bg-violet-100')
-                                .addClass('bg-red-50 text-red-700');
+                                .addClass('bg-red-50 text-red-700 border-red-200');
 
                             setTimeout(() => {
-                                $(this).removeClass('bg-red-50 text-red-700');
-                            }, 1000);
+                                $(this).removeClass('bg-red-50 text-red-700 border-red-200');
+                            }, 1200);
 
                             Toast.fire({
                                 icon: 'error',
                                 title: 'Erreur de copie',
-                               text: 'Impossible de copier le contenu',
+                               text: 'Impossible de copier le contenu automatiquement.',
                                 timer: 3000
                             });
                         }
                     });
             });
 
-        // Ajout des styles d'animation personnalisés
-         const style = document.createElement('style');
-            style.textContent = `
-                @keyframes fadeIn {
-                    from { opacity: 0; transform: translateY(10px); }
-                    to { opacity: 1; transform: translateY(0); }
-                }
-                @keyframes slideUp {
-                    from { opacity:                     0; transform: translateY(20px); }
-                    to { opacity: 1; transform: translateY(0); }
-                }
-                @keyframes shake {
-                    0%, 100% { transform: translateX(0); }
-                    25% { transform: translateX(-5px); }
-                    75% { transform: translateX(5px); }
-                }
-                .animate-fadeIn {
-                    animation: fadeIn 0.5s ease-out forwards;
-                }
-                .animate-slideUp {
-                    animation: slideUp 0.5s ease-out forwards;
-                }
-                .animate-shake {
-                    animation: shake 0.5s ease-in-out;
-                }
-            `;
-        document.head.appendChild(style);
+        // Ajout des styles d'animation personnalisés (Déjà présents mais on s'assure qu'ils y sont)
+         const styleCheck = document.getElementById('custom-animations-style');
+         if (!styleCheck) {
+             const style = document.createElement('style');
+             style.id = 'custom-animations-style'; // Add an ID to prevent duplication
+             style.textContent = `
+                 @keyframes fadeIn {
+                     from { opacity: 0; transform: translateY(10px); }
+                     to { opacity: 1; transform: translateY(0); }
+                 }
+                 @keyframes fadeOut {
+                    from { opacity: 1; }
+                    to { opacity: 0; }
+                 }
+                 @keyframes slideUp {
+                     from { opacity: 0; transform: translateY(20px); }
+                     to { opacity: 1; transform: translateY(0); }
+                 }
+                 @keyframes shake {
+                     0%, 100% { transform: translateX(0); }
+                     10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
+                     20%, 40%, 60%, 80% { transform: translateX(3px); }
+                 }
+                 .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }
+                 .animate-fadeOut { animation: fadeOut 0.3s ease-out forwards; }
+                 .animate-slideUp { animation: slideUp 0.5s ease-out forwards; }
+                 .animate-shake { animation: shake 0.5s ease-in-out; }
+                 .rotate-180 { transform: rotate(180deg); }
+                 .chevron { transition: transform 0.2s ease-in-out; } /* Smooth chevron rotation */
+
+             `;
+            document.head.appendChild(style);
+         }
+
 
            // Met à jour le label initial avec la valeur par défaut du select
         const initialSelectValue = $('#type-select').val();
@@ -776,8 +1033,8 @@
                    initialLabelText = `Type ${initialSelectValue} - ${initialSelectedText}`;
                 }
         $('#current-type-label').text(initialLabelText);
-    });
-                      </script>
+    }); // --- FIN de $(document).ready ---
+</script>
 
 </body>
 </html>