Spaces:

ernestmindres
/

Mailix

Build error

App Files Files Community

ernestmindres commited on Nov 4, 2025

Commit

21f6d0f

verified ·

1 Parent(s): b6513ba

Upload 17 files

Browse files

Files changed (17) hide show

templates/a_propos.html +235 -0
templates/checkout.html +278 -0
templates/conditions_utilisation.html +357 -0
templates/connexion.html +203 -0
templates/create_project.html +860 -0
templates/dashboard.html +466 -0
templates/documentation.html +285 -0
templates/index.html +992 -0
templates/inscription.html +247 -0
templates/mentions_legales.html +327 -0
templates/mot_de_passe_oublie.html +238 -0
templates/nouveau_project.html +376 -0
templates/politique_confidentialite.html +370 -0
templates/profile.html +338 -0
templates/statut.html +468 -0
templates/support.html +303 -0
templates/tarifs.html +428 -0

templates/a_propos.html ADDED Viewed

	@@ -0,0 +1,235 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>À Propos de Nexus</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            /* Transition pour un effet doux lors du changement de thème */
+            transition: background-color 0.3s, color 0.3s;
+        }
+        /* Styles pour la barre de navigation fixe */
+        .fixed-header {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 50; /* Pour s'assurer qu'il est au-dessus du contenu */
+            /* Tailwind classes already applied: bg-gray-900, border-b border-blue-500/50, py-4 */
+        }
+        /* Étape 2 : Définir les Styles pour le Mode Clair */
+        /* Surcharge des classes Tailwind spécifiques pour simuler le mode clair */
+        html.light .bg-gray-900 { background-color: #F3F4F6 !important; /* gray-100 */ }
+        html.light .text-white { color: #1F2937 !important; /* gray-900 */ }
+        html.light .text-gray-300 { color: #4B5563 !important; /* gray-600 */ }
+        html.light .bg-gray-800\/50 { background-color: rgba(209, 213, 219, 0.5) !important; /* gray-300/50 */ }
+        html.light .bg-gray-800 { background-color: #E5E7EB !important; /* gray-200 */ }
+        html.light .border-gray-700 { border-color: #D1D5DB !important; /* gray-300 */ }
+        html.light .text-gray-400 { color: #6B7280 !important; /* gray-500 */ }
+        html.light .border-gray-800 { border-color: #D1D5DB !important; /* gray-300 */ }
+        html.light .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
+        /* Style du bouton theme-switch (comme dans le plan) */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: inherit; /* Utilise la couleur du texte parent (text-white ou text-gray-900 en light mode) */
+            font-size: 24px;
+            padding: 0;
+            line-height: 1;
+        }
+        .theme-switch:hover {
+            color: #60A5FA; /* blue-400 */
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="relative min-h-screen">
+        <header class="fixed-header w-full bg-gray-900 border-b border-blue-500/50">
+            <div class="container mx-auto p-4 sm:p-6 lg:p-8 flex flex-col sm:flex-row justify-between items-center">
+                <a href="/" class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                    NEXUS
+                </a>
+                <nav class="flex items-center space-x-4">
+                    <a href="/documentation" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                        Documentation
+                    </a>
+                    <a href="/tarifs" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                        Tarifs
+                    </a>
+                    <button id="theme-toggle" class="theme-switch ml-4" aria-label="Basculer le thème">
+                        <span class="material-symbols-rounded">light_mode</span>
+                    </button>
+                    {% if is_logged_in %}
+                        <a href="/dashboard" class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 font-medium transition duration-200">
+                            Dashboard
+                        </a>
+                    {% else %}
+                        <a href="/connexion" class="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 font-medium transition duration-200">
+                            Connexion
+                        </a>
+                    {% endif %}
+                </nav>
+            </div>
+        </header>
+        <main class="space-y-12 max-w-4xl mx-auto pt-24 pb-16 px-4 sm:px-6 lg:px-8">
+            <section class="text-center p-8 bg-gray-800/50 rounded-xl shadow-lg">
+                <h1 class="text-5xl font-extrabold text-white mb-4 leading-tight">
+                    Nexus : Notre Mission
+                </h1>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                    Simplifier la gestion utilisateur pour permettre aux développeurs de se concentrer sur l'innovation.
+                </p>
+            </section>
+            <section class="space-y-6">
+                <h2 class="text-3xl font-bold text-blue-500 border-b border-gray-700 pb-2">
+                    Qui Sommes-Nous ?
+                </h2>
+                <p class="text-gray-300">
+                    Fondée en 2024, Nexus est née de la conviction que l'authentification avancée ne devrait pas être un obstacle pour le développement. Notre plateforme est conçue pour être la couche de gestion d'utilisateur la plus simple et la plus robuste pour toute application web, mobile ou professionnelle.
+                </p>
+                <p class="text-gray-300 font-medium">
+                    Nous fournissons une API unique et une URL d'endpoint pour que vous n'ayez aucune configuration complexe à gérer. La sécurité et l'évolutivité sont intégrées.
+                </p>
+            </section>
+            <section class="space-y-6">
+                <h2 class="text-3xl font-bold text-blue-500 border-b border-gray-700 pb-2">
+                    Notre Vision de l'Avenir
+                </h2>
+                <div class="grid md:grid-cols-2 gap-6">
+                    <div class="bg-gray-800 p-6 rounded-xl border-t-4 border-yellow-500">
+                        <h3 class="text-xl font-semibold text-yellow-400 mb-2">Innovation Continue</h3>
+                        <p class="text-gray-300">Intégrer l'IA pour l'analyse des logs et le support prédictif pour les développeurs.</p>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-xl border-t-4 border-purple-500">
+                        <h3 class="text-xl font-semibold text-purple-400 mb-2">Sécurité Unifiée</h3>
+                        <p class="text-gray-300">Établir la norme en matière de cybersécurité pour les petits et grands comptes utilisateurs.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="text-center pt-8">
+                <h2 class="text-3xl font-bold text-white mb-4">Prêt à nous rejoindre ?</h2>
+                <a href="/inscription" class="px-6 py-3 bg-blue-600 text-white text-lg font-bold rounded-xl shadow-md hover:bg-blue-700 transition duration-300">
+                    Créer un Compte Gratuit
+                </a>
+            </section>
+        </main>
+        <footer class="mt-16 border-t border-gray-700 bg-gray-900">
+            <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 text-sm">
+                    <div class="col-span-2 lg:col-span-1">
+                        <a href="/" class="text-3xl font-extrabold text-blue-500 tracking-wider">NEXUS</a>
+                        <p class="mt-3 text-gray-400">
+                            L'infrastructure API qui propulse votre avenir technologique.
+                        </p>
+                        <div class="mt-4 flex space-x-4">
+                            <a href="#" class="text-gray-400 hover:text-blue-500 transition duration-200">
+                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.014 4.85.07c3.275.146 4.47 1.583 4.61 4.85.056 1.266.07 1.646.07 4.85s-.014 3.584-.07 4.85c-.14 3.267-1.335 4.704-4.61 4.85-1.266.056-1.646.07-4.85.07s-3.584-.014-4.85-.07c-3.275-.146-4.47-1.583-4.61-4.85-.056-1.266-.07-1.646-.07-4.85s.014-3.584.07-4.85c.14-3.267 1.335-4.704 4.61-4.85 1.266-.056 1.646-.07 4.85-.07zM12 0c-3.784 0-4.285.016-5.773.083-4.722.211-6.755 2.24-6.965 6.965C.016 7.715 0 8.216 0 12s.016 4.285.083 5.773c.21 4.721 2.239 6.755 6.965 6.965 1.488.067 1.99.083 5.773.083s4.285-.016 5.773-.083c4.721-.21 6.755-2.239 6.965-6.965.067-1.488.083-1.99.083-5.773s-.016-4.285-.083-5.773c-.21-4.722-2.239-6.755-6.965-6.965C16.285.016 15.784 0 12 0zm0 14.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z"/></svg>
+                            </a>
+                        </div>
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-semibold text-white mb-4">Plateforme</h3>
+                        <ul class="space-y-3 text-gray-400">
+                            <li><a href="/tarifs" class="hover:text-blue-500 transition duration-200">Tarifs</a></li>
+                            <li><a href="/documentation" class="hover:text-blue-500 transition duration-200">Documentation</a></li>
+                            <li><a href="/connexion" class="hover:text-blue-500 transition duration-200">Connexion</a></li>
+                            <li><a href="/support" class="hover:text-blue-500 transition duration-200">Support</a></li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-semibold text-white mb-4">Légal</h3>
+                        <ul class="space-y-3 text-gray-400">
+                            <li><a href="/politique-confidentialite" class="hover:text-blue-500 transition duration-200">Politique de Confidentialité</a></li>
+                            <li><a href="/mentions-legales" class="hover:text-blue-500 transition duration-200">Mentions Légales</a></li>
+                            <li><a href="/conditions-utilisation" class="hover:text-blue-500 transition duration-200">Conditions d'Utilisation</a></li>
+                            <li><a href="/a-propos" class="hover:text-blue-500 transition duration-200">À Propos</a></li>
+                        </ul>
+                    </div>
+                    <div class="col-span-2 md:col-span-1">
+                        <h3 class="text-lg font-semibold text-white mb-4">Ressources</h3>
+                        <ul class="space-y-3 text-gray-400">
+                            <li><a href="mailto:support@nexus.com" class="hover:text-blue-500 transition duration-200">Contact Email</a></li>
+                            <li><a href="/dashboard" class="hover:text-blue-500 transition duration-200">Espace Client</a></li>
+                            <li><a href="/api-logs" class="hover:text-blue-500 transition duration-200">Statut API</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
+                    &copy; 2024 Nexus. Tous droits réservés. Construit pour l'ère des microservices.
+                </div>
+            </div>
+        </footer>
+    </div>
+    <script>
+        // Logique de bascule du mode sombre/clair
+        const themeToggle = document.getElementById('theme-toggle');
+        const htmlElement = document.documentElement;
+        const iconElement = themeToggle.querySelector('.material-symbols-rounded');
+        // Charger le thème depuis le localStorage
+        const savedTheme = localStorage.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        // Déterminer le thème initial
+        let initialTheme = 'dark';
+        if (savedTheme) {
+            initialTheme = savedTheme;
+        } else if (!prefersDark) {
+            // Si pas de localStorage, utiliser le thème du système (par défaut sombre ici, sauf si système clair)
+            initialTheme = 'light';
+        }
+        // Appliquer le thème initial
+        if (initialTheme === 'light') {
+            htmlElement.classList.add('light');
+            iconElement.textContent = 'dark_mode';
+        } else {
+            // Thème sombre (par défaut)
+            iconElement.textContent = 'light_mode';
+        }
+        themeToggle.addEventListener('click', () => {
+            if (htmlElement.classList.contains('light')) {
+                // Passage de Clair à Sombre
+                htmlElement.classList.remove('light');
+                localStorage.setItem('theme', 'dark');
+                iconElement.textContent = 'light_mode';
+            } else {
+                // Passage de Sombre à Clair
+                htmlElement.classList.add('light');
+                localStorage.setItem('theme', 'light');
+                iconElement.textContent = 'dark_mode';
+            }
+        });
+    </script>
+</body>
+</html>

templates/checkout.html ADDED Viewed

	@@ -0,0 +1,278 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <title>Paiement - Nexus Pro</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://js.stripe.com/v3/"></script>
+    <style>
+        /* Variables de Thème - Couleurs Noir Foncé (Mode Sombre par défaut) */
+        :root, html.dark {
+            --bg-page: #181818; /* Noir très foncé, pas de bleu marine */
+            --bg-card: #282828;
+            --text-main: #EAEAEA;
+            --text-secondary: #B0B0B0;
+            --border-color: #404040;
+            --shadow-color: rgba(0, 0, 0, 0.5);
+        }
+        /* Mode Clair */
+        html.light {
+            --bg-page: #F5F5F5;
+            --bg-card: #FFFFFF;
+            --text-main: #202020;
+            --text-secondary: #5C5C5C;
+            --border-color: #E0E0E0;
+            --shadow-color: rgba(0, 0, 0, 0.1);
+        }
+        /* Application des variables */
+        body {
+            background-color: var(--bg-page);
+            color: var(--text-main);
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .bg-gray-900 { background-color: var(--bg-page) !important; }
+        .text-white { color: var(--text-main) !important; }
+        .bg-gray-800, .bg-gray-800\/50 {
+            background-color: var(--bg-card) !important;
+            box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
+        }
+        .text-gray-400 { color: var(--text-secondary) !important; }
+        .border-gray-700, .border-gray-800 { border-color: var(--border-color) !important; }
+        .text-gray-300 { color: var(--text-secondary) !important; } /* Utilisation de la même couleur pour uniformité */
+        .bg-gray-700 { background-color: #404040 !important; }
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-main);
+            font-size: 24px;
+            transition: color 0.2s;
+            padding: 0.5rem; /* Espace autour du bouton */
+        }
+        /* Style pour l'élément Stripe Elements (input) */
+        #card-element {
+            padding: 1rem;
+            border: 1px solid var(--border-color);
+            background-color: var(--bg-card);
+            border-radius: 0.5rem;
+            margin-bottom: 1rem;
+            color: var(--text-main); /* Assurez-vous que le texte par défaut est lisible */
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <header class="sticky top-0 z-50 flex flex-col sm:flex-row justify-between items-center py-4 border-b border-blue-500/50 mb-8 bg-gray-900" style="background-color: var(--bg-page); transition: background-color 0.3s;">
+            <a href="/" class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                NEXUS
+            </a>
+            <nav class="flex items-center space-x-4">
+                <a href="/documentation" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                    Documentation
+                </a>
+                <a href="/a-propos" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                    À Propos
+                </a>
+                <button id="theme-toggle" class="theme-switch" aria-label="Basculer le thème">
+                    <span class="material-symbols-rounded">light_mode</span>
+                </button>
+                {% if is_logged_in %}
+                    <a href="/dashboard" class="px-4 py-2 bg-blue-600 border border-blue-600 hover:bg-blue-700 font-medium transition duration-200">
+                        Dashboard
+                    </a>
+                {% else %}
+                    <a href="/connexion" class="px-4 py-2 bg-blue-600 border border-blue-600 hover:bg-blue-700 font-medium transition duration-200">
+                        Connexion
+                    </a>
+                {% endif %}
+            </nav>
+        </header>
+        <main class="flex flex-col items-center">
+            <div class="max-w-xl w-full p-6 sm:p-8 bg-gray-800 shadow-2xl border-t-4 border-blue-500">
+                <h1 class="text-3xl font-extrabold text-white mb-6 text-center">
+                    Finaliser votre Commande
+                </h1>
+                <div class="mb-8 border border-gray-700 p-4">
+                    <h2 class="text-xl font-bold text-white mb-3 border-b border-gray-700 pb-2">
+                        Récapitulatif
+                    </h2>
+                    <div class="space-y-2 text-gray-300">
+                        <div class="flex justify-between">
+                            <span>Plan Sélectionné:</span>
+                            <span class="font-semibold text-white">{{ plan.title }}</span>
+                        </div>
+                        <div class="text-sm italic text-gray-400">
+                            {{ plan.description }}
+                        </div>
+                        <div class="flex justify-between pt-2 border-t border-gray-700 font-bold text-lg text-yellow-400">
+                            <span>Total (TVA incluse):</span>
+                            <span>{{ plan.price_display }}</span>
+                        </div>
+                    </div>
+                </div>
+                <form id="payment-form">
+                    <h2 class="text-xl font-bold text-white mb-4">
+                        Informations de Paiement
+                    </h2>
+                    <div id="card-element" class="shadow-md">
+                        </div>
+                    <div id="card-errors" role="alert" class="text-red-500 text-sm mb-4"></div>
+                    <button id="submit-button" class="w-full px-6 py-3 bg-blue-600 text-white text-lg font-bold shadow-md hover:bg-blue-700 transition duration-300" type="submit">
+                        Payer maintenant {{ plan.price_display }}
+                    </button>
+                </form>
+            </div>
+        </main>
+        <footer class="mt-12 pt-6 border-t border-gray-700 text-center text-gray-500 text-sm">
+            &copy; 2025 Nexus. Paiement Sécurisé par Stripe.
+        </footer>
+    </div>
+    <script>
+        // Logique de bascule du mode sombre/clair (à inclure pour l'uniformité)
+        const themeToggle = document.getElementById('theme-toggle');
+        const htmlElement = document.documentElement;
+        const iconElement = themeToggle.querySelector('.material-symbols-rounded');
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            htmlElement.classList.remove('dark');
+            htmlElement.classList.add('light');
+            iconElement.textContent = 'dark_mode';
+        } else {
+            htmlElement.classList.add('dark');
+            htmlElement.classList.remove('light');
+            iconElement.textContent = 'light_mode';
+        }
+        themeToggle.addEventListener('click', () => {
+            if (htmlElement.classList.contains('light')) {
+                htmlElement.classList.remove('light');
+                htmlElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+                iconElement.textContent = 'light_mode';
+            } else {
+                htmlElement.classList.add('light');
+                htmlElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+                iconElement.textContent = 'dark_mode';
+            }
+        });
+        // =======================================================
+        // LOGIQUE D'INTÉGRATION STRIPE ELEMENTS
+        // =======================================================
+        const planId = new URLSearchParams(window.location.search).get('plan');
+        const stripe = Stripe("{{ stripe_public_key }}"); // Clé publique injectée par Jinja
+        const elements = stripe.elements();
+        const cardElement = elements.create('card', {
+            style: {
+                base: {
+                    color: htmlElement.classList.contains('light') ? '#202020' : '#EAEAEA',
+                    fontFamily: 'system-ui, sans-serif',
+                    fontSmoothing: 'antialiased',
+                    fontSize: '16px',
+                    '::placeholder': {
+                        color: htmlElement.classList.contains('light') ? '#5C5C5C' : '#B0B0B0',
+                    },
+                },
+                invalid: {
+                    color: '#EF4444',
+                    iconColor: '#EF4444',
+                },
+            }
+        });
+        cardElement.mount('#card-element');
+        const form = document.getElementById('payment-form');
+        const submitButton = document.getElementById('submit-button');
+        const cardErrors = document.getElementById('card-errors');
+        let clientSecret = null; // Pour stocker le Client Secret reçu du backend
+        // 1. Récupérer le Client Secret du backend au chargement de la page
+        async function fetchClientSecret() {
+            try {
+                // Requête au backend pour créer le PaymentIntent
+                const response = await fetch('/api/create-payment-intent', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ plan_id: planId })
+                });
+                if (!response.ok) {
+                    throw new Error('Erreur lors de la création du PaymentIntent.');
+                }
+                const data = await response.json();
+                clientSecret = data.client_secret;
+            } catch (error) {
+                console.error('Erreur Stripe:', error);
+                cardErrors.textContent = "Erreur: Impossible d'initialiser le paiement. Veuillez réessayer.";
+                submitButton.disabled = true;
+            }
+        }
+        // 2. Traiter la soumission du formulaire
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            if (!clientSecret) {
+                cardErrors.textContent = "Veuillez patienter pendant l'initialisation du paiement.";
+                return;
+            }
+            submitButton.disabled = true;
+            submitButton.textContent = 'Traitement en cours...';
+            // Confirmer le paiement côté client avec le clientSecret et l'élément Stripe
+            const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
+                payment_method: {
+                    card: cardElement,
+                    billing_details: {
+                        // Idéalement, les détails de l'utilisateur (email/nom) devraient être fournis ici
+                    },
+                }
+            });
+            if (error) {
+                // Afficher les erreurs (ex: carte refusée, données invalides)
+                cardErrors.textContent = error.message;
+                submitButton.disabled = false;
+                submitButton.textContent = 'Payer maintenant {{ plan.price_display }}';
+            } else if (paymentIntent.status === 'succeeded') {
+                // Le paiement a réussi
+                window.location.href = `/dashboard?payment=success&intent=${paymentIntent.id}`;
+            }
+        });
+        // Démarrage : Récupérer le client secret au chargement
+        fetchClientSecret();
+    </script>
+</body>
+</html>

templates/conditions_utilisation.html ADDED Viewed

	@@ -0,0 +1,357 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conditions d'Utilisation - Nexus</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css">
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Style pour les boutons carrés */
+        .btn-square {
+            border-radius: 0;
+        }
+        /* Définition du thème via classes */
+        /* Mode Sombre (par défaut, pour .dark sur html) */
+        .dark {
+            --bg-body: #0a0a0a; /* Noir très foncé */
+            --bg-main: #0a0a0a;
+            --text-color: #E3E3E3;
+            --border-color: #3B82F64D; /* blue-500/50 */
+            --toc-bg: #111827; /* gray-900 */
+            --toc-border: #374151; /* gray-700 */
+        }
+        /* Mode Clair (pour html sans .dark) */
+        html:not(.dark) {
+            --bg-body: #ffffff;
+            --bg-main: #ffffff;
+            --text-color: #1F2937; /* gray-800 */
+            --border-color: #3B82F6; /* blue-500 */
+            --toc-bg: #F9FAFB; /* gray-50 */
+            --toc-border: #E5E7EB; /* gray-200 */
+        }
+        /* Application des variables aux éléments de base */
+        .dark body, html:not(.dark) body {
+            background-color: var(--bg-body);
+            color: var(--text-color);
+            transition: background-color 0.3s, color 0.3s;
+        }
+        /* Styles personnalisés pour intégrer Tocbot au thème */
+        .toc-list {
+            list-style: none;
+            padding-left: 0;
+            margin: 0;
+        }
+        .toc-list-item {
+            margin-bottom: 0.25rem;
+        }
+        .toc-list-item a {
+            display: block;
+            padding: 0.5rem 0.75rem;
+            color: var(--text-color);
+            border-left: 2px solid transparent;
+            transition: all 0.2s;
+            font-size: 0.9rem;
+        }
+        .dark .toc-list-item a { color: #9CA3AF; } /* gray-400 */
+        html:not(.dark) .toc-list-item a { color: #4B5563; } /* gray-600 */
+        .dark .toc-list-item a:hover {
+            color: #fff;
+            border-left-color: #3B82F6;
+        }
+        html:not(.dark) .toc-list-item a:hover {
+            color: #1F2937;
+            border-left-color: #3B82F6;
+        }
+        .is-active-link {
+            font-weight: 700;
+            color: #3B82F6 !important; /* blue-500 */
+            border-left-color: #3B82F6 !important;
+            background-color: #1F2937; /* gray-800 */
+            border-radius: 0;
+        }
+        html:not(.dark) .is-active-link {
+            background-color: #E5E7EB; /* gray-200 */
+        }
+        /* Style du bouton theme-switch (Etape 2: Style du bouton) */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-color);
+            font-size: 24px;
+            transition: color 0.2s;
+            padding: 0.5rem;
+        }
+        .theme-switch:hover {
+            color: #3B82F6; /* blue-500 */
+        }
+        /* Rendre le conteneur TOC moins large verticalement sur les grands écrans */
+        @media (min-width: 1024px) {
+            .js-toc-container {
+                max-height: calc(100vh - 8rem); /* Ajuste la hauteur pour qu'il ne prenne pas toute la hauteur de l'écran */
+            }
+        }
+        @media (max-width: 1023px) {
+            .js-toc-container { display: none; }
+        }
+    </style>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        'gray-950': '#0a0a0a', // Noir très foncé pour le mode sombre
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-950 text-white min-h-screen transition-colors duration-300">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <header class="sticky top-0 z-50 flex flex-col sm:flex-row justify-between items-center py-4 border-b border-blue-500/50 mb-8 bg-gray-950 dark:bg-gray-950 transition-colors duration-300">
+            <a href="/" class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                NEXUS
+            </a>
+            <nav class="flex items-center space-x-4">
+                <button id="theme-toggle" class="theme-switch" aria-label="Basculer le thème">
+                    <span class="material-symbols-rounded">light_mode</span>
+                </button>
+                <a href="/connexion" class="px-6 py-3 bg-blue-600 text-white font-bold hover:bg-blue-700 transition duration-300 btn-square shadow-md">
+                    Se Connecter
+                </a>
+            </nav>
+        </header>
+        <main class="flex flex-col lg:flex-row lg:space-x-8">
+            <div class="lg:w-3/4 js-toc-content">
+                <h1 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-6">
+                    Conditions Générales d'Utilisation (CGU)
+                </h1>
+                <p class="text-gray-600 dark:text-gray-400 text-lg mb-10 border-l-4 border-blue-500 pl-4 italic">
+                    Ces conditions régissent l'accès et l'utilisation de tous les services Nexus. L'utilisation de notre plateforme vaut acceptation.
+                </p>
+                <h2 id="acceptation-cgu" class="text-3xl font-bold text-blue-500 dark:text-blue-400 mt-10 mb-4 pt-2">
+                    1. Acceptation des Conditions
+                </h2>
+                <p class="text-gray-700 dark:text-gray-300 mb-6">
+                    En créant un compte, en vous connectant, en accédant à l'API ou en utilisant l'un des services fournis par Nexus, vous reconnaissez avoir lu, compris et accepté d'être lié par les présentes Conditions Générales d'Utilisation (les "CGU"), ainsi que par notre Politique de Confidentialité. Si vous n'acceptez pas ces CGU, vous ne devez pas utiliser la Plateforme.
+                </p>
+                <h2 id="services-api" class="text-3xl font-bold text-blue-500 dark:text-blue-400 mt-10 mb-4 pt-2">
+                    2. Description des Services et de l'API
+                </h2>
+                <p class="text-gray-700 dark:text-gray-300 mb-4">
+                    Nexus est une plateforme de services d'infrastructure API (SaaS). L'accès à l'API est fourni par le biais d'une clé API unique et confidentielle associée à votre compte.
+                </p>
+                <h3 id="cle-api" class="text-2xl font-semibold text-gray-900 dark:text-white mt-8 mb-3 pt-2">
+                    2.1. Clé API et Sécurité
+                </h3>
+                <p class="text-gray-700 dark:text-gray-300 mb-6">
+                    Vous êtes responsable du maintien de la confidentialité de votre clé API. Toute activité effectuée sous votre clé API sera considérée comme ayant été effectuée par vous. Vous devez nous notifier immédiatement de toute utilisation non autorisée ou de toute autre violation de sécurité.
+                </p>
+                <h3 id="limites-utilisation" class="text-2xl font-semibold text-gray-900 dark:text-white mt-8 mb-3 pt-2">
+                    2.2. Limites d'Utilisation
+                </h3>
+                <p class="text-gray-700 dark:text-gray-300 mb-6">
+                    Chaque plan d'abonnement (voir `/tarifs`) est soumis à des limites strictes de requêtes mensuelles ou horaires. Le dépassement de ces limites peut entraîner des frais supplémentaires ou la suspension de l'accès à l'API. Nous nous réservons le droit de modifier les limites à tout moment avec un préavis.
+                </p>
+                <h2 id="obligations-utilisateur" class="text-3xl font-bold text-blue-500 dark:text-blue-400 mt-10 mb-4 pt-2">
+                    3. Obligations de l'Utilisateur
+                </h2>
+                <ul class="list-disc list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4 mb-6">
+                    <li>Ne pas utiliser l'API à des fins illégales, frauduleuses, ou non autorisées.</li>
+                    <li>Ne pas tenter de perturber ou de contourner les mesures de sécurité de Nexus (comme le *rate limiting*).</li>
+                    <li>S'assurer que les données transmises via l'API ne contiennent aucun virus ou code malveillant.</li>
+                    <li>Ne pas revendre, céder ou transférer votre clé API ou votre compte à un tiers sans notre autorisation écrite.</li>
+                </ul>
+                <h2 id="suspension-resiliation" class="text-3xl font-bold text-blue-500 dark:text-blue-400 mt-10 mb-4 pt-2">
+                    4. Suspension et Résiliation
+                </h2>
+                <p class="text-gray-700 dark:text-gray-300 mb-4">
+                    Nexus se réserve le droit de suspendre ou de résilier votre accès aux Services API, sans préavis ni responsabilité, si :
+                </p>
+                <ul class="list-decimal list-inside text-gray-700 dark:text-gray-300 space-y-2 ml-4 mb-6">
+                    <li>Vous enfreignez de manière significative les présentes CGU.</li>
+                    <li>Vous ne payez pas les frais d'abonnement ou de dépassement à l'échéance.</li>
+                    <li>Nous avons des motifs raisonnables de croire que votre utilisation compromet la sécurité de la Plateforme ou des autres Utilisateurs.</li>
+                </ul>
+                <h2 id="dispositions-financieres" class="text-3xl font-bold text-blue-500 dark:text-blue-400 mt-10 mb-4 pt-2">
+                    5. Dispositions Financières
+                </h2>
+                <h3 id="tarification" class="text-2xl font-semibold text-gray-900 dark:text-white mt-8 mb-3 pt-2">
+                    5.1. Tarification et Facturation
+                </h3>
+                <p class="text-gray-700 dark:text-gray-300 mb-6">
+                    Les frais d'accès et les modalités de paiement sont détaillés sur la page `/tarifs`. Les abonnements sont payables d'avance. Tous les frais sont facturés en Euros (€) et sont dus immédiatement.
+                </p>
+                <h3 id="remboursement" class="text-2xl font-semibold text-gray-900 dark:text-white mt-8 mb-3 pt-2">
+                    5.2. Politique de Remboursement
+                </h3>
+                <p class="text-gray-700 dark:text-gray-300 mb-6">
+                    Sauf indication contraire explicite pour des promotions spécifiques, tous les frais d'abonnement et de consommation d'API sont non remboursables. La résiliation de votre abonnement ne donne pas droit à un remboursement des périodes non utilisées.
+                </p>
+                <h2 id="droit-applicable" class="text-3xl font-bold text-blue-500 dark:text-blue-400 mt-10 mb-4 pt-2">
+                    6. Droit Applicable et Juridiction
+                </h2>
+                <p class="text-gray-700 dark:text-gray-300 mb-6">
+                    Les présentes CGU sont régies et interprétées conformément aux lois de [Pays du Siège Social]. Tout litige relatif à l'interprétation ou à l'exécution de ces CGU sera soumis à la compétence exclusive des tribunaux de [Ville du Siège Social].
+                </p>
+                <div class="mt-12 text-center">
+                    <a href="/tarifs" class="px-6 py-3 bg-teal-600 text-white text-lg font-bold hover:bg-teal-700 transition duration-300 btn-square shadow-xl">
+                        Consulter les Tarifs
+                    </a>
+                </div>
+                </div>
+            <div class="lg:w-1/4 pt-4 sticky top-24 lg:h-auto js-toc-container">
+                <div class="lg:sticky lg:top-[7rem] p-4 border border-gray-700 dark:border-gray-700 bg-gray-100/50 dark:bg-gray-900/50 rounded-lg shadow-lg">
+                    <h3 class="text-xl font-semibold mb-4 text-blue-500">Navigation Rapide</h3>
+                    <div class="js-toc"></div>
+                </div>
+            </div>
+        </main>
+        </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            tocbot.init({
+                tocSelector: '.js-toc',
+                contentSelector: '.js-toc-content',
+                headingSelector: 'h2, h3',
+                hasSmoothScroll: true,
+                headingsOffset: 60,
+                scrollSmoothOffset: -60,
+            });
+        });
+    </script>
+    <script>
+        const themeToggle = document.getElementById('theme-toggle');
+        const htmlElement = document.documentElement;
+        const iconElement = themeToggle.querySelector('.material-symbols-rounded');
+        // Charger le thème depuis le localStorage
+        const savedTheme = localStorage.getItem('theme');
+        // Définir le thème initial
+        if (savedTheme === 'light') {
+            htmlElement.classList.remove('dark');
+            iconElement.textContent = 'dark_mode';
+        } else if (savedTheme === 'dark') {
+            htmlElement.classList.add('dark');
+            iconElement.textContent = 'light_mode';
+        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+             // Si pas de thème sauvegardé, utiliser la préférence système (en conservant la classe 'dark' par défaut)
+             htmlElement.classList.add('dark');
+             iconElement.textContent = 'light_mode';
+        } else {
+             htmlElement.classList.remove('dark');
+             iconElement.textContent = 'dark_mode';
+        }
+        themeToggle.addEventListener('click', () => {
+            // Bascule
+            if (htmlElement.classList.contains('dark')) {
+                // Passage de sombre à clair
+                htmlElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+                iconElement.textContent = 'dark_mode';
+            } else {
+                // Passage de clair à sombre
+                htmlElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+                iconElement.textContent = 'light_mode';
+            }
+        });
+    </script>
+<footer class="mt-16 border-t border-gray-700 dark:border-gray-700 bg-gray-50 dark:bg-gray-950 transition-colors duration-300">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 text-sm">
+            <div class="col-span-2 lg:col-span-1">
+                <a href="/" class="text-3xl font-extrabold text-blue-500 tracking-wider">NEXUS</a>
+                <p class="mt-3 text-gray-500 dark:text-gray-400">
+                    L'infrastructure API qui propulse votre avenir technologique.
+                </p>
+                <div class="mt-4 flex space-x-4">
+                    <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-500 transition duration-200">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.014 4.85.07c3.275.146 4.47 1.583 4.61 4.85.056 1.266.07 1.646.07 4.85s-.014 3.584-.07 4.85c-.14 3.267-1.335 4.704-4.61 4.85-1.266.056-1.646.07-4.85.07s-3.584-.014-4.85-.07c-3.275-.146-4.47-1.583-4.61-4.85-.056-1.266-.07-1.646-.07-4.85s.014-3.584.07-4.85c.14-3.267 1.335-4.704 4.61-4.85 1.266-.056 1.646-.07 4.85-.07zM12 0c-3.784 0-4.285.016-5.773.083-4.722.211-6.755 2.24-6.965 6.965C.016 7.715 0 8.216 0 12s.016 4.285.083 5.773c.21 4.721 2.239 6.755 6.965 6.965 1.488.067 1.99.083 5.773.083s4.285-.016 5.773-.083c4.721-.21 6.755-2.239 6.965-6.965.067-1.488.083-1.99.083-5.773s-.016-4.285-.083-5.773c-.21-4.722-2.239-6.755-6.965-6.965C16.285.016 15.784 0 12 0zm0 14.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z"/></svg>
+                    </a>
+                </div>
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Plateforme</h3>
+                <ul class="space-y-3 text-gray-500 dark:text-gray-400">
+                    <li><a href="/tarifs" class="hover:text-blue-500 transition duration-200">Tarifs</a></li>
+                    <li><a href="/documentation" class="hover:text-blue-500 transition duration-200">Documentation</a></li>
+                    <li><a href="/connexion" class="hover:text-blue-500 transition duration-200">Connexion</a></li>
+                    <li><a href="/support" class="hover:text-blue-500 transition duration-200">Support</a></li>
+                </ul>
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Légal</h3>
+                <ul class="space-y-3 text-gray-500 dark:text-gray-400">
+                    <li><a href="/politique-confidentialite" class="hover:text-blue-500 transition duration-200">Politique de Confidentialité</a></li>
+                    <li><a href="/mentions-legales" class="hover:text-blue-500 transition duration-200">Mentions Légales</a></li>
+                    <li><a href="/conditions-utilisation" class="hover:text-blue-500 transition duration-200">Conditions d'Utilisation</a></li>
+                    <li><a href="/a-propos" class="hover:text-blue-500 transition duration-200">À Propos</a></li>
+                </ul>
+            </div>
+            <div class="col-span-2 md:col-span-1">
+                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Ressources</h3>
+                <ul class="space-y-3 text-gray-500 dark:text-gray-400">
+                    <li><a href="mailto:support@nexus.com" class="hover:text-blue-500 transition duration-200">Contact Email</a></li>
+                    <li><a href="/dashboard" class="hover:text-blue-500 transition duration-200">Espace Client</a></li>
+                    <li><a href="/api-logs" class="hover:text-blue-500 transition duration-200">Statut API</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="mt-10 pt-6 border-t border-gray-200 dark:border-gray-800 text-center text-gray-500 text-sm">
+            &copy; 2024 Nexus. Tous droits réservés. Construit pour l'ère des microservices.
+        </div>
+    </div>
+</footer>
+</body>
+</html>

templates/connexion.html ADDED Viewed

	@@ -0,0 +1,203 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Connexion - Nexus</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Transition pour un effet doux des couleurs */
+        .transition-colors-theme { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
+        /* Style et positionnement du bouton */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 24px;
+            transition: color 0.2s;
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            z-index: 10;
+        }
+        /* Définir les Variables de Thème (Mise à jour pour être similaire à inscription.html) */
+        /* Mode Sombre (Défaut : noir très foncé #121212) */
+        :root, .dark {
+            --bg-page: #121212;
+            --bg-card: #1E1E1E;
+            --text-color: #FFFFFF; /* Texte général blanc en mode sombre */
+            --input-bg: #2C2C2C;
+            --border-color: #383838;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --error-color: #DC2626;
+        }
+        /* Mode Clair */
+        .light {
+            --bg-page: #F5F5F5;
+            --bg-card: #FFFFFF;
+            --text-color: #000000; /* Texte général noir foncé en mode clair */
+            --input-bg: #FFFFFF;
+            --border-color: #D1D5DB;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --error-color: #DC2626;
+        }
+        /* Appliquer les variables au body et aux éléments */
+        .bg-page-var { background-color: var(--bg-page); }
+        .bg-card-var { background-color: var(--bg-card); }
+        .text-color-var { color: var(--text-color); }
+        .bg-input-var { background-color: var(--input-bg); }
+        .border-color-var { border-color: var(--border-color); }
+        .text-primary-color-var { color: var(--primary-color); }
+        .bg-primary-color-var { background-color: var(--primary-color); }
+        .hover\:text-primary-hover-var:hover { color: var(--primary-hover); }
+        .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color); }
+        .focus\:border-primary-color-var:focus { border-color: var(--primary-color); }
+        /* Forcer le texte saisi dans les champs de formulaire en noir foncé (#000000) */
+        input[type="text"],
+        input[type="email"],
+        input[type="password"] {
+            color: #000000 !important;
+        }
+    </style>
+</head>
+<body class="bg-page-var transition-colors-theme min-h-screen flex items-center justify-center p-4">
+    <button id="theme-toggle" class="theme-switch text-color-var hover:text-primary-color-var transition-colors-theme">
+        <span class="material-symbols-rounded">dark_mode</span>
+    </button>
+    <div class="w-full max-w-6xl flex flex-col md:flex-row shadow-2xl rounded-lg overflow-hidden">
+        <div class="hidden md:block md:w-1/2 bg-primary-color-var p-12 flex flex-col justify-center items-center text-white transition-colors-theme">
+            <svg class="w-32 h-32 mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15a4 4 0 01-4-4V7a4 4 0 118 0v4a4 4 0 01-4 4z"/>
+            </svg>
+            <h3 class="text-4xl font-extrabold mb-4 text-center">Bienvenue de Retour</h3>
+            <p class="text-center text-lg">Veuillez vous connecter pour accéder à votre tableau de bord.</p>
+        </div>
+        <div class="w-full md:w-1/2 bg-card-var transition-colors-theme p-8 md:p-12">
+            <h2 class="text-3xl font-bold text-center text-color-var mb-8 transition-colors-theme">Connexion</h2>
+            <p id="message" class="text-center text-red-500 mb-4"></p>
+            <form id="loginForm">
+                <div class="mb-4">
+                    <label for="username" class="block text-sm font-medium text-color-var">Nom d'utilisateur ou Email</label>
+                    <input type="text" id="username" name="username" placeholder="Votre nom d'utilisateur ou email" required
+                        class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                </div>
+                <div class="mb-4">
+                    <label for="password" class="block text-sm font-medium text-color-var">Mot de Passe</label>
+                    <input type="password" id="password" name="password" placeholder="Votre mot de passe" required
+                        class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                </div>
+                <div class="flex items-center justify-between mb-6">
+                    <a href="/mot-de-passe-oublie" class="text-sm font-medium text-primary-color-var hover:text-primary-hover-var transition-colors-theme">
+                        Mot de passe oublié ?
+                    </a>
+                    <a href="/inscription" class="text-sm font-medium text-primary-color-var hover:text-primary-hover-var transition-colors-theme">
+                        Pas de compte? S'inscrire
+                    </a>
+                </div>
+                <button type="submit"
+                    class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-color-var hover:bg-primary-hover-var focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-color-var transition duration-150 ease-in-out">
+                    Se Connecter
+                </button>
+            </form>
+        </div>
+    </div>
+    <script>
+        const form = document.getElementById('loginForm');
+        const message = document.getElementById('message');
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            message.textContent = 'Connexion en cours...';
+            message.className = 'text-gray-500 mb-4';
+            const formData = {
+                username: form.username.value,
+                password: form.password.value,
+            };
+            try {
+                const response = await fetch('/api/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(formData)
+                });
+                const data = await response.json();
+                if (data.status === 'Success') {
+                    message.textContent = data.message + " Redirection vers le tableau de bord...";
+                    message.className = 'text-green-500 mb-4';
+                    // REDIRECTION AUTOMATIQUE VERS LE DASHBOARD
+                    setTimeout(() => {
+                        window.location.href = '/dashboard';
+                    }, 1500);
+                } else {
+                    message.textContent = 'Erreur : ' + (data.message || 'Échec de la connexion.');
+                    message.className = 'text-red-500 mb-4';
+                }
+            } catch (error) {
+                console.error('Erreur réseau ou du serveur Flask:', error);
+                message.textContent = 'Erreur de connexion au serveur.';
+                message.className = 'text-red-500 mb-4';
+            }
+        });
+        // Logique du thème (conservée pour l'esthétique)
+        const themeToggle = document.getElementById('theme-toggle');
+        const html = document.documentElement;
+        const updateIcon = () => {
+            const icon = themeToggle.querySelector('.material-symbols-rounded');
+            if (html.classList.contains('light')) {
+                icon.textContent = 'light_mode';
+            } else {
+                icon.textContent = 'dark_mode';
+            }
+        };
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            html.classList.remove('dark');
+            html.classList.add('light');
+        } else {
+            html.classList.add('dark');
+            html.classList.remove('light');
+        }
+        updateIcon();
+        themeToggle.addEventListener('click', () => {
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                html.classList.add('light');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.remove('light');
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+            updateIcon();
+        });
+    </script>
+</body>
+</html>

templates/create_project.html ADDED Viewed

	@@ -0,0 +1,860 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mailix | Éditeur de Code - Pro</title>
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/php/php.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/clike/clike.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/sql/sql.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/markdown/markdown.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/shell/shell.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/typescript/typescript.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/go/go.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/yaml/yaml.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/rust/rust.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/stex/stex.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/meta.js"></script> </head>
+    <style>
+        /* Configuration de la police Inter */
+        html, body {
+            font-family: 'Inter', sans-serif;
+            height: 100vh; /* Utiliser 100vh pour garantir la hauteur de la fenêtre */
+            overflow: hidden; /* Supprimer le défilement de l'écran principal */
+        }
+        /* Transition pour un effet doux des couleurs */
+        .transition-colors-theme { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
+        /* Définir les Variables de Thème - UNIQUEMENT Mode Sombre (Défaut) */
+        :root, .dark {
+            --bg-page: #121212;
+            --bg-card: #1E1E1E;
+            --bg-sidebar: #1E1E1E;
+            --bg-sidebar-active: #2C2C2C;
+            --border-sidebar: #383838;
+            --text-color: #FFFFFF;
+            --text-secondary: #D1D5DB;
+            --text-link: #3B82F6;
+            --text-link-hover: #60A5FA;
+            --input-bg: #2C2C2C;
+            --input-border: #4B5563;
+            --input-text-key: #6EE7B7;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --warning-bg: #451A03;
+            --warning-border: #78350F;
+            --warning-text: #FBBF24;
+            --editor-tab-bg: #1E1E1E; /* Fond des onglets de l'éditeur */
+            --editor-tab-active-bg: #2C2C2C; /* Fond de l'onglet actif */
+            --status-bar-bg: #007ACC; /* Bleu VS Code pour la barre de statut */
+        }
+        /* Mode Clair (Supprimé selon le plan) */
+        /* Appliquer les variables au body et aux éléments (Conservées) */
+        .bg-page-var { background-color: var(--bg-page); }
+        .bg-card-var { background-color: var(--bg-card); }
+        .bg-sidebar-var { background-color: var(--bg-sidebar); }
+        .border-sidebar-var { border-color: var(--border-sidebar); }
+        .text-color-var { color: var(--text-color); }
+        .text-secondary-var { color: var(--text-secondary); }
+        .text-link-var { color: var(--text-link); }
+        .hover\:text-link-hover-var:hover { color: var(--text-link-hover); }
+        .bg-input-var { background-color: var(--input-bg); }
+        .border-input-var { border-color: var(--input-border); }
+        .text-input-key-var { color: var(--input-text-key); }
+        .bg-primary-color-var { background-color: var(--primary-color); }
+        .hover\:bg-primary-hover-var:hover { background-color: var(--primary-hover); }
+        .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color); }
+        .focus\:border-primary-color-var:focus { border-color: var(--primary-color); }
+        .bg-sidebar-active-var { background-color: var(--bg-sidebar-active); }
+        .bg-warning-var { background-color: var(--warning-bg); }
+        .border-warning-var { border-color: var(--warning-border); }
+        .text-warning-var { color: var(--warning-text); }
+        /* Styles pour les sidebars - FIXES */
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+            position: fixed;
+            top: 0;
+            z-index: 30;
+            height: 100vh;
+        }
+        /* Sidebar Gauche - Masquée par défaut sur toutes les tailles */
+        .sidebar-left {
+            transform: translateX(-100%);
+            left: 0;
+        }
+        .sidebar-left.open {
+            transform: translateX(0);
+        }
+        /* FIX 1.1: Sidebar Droite - Masquée par défaut, positionnée à droite */
+        .sidebar-right {
+            transform: translateX(100%);
+            right: 0;
+        }
+        .sidebar-right.open {
+            transform: translateX(0);
+        }
+        /* Conteneur principal pour décaler le contenu sur les grands écrans (lg) */
+        @media (min-width: 1024px) {
+            .main-content {
+                margin-left: 0;
+                margin-right: 0;
+            }
+            /* Décalage si sidebar gauche ouverte */
+            .main-content.sidebar-left-open {
+                margin-left: 256px;
+            }
+            /* Décalage si sidebar droite ouverte */
+            .main-content.sidebar-right-open {
+                margin-right: 256px;
+            }
+            /* Décalage si les deux sidebars sont ouvertes */
+            .main-content.sidebar-left-open.sidebar-right-open {
+                 margin-left: 256px;
+                 margin-right: 256px;
+            }
+        }
+        /* Ajustement du bouton de Thème (Supprimé) */
+        .theme-switch {
+             display: none;
+        }
+        /* Styles Spécifiques à l'Éditeur */
+        .editor-container {
+            /* Maintient la disposition en colonne pour header, tabs, editor, footer */
+            display: flex;
+            flex-direction: column;
+            /* Le conteneur s'étire maintenant grâce au body flex-column */
+            height: 100%;
+            flex-grow: 1; /* Permet au main-content de prendre l'espace restant dans la ligne flex body */
+            padding-top: 0;
+        }
+        /* FIX 3: Réduction du padding du header */
+        #main-header {
+             padding-top: 0.5rem; /* p-2 */
+             padding-bottom: 0.5rem; /* p-2 */
+             padding-left: 1rem; /* px-4 */
+             padding-right: 1rem; /* px-4 */
+        }
+        /* FIX 2.2: Le wrapper de l'éditeur prend l'espace restant dans la colonne flex */
+        #code-editor-wrapper {
+             flex-grow: 1;
+             overflow: hidden; /* Empêche le CodeMirror de faire défiler le parent */
+        }
+        /* CodeMirror Styling - Pour un look sombre VS Code (Monokai) */
+        .CodeMirror {
+            flex-grow: 1;
+            height: 100% !important; /* Essentiel pour que le défilement CodeMirror fonctionne */
+            font-size: 14px;
+            line-height: 1.5;
+            background: #272822; /* Fond Monokai */
+            color: #f8f8f2;
+            border-top: 1px solid var(--border-sidebar);
+            border-bottom: 1px solid var(--border-sidebar);
+        }
+        /* Style de la barre d'onglets */
+        #tab-bar {
+            background-color: var(--editor-tab-bg);
+            border-bottom: 1px solid var(--border-sidebar);
+            min-height: 40px;
+            padding-left: 10px;
+            /* MODIFICATION 2.1 - 2.3: Permet le défilement horizontal */
+            overflow-x: auto;
+            white-space: nowrap; /* Empêche le wrapping des onglets */
+        }
+        .tab-item {
+            /* MODIFICATION 2.2: S'assure que les onglets ne se rétrécissent pas pour le défilement */
+            flex-shrink: 0;
+            display: inline-flex; /* Utilisation de inline-flex au lieu de flex pour un meilleur comportement avec white-space: nowrap */
+            align-items: center;
+            padding: 8px 15px;
+            border-right: 1px solid var(--border-sidebar);
+            cursor: pointer;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            transition: background-color 0.2s;
+        }
+        .tab-item.active {
+            background-color: var(--editor-tab-active-bg);
+            color: var(--text-color);
+            position: relative;
+        }
+        .tab-item:hover:not(.active) {
+            background-color: var(--bg-sidebar-active);
+        }
+        .tab-close {
+            margin-left: 8px;
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        /* Style de la barre de statut */
+        #status-bar {
+            background-color: var(--status-bar-bg);
+            color: white;
+            min-height: 25px;
+            font-size: 0.75rem;
+        }
+        /* Modale */
+        .modal {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            display: none;
+            justify-content: center;
+            align-items: center;
+            z-index: 50;
+        }
+        .modal.open {
+            display: flex;
+        }
+        .modal-content {
+            padding: 1.5rem;
+            border-radius: 0.5rem;
+            width: 90%;
+            max-width: 400px;
+        }
+        .input-text {
+            border-width: 1px;
+            padding: 0.75rem;
+            border-radius: 0.375rem;
+            width: 100%;
+            font-size: 1rem;
+        }
+        /* Masquer la marge du main-content sur mobile pour l'éditeur */
+        @media (max-width: 1023px) {
+            .main-content {
+                padding: 0;
+            }
+            .editor-container {
+                /* Calcule la hauteur totale - (Header + barre de statut + barre d'onglets) pour l'éditeur */
+                /* Cette règle est moins critique si flex-grow est appliqué correctement */
+                height: calc(100vh - 40px - 40px - 25px); /* Environ */
+            }
+        }
+    </style>
+</head>
+<body class="bg-page-var text-color-var min-h-screen transition-colors-theme flex flex-col">
+    <aside id="sidebar-left" class="sidebar sidebar-left w-64 bg-sidebar-var border-r border-sidebar-var p-6 flex flex-col transition-colors-theme">
+    <div class="flex items-center mb-6 shrink-0">
+        <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+        <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Mailix</span>
+    </div>
+    <div class="flex-grow overflow-y-auto pr-2" id="scrollable-nav-container">
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-secondary-var mb-2">Fichiers Ouverts</h3>
+        <nav id="file-explorer" class="space-y-1 pb-4 border-b border-sidebar-var/50 mb-4">
+            </nav>
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-secondary-var mb-2">Navigation</h3>
+        <nav class="space-y-3 pb-4">
+            <a href="{{ url_for('user_bp.dashboard') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">dashboard</span>
+                <span class="ml-3">Dashboard</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+            <a href="/parametres" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">settings</span> <span class="ml-3">Paramètres</span>
+            </a>
+            <a href="/aide" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">help</span>
+                <span class="ml-3">Aide & Support</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+            <a href="/tarifs" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">payments</span>
+                <span class="ml-3">Tarifs</span>
+            </a>
+            <a href="/statut" class="flex items-center p-3 bg-sidebar-active-var text-color-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">monitor_heart</span>
+                <span class="ml-3">Statut de l'API</span>
+            </a>
+            <a href="{{ url_for('user_bp.deconnexion') }}" id="logout-button-sidebar" class="flex items-center p-3 text-red-500 hover:text-red-400 hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">deconnexion</span>
+                <span class="ml-3">Déconnexion</span>
+            </a>
+        </nav>
+    </div>
+    <div class="mt-auto pt-4 text-xs text-secondary-var transition-colors-theme border-t border-sidebar-var/50 shrink-0">
+        <p>Connecté en tant que: <span class="font-semibold text-color-var transition-colors-theme">{{ user.email if user and user.email else 'Chargement...' }}</span></p>
+        <p>Plan: <span class="font-semibold text-color-var transition-colors-theme">{{ (user.plan | upper) if user and user.plan else 'GRATUIT' }}</span></p>
+    </div>
+</aside>
+<aside id="sidebar-right" class="sidebar sidebar-right w-64 bg-sidebar-var border-l border-sidebar-var p-4 flex flex-col transition-colors-theme overflow-y-auto">
+    <div class="flex items-center mb-4 shrink-0 border-b border-sidebar-var/50 pb-2">
+        <span class="material-symbols-rounded text-xl mr-2">settings</span>
+        <span class="text-lg font-semibold text-color-var">Outils & Paramètres</span>
+    </div>
+    <div id="editor-settings-section" class="mb-6">
+        <h4 class="flex items-center text-sm font-bold uppercase tracking-wider text-secondary-var mb-2">
+            <span class="material-symbols-rounded text-base mr-1">settings</span>
+            Paramètres de l'Éditeur
+        </h4>
+        <div class="space-y-3 p-2 bg-sidebar-active-var rounded-lg">
+            <div>
+                <label class="block text-xs font-medium text-secondary-var mb-1">Thème du Code</label>
+                <select class="w-full bg-input-var text-color-var p-2 rounded-md border border-input-var text-sm">
+                    <option selected>Monokai (Défaut)</option>
+                    <option>VS Light</option>
+                    <option>Dracula</option>
+                </select>
+            </div>
+            <div>
+                <label class="block text-xs font-medium text-secondary-var mb-1">Taille de Police</label>
+                <input type="range" min="10" max="20" value="14" class="w-full h-1 bg-primary-color-var rounded-lg appearance-none cursor-pointer">
+                <p class="text-xs text-secondary-var mt-1">Taille actuelle: 14px</p>
+            </div>
+            <div>
+                 <label class="block text-xs font-medium text-secondary-var mb-1">Indentation</label>
+                 <select class="w-full bg-input-var text-color-var p-2 rounded-md border border-input-var text-sm">
+                    <option selected>Espaces (4)</option>
+                    <option>Espaces (2)</option>
+                    <option>Tabulations</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    <div id="minimap-section" class="mb-6">
+        <h4 class="flex items-center text-sm font-bold uppercase tracking-wider text-secondary-var mb-2">
+            <span class="material-symbols-rounded text-base mr-1">map</span>
+            Aperçu du Code (Minimap)
+        </h4>
+        <div class="h-20 bg-input-var border border-input-border rounded-lg flex items-center justify-center text-xs text-secondary-var/70">
+            [Zone de Minimap Simulé]
+        </div>
+    </div>
+    <div id="inspection-section" class="flex-grow">
+        <h4 class="flex items-center text-sm font-bold uppercase tracking-wider text-secondary-var mb-2">
+            <span class="material-symbols-rounded text-base mr-1">search</span>
+            Inspection/Propriétés
+        </h4>
+        <div class="p-3 bg-sidebar-active-var rounded-lg h-full overflow-y-auto text-xs space-y-2">
+            <p class="font-semibold text-color-var">Élément sélectionné: &lt;body&gt;</p>
+            <p><span class="text-input-key-var">background-color:</span> var(--bg-page);</p>
+            <p><span class="text-input-key-var">color:</span> var(--text-color);</p>
+            <p class="text-secondary-var mt-4">[Aide Contextuelle pour la balise HTML 'body']</p>
+        </div>
+    </div>
+</aside>
+<div id="main-content" class="main-content flex-grow transition-colors-theme editor-container">
+    <header id="main-header" class="flex justify-between items-center bg-page-var p-2 border-b border-sidebar-var shrink-0">
+        <button id="sidebar-left-toggle" class="mobile-toggle-button p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme">
+             <span class="material-symbols-rounded text-color-var">menu</span>
+        </button>
+        <div class="flex items-center">
+             <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+            <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Mailix Editor</span>
+        </div>
+        <button id="sidebar-right-toggle" class="mobile-toggle-button p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme" title="Outils et Paramètres">
+             <span class="material-symbols-rounded text-color-var">more_vert</span>
+        </button>
+    </header>
+    <div id="tab-bar" class="flex items-center overflow-x-auto shrink-0">
+        <button id="add-tab-button" class="flex items-center p-2 text-secondary-var hover:text-color-var transition-colors-theme" title="Ajouter un nouveau fichier">
+             <span class="material-symbols-rounded text-xl">add</span>
+        </button>
+        <button id="import-button" class="flex items-center p-2 text-secondary-var hover:text-color-var transition-colors-theme" title="Importer un fichier local">
+             <span class="material-symbols-rounded text-xl">file_upload</span>
+        </button>
+        <input type="file" id="file-input" class="hidden" />
+        <button id="save-button" class="ml-auto flex items-center p-2 text-link-var hover:text-link-hover-var transition-colors-theme font-semibold border-l border-sidebar-var" title="Sauvegarder localement">
+            <span class="material-symbols-rounded text-xl mr-1">save</span>
+            Sauvegarder
+        </button>
+    </div>
+    <div id="code-editor-wrapper">
+        <textarea id="code-editor-textarea" style="display: none;">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="fr"&gt;
+&lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;Mon Nouveau Projet&lt;/title&gt;
+    &lt;link rel="stylesheet" href="style.css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;h1&gt;Bienvenue dans l'Éditeur Mailix&lt;/h1&gt;
+    &lt;p&gt;Ce code est mis en évidence par CodeMirror.&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+        </textarea>
+    </div>
+    <footer id="status-bar" class="flex items-center justify-between px-4 py-0.5 shrink-0">
+        <div class="flex items-center space-x-4">
+            <span class="material-symbols-rounded text-sm">code</span>
+            <span id="status-language">Langage: HTML</span>
+        </div>
+        <div class="flex items-center space-x-4">
+            <span id="status-encoding">UTF-8</span>
+            <span id="status-line-col">Ligne: 1, Col: 1</span>
+        </div>
+    </footer>
+</div>
+<div id="create-file-modal" class="modal">
+    <div class="modal-content bg-card-var text-color-var">
+        <h2 class="text-xl font-bold mb-4">Créer un Nouveau Fichier</h2>
+        <input type="text" id="new-file-name-input" class="input-text bg-input-var border-input-var text-color-var focus:border-primary-color-var focus:ring-1 focus:ring-primary-color-var outline-none mb-4" placeholder="Nom du fichier (ex: index.html, style.css, script.js)" required>
+        <div class="flex justify-end space-x-3">
+            <button id="cancel-create-file" class="px-4 py-2 text-secondary-var hover:text-color-var rounded-lg transition-colors-theme">Annuler</button>
+            <button id="confirm-create-file" class="px-4 py-2 bg-primary-color-var hover:bg-primary-hover-var text-white font-semibold rounded-lg transition-colors-theme">Créer</button>
+        </div>
+    </div>
+</div>
+<script>
+    // --- PARTIE 1: GESTION DE LA SIDEBAR (Gauche et Droite) ---
+    // Éléments de la Sidebar Gauche
+    const sidebarLeftToggle = document.getElementById('sidebar-left-toggle');
+    const sidebarLeft = document.getElementById('sidebar-left'); // ID mis à jour
+    const mainContent = document.getElementById('main-content');
+    // Éléments de la Sidebar Droite (NOUVEAU)
+    const sidebarRightToggle = document.getElementById('sidebar-right-toggle');
+    const sidebarRight = document.getElementById('sidebar-right');
+    // Logique pour la Sidebar Gauche
+    function toggleSidebarLeft() {
+        sidebarLeft.classList.toggle('open');
+        // Gérer le décalage du contenu principal sur grand écran (lg)
+        if (window.innerWidth >= 1024) {
+            mainContent.classList.toggle('sidebar-left-open');
+        }
+    }
+    // Logique pour la Sidebar Droite (NOUVEAU)
+    function toggleSidebarRight() {
+        sidebarRight.classList.toggle('open');
+         // Gérer le décalage du contenu principal sur grand écran (lg)
+        if (window.innerWidth >= 1024) {
+            mainContent.classList.toggle('sidebar-right-open');
+        }
+    }
+    sidebarLeftToggle.addEventListener('click', toggleSidebarLeft);
+    sidebarRightToggle.addEventListener('click', toggleSidebarRight); // Lier le nouveau bouton
+    // Logique de Déconnexion (Conservée)
+    document.getElementById('logout-button-sidebar').addEventListener('click', (e) => {
+        e.preventDefault();
+        window.location.href = e.currentTarget.href;
+    });
+    // --- PARTIE 2: GESTION DE L'ÉDITEUR DE CODE (CodeMirror + Onglets) ---
+    // Structure de données pour les fichiers (V1: Stockage local)
+    let files = [
+        { id: 1, name: 'index.html', content: document.getElementById('code-editor-textarea').value, mode: 'htmlmixed', isActive: true },
+        { id: 2, name: 'style.css', content: "body {\n    font-family: sans-serif;\n    color: #4CAF50; /* Green */\n}", mode: 'css', isActive: false },
+        { id: 3, name: 'script.js', content: "console.log('Editor Ready!');", mode: 'javascript', isActive: false }
+    ];
+    let fileIdCounter = files.length + 1;
+    let currentEditor = null; // L'instance CodeMirror
+    const tabBar = document.getElementById('tab-bar');
+    const editorTextarea = document.getElementById('code-editor-textarea');
+    const statusBarLanguage = document.getElementById('status-language');
+    const statusBarLineCol = document.getElementById('status-line-col');
+    const fileExplorer = document.getElementById('file-explorer');
+    // Éléments de la modale
+    const createFileModal = document.getElementById('create-file-modal');
+    const newFileNameInput = document.getElementById('new-file-name-input');
+    const confirmCreateFileButton = document.getElementById('confirm-create-file');
+    const cancelCreateFileButton = document.getElementById('cancel-create-file');
+    /**
+     * Détermine le mode CodeMirror à partir de l'extension du nom de fichier.
+     * @param {string} fileName Le nom du fichier.
+     * @returns {string} Le mode CodeMirror.
+     */
+function getModeFromFileExtension(fileName) {
+    const ext = fileName.split('.').pop().toLowerCase();
+    switch (ext) {
+        // Web
+        case 'html':
+        case 'htm':
+            return 'htmlmixed';
+        case 'css':
+            return 'css';
+        case 'js':
+            return 'javascript';
+        case 'ts':
+            return 'typescript'; // Nouveau
+        case 'json':
+            return 'application/json'; // Nouveau (mode spécifique pour JSON)
+        // Backend / Systèmes
+        case 'py':
+            return 'python';
+        case 'php':
+        case 'phtml':
+            return 'php';
+        case 'go':
+            return 'go'; // Nouveau
+        case 'rs':
+            return 'rust'; // Nouveau
+        case 'sh':
+            return 'shell';
+        // Langages C-like (Java, C, C++, C#)
+        case 'java':
+        case 'c':
+        case 'cpp':
+        case 'cs':
+            return 'clike';
+        // Données et Bases de données
+        case 'sql':
+            return 'sql';
+        case 'yaml':
+        case 'yml':
+            return 'yaml'; // Nouveau
+        // Documentation et autres
+        case 'md':
+        case 'markdown':
+            return 'markdown';
+        case 'tex':
+        case 'latex':
+            return 'stex'; // Nouveau (pour LaTeX)
+        default:
+            return 'text/plain'; // Mode texte brut pour les inconnus ou le texte simple
+    }
+}
+    /**
+     * Initialise CodeMirror sur le textarea.
+     */
+    function initializeEditor(initialContent, mode) {
+        if (currentEditor) {
+            currentEditor.toTextArea(); // Détruit l'ancienne instance
+            currentEditor = null;
+        }
+        editorTextarea.value = initialContent;
+        currentEditor = CodeMirror.fromTextArea(editorTextarea, {
+            lineNumbers: true,
+            mode: mode,
+            theme: 'monokai',
+            indentUnit: 4,
+            tabSize: 4,
+            indentWithTabs: false,
+            autofocus: true,
+            // MODIFICATION 1.2: Désactiver le retour à la ligne pour forcer le défilement horizontal
+            lineWrapping: false,
+        });
+        // Événement de mise à jour du contenu et de la barre de statut
+        currentEditor.on("change", handleEditorChange);
+        currentEditor.on("cursorActivity", updateStatusBar);
+        // S'assurer que CodeMirror utilise 100% de la hauteur disponible dans son conteneur parent flexible
+        const cmElement = currentEditor.getWrapperElement();
+        cmElement.style.height = '100%';
+        updateStatusBar();
+    }
+    /**
+     * Met à jour le contenu de l'objet fichier actif dans le tableau `files`.
+     */
+    function handleEditorChange() {
+        if (currentEditor) {
+            const activeFile = files.find(f => f.isActive);
+            if (activeFile) {
+                activeFile.content = currentEditor.getValue();
+            }
+        }
+    }
+    /**
+     * Met à jour les indicateurs Ligne/Col dans la barre de statut.
+     */
+    function updateStatusBar() {
+        if (currentEditor) {
+            const cursor = currentEditor.getCursor();
+            statusBarLineCol.textContent = `Ligne: ${cursor.line + 1}, Col: ${cursor.ch + 1}`;
+        }
+    }
+    /**
+     * Affiche l'éditeur avec le contenu du fichier sélectionné.
+     * @param {number} fileId L'ID du fichier à activer.
+     */
+    function setActiveFile(fileId) {
+        files.forEach(f => f.isActive = f.id === fileId);
+        const activeFile = files.find(f => f.isActive);
+        if (activeFile) {
+            // Mise à jour de CodeMirror
+            if (currentEditor) {
+                currentEditor.setValue(activeFile.content);
+                currentEditor.setOption("mode", activeFile.mode);
+                currentEditor.focus();
+            } else {
+                // Initialisation au premier chargement
+                initializeEditor(activeFile.content, activeFile.mode);
+            }
+            // Mise à jour de la barre de statut
+            const modeName = activeFile.mode.includes('html') ? 'HTML' : (activeFile.mode === 'css' ? 'CSS' : 'JavaScript');
+            statusBarLanguage.textContent = `Langage: ${modeName}`;
+        }
+        renderTabs();
+        renderFileExplorer(); // Mise à jour de l'explorateur
+    }
+    /**
+     * Génère et affiche les onglets dans la barre d'onglets.
+     */
+    function renderTabs() {
+        // Enlever tous les onglets existants sauf le bouton '+' et 'Sauvegarder' et 'Importer'
+        // On cible spécifiquement les éléments avec la classe 'tab-item'
+        const existingTabs = tabBar.querySelectorAll('.tab-item');
+        existingTabs.forEach(tab => tab.remove());
+        const saveButton = document.getElementById('save-button');
+        files.forEach(file => {
+            const tab = document.createElement('div');
+            // 'flex items-center' est conservé mais 'inline-flex' est dans le CSS pour le white-space: nowrap
+            tab.className = `tab-item flex items-center ${file.isActive ? 'active' : ''}`;
+            tab.dataset.fileId = file.id;
+            tab.innerHTML = `
+                <span>${file.name}</span>
+                <span class="tab-close material-symbols-rounded text-sm hover:text-color-var transition-colors-theme ml-2">close</span>
+            `;
+            // Attacher l'onglet avant le bouton Sauvegarder (qui est 'ml-auto')
+            // Remarque: La structure des boutons dans le HTML implique que les onglets sont insérés avant le saveButton (qui a ml-auto)
+            tabBar.insertBefore(tab, saveButton);
+            // Gérer le clic pour activer l'onglet
+            tab.querySelector('span').addEventListener('click', (e) => {
+                // Évite de déclencher l'activation si on clique sur l'icône de fermeture
+                if (!e.target.classList.contains('tab-close')) {
+                    setActiveFile(file.id);
+                }
+            });
+            // Gérer le clic pour fermer l'onglet
+            tab.querySelector('.tab-close').addEventListener('click', () => closeFile(file.id));
+        });
+    }
+    /**
+     * Génère et affiche la liste des fichiers dans l'explorateur de fichiers.
+     */
+    function renderFileExplorer() {
+        fileExplorer.innerHTML = ''; // Nettoyer l'explorateur
+        files.forEach(file => {
+            const item = document.createElement('a');
+            const isActiveClass = file.isActive ? 'bg-sidebar-active-var text-color-var' : 'text-secondary-var hover:text-color-var hover:bg-sidebar-active-var';
+            item.href = '#';
+            item.className = `flex items-center p-2 text-sm rounded-lg transition duration-150 transition-colors-theme ${isActiveClass}`;
+            item.dataset.fileId = file.id;
+            item.innerHTML = `
+                <span class="material-symbols-rounded text-base">insert_drive_file</span>
+                <span class="ml-2 truncate">${file.name}</span>
+            `;
+            item.addEventListener('click', (e) => {
+                e.preventDefault();
+                setActiveFile(file.id);
+            });
+            fileExplorer.appendChild(item);
+        });
+    }
+    /**
+     * Ajoute un nouveau fichier/onglet.
+     * @param {string} fileName Le nom du fichier.
+     * @param {string} fileContent Le contenu du fichier (par défaut vide).
+     */
+    function createNewFile(fileName, fileContent = "// Nouveau fichier") {
+        const mode = getModeFromFileExtension(fileName);
+        const newFile = {
+            id: fileIdCounter++,
+            name: fileName,
+            content: fileContent,
+            mode: mode,
+            isActive: false // Sera activé par setActiveFile
+        };
+        files.push(newFile);
+        setActiveFile(newFile.id);
+    }
+    /**
+     * Ferme un fichier/onglet.
+     * @param {number} fileId L'ID du fichier à fermer.
+     */
+    function closeFile(fileId) {
+        const index = files.findIndex(f => f.id === fileId);
+        if (index === -1) return;
+        const wasActive = files[index].isActive;
+        files.splice(index, 1); // Retire le fichier
+        if (files.length === 0) {
+            // Si plus de fichiers, ajoute un fichier vierge
+            createNewFile(`untitled-${fileIdCounter}.js`);
+            return;
+        }
+        if (wasActive) {
+            // Active le fichier précédent ou le premier s'il n'y a pas de précédent
+            const newActiveFile = files[Math.max(0, index - 1)];
+            setActiveFile(newActiveFile.id);
+        } else {
+            // Si ce n'était pas l'actif, on rafraîchit juste les onglets et l'explorateur
+            renderTabs();
+            renderFileExplorer();
+        }
+    }
+    // --- Logique de la Modale de Création de Fichier ---
+    document.getElementById('add-tab-button').addEventListener('click', () => {
+        newFileNameInput.value = ''; // Réinitialiser l'input
+        createFileModal.classList.add('open');
+        newFileNameInput.focus();
+    });
+    cancelCreateFileButton.addEventListener('click', () => {
+        createFileModal.classList.remove('open');
+    });
+    confirmCreateFileButton.addEventListener('click', () => {
+        const fileName = newFileNameInput.value.trim();
+        if (fileName) {
+            createNewFile(fileName);
+            createFileModal.classList.remove('open');
+        } else {
+            alert("Veuillez entrer un nom de fichier.");
+        }
+    });
+    // --- Logique d'Importation de Fichier ---
+    const importButton = document.getElementById('import-button');
+    const fileInput = document.getElementById('file-input');
+    importButton.addEventListener('click', () => {
+        fileInput.click(); // Simuler le clic sur l'input file caché
+    });
+    fileInput.addEventListener('change', (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const content = e.target.result;
+                // Créer le nouveau fichier avec le nom et le contenu du fichier importé
+                createNewFile(file.name, content);
+            };
+            reader.readAsText(file); // Lire le fichier en tant que texte
+        }
+        // Réinitialiser l'input file pour permettre l'importation du même fichier à nouveau
+        fileInput.value = null;
+    });
+    // 3. Événements et initialisation
+    document.addEventListener('DOMContentLoaded', () => {
+        // Initialiser CodeMirror avec le fichier actif par défaut
+        const activeFile = files.find(f => f.isActive);
+        if (activeFile) {
+            initializeEditor(activeFile.content, activeFile.mode);
+        }
+        // Événement factice pour le bouton Sauvegarder
+        document.getElementById('save-button').addEventListener('click', () => {
+             const active = files.find(f => f.isActive);
+             alert(`Fichier "${active.name}" sauvegardé localement!\nContenu: ${active.content.substring(0, 50)}...`);
+        });
+        // Rendu initial des onglets et de l'explorateur
+        renderTabs();
+        renderFileExplorer();
+    });
+</script>
+</body>
+</html>

templates/dashboard.html ADDED Viewed

	@@ -0,0 +1,466 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mailix | Tableau de Bord - Pro</title>
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <style>
+        /* Configuration de la police Inter */
+        body { font-family: 'Inter', sans-serif; }
+        /* Transition pour un effet doux des couleurs */
+        .transition-colors-theme { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
+        /* Style et positionnement du bouton de Thème */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 24px;
+            transition: color 0.2s;
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            z-index: 60; /* Z-index plus élevé pour s'assurer qu'il est au-dessus de tout */
+        }
+        /* Définir les Variables de Thème (inchangé) */
+        /* Mode Sombre (Défaut) */
+        :root, .dark {
+            --bg-page: #121212;
+            --bg-card: #1E1E1E;
+            --bg-sidebar: #1E1E1E;
+            --bg-sidebar-active: #2C2C2C;
+            --border-sidebar: #383838;
+            --text-color: #FFFFFF;
+            --text-secondary: #D1D5DB;
+            --text-link: #3B82F6;
+            --text-link-hover: #60A5FA;
+            --input-bg: #2C2C2C;
+            --input-border: #4B5563;
+            --input-text-key: #6EE7B7;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --warning-bg: #451A03;
+            --warning-border: #78350F;
+            --warning-text: #FBBF24;
+        }
+        /* Mode Clair */
+        .light {
+            --bg-page: #F5F5F5;
+            --bg-card: #FFFFFF;
+            --bg-sidebar: #FFFFFF;
+            --bg-sidebar-active: #F3F4F6;
+            --border-sidebar: #D1D5DB;
+            --text-color: #000000;
+            --text-secondary: #4B5563;
+            --text-link: #1D4ED8;
+            --text-link-hover: #3B82F6;
+            --input-bg: #FFFFFF;
+            --input-border: #D1D5DB;
+            --input-text-key: #059669;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --warning-bg: #FEF3C7;
+            --warning-border: #FBBF24;
+            --warning-text: #92400E;
+        }
+        /* Appliquer les variables au body et aux éléments (inchangé) */
+        .bg-page-var { background-color: var(--bg-page); }
+        .bg-card-var { background-color: var(--bg-card); }
+        .bg-sidebar-var { background-color: var(--bg-sidebar); }
+        .border-sidebar-var { border-color: var(--border-sidebar); }
+        .text-color-var { color: var(--text-color); }
+        .text-secondary-var { color: var(--text-secondary); }
+        .text-link-var { color: var(--text-link); }
+        .hover\:text-link-hover-var:hover { color: var(--text-link-hover); }
+        .bg-input-var { background-color: var(--input-bg); }
+        .border-input-var { border-color: var(--input-border); }
+        .text-input-key-var { color: var(--input-text-key); }
+        .bg-primary-color-var { background-color: var(--primary-color); }
+        .hover\:bg-primary-hover-var:hover { background-color: var(--primary-hover); }
+        .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color); }
+        .focus\:border-primary-color-var:focus { border-color: var(--primary-color); }
+        .bg-sidebar-active-var { background-color: var(--bg-sidebar-active); }
+        .bg-warning-var { background-color: var(--warning-bg); }
+        .border-warning-var { border-color: var(--warning-border); }
+        .text-warning-var { color: var(--warning-text); }
+        /* Styles pour les sidebars - FIXES */
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+            position: fixed;
+            top: 0;
+            z-index: 30;
+            height: 100vh;
+        }
+        /* Sidebar Gauche */
+        .sidebar-left {
+            transform: translateX(-100%); /* Masqué par défaut sur mobile */
+            left: 0;
+        }
+        .sidebar-left.open {
+            transform: translateX(0);
+        }
+        /* Sidebar Droite */
+        .sidebar-right {
+            transform: translateX(100%); /* Masqué par défaut sur mobile */
+            right: 0;
+        }
+        .sidebar-right.open {
+            transform: translateX(0);
+        }
+        /* Sur les grands écrans (lg), les sidebars sont statiques et toujours visibles */
+        @media (min-width: 1024px) {
+            .sidebar {
+                transform: translateX(0) !important;
+                height: 100vh;
+            }
+        }
+        /* Conteneur principal pour décaler le contenu sur les grands écrans (lg) */
+        /* La marge doit correspondre à la largeur des sidebars (w-64 = 256px) */
+        @media (min-width: 1024px) {
+            .main-content {
+                margin-left: 256px; /* Marge Gauche pour la sidebar-left */
+                margin-right: 256px; /* Marge Droite pour la sidebar-right */
+            }
+        }
+        /* Ajustement du bouton de Thème pour ne pas interférer avec la sidebar droite sur mobile */
+        @media (max-width: 1023px) {
+            .theme-switch {
+                right: 5rem; /* Déplacé à gauche pour ne pas être sous le bouton de menu (sidebar droite) */
+            }
+        }
+        /* Style pour les boutons de toggle sur mobile */
+        .mobile-toggle-button {
+            z-index: 40; /* Au-dessus de la sidebar mais sous le theme-switch */
+        }
+    </style>
+</head>
+<body class="bg-page-var text-color-var min-h-screen transition-colors-theme">
+    <button id="theme-toggle" class="theme-switch text-color-var hover:text-link-hover-var transition-colors-theme">
+        <span class="material-symbols-rounded">dark_mode</span>
+    </button>
+<aside id="sidebar-left" class="sidebar sidebar-left w-64 bg-sidebar-var border-r border-sidebar-var p-6 flex flex-col transition-colors-theme">
+    <div class="flex items-center mb-6 shrink-0">
+        <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+        <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Mailix</span>
+    </div>
+    <div class="flex-grow overflow-y-auto pr-2" id="scrollable-nav-container">
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-secondary-var mb-2">Fichiers Ouverts</h3>
+        <nav id="file-explorer" class="space-y-1 pb-4 border-b border-sidebar-var/50 mb-4">
+            </nav>
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-secondary-var mb-2">Navigation</h3>
+        <nav class="space-y-3 pb-4">
+            <a href="{{ url_for('user_bp.dashboard') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">dashboard</span>
+                <span class="ml-3">Dashboard</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+            <a href="/aide" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">help</span>
+                <span class="ml-3">Aide & Support</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+            <a href="/tarifs" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">payments</span>
+                <span class="ml-3">Tarifs</span>
+            </a>
+            <a href="/statut" class="flex items-center p-3 bg-sidebar-active-var text-color-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">monitor_heart</span>
+                <span class="ml-3">Statut de l'API</span>
+            </a>
+            <a href="{{ url_for('user_bp.deconnexion') }}" id="logout-button-sidebar" class="flex items-center p-3 text-red-500 hover:text-red-400 hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">logout</span>
+                <span class="ml-3">Déconnexion</span>
+            </a>
+        </nav>
+    </div>
+    <div class="mt-auto pt-4 text-xs text-secondary-var transition-colors-theme border-t border-sidebar-var/50 shrink-0">
+        <p>Connecté en tant que: <span class="font-semibold text-color-var transition-colors-theme">{{ user.email if user and user.email else 'Chargement...' }}</span></p>
+        <p>Plan: <span class="font-semibold text-color-var transition-colors-theme">{{ (user.plan | upper) if user and user.plan else 'GRATUIT' }}</span></p>
+    </div>
+</aside>
+    <aside id="sidebar-right" class="sidebar sidebar-right w-64 bg-sidebar-var border-l border-sidebar-var p-6 lg:block transition-colors-theme">
+        <a href="/nouveau_project" id="new-project-button" class="flex items-center justify-center w-full p-3 mb-6 bg-primary-color-var hover:bg-primary-hover-var text-white font-semibold rounded-lg shadow-md transition duration-150">
+            <span class="material-symbols-rounded mr-2">add</span> Créer un Projet
+        </a>
+        <h3 class="text-lg font-semibold mb-4 text-color-var transition-colors-theme">Outils</h3>
+        <nav class="space-y-3">
+            <a href="/parametres" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">settings</span> <span class="ml-3">Paramètres</span>
+            </a>
+            <a href="/aide" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">help</span>
+                <span class="ml-3">Aide & Support</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+            <a href="/tarifs" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">payments</span>
+                <span class="ml-3">Tarifs</span>
+            </a>
+        </nav>
+        <div class="absolute bottom-6 w-52 text-xs text-secondary-var transition-colors-theme">
+             <p class="font-semibold text-color-var transition-colors-theme mb-1">Espace de travail</p>
+             <ul class="space-y-1">
+                 <li><a href="#" class="text-link-var hover:text-link-hover-var">Mailix Corp (Actif)</a></li>
+                 <li><a href="#" class="text-link-var hover:text-link-hover-var">Mon Sandbox</a></li>
+             </ul>
+        </div>
+    </aside>
+    <div id="main-content" class="main-content p-8 transition-colors-theme">
+        <header class="lg:hidden flex justify-between items-center mb-8">
+            <button id="sidebar-left-toggle" class="mobile-toggle-button p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme">
+                 <span class="material-symbols-rounded text-color-var">menu</span>
+            </button>
+            <div class="flex items-center">
+                 <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+                <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Mailix</span>
+            </div>
+            <button id="sidebar-right-toggle" class="mobile-toggle-button p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme">
+                 <span class="material-symbols-rounded text-color-var">settings</span> </button>
+        </header>
+        <h1 class="text-3xl font-bold mb-8 text-color-var transition-colors-theme">Tableau de Bord Principal 📊</h1>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
+            <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme">
+                <div class="flex items-center justify-between">
+                    <span class="material-symbols-rounded text-3xl text-primary-color-var">cloud_upload</span>
+                    <p class="text-2xl font-bold text-color-var">12,450</p>
+                </div>
+                <p class="text-sm text-secondary-var mt-2">Requêtes Totales</p>
+            </div>
+            <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme">
+                <div class="flex items-center justify-between">
+                    <span class="material-symbols-rounded text-3xl text-input-text-key-var">check_circle</span>
+                    <p class="text-2xl font-bold text-color-var">99.8%</p>
+                </div>
+                <p class="text-sm text-secondary-var mt-2">Taux de Succès</p>
+            </div>
+            <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme">
+                <div class="flex items-center justify-between">
+                    <span class="material-symbols-rounded text-3xl text-link-hover-var">wallet</span>
+                    <p class="text-2xl font-bold text-color-var">150$</p>
+                </div>
+                <p class="text-sm text-secondary-var mt-2">Coût Estimé (Mois)</p>
+            </div>
+            <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme">
+                <div class="flex items-center justify-between">
+                    <span class="material-symbols-rounded text-3xl text-warning-text-var">person_add</span>
+                    <p class="text-2xl font-bold text-color-var">482</p>
+                </div>
+                <p class="text-sm text-secondary-var mt-2">Utilisateurs Uniques</p>
+            </div>
+        </div>
+        <h2 class="text-2xl font-bold mb-6 text-color-var transition-colors-theme">Mes Projets Récents</h2>
+        <div class="space-y-6">
+            <div class="bg-card-var p-6 rounded-lg shadow-lg border border-sidebar-var transition-colors-theme flex justify-between items-start">
+                <div>
+                    <h3 class="text-xl font-semibold text-color-var transition-colors-theme mb-2">Projet: API de Traduction (V3)</h3>
+                    <p class="text-secondary-var text-sm mb-3">Dernière modification: 15 minutes ago</p>
+                    <div class="flex items-center space-x-3 text-sm">
+                        <span class="text-input-key-var font-medium flex items-center">
+                            <span class="material-symbols-rounded text-lg mr-1">public</span> Public
+                        </span>
+                        <span class="text-secondary-var flex items-center">
+                            <span class="material-symbols-rounded text-lg mr-1">code</span> Type: Snippet de Code (Python)
+                        </span>
+                    </div>
+                </div>
+                <a href="/project/api-translation-v3" class="text-link-var hover:text-link-hover-var font-medium flex items-center p-2 rounded-lg hover:bg-sidebar-active-var transition-colors-theme">
+                    Ouvrir l'éditeur
+                    <span class="material-symbols-rounded ml-1">arrow_forward</span>
+                </a>
+            </div>
+            <div class="bg-card-var p-6 rounded-lg shadow-lg border border-sidebar-var transition-colors-theme flex justify-between items-start">
+                <div>
+                    <h3 class="text-xl font-semibold text-color-var transition-colors-theme mb-2">Micro-App: Calculatrice de Taux</h3>
+                    <p class="text-secondary-var text-sm mb-3">Dernière modification: Hier</p>
+                    <div class="flex items-center space-x-3 text-sm">
+                        <span class="text-warning-text-var font-medium flex items-center">
+                            <span class="material-symbols-rounded text-lg mr-1">lock</span> Privé
+                        </span>
+                        <span class="text-secondary-var flex items-center">
+                            <span class="material-symbols-rounded text-lg mr-1">web_asset</span> Type: Micro-Application Web (HTML/JS)
+                        </span>
+                    </div>
+                </div>
+                <a href="/project/rate-calculator" class="text-link-var hover:text-link-hover-var font-medium flex items-center p-2 rounded-lg hover:bg-sidebar-active-var transition-colors-theme">
+                    Ouvrir l'éditeur
+                    <span class="material-symbols-rounded ml-1">arrow_forward</span>
+                </a>
+            </div>
+            <div class="lg:hidden text-center mt-8">
+                 <a href="/nouveau_project" class="inline-flex items-center justify-center p-3 bg-primary-color-var hover:bg-primary-hover-var text-white font-semibold rounded-lg shadow-lg transition duration-150">
+                    <span class="material-symbols-rounded mr-2">add</span>
+                    Créer un Nouveau Projet
+                 </a>
+            </div>
+        </div>
+        <div class="mt-12">
+            <h2 class="text-xl font-semibold mb-4 text-color-var transition-colors-theme">Journal d'Activité Récente</h2>
+            <p class="text-secondary-var mb-6 transition-colors-theme">Les 5 dernières actions significatives sur votre compte.</p>
+            <ul class="space-y-3 bg-card-var p-4 rounded-lg shadow-xl border border-sidebar-var">
+                <li class="p-3 border-b border-sidebar-var flex justify-between items-center text-sm">
+                    <span class="text-color-var font-medium">API: Endpoint /generation appelé</span>
+                    <span class="text-secondary-var">2 minutes ago</span>
+                </li>
+                <li class="p-3 border-b border-sidebar-var flex justify-between items-center text-sm">
+                    <span class="text-color-var font-medium">Connexion réussie (IP: 192.168.1.1)</span>
+                    <span class="text-secondary-var">1 heure ago</span>
+                </li>
+                <li class="p-3 border-b border-sidebar-var flex justify-between items-center text-sm">
+                    <span class="text-color-var font-medium">API: Erreur de quota /analyse</span>
+                    <span class="text-secondary-var text-red-400">3 heures ago</span>
+                </li>
+                <li class="p-3 border-b border-sidebar-var flex justify-between items-center text-sm">
+                    <span class="text-color-var font-medium">Mise à jour du profil (Nom)</span>
+                    <span class="text-secondary-var">Hier</span>
+                </li>
+                <li class="p-3 flex justify-between items-center text-sm">
+                    <span class="text-color-var font-medium">API: Endpoint /translate appelé</span>
+                    <span class="text-secondary-var">Il y a 2 jours</span>
+                </li>
+            </ul>
+            <div class="mt-4 text-right">
+                <a href="api_logs.html" class="text-sm text-link-var hover:text-link-hover-var font-medium transition-colors-theme">
+                    Voir tous les logs &rarr;
+                </a>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Logique du thème (inchangée)
+        const themeToggle = document.getElementById('theme-toggle');
+        const html = document.documentElement;
+        const updateIcon = () => {
+            const icon = themeToggle.querySelector('.material-symbols-rounded');
+            if (html.classList.contains('light')) {
+                icon.textContent = 'light_mode';
+            } else {
+                icon.textContent = 'dark_mode';
+            }
+        };
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            html.classList.remove('dark');
+            html.classList.add('light');
+        } else {
+            html.classList.add('dark');
+            html.classList.remove('light');
+        }
+        updateIcon();
+        themeToggle.addEventListener('click', () => {
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                html.classList.add('light');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.remove('light');
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+            updateIcon();
+        });
+        // Logique pour la Sidebar Gauche sur mobile
+        const sidebarLeftToggle = document.getElementById('sidebar-left-toggle');
+        const sidebarLeft = document.getElementById('sidebar-left');
+        sidebarLeftToggle.addEventListener('click', () => {
+            sidebarLeft.classList.toggle('open');
+            // Fermer l'autre sidebar si elle est ouverte pour éviter le chevauchement
+            sidebarRight.classList.remove('open');
+        });
+        // Logique pour la Sidebar Droite sur mobile
+        const sidebarRightToggle = document.getElementById('sidebar-right-toggle');
+        const sidebarRight = document.getElementById('sidebar-right');
+        sidebarRightToggle.addEventListener('click', () => {
+            sidebarRight.classList.toggle('open');
+            // Fermer l'autre sidebar si elle est ouverte
+            sidebarLeft.classList.remove('open');
+        });
+        // Logique de Déconnexion (Conservée)
+        const logoutHandler = async (e) => {
+            e.preventDefault();
+            // Simulation de la redirection pour la déconnexion
+            window.location.href = document.getElementById('logout-button-sidebar').href;
+        };
+        // On attache l'événement à la déconnexion dans la sidebar.
+        document.getElementById('logout-button-sidebar').addEventListener('click', logoutHandler);
+    </script>
+</body>
+</html>

templates/documentation.html ADDED Viewed

	@@ -0,0 +1,285 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Documentation API - Nexus</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        .code-block {
+            background-color: #1f2937; /* gray-800 */
+            border: 1px solid #3b82f6; /* blue-500 */
+            padding: 1rem;
+            /* Suppression des bords arrondis pour un look carré */
+            overflow-x: auto;
+            margin-top: 0.75rem;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-6xl">
+        <header class="flex flex-col sm:flex-row justify-between items-center py-4 border-b border-blue-500/50 mb-8">
+            <a href="/" class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                NEXUS
+            </a>
+            <nav class="flex items-center space-x-4">
+                <a href="/tarifs" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                    Tarifs
+                </a>
+                <a href="/a-propos" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                    À Propos
+                </a>
+                {% if is_logged_in %}
+                    <a href="/dashboard" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 font-medium transition duration-200">
+                        Dashboard
+                    </a>
+                {% else %}
+                    <a href="/connexion" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 font-medium transition duration-200">
+                        Connexion
+                    </a>
+                {% endif %}
+            </nav>
+        </header>
+        <main class="space-y-16">
+            <section class="text-center p-8 bg-gray-800/50 shadow-lg border border-gray-700">
+                <h1 class="text-5xl font-extrabold text-white mb-4 leading-tight">
+                    Documentation de l'API Nexus
+                </h1>
+                <p class="text-xl text-gray-300 max-w-4xl mx-auto">
+                    Le guide complet pour intégrer l'authentification et la gestion utilisateur la plus sécurisée du marché dans vos applications, quel que soit votre langage.
+                </p>
+            </section>
+            <section class="space-y-6">
+                <h2 class="text-4xl font-extrabold text-blue-500 border-b-2 border-gray-700 pb-3">
+                    1. Vue d'Ensemble & Clés API
+                </h2>
+                <p class="text-gray-300">
+                    L'API Nexus est structurée autour d'une ressource unique pour l'authentification. Tous les appels nécessitent votre **Clé API** (`X-API-KEY`) pour l'identification de votre application, et un **Token JWT** pour les actions utilisateur spécifiques.
+                </p>
+                <div class="grid md:grid-cols-2 gap-6">
+                    <div class="p-4 bg-gray-800 border-l-4 border-teal-500 shadow-md">
+                        <h3 class="text-xl font-semibold text-teal-400 mb-2">Endpoint de Base :</h3>
+                        <p class="font-mono text-sm code-block p-2 border-none">
+                            <code class="text-gray-100">https://api.nexus-pro.com/v1/auth</code>
+                        </p>
+                        <p class="text-xs text-gray-400 mt-2">Ce chemin est la base de toutes les opérations d'authentification.</p>
+                    </div>
+                    <div class="p-4 bg-gray-800 border-l-4 border-yellow-500 shadow-md">
+                        <h3 class="text-xl font-semibold text-yellow-400 mb-2">Clé API (Sécurité) :</h3>
+                        <p class="font-mono text-sm code-block p-2 border-none">
+                            <code class="text-gray-100">X-API-KEY: VOTRE_CLE_API_SECRETE</code>
+                        </p>
+                        <p class="text-xs text-gray-400 mt-2">À inclure dans l'entête de chaque requête (sauf mention contraire).</p>
+                    </div>
+                </div>
+            </section>
+            <section class="space-y-8">
+                <h2 class="text-4xl font-extrabold text-blue-500 border-b-2 border-gray-700 pb-3">
+                    2. Flux d'Authentification
+                </h2>
+                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1">
+                    2.1 S'inscrire (POST /register)
+                </h3>
+                <p class="text-gray-300">
+                    Crée un nouvel utilisateur. Le système retourne le token JWT si l'inscription est réussie.
+                </p>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <p class="text-lg font-bold text-teal-400 mb-2">cURL (Exemple Rapide)</p>
+                        <pre class="code-block"><code class="language-bash">curl -X POST &quot;https://api.nexus-pro.com/v1/auth/register&quot; \
+-H &quot;X-API-KEY: VOTRE_CLE_API_SECRETE&quot; \
+-H &quot;Content-Type: application/json&quot; \
+-d '{
+  &quot;email&quot;: &quot;utilisateur@exemple.com&quot;,
+  &quot;password&quot;: &quot;motdepassefort123&quot;
+}'</code></pre>
+                    </div>
+                    <div>
+                        <p class="text-lg font-bold text-teal-400 mb-2">Python (`requests`)</p>
+                        <pre class="code-block"><code class="language-python">import requests
+import json
+url = "https://api.nexus-pro.com/v1/auth/register"
+headers = {
+    "X-API-KEY": "VOTRE_CLE_API_SECRETE",
+    "Content-Type": "application/json"
+}
+payload = {"email": "user@example.com", "password": "strongpassword123"}
+response = requests.post(url, headers=headers, json=payload)
+print(response.json())</code></pre>
+                    </div>
+                    <div class="md:col-span-2">
+                         <p class="text-lg font-bold text-teal-400 mb-2">JavaScript (Fetch)</p>
+                        <pre class="code-block"><code class="language-javascript">const url = 'https://api.nexus-pro.com/v1/auth/register';
+const response = await fetch(url, {
+  method: 'POST',
+  headers: {
+    'X-API-KEY': 'VOTRE_CLE_API_SECRETE',
+    'Content-Type': 'application/json'
+  },
+  body: JSON.stringify({
+    email: 'user@example.com',
+    password: 'strongpassword123'
+  })
+});
+const data = await response.json();
+console.log(data);</code></pre>
+                    </div>
+                </div>
+                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1 pt-6">
+                    2.2 Se connecter (POST /login)
+                </h3>
+                <p class="text-gray-300">
+                    Authentifie un utilisateur existant. La réponse contient le **Token JWT** pour les requêtes futures.
+                </p>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <p class="text-lg font-bold text-teal-400 mb-2">cURL</p>
+                        <pre class="code-block"><code class="language-bash">curl -X POST &quot;https://api.nexus-pro.com/v1/auth/login&quot; \
+-H &quot;X-API-KEY: VOTRE_CLE_API_SECRETE&quot; \
+-H &quot;Content-Type: application/json&quot; \
+-d '{
+  &quot;email&quot;: &quot;utilisateur@exemple.com&quot;,
+  &quot;password&quot;: &quot;motdepassefort123&quot;
+}'</code></pre>
+                    </div>
+                    <div>
+                        <p class="text-lg font-bold text-teal-400 mb-2">Python (`requests`)</p>
+                        <pre class="code-block"><code class="language-python">import requests
+url = "https://api.nexus-pro.com/v1/auth/login"
+headers = {
+    "X-API-KEY": "VOTRE_CLE_API_SECRETE",
+    "Content-Type": "application/json"
+}
+payload = {"email": "user@example.com", "password": "strongpassword123"}
+response = requests.post(url, headers=headers, json=payload)
+token = response.json().get('jwt_token')
+print(f"Token: {token}")</code></pre>
+                    </div>
+                </div>
+            </section>
+            <section class="space-y-8">
+                <h2 class="text-4xl font-extrabold text-blue-500 border-b-2 border-gray-700 pb-3">
+                    3. Gestion des Données Utilisateur (Token Requis)
+                </h2>
+                <p class="text-gray-300">
+                    Toutes les requêtes de cette section doivent inclure l'entête <strong class="text-yellow-400">`Authorization: Bearer VOTRE_TOKEN_JWT`</strong> obtenu lors de la connexion.
+                </p>
+                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1">
+                    3.1 Récupérer les Informations Utilisateur (GET /user)
+                </h3>
+                <p class="text-gray-300">
+                    Récupère le profil de l'utilisateur associé au Token JWT fourni.
+                </p>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <p class="text-lg font-bold text-teal-400 mb-2">cURL</p>
+                        <pre class="code-block"><code class="language-bash">curl -X GET &quot;https://api.nexus-pro.com/v1/auth/user&quot; \
+-H &quot;Authorization: Bearer VOTRE_TOKEN_JWT&quot;</code></pre>
+                    </div>
+                    <div>
+                        <p class="text-lg font-bold text-teal-400 mb-2">JavaScript (Fetch)</p>
+                        <pre class="code-block"><code class="language-javascript">const url = 'https://api.nexus-pro.com/v1/auth/user';
+const userToken = localStorage.getItem('nexus_jwt'); // Exemple de récupération
+const response = await fetch(url, {
+  method: 'GET',
+  headers: { 'Authorization': `Bearer ${userToken}` }
+});
+const data = await response.json();
+console.log(data);</code></pre>
+                    </div>
+                </div>
+                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1 pt-6">
+                    3.2 Mettre à Jour les Informations (PUT /user/update)
+                </h3>
+                <p class="text-gray-300">
+                    Permet de modifier les informations de l'utilisateur (nom, prénom, etc.). Seuls les champs fournis sont mis à jour.
+                </p>
+                <div class="grid md:grid-cols-2 gap-8">
+                    <div>
+                        <p class="text-lg font-bold text-teal-400 mb-2">cURL</p>
+                        <pre class="code-block"><code class="language-bash">curl -X PUT &quot;https://api.nexus-pro.com/v1/auth/user/update&quot; \
+-H &quot;Authorization: Bearer VOTRE_TOKEN_JWT&quot; \
+-H &quot;Content-Type: application/json&quot; \
+-d '{
+  &quot;first_name&quot;: &quot;Jean&quot;,
+  &quot;last_name&quot;: &quot;Dupont&quot;
+}'</code></pre>
+                    </div>
+                    <div>
+                        <p class="text-lg font-bold text-teal-400 mb-2">Python (`requests`)</p>
+                        <pre class="code-block"><code class="language-python">import requests
+url = "https://api.nexus-pro.com/v1/auth/user/update"
+token = "VOTRE_TOKEN_JWT"
+headers = {
+    "Authorization": f"Bearer {token}",
+    "Content-Type": "application/json"
+}
+payload = {"first_name": "Jean", "last_name": "Dupont"}
+response = requests.put(url, headers=headers, json=payload)
+print(response.json())</code></pre>
+                    </div>
+                </div>
+            </section>
+            <section class="space-y-6">
+                <h2 class="text-4xl font-extrabold text-blue-500 border-b-2 border-gray-700 pb-3">
+                    4. Logs, Erreurs et Tarification
+                </h2>
+                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1">
+                    Gestion des Erreurs
+                </h3>
+                <p class="text-gray-300">
+                    Toutes les erreurs API sont retournées avec un code d'état HTTP standard (4xx pour les erreurs clients, 5xx pour les erreurs serveurs). Le corps de la réponse contiendra une description JSON détaillée de l'erreur.
+                </p>
+                <div class="code-block bg-gray-800/80 p-4 border-l-4 border-red-500 text-sm">
+                    <pre><code class="language-json">{
+  &quot;error&quot;: true,
+  &quot;status_code&quot;: 401,
+  &quot;message&quot;: &quot;Token JWT manquant ou invalide. Veuillez vous reconnecter.&quot;
+}</code></pre>
+                </div>
+                <h3 class="text-2xl font-semibold text-white border-b border-gray-800 pb-1 pt-6">
+                    Accès aux Logs Détaillés
+                </h3>
+                <p class="text-gray-300">
+                    Les utilisateurs du **Plan Professionnel** et supérieur bénéficient d'un accès à l'endpoint `/api-logs` pour un historique complet des tentatives de connexion, des échecs d'authentification et des activités du compte. Cette fonctionnalité est essentielle pour le monitoring de sécurité.
+                </p>
+                <div class="mt-4">
+                    <a href="/tarifs" class="px-6 py-3 bg-teal-600 text-white text-lg font-bold shadow-md hover:bg-teal-700 transition duration-300">
+                        Voir les Détails des Plans
+                    </a>
+                </div>
+            </section>
+        </main>
+        <footer class="mt-12 pt-6 border-t border-gray-700 text-center text-gray-500 text-sm">
+            &copy; 2024 Nexus. Documentation API.
+        </footer>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
+    <script>
+        // Active la coloration syntaxique après le chargement du DOM
+        hljs.highlightAll();
+    </script>
+</body>
+</html>

templates/index.html ADDED Viewed

	@@ -0,0 +1,992 @@

+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <title>Mailix | Validation d'Email en Temps Réel</title>
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* PHASE 1 : Configuration et Base du Style (Dark Mode Exclusif & Pro) */
+        /* Suppression de toute la logique du mode clair. */
+        :root {
+            --bg-body: #0A0A0A; /* Noir Profond */
+            --bg-card: #141414; /* Plus foncé que l'interface pour le contraste subtil */
+            --bg-section: #141414;
+            --bg-code: #141414;
+            --border-color: #4b5563; /* Gris très foncé pour les bordures */
+            --color-accent: #4ade80; /* Vert Vif */
+            --text-color: #ffffff;
+            --text-secondary: #d1d5db; /* gray-300 */
+            --text-muted: #9ca3af; /* gray-400 */
+            --text-blue: var(--color-accent); /* Remplacer le bleu par le vert accent partout */
+            --shadow-color: rgba(0, 0, 0, 0.5);
+        }
+        /* Application des variables aux styles existants et aux nouveaux éléments */
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-body);
+            color: var(--text-color);
+            min-height: 100vh;
+            /* Suppression de la transition car le mode clair est supprimé */
+        }
+        /* Fix pour le header qui est maintenant sticky */
+        .header-border { border-color: var(--border-color); }
+        .bg-header { background-color: var(--bg-body); }
+        .code-block {
+            border: 1px solid var(--border-color);
+            overflow-x: auto;
+            background-color: var(--bg-code);
+        }
+        /* Suppression du style pour theme-switch (mode clair supprimé) */
+        /* Adaptation Tailwind pour les autres éléments */
+        .section-bg {
+            background-color: var(--bg-section);
+            border-color: var(--border-color);
+            box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
+        }
+        /* PHASE 1.3/4.1 : Cartes et Contraste (Border Subtile) */
+        .card-bg {
+            background-color: var(--bg-card);
+            border: 1px solid var(--border-color);
+        }
+        .text-blue-500-var { color: var(--text-blue); }
+        .text-gray-300-var { color: var(--text-secondary); }
+        .text-gray-400-var { color: var(--text-muted); }
+        /* Ajustements spécifiques pour les éléments non couverts par une classe personnalisée */
+        .tab-button { border-bottom-color: var(--border-color); }
+        /* Mise à jour de la couleur d'accent pour l'onglet actif */
+        .tab-button.border-blue-500 { border-bottom-color: var(--color-accent) !important; color: var(--color-accent) !important; background-color: var(--bg-code) !important; }
+        .tab-button.hover\:text-white:hover { color: var(--text-color) !important; }
+        .tab-button.hover\:bg-gray-800:hover { background-color: var(--bg-card) !important; }
+        /* Remplacement du bleu par le vert pour les boutons CTA */
+        .btn-primary {
+            background-color: var(--color-accent);
+            color: var(--bg-body) !important; /* Texte noir sur vert */
+            font-weight: bold;
+            box-shadow: 0 4px 6px -1px rgba(74, 222, 128, 0.3), 0 2px 4px -2px rgba(74, 222, 128, 0.3);
+            transition: background-color 0.2s;
+        }
+        .btn-primary:hover {
+            opacity: 0.9;
+        }
+        /* Remplacement de la classe bg-blue-900/40 par son équivalent en vert */
+        .bg-green-900\/40 {
+            background-color: rgba(74, 222, 128, 0.15); /* Couleur basée sur --color-accent avec transparence */
+        }
+        /* NOUVELLE RÈGLE CSS : Défilement Infini des Témoignages (Accéléré) */
+        @keyframes scroll-rtl {
+            0% { transform: translateX(0); }
+            100% { transform: translateX(-50%); }
+        }
+        .testimonial-container {
+            overflow: hidden;
+            width: 100%;
+        }
+        .testimonials-track {
+            display: flex;
+            animation: scroll-rtl 25s linear infinite; /* ACCÉLÉRÉ: 40s à 25s */
+        }
+        .testimonials-track:hover {
+            animation-play-state: paused;
+        }
+        /* PHASE 4.1 : Témoignages (Carte avec bordure fine et fond subtil - COINS CARRÉS) */
+        .testimonial-card {
+            flex-shrink: 0;
+            width: 300px;
+            margin-right: 1.5rem;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 4px 6px -1px var(--shadow-color);
+            background-color: var(--bg-card);
+            /* Suppression de rounded-lg pour des coins carrés */
+        }
+        /* Style pour les FAQ (Menu Déroulant) */
+        .faq-item summary {
+            cursor: pointer;
+            list-style: none; /* Cache le marqueur par défaut */
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem 0;
+            font-weight: 600;
+        }
+        .faq-item summary::-webkit-details-marker {
+            display: none; /* Cache le marqueur pour Chrome/Safari */
+        }
+        /* Rotation de l'icône FAQ */
+        .faq-icon {
+            transition: transform 0.2s ease;
+        }
+        .faq-item[open] .faq-icon {
+            transform: rotate(45deg); /* Tourne l'icône en croix */
+        }
+    /* CSS Spécifique au Carrousel de Logos */
+    @keyframes scroll-logos {
+        0% { transform: translateX(0); }
+        100% { transform: translateX(-50%); }
+    }
+    .logo-container {
+        overflow: hidden;
+        width: 100%;
+        padding: 2rem 0; /* Ajout d'un padding vertical pour l'esthétique */
+        background-color: var(--bg-card);
+        border: 1px solid var(--border-color);
+    }
+    .logos-track {
+        display: flex;
+        animation: scroll-logos 20s linear infinite; /* Défilement rapide */
+        width: max-content; /* S'assure que la piste est assez large */
+    }
+    .logos-track:hover {
+        animation-play-state: paused;
+    }
+    .logo-item {
+        flex-shrink: 0;
+        width: 120px; /* Taille fixe pour le logo */
+        height: 120px;
+        margin: 0 1.5rem; /* Espace entre les logos */
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0.9; /* Légèrement transparent pour le mode sombre */
+        transition: opacity 0.3s, transform 0.3s; /* Ajout de la transition de transformation */
+    }
+    .logo-item:hover {
+        opacity: 1;
+        transform: scale(1.05); /* Petit zoom au survol pour un effet professionnel */
+    }
+    .logo-item img {
+        max-width: 100%;
+        max-height: 80px; /* Taille du logo en gros */
+        /* REMOVE FILTER: Le filtre a été retiré pour afficher les logos en couleur */
+    }
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+</head>
+<body>
+    <header class="fixed top-0 left-0 right-0 z-50 flex justify-center py-3 border-b header-border bg-header shadow-xl transition-colors duration-300">
+        <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center w-full">
+            <a href="/" class="text-4xl font-extrabold text-green-500 tracking-wider mb-2 sm:mb-0">
+                <img src="https://i.imgur.com/7Gn3toV.png" alt="Mailix Logo" class="h-8 w-auto">
+            </a>
+            <nav class="flex items-center space-x-2 sm:space-x-4">
+                <a href="/documentation" class="px-2 py-1 sm:px-4 sm:py-2 text-color hover:text-blue-500-var transition duration-200 font-medium text-sm sm:text-base">
+                    Docs
+                </a>
+                <a href="/tarifs" class="px-2 py-1 sm:px-4 sm:py-2 text-color hover:text-blue-500-var transition duration-200 font-medium text-sm sm:text-base">
+                    Tarifs
+                </a>
+                <a href="/a-propos" class="px-2 py-1 sm:px-4 sm:py-2 text-color hover:text-blue-500-var transition duration-200 font-medium text-sm sm:text-base hidden md:block">
+                    Enterprise
+                </a>
+                <a href="/support" class="px-2 py-1 sm:px-4 sm:py-2 text-color hover:text-blue-500-var transition duration-200 font-medium text-sm sm:text-base hidden sm:block">
+                    Support
+                </a>
+                <a href="/connexion" class="px-3 py-1 sm:px-4 sm:py-2 text-white btn-primary transition duration-200 text-sm sm:text-base">
+                    Connexion
+                </a>
+                <a href="/inscription" class="px-3 py-1 sm:px-4 sm:py-2 border-2 border-green-500 text-green-500 hover:bg-green-500 hover:text-black font-medium transition duration-200 hidden sm:block text-sm sm:text-base">
+                    Inscription
+                </a>
+                </nav>
+        </div>
+    </header>
+    <div class="pt-20 container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <main class="space-y-24">
+            <section class="py-20"> <div class="flex flex-col items-start justify-start space-y-4"> <span class="material-symbols-rounded text-green-400 text-5xl mb-4">
+                        mail_lock
+                    </span>
+                    <h1 id="animated-title" class="text-6xl sm:text-7xl font-bold text-color leading-tight mb-4"> Validez la Délivrabilité de Vos E-mails. En temps réel, avec l'API la Plus Rapide.
+                    </h1>
+                    <p class="text-2xl text-gray-300-var max-w-4xl mr-auto mb-10"> Éliminez les adresses e-mail non valides, jetables et à risque pour garantir des listes de diffusion propres et un meilleur ROI. <strong class="text-green-400">Une API simple, une validation instantanée.</strong>
+                    </p>
+                    <form class="flex flex-col sm:flex-row items-center w-full max-w-2xl bg-gray-900 border border-[var(--border-color)] rounded-lg p-1.5 shadow-2xl">
+                        <input type="email" placeholder="Entrez un e-mail à tester (ex: test@exemple.com)" class="flex-grow w-full px-4 py-3 bg-transparent text-white placeholder-gray-500 focus:outline-none" required>
+                        <button type="submit" class="w-full sm:w-auto mt-3 sm:mt-0 px-8 py-3 btn-primary text-lg font-bold rounded-lg whitespace-nowrap">
+                            Tester la validité
+                        </button>
+                    </form>
+                </div>
+                <script>
+                    const titleElement = document.getElementById('animated-title');
+                    const text = "Validez la Délivrabilité de Vos E-mails. En temps réel, avec l'API la Plus Rapide.";
+                    titleElement.innerHTML = text; // Assure que le texte est bien affiché
+                </script>
+            </section>
+            <section>
+                <h2 class="text-4xl font-bold text-color mb-8 text-center"> Analyse Technique Approfondie de l'Adresse.
+                </h2>
+                <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12">
+                    Nous allons au-delà de la syntaxe. Chaque e-mail passe par un processus de validation multi-étapes pour garantir sa livrabilité.
+                </p>
+                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div class="card-bg p-6 shadow-xl">
+                        <span class="material-symbols-rounded text-3xl text-green-400 mb-3">dns</span> <h3 class="text-2xl font-semibold text-color mb-3">Vérification des Enregistrements MX</h3>
+                        <p class="text-gray-300-var text-sm">Nous confirmons l'existence d'un serveur de messagerie valide (MX Record) pour le domaine, excluant les domaines non fonctionnels.</p>
+                    </div>
+                    <div class="card-bg p-6 shadow-xl">
+                        <span class="material-symbols-rounded text-3xl text-yellow-400 mb-3">route</span> <h3 class="text-2xl font-semibold text-color mb-3">Vérification des Adresses A/PTR</h3>
+                        <p class="text-gray-300-var text-sm">Validation du processus inverse (Reverse DNS) pour détecter les adresses de serveurs suspects ou mal configurés.</p>
+                    </div>
+                    <div class="card-bg p-6 shadow-xl">
+                        <span class="material-symbols-rounded text-3xl text-purple-400 mb-3">connect_without_contact</span> <h3 class="text-2xl font-semibold text-color mb-3">Simulation SMTP</h3>
+                        <p class="text-gray-300-var text-sm">Connexion à l'hôte pour confirmer la validité de la boîte de réception sans envoyer de message. Méthode non intrusive et précise.</p>
+                    </div>
+                    <div class="card-bg p-6 shadow-xl">
+                        <span class="material-symbols-rounded text-3xl text-cyan-400 mb-3">timer</span> <h3 class="text-2xl font-semibold text-color mb-3">Analyse de Vitesse</h3>
+                        <p class="text-gray-300-var text-sm">Le processus complet prend moins de 300ms, permettant une validation en temps réel sur vos formulaires d'inscription.</p>
+                    </div>
+                </div>
+            </section>
+<section class="py-12">
+    <h2 class="text-4xl font-bold text-color mb-4 text-center">
+        Technologies Supportées pour une Intégration Rapide.
+    </h2>
+    <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12">
+        Mailix est conçu pour s'intégrer facilement dans n'importe quelle pile technologique, du frontend au backend.
+    </p>
+    <div class="logo-container">
+        <div class="logos-track" id="logos-track-content">
+            <div class="logo-item" title="Python"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg" alt="Python Logo"></div>
+            <div class="logo-item" title="Node.js"><img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg" alt="Node.js Logo"></div>
+            <div class="logo-item" title="PHP"><img src="https://upload.wikimedia.org/wikipedia/commons/2/27/PHP-logo.svg" alt="PHP Logo"></div>
+            <div class="logo-item" title="Ruby"><img src="https://upload.wikimedia.org/wikipedia/commons/7/73/Ruby_logo.svg" alt="Ruby Logo"></div>
+            <div class="logo-item" title="AWS (Amazon Web Services)"><img src="https://upload.wikimedia.org/wikipedia/commons/9/93/Amazon_Web_Services_Logo.svg" alt="AWS Logo"></div>
+            <div class="logo-item" title="Google Cloud Platform"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Google_Cloud_logo.svg" alt="Google Cloud Logo"></div>
+            <div class="logo-item" title="React"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React Logo"></div>
+            <div class="logo-item" title="Vue.js"><img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.js Logo"></div>
+            <div class="logo-item" title="Angular"><img src="https://upload.wikimedia.org/wikipedia/commons/c/cf/Angular_full_color_logo.svg" alt="Angular Logo"></div>
+            <div class="logo-item" title="Laravel"><img src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Laravel.svg" alt="Laravel Logo"></div>
+        </div>
+    </div>
+</section>
+            <section>
+                <h2 class="text-4xl font-bold text-color mb-8 text-center">
+                    Cas d'Usage Détaillés pour l'Entreprise.
+                </h2>
+                <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12">
+                    Intégrez Mailix pour résoudre les défis critiques de votre pile marketing et de sécurité.
+                </p>
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="card-bg p-6">
+                        <span class="material-symbols-rounded text-4xl text-green-500 mb-4">security</span>
+                        <h3 class="text-2xl font-semibold text-color mb-3">Sécurisation des Inscriptions</h3>
+                        <p class="text-gray-300-var">Validez les e-mails en temps réel sur vos formulaires pour bloquer les robots et les inscriptions frauduleuses dès le premier contact.</p>
+                    </div>
+                    <div class="card-bg p-6">
+                        <span class="material-symbols-rounded text-4xl text-yellow-500 mb-4">cleaning_services</span>
+                        <h3 class="text-2xl font-semibold text-color mb-3">Nettoyage de Base de Données</h3>
+                        <p class="text-gray-300-var">Passez en revue et supprimez les e-mails obsolètes, invalides ou non livrables de vos listes existantes pour optimiser la réputation de votre expéditeur.</p>
+                    </div>
+                    <div class="card-bg p-6">
+                        <span class="material-symbols-rounded text-4xl text-blue-500 mb-4">attach_money</span>
+                        <h3 class="text-2xl font-semibold text-color mb-3">Prévention de la Fraude aux Promotions</h3>
+                        <p class="text-gray-300-var">Détectez les adresses jetables utilisées pour abuser des offres de bienvenue ou des codes de réduction.</p>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-4xl font-bold text-color mb-8 text-center"> Protection contre les Adresses Risquées.
+                </h2>
+                <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12">
+                    Réduisez votre taux de plaintes et de hard bounces en identifiant les e-mails nuisibles avant qu'ils n'atteignent votre liste.
+                </p>
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="card-bg p-6 text-center">
+                        <span class="material-symbols-rounded text-4xl text-red-500 mb-4">block</span> <h3 class="text-2xl font-semibold text-color mb-3">E-mails Jetables (Temp Mail)</h3>
+                        <p class="text-gray-300-var">Détection et blocage des domaines connus pour l'utilisation d'e-mails temporaires, qui nuisent à l'engagement à long terme.</p>
+                    </div>
+                    <div class="card-bg p-6 text-center">
+                        <span class="material-symbols-rounded text-4xl text-indigo-400 mb-4">group</span> <h3 class="text-2xl font-semibold text-color mb-3">Rôles Génériques et Abusifs</h3>
+                        <p class="text-gray-300-var">Identification des adresses génériques (`info@`, `support@`) ou potentiellement abusives, qui peuvent gonfler vos coûts.</p>
+                    </div>
+                    <div class="card-bg p-6 text-center">
+                        <span class="material-symbols-rounded text-4xl text-pink-500 mb-4">skull</span> <h3 class="text-2xl font-semibold text-color mb-3">Domaines à Risque (Anti-Phishing)</h3>
+                        <p class="text-gray-300-var">Base de données mise à jour en temps réel des domaines signalés pour le spam, l'hameçonnage ou les activités malveillantes.</p>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-4xl font-bold text-color mb-8 text-center"> Performance et Scalabilité API.
+                </h2>
+                <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12">
+                    Gérez des volumes massifs avec notre API construite pour la vitesse, la fiabilité et le suivi précis de vos consommations.
+                </p>
+                <div class="grid md:grid-cols-3 gap-6">
+                    <div class="card-bg p-6 text-center">
+                        <span class="material-symbols-rounded text-4xl text-green-500 mb-4">rocket_launch</span> <h3 class="text-2xl font-semibold text-color mb-3">Vitesse Éclair</h3>
+                        <p class="text-gray-300-var">Moins de 50ms de latence pour la majorité des requêtes. Validez en temps réel sans ralentir votre UX.</p>
+                    </div>
+                    <div class="card-bg p-6 text-center">
+                        <span class="material-symbols-rounded text-4xl text-yellow-500 mb-4">monitoring</span> <h3 class="text-2xl font-semibold text-color mb-3">Dashboard de Consommation</h3>
+                        <p class="text-gray-300-var">Suivez l'utilisation de vos crédits, le taux de validation et l'historique des appels via un tableau de bord intuitif.</p>
+                    </div>
+                    <div class="card-bg p-6 text-center">
+                        <span class="material-symbols-rounded text-4xl text-blue-500 mb-4">vpn_key</span> <h3 class="text-2xl font-semibold text-color mb-3">Sécurité API</h3>
+                        <p class="text-gray-300-var">Clés API sécurisées, protection contre les abus et conformité totale avec les standards OAuth 2.0.</p>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-4xl font-bold text-color mb-6 text-center"> Intégration Instantanée
+                </h2>
+                <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-8">
+                    Validez une adresse e-mail en quelques lignes de code seulement.
+                </p>
+                <div class="w-full">
+                    <div id="language-tabs" class="flex flex-wrap sm:flex-nowrap mb-0 border-b border-[var(--border-color)]">
+                        <button data-lang="python" class="tab-button px-4 py-3 text-lg font-semibold border-b-2 border-green-500 text-green-500 bg-gray-800 hover:bg-gray-700 flex-grow sm:flex-grow-0 transition duration-200">
+                            Python
+                        </button>
+                         <button data-lang="javascript" class="tab-button px-4 py-3 text-lg font-semibold border-b-2 border-transparent text-gray-400-var hover:text-white hover:bg-gray-800 flex-grow sm:flex-grow-0 transition duration-200">
+                            JavaScript
+                        </button>
+                         <button data-lang="php" class="tab-button px-4 py-3 text-lg font-semibold border-b-2 border-transparent text-gray-400-var hover:text-white hover:bg-gray-800 flex-grow sm:flex-grow-0 transition duration-200">
+                            PHP
+                        </button>
+                         <button data-lang="bash" class="tab-button px-4 py-3 text-lg font-semibold border-b-2 border-transparent text-gray-400-var hover:text-white hover:bg-gray-800 flex-grow sm:flex-grow-0 transition duration-200">
+                            cURL (Bash)
+                        </button>
+                    </div>
+                    <div id="code-content" class="code-block p-4 pt-6 text-sm">
+                        <pre><code id="code-python" class="language-python tab-code">import requests
+import json
+# URL de l'API Mailix pour la validation d'e-mail
+url = "https://mailix-mail-validation.api/api/validate"
+headers = {"Content-Type": "application/json"}
+payload = {"email": "utilisateur@example.com"}
+# Envoi de la requête POST
+response = requests.post(url, headers=headers, data=json.dumps(payload))
+print(response.json())
+# Résultat: {"is_valid": true, "domain_status": "ok", "disposable": false}</code></pre>
+                        <pre class="hidden"><code id="code-javascript" class="language-javascript tab-code">const validateEmail = async () => {
+  // URL de l'API Mailix pour la validation d'e-mail
+  const url = 'https://mailix-mail-validation.api/api/validate';
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      email: 'utilisateur@example.com'
+    })
+  });
+  const data = await response.json();
+  console.log(data);
+};
+validateEmail();</code></pre>
+                        <pre class="hidden"><code id="code-php" class="language-php tab-code">&lt;?php
+// URL de l'API Mailix pour la validation d'e-mail
+$url = "https://mailix-mail-validation.api/api/validate";
+$data = array("email" => "utilisateur@example.com");
+$curl = curl_init();
+curl_setopt_array($curl, array(
+  CURLOPT_URL => $url,
+  CURLOPT_RETURNTRANSFER => true,
+  CURLOPT_POST => true,
+  CURLOPT_HTTPHEADER => array('Content-Type: application/json'),
+  CURLOPT_POSTFIELDS => json_encode($data)
+));
+$response = curl_exec($curl);
+curl_close($curl);
+print_r(json_decode($response, true));
+?&gt;</code></pre>
+                        <pre class="hidden"><code id="code-bash" class="language-bash tab-code"># URL de l'API Mailix pour la validation d'e-mail
+curl -X POST \
+  -H "Content-Type: application/json" \
+  -d '{"email": "utilisateur@example.com"}' \
+  "https://mailix-mail-validation.api/api/validate"</code></pre>
+                    </div>
+                </div>
+            </section>
+            <section class="bg-green-900/40 p-8 shadow-xl border border-green-600">
+                <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8">
+                    <span class="material-symbols-rounded w-12 h-12 text-green-400 flex-shrink-0 text-5xl">bolt</span> <div>
+                        <h3 class="text-3xl font-bold text-color mb-2">Conçu pour l'Évolutivité Illimitée</h3>
+                        <p class="text-green-200">
+                            Notre architecture est élastique. De 10 à 10 millions de validations, Mailix s'adapte automatiquement. Atteignez la croissance sans jamais vous soucier des limites techniques. Découvrez notre <a href="/documentation" class="text-yellow-400 underline font-semibold">documentation d'architecture</a>.
+                        </p>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-4xl font-bold text-color mb-4 text-center"> La sécurité est notre priorité absolue.
+                </h2>
+                <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12">
+                    Dormez sur vos deux oreilles grâce à une plateforme qui respecte les standards les plus stricts du marché.
+                </p>
+                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div class="card-bg p-6 space-y-2">
+                        <span class="material-symbols-rounded text-2xl text-green-400">shield_with_key</span> <h3 class="font-semibold text-color">Validation Multi-Facteur</h3>
+                        <p class="text-gray-300-var text-sm">Prise en charge native et intégrée des jetons TOTP et des clés de sécurité WebAuthn pour un niveau de protection supérieur.</p>
+                    </div>
+                    <div class="card-bg p-6 space-y-2">
+                        <span class="material-symbols-rounded text-2xl text-green-400">encrypted</span>
+                        <h3 class="font-semibold text-color">Chiffrement Complet</h3>
+                        <p class="text-gray-300-var text-sm">Chiffrement des données de l'utilisateur au repos (AES-256) et communication sécurisée via TLS/SSL.</p>
+                    </div>
+                    <div class="card-bg p-6 space-y-2">
+                        <span class="material-symbols-rounded text-2xl text-purple-400">balance</span>
+                        <h3 class="font-semibold text-color">Conformité RGPD / CCPA</h3>
+                        <p class="text-gray-300-var text-sm">Gestion des données utilisateurs conforme aux réglementations mondiales (RGPD, CCPA, etc.).</p>
+                    </div>
+                    <div class="card-bg p-6 space-y-2">
+                        <span class="material-symbols-rounded text-2xl text-yellow-400">link</span>
+                        <h3 class="font-semibold text-color">Standards Ouverts</h3>
+                        <p class="text-gray-300-var text-sm">Support natif et complet des protocoles OAuth 2.0, OpenID Connect (OIDC) et SAML 2.0.</p>
+                    </div>
+                    <div class="card-bg p-6 space-y-2">
+                        <span class="material-symbols-rounded text-2xl text-teal-400">history_toggle_off</span>
+                        <h3 class="font-semibold text-color">Journaux d'Audit (Logs)</h3>
+                        <p class="text-gray-300-var text-sm">Historique des événements de validation et d'accès en temps réel pour le monitoring et la traçabilité.</p>
+                    </div>
+                    <div class="card-bg p-6 space-y-2">
+                        <span class="material-symbols-rounded text-2xl text-pink-400">group_add</span>
+                        <h3 class="font-semibold text-color">Authentification Fédérée</h3>
+                        <p class="text-gray-300-var text-sm">Connexion facilitée via les fournisseurs d'identité sociaux et d'entreprise (Google, Microsoft, etc.).</p>
+                    </div>
+                    <div class="card-bg p-6 space-y-2">
+                        <span class="material-symbols-rounded text-2xl text-red-400">sos</span>
+                        <h3 class="font-semibold text-color">Prévention des Attaques</h3>
+                        <p class="text-gray-300-var text-sm">Limitation de taux (Rate Limiting), détection de bots et blocage des IP malveillantes automatique.</p>
+                    </div>
+                    <div class="card-bg p-6 space-y-2">
+                        <span class="material-symbols-rounded text-2xl text-indigo-400">bug_report</span>
+                        <h3 class="font-semibold text-color">Programme Bug Bounty</h3>
+                        <p class="text-gray-300-var text-sm">Collaboration avec la communauté de la sécurité pour identifier et corriger les vulnérabilités en continu.</p>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-4xl font-bold text-color mb-4 text-center"> Statistiques de Performance Clés
+                </h2>
+                <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12">
+                    L'architecture globale de Mailix garantit fiabilité et rapidité, essentielles à votre infrastructure.
+                </p>
+                <div class="grid md:grid-cols-3 gap-8 mb-12 text-center">
+                    <div class="card-bg p-6 shadow-xl">
+                        <h4 class="text-5xl font-bold text-green-400 mb-2">99.99%</h4>
+                        <p class="text-lg font-semibold text-color">SLA Garanti</p>
+                        <p class="text-gray-300-var text-sm">Fiabilité maximale, votre service est toujours disponible.</p>
+                    </div>
+                    <div class="card-bg p-6 shadow-xl">
+                        <h4 class="text-5xl font-bold text-orange-400 mb-2">&lt; 50ms</h4>
+                        <p class="text-lg font-semibold text-color">Latence Globale</p>
+                        <p class="text-gray-300-var text-sm">Temps de réponse de l'API optimisé pour une expérience utilisateur rapide.</p>
+                    </div>
+                    <div class="card-bg p-6 shadow-xl">
+                        <h4 class="text-5xl font-bold text-lime-400 mb-2">10M+</h4>
+                        <p class="text-lg font-semibold text-color">Validations / Mois</p>
+                        <p class="text-gray-300-var text-sm">Capacité à gérer la croissance horizontale et les pics de trafic sans effort.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="py-12"> <h2 class="text-4xl font-bold text-color mb-4 text-center"> Ce que nos clients disent de Mailix.
+                </h2>
+                <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12">
+                    Plus de 15 témoignages qui illustrent la puissance et la fiabilité de notre plateforme.
+                </p>
+                <div class="testimonial-container">
+                    <div class="testimonials-track" id="testimonials-track-content">
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"Mailix a réduit nos temps d'intégration de trois semaines à deux jours. La documentation est impeccable et le support réactif."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        J
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Jean Dupont</p>
+                                        <p class="text-sm text-gray-400-var">CTO chez TechFusion</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:jean.dupont@techfusion.com" class="text-sm font-medium text-blue-500-var hover:underline">jean.dupont@techfusion.com</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"La bascule vers Mailix a été un jeu d'enfant. Notre taux d'erreur d'authentification est tombé à presque zéro."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        S
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Sophie Martin</p>
+                                        <p class="text-sm text-gray-400-var">Développeuse Lead chez InnovApp</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:sophie.martin@innovapp.fr" class="text-sm font-medium text-blue-500-var hover:underline">sophie.martin@innovapp.fr</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"La fonction MFA intégrée a été essentielle pour la conformité de notre plateforme B2B. Un outil robuste et fiable."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        D
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">David Dubois</p>
+                                        <p class="text-sm text-gray-400-var">Chef de Produit chez GlobalSec</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:david.dubois@globalsec.com" class="text-sm font-medium text-blue-500-var hover:underline">david.dubois@globalsec.com</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"Scalabilité prouvée : nous avons géré notre pic de Noël sans la moindre latence. Chapeau à l'équipe Mailix."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        M
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Marc Lavoie</p>
+                                        <p class="text-sm text-gray-400-var">Architecte Cloud chez E-Commerce X</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:marc.lavoie@ecommercex.ca" class="text-sm font-medium text-blue-500-var hover:underline">marc.lavoie@ecommercex.ca</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"La rapidité de validation nous a permis de réduire notre taux de bounce de 15%."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        E
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Emma Tremblay</p>
+                                        <p class="text-sm text-gray-400-var">Responsable Marketing chez CreativeHub</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:emma.tremblay@creativehub.com" class="text-sm font-medium text-blue-500-var hover:underline">emma.tremblay@creativehub.com</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"Une API propre et simple. Moins de temps passé sur la validation, plus sur notre cœur de métier."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        L
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Lucas Petit</p>
+                                        <p class="text-sm text-gray-400-var">Dev Backend chez DataStream</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:lucas.petit@datastream.io" class="text-sm font-medium text-blue-500-var hover:underline">lucas.petit@datastream.io</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"Le meilleur rapport performance/prix pour une solution d'authentification d'entreprise. Je recommande fortement."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        C
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Chloé Lefevre</p>
+                                        <p class="text-sm text-gray-400-var">COO chez FinTech Z</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:chloe.lefevre@fintechz.com" class="text-sm font-medium text-blue-500-var hover:underline">chloe.lefevre@fintechz.com</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"La transition des données de notre ancien système a été la partie la plus facile de notre refonte, grâce aux outils Mailix."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        A
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Alexandre Roy</p>
+                                        <p class="text-sm text-gray-400-var">Ingénieur DevOps chez Legacy Solutions</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:alexandre.roy@legacy.io" class="text-sm font-medium text-blue-500-var hover:underline">alexandre.roy@legacy.io</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"Mailix est le standard de facto pour la gestion des identités modernes. Nous ne regardons plus en arrière."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        J
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Julie Gauthier</p>
+                                        <p class="text-sm text-gray-400-var">VP Engineering chez FuturePath</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:julie.gauthier@futurepath.com" class="text-sm font-medium text-blue-500-var hover:underline">julie.gauthier@futurepath.com</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"La surveillance des logs en temps réel nous permet d'identifier et de répondre aux menaces instantanément."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        N
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Nicolas Bernard</p>
+                                        <p class="text-sm text-gray-400-var">Spécialiste Cybersécurité chez SecureNet</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:nicolas.bernard@securenet.io" class="text-sm font-medium text-blue-500-var hover:underline">nicolas.bernard@securenet.io</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"Nos clients B2B apprécient la facilité du SSO. C'est un argument de vente majeur pour nous."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        C
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Caroline Gagnon</p>
+                                        <p class="text-sm text-gray-400-var">Directrice Commerciale chez B2B Connect</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:caroline.gagnon@b2bconnect.ca" class="text-sm font-medium text-blue-500-var hover:underline">caroline.gagnon@b2bconnect.ca</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"Les SDKs sont incroyablement bien documentés. Intégration en moins d'une heure pour notre application React."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        F
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Frédéric Leblanc</p>
+                                        <p class="text-sm text-gray-400-var">Développeur Frontend chez App Studio</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:frederic.leblanc@appstudio.com" class="text-sm font-medium text-blue-500-var hover:underline">frederic.leblanc@appstudio.com</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"Mailix a réduit nos temps d'intégration de trois semaines à deux jours. La documentation est impeccable et le support réactif."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        J
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Jean Dupont</p>
+                                        <p class="text-sm text-gray-400-var">CTO chez TechFusion</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:jean.dupont@techfusion.com" class="text-sm font-medium text-blue-500-var hover:underline">jean.dupont@techfusion.com</a>
+                            </div>
+                        </div>
+                        <div class="testimonial-card p-6">
+                            <p class="text-xl italic text-gray-300-var mb-4">"La bascule vers Mailix a été un jeu d'enfant. Notre taux d'erreur d'authentification est tombé à presque zéro."</p>
+                            <div class="flex flex-col">
+                                <div class="flex items-center mb-2">
+                                    <div class="w-10 h-10 bg-green-500 flex items-center justify-center text-black font-bold text-lg mr-3">
+                                        S
+                                    </div>
+                                    <div>
+                                        <p class="font-bold text-color">Sophie Martin</p>
+                                        <p class="text-sm text-gray-400-var">Développeuse Lead chez InnovApp</p>
+                                    </div>
+                                </div>
+                                <a href="mailto:sophie.martin@innovapp.fr" class="text-sm font-medium text-blue-500-var hover:underline">sophie.martin@innovapp.fr</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section class="py-12">
+                <h2 class="text-4xl font-bold text-color mb-4 text-center">
+                    FAQ (Foire Aux Questions)
+                </h2>
+                <p class="text-lg text-gray-400-var max-w-3xl mx-auto text-center mb-12">
+                    Trouvez rapidement les réponses à vos questions techniques et commerciales.
+                </p>
+                <div class="max-w-4xl mx-auto divide-y divide-[var(--border-color)] border-y border-[var(--border-color)]">
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            Qu'est-ce que la "Simulation SMTP" ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            La simulation SMTP est un test non intrusif où notre API se connecte au serveur de messagerie du destinataire et commence la procédure d'envoi, mais coupe la connexion avant d'envoyer le message final. Cela permet de confirmer l'existence et la validité de la boîte de réception sans générer de trafic e-mail indésirable.
+                        </p>
+                    </details>
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            Quel est le temps de latence moyen de l'API Mailix ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            Notre architecture distribuée et optimisée nous permet d'atteindre une latence moyenne inférieure à 50ms pour la majorité des requêtes. Cette vitesse est cruciale pour la validation d'e-mails en temps réel sur les formulaires de vos utilisateurs.
+                        </p>
+                    </details>
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            Comment gérez-vous la conformité RGPD et CCPA ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            Nous sommes entièrement conformes aux réglementations RGPD (Europe) et CCPA (Californie). Nous ne stockons aucune donnée personnelle au-delà de la durée nécessaire à la validation et nos serveurs sont configurés pour respecter les exigences de résidence des données.
+                        </p>
+                    </details>
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            Qu'est-ce qu'un "E-mail Jetable" et pourquoi le bloquer ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            Un e-mail jetable (ou temp mail) est une adresse éphémère qui expire après une courte période. Les utilisateurs les emploient souvent pour s'inscrire à des services sans intention d'engagement à long terme. Les bloquer permet de maintenir la qualité de votre liste et d'éviter les faux utilisateurs.
+                        </p>
+                    </details>
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            L'API supporte-t-elle les validations en masse ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            Oui, notre API est conçue pour la scalabilité et peut gérer de grands volumes de validation. Pour les nettoyages de base de données massifs, nous proposons également une fonctionnalité de validation de liste asynchrone pour traiter des millions d'adresses efficacement.
+                        </p>
+                    </details>
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            Quels sont les mécanismes de sécurité mis en place pour l'accès API ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            Nous utilisons des clés API sécurisées, conformes à OAuth 2.0. Toutes les communications sont chiffrées via TLS/SSL. De plus, nous appliquons une limitation de taux (Rate Limiting) agressive et une détection de bots pour prévenir les abus et les attaques DDoS.
+                        </p>
+                    </details>
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            Puis-je tester la validité d'un e-mail directement sur votre site ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            Absolument. La section d'introduction de cette page contient un champ de test en temps réel qui utilise notre API principale pour vous donner un aperçu instantané de nos capacités de validation.
+                        </p>
+                    </details>
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            Qu'est-ce qu'une vérification des Enregistrements MX ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            C'est la première étape technique pour s'assurer que le domaine de l'e-mail peut recevoir du courrier. Nous vérifions l'existence d'un enregistrement MX (Mail Exchanger) dans le DNS du domaine, ce qui est essentiel pour la livrabilité. Si cet enregistrement est manquant, l'e-mail est invalide.
+                        </p>
+                    </details>
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            Comment puis-je suivre ma consommation de crédits API ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            Chaque client a accès à un tableau de bord intuitif où il peut suivre en temps réel l'utilisation des crédits, les taux de validation, les statistiques d'erreur et l'historique détaillé de tous les appels API effectués.
+                        </p>
+                    </details>
+                    <details class="faq-item">
+                        <summary class="text-lg text-color hover:text-green-400 transition duration-200">
+                            Supportez-vous l'Authentification Fédérée (SSO) pour les clients B2B ?
+                            <span class="material-symbols-rounded faq-icon text-green-400">add</span>
+                        </summary>
+                        <p class="pb-4 text-gray-300-var">
+                            Oui, nous supportons entièrement l'Authentification Fédérée via des protocoles comme OAuth 2.0, OpenID Connect et SAML 2.0, permettant une connexion simplifiée pour vos clients d'entreprise via leurs fournisseurs d'identité (Google, Microsoft, Okta, etc.).
+                        </p>
+                    </details>
+                </div>
+            </section>
+            </main>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                const track = document.getElementById('testimonials-track-content');
+                if (track) {
+                    const cards = track.querySelectorAll('.testimonial-card');
+                    // Dupliquer les cartes pour créer l'effet de défilement infini
+                    cards.forEach(card => {
+                        const clone = card.cloneNode(true);
+                        track.appendChild(clone);
+                    });
+                }
+            });
+        </script>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const track = document.getElementById('logos-track-content');
+            if (track) {
+                const logos = track.querySelectorAll('.logo-item');
+                // Dupliquer les logos pour créer l'effet de défilement infini
+                logos.forEach(logo => {
+                    const clone = logo.cloneNode(true);
+                    track.appendChild(clone);
+                });
+            }
+        });
+    </script>
+<footer class="mt-20 py-10 bg-header border-t header-border">
+        <div class="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div class="grid grid-cols-4 gap-8 text-sm">
+                <div class="col-span-4 md:col-span-1">
+                    <h3 class="text-2xl font-bold text-green-500 mb-4">Mailix</h3> <p class="text-gray-400-var">La plateforme de validation d'e-mails la plus rapide pour vos besoins d'entreprise. Zéro Spam, Zéro Bounce.</p>
+                </div>
+                <div class="col-span-2 md:col-span-1">
+                    <h3 class="text-lg font-semibold text-color mb-4">Produit</h3>
+                    <ul class="space-y-3 text-gray-400-var">
+                        <li><a href="/tarifs" class="hover:text-blue-500-var transition duration-200">Tarifs</a></li>
+                        <li><a href="/fonctionnalites" class="hover:text-blue-500-var transition duration-200">Fonctionnalités</a></li>
+                        <li><a href="/documentation" class="hover:text-blue-500-var transition duration-200">Documentation</a></li>
+                        <li><a href="/support" class="hover:text-blue-500-var transition duration-200">Support</a></li>
+                    </ul>
+                </div>
+                <div class="col-span-2 md:col-span-1">
+                    <h3 class="text-lg font-semibold text-color mb-4">Légal</h3>
+                    <ul class="space-y-3 text-gray-400-var">
+                        <li><a href="/politique-confidentialite" class="hover:text-blue-500-var transition duration-200">Politique de Confidentialité</a></li>
+                        <li><a href="/mentions-legales" class="hover:text-blue-500-var transition duration-200">Mentions Légales</a></li>
+                        <li><a href="/conditions-utilisation" class="hover:text-blue-500-var transition duration-200">Conditions d'Utilisation</a></li>
+                        <li><a href="/a-propos" class="hover:text-blue-500-var transition duration-200">À Propos</a></li>
+                    </ul>
+                </div>
+                <div class="col-span-2 md:col-span-1">
+                    <h3 class="text-lg font-semibold text-color mb-4">Ressources</h3>
+                    <ul class="space-y-3 text-gray-400-var">
+                        <li><a href="mailto:support@mailix.com" class="hover:text-blue-500-var transition duration-200">Contact Email</a></li>
+                        <li><a href="/dashboard" class="hover:text-blue-500-var transition duration-200">Espace Client</a></li>
+                        <li><a href="/api-logs" class="hover:text-blue-500-var transition duration-200">Statut API</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="mt-10 pt-6 border-t border-[var(--border-color)]">
+                <p class="text-center text-sm text-gray-500-var">
+                    © 2025 Mailix. Tous droits réservés. Propulsé par la <a href="/" class="hover:text-blue-500-var transition duration-200">Validation d'E-mail la plus rapide</a>.
+                </p>
+            </div>
+        </div>
+    </footer>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        // Initialiser Highlight.js pour les blocs de code
+        hljs.highlightAll();
+        // Logique de l'onglet de code mise à jour (couleurs déjà en CSS)
+        document.getElementById('language-tabs').addEventListener('click', function(e) {
+            if (e.target.classList.contains('tab-button')) {
+                // Désactiver tous les onglets
+                document.querySelectorAll('.tab-button').forEach(btn => {
+                    btn.classList.remove('border-green-500', 'text-green-500', 'bg-gray-800');
+                    btn.classList.add('border-transparent', 'text-gray-400-var', 'hover:text-white', 'hover:bg-gray-800');
+                });
+                // Cacher tous les blocs de code
+                document.querySelectorAll('.tab-code').forEach(code => {
+                    code.closest('pre').classList.add('hidden');
+                });
+                // Activer l'onglet cliqué
+                e.target.classList.add('border-green-500', 'text-green-500', 'bg-gray-800');
+                e.target.classList.remove('border-transparent', 'text-gray-400-var', 'hover:text-white', 'hover:bg-gray-800');
+                // Afficher le bloc de code correspondant
+                const lang = e.target.getAttribute('data-lang');
+                document.getElementById('code-' + lang).closest('pre').classList.remove('hidden');
+                // Réinitialiser la coloration syntaxique
+                hljs.highlightAll();
+            }
+        });
+    </script>
+</body>
+</html>

templates/inscription.html ADDED Viewed

	@@ -0,0 +1,247 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Inscription - Nexus</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Transition pour un effet doux des couleurs */
+        .transition-colors-theme { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
+        /* Style et positionnement du bouton */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 24px;
+            transition: color 0.2s;
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            z-index: 10;
+        }
+        /* Définir les Variables de Thème */
+        /* Mode Sombre (Défaut : noir très foncé #121212) */
+        :root, .dark {
+            --bg-page: #121212;
+            --bg-card: #1E1E1E;
+            --text-color: #FFFFFF; /* Modifié pour blanc en mode sombre */
+            --input-bg: #2C2C2C;
+            --border-color: #383838;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --error-color: #DC2626;
+        }
+        /* Mode Clair */
+        .light {
+            --bg-page: #F5F5F5;
+            --bg-card: #FFFFFF;
+            --text-color: #000000; /* Modifié pour noir foncé en mode clair */
+            --input-bg: #FFFFFF;
+            --border-color: #D1D5DB;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --error-color: #DC2626;
+        }
+        /* Appliquer les variables au body et aux éléments */
+        .bg-page-var { background-color: var(--bg-page); }
+        .bg-card-var { background-color: var(--bg-card); }
+        .text-color-var { color: var(--text-color); }
+        .bg-input-var { background-color: var(--input-bg); }
+        .border-color-var { border-color: var(--border-color); }
+        .text-primary-color-var { color: var(--primary-color); }
+        .bg-primary-color-var { background-color: var(--primary-color); }
+        .hover\:text-primary-hover-var:hover { color: var(--primary-hover); }
+        .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color); }
+        .focus\:border-primary-color-var:focus { border-color: var(--primary-color); }
+        /* MODIFICATION DEMANDÉE : Forcer le texte saisi dans les champs de formulaire en noir foncé (#000000) */
+        input[type="text"],
+        input[type="email"],
+        input[type="password"] {
+            color: #000000 !important;
+        }
+    </style>
+</head>
+<body class="bg-page-var transition-colors-theme min-h-screen flex items-center justify-center p-4">
+    <button id="theme-toggle" class="theme-switch text-color-var hover:text-primary-color-var transition-colors-theme">
+        <span class="material-symbols-rounded">dark_mode</span>
+    </button>
+    <div class="w-full max-w-6xl flex flex-col md:flex-row shadow-2xl rounded-lg overflow-hidden">
+        <div class="hidden md:block md:w-1/2 bg-primary-color-var p-12 flex flex-col justify-center items-center text-white transition-colors-theme">
+            <svg class="w-32 h-32 mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 005.153 17.5a12.02 12.02 0 006.847 2.5a12.02 12.02 0 006.847-2.5 12.02 12.02 0 001.768-1.554z"></path>
+            </svg>
+            <h3 class="text-4xl font-extrabold mb-4 text-center">Rejoignez la Communauté Nexus</h3>
+            <p class="text-center text-lg">Créez votre compte pour accéder à l'intégralité de nos services et APIs.</p>
+        </div>
+        <div class="w-full md:w-1/2 bg-card-var transition-colors-theme p-8 md:p-12">
+            <h2 class="text-3xl font-bold text-center text-color-var mb-8 transition-colors-theme">Créer un Compte</h2>
+            <p id="message" class="text-center text-red-500 mb-4"></p>
+            <form id="registerForm">
+                <div class="flex flex-wrap -mx-2 mb-4">
+                    <div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
+                        <label for="username" class="block text-sm font-medium text-color-var">Nom d'utilisateur</label>
+                        <input type="text" id="username" name="username" placeholder="Choisissez un nom" required
+                            class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme" style="color: var(--text-color);">
+                    </div>
+                    <div class="w-full md:w-1/2 px-2">
+                        <label for="email" class="block text-sm font-medium text-color-var">Adresse Email</label>
+                        <input type="email" id="email" name="email" placeholder="votre@email.com" required
+                            class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme" style="color: var(--text-color);">
+                    </div>
+                </div>
+                <div class="flex flex-wrap -mx-2 mb-4">
+                    <div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
+                        <label for="password" class="block text-sm font-medium text-color-var">Mot de Passe</label>
+                        <input type="password" id="password" name="password" placeholder="Min. 8 caractères" required
+                            class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme" style="color: var(--text-color);">
+                    </div>
+                    <div class="w-full md:w-1/2 px-2">
+                        <label for="confirm_password" class="block text-sm font-medium text-color-var">Confirmer Mot de Passe</label>
+                        <input type="password" id="confirm_password" name="confirm_password" placeholder="Répétez votre mot de passe" required
+                            class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme" style="color: var(--text-color);">
+                    </div>
+                </div>
+                <div class="flex flex-wrap -mx-2 mb-6">
+                    <div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
+                        <label for="security_question" class="block text-sm font-medium text-color-var">Question Secrète</label>
+                        <input type="text" id="security_question" name="security_question" placeholder="Ex: Premier animal de compagnie?" required
+                            class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme" style="color: var(--text-color);">
+                    </div>
+                    <div class="w-full md:w-1/2 px-2">
+                        <label for="security_answer" class="block text-sm font-medium text-color-var">Réponse Secrète</label>
+                        <input type="text" id="security_answer" name="security_answer" placeholder="Votre réponse" required
+                            class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme" style="color: var(--text-color);">
+                    </div>
+                </div>
+                <button type="submit"
+                    class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-color-var hover:bg-primary-hover-var focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-color-var transition duration-150 ease-in-out">
+                    S'inscrire
+                </button>
+            </form>
+            <div class="mt-6 text-center">
+                <p class="text-sm text-color-var transition-colors-theme">
+                    Vous avez déjà un compte ?
+                    <a href="/connexion" class="text-primary-color-var hover:text-primary-hover-var font-medium">
+                        Connectez-vous ici
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <script>
+        const form = document.getElementById('registerForm');
+        const message = document.getElementById('message');
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            message.textContent = 'Inscription en cours...';
+            message.className = 'text-gray-500 mb-4';
+            const password = form.password.value;
+            const confirm_password = form.confirm_password.value;
+            if (password !== confirm_password) {
+                message.textContent = 'Erreur : Les mots de passe ne correspondent pas.';
+                message.className = 'text-red-500 mb-4';
+                return;
+            }
+            const formData = {
+                username: form.username.value,
+                email: form.email.value,
+                password: password,
+                confirm_password: confirm_password,
+                security_question: form.security_question.value,
+                security_answer: form.security_answer.value
+            };
+            try {
+                const response = await fetch('/api/register', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(formData)
+                });
+                const data = await response.json();
+                if (data.status === 'Success') {
+                    message.textContent = data.message + " Redirection vers le tableau de bord...";
+                    message.className = 'text-green-500 mb-4';
+                    // REDIRECTION AUTOMATIQUE VERS LE DASHBOARD
+                    setTimeout(() => {
+                        window.location.href = '/dashboard';
+                    }, 1500);
+                } else {
+                    message.textContent = 'Erreur : ' + (data.message || 'Échec de l\'inscription.');
+                    message.className = 'text-red-500 mb-4';
+                }
+            } catch (error) {
+                console.error('Erreur réseau ou du serveur Flask:', error);
+                message.textContent = 'Erreur de connexion au serveur.';
+                message.className = 'text-red-500 mb-4';
+            }
+        });
+        // Logique du thème (conservée pour l'esthétique)
+        const themeToggle = document.getElementById('theme-toggle');
+        const html = document.documentElement;
+        const updateIcon = () => {
+            const icon = themeToggle.querySelector('.material-symbols-rounded');
+            if (html.classList.contains('light')) {
+                icon.textContent = 'light_mode';
+            } else {
+                icon.textContent = 'dark_mode';
+            }
+        };
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            html.classList.remove('dark');
+            html.classList.add('light');
+        } else {
+            html.classList.add('dark');
+            html.classList.remove('light');
+        }
+        updateIcon();
+        themeToggle.addEventListener('click', () => {
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                html.classList.add('light');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.remove('light');
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+            updateIcon();
+        });
+    </script>
+</body>
+</html>

templates/mentions_legales.html ADDED Viewed

	@@ -0,0 +1,327 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mentions Légales - Nexus</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css">
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Style pour les boutons carrés */
+        .btn-square {
+            border-radius: 0;
+        }
+        /* Étape 2 : Définir les Styles (CSS) */
+        /* Variables Mode Sombre (Défaut) - Couleur noir très foncé demandée */
+        :root {
+            --bg-page: #0A0A0A; /* Noir très foncé */
+            --bg-main: #0A0A0A; /* Noir très foncé */
+            --bg-card: #121212; /* Arrière-plan des éléments (e.g., sidebar) */
+            --text-color-strong: #E3E3E3; /* White-like */
+            --text-color-main: #C0C0C0; /* Adjusted for content */
+            --text-muted: #9CA3AF; /* gray-400, for secondary text */
+            --border-color: #1F2937; /* gray-800, for borders */
+            --header-border: #3B82F6; /* blue-500/50, primary accent */
+            --toc-active-bg: #1F2937; /* Background for active TOC link (border-color) */
+        }
+        /* Variables Mode Clair */
+        html.light {
+            --bg-page: #F8F8F8;
+            --bg-main: #FFFFFF;
+            --bg-card: #F3F4F6;
+            --text-color-strong: #1F2937;
+            --text-color-main: #374151; /* gray-700 */
+            --text-muted: #6B7280; /* gray-500 */
+            --border-color: #E5E7EB;
+            --header-border: #10B981; /* teal-500/50 */
+            --toc-active-bg: #E5E7EB;
+        }
+        /* Appliquer les variables aux sélecteurs principaux pour la couverture complète */
+        .bg-gray-900 { background-color: var(--bg-page) !important; }
+        .bg-gray-800\/50 { background-color: var(--bg-card) !important; }
+        .text-white { color: var(--text-color-strong) !important; }
+        .text-gray-300 { color: var(--text-color-main) !important; } /* Contenu principal */
+        .text-gray-400 { color: var(--text-muted) !important; }
+        .text-gray-500 { color: var(--text-muted) !important; } /* Texte footer */
+        .border-gray-700 { border-color: var(--border-color) !important; }
+        .border-gray-800 { border-color: var(--border-color) !important; }
+        .border-blue-500\/50 { border-color: var(--header-border) !important; }
+        /* Styles personnalisés pour intégrer Tocbot au thème sombre et "chat-like" */
+        .toc-list {
+            list-style: none;
+            padding-left: 0;
+            margin: 0;
+        }
+        .toc-list-item {
+            margin-bottom: 0.25rem;
+        }
+        .toc-list-item a {
+            display: block;
+            padding: 0.5rem 0.75rem;
+            color: var(--text-muted);
+            border-left: 2px solid transparent;
+            transition: all 0.2s;
+            font-size: 0.9rem;
+        }
+        .toc-list-item a:hover {
+            color: var(--text-color-strong);
+            border-left-color: #3B82F6;
+        }
+        .is-active-link {
+            font-weight: 700;
+            color: #3B82F6 !important;
+            border-left-color: #3B82F6 !important;
+            background-color: var(--toc-active-bg) !important; /* Utilisation de la variable */
+            border-radius: 0;
+        }
+        /* Style du bouton theme-switch (Étape 2) */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-color-strong);
+            font-size: 28px; /* Rendu plus visible */
+            transition: color 0.2s;
+            margin-left: 1rem;
+        }
+        /* Rendre la barre de navigation horizontale stable (sticky) */
+        .sticky-header {
+            position: sticky;
+            top: 0;
+            z-index: 50; /* Tailwind z-index: 50 */
+            background-color: var(--bg-page) !important; /* Assure la couleur de fond en mode sticky */
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+        }
+        /* Rendre la barre latérale sticky et ajuster la hauteur max pour la rendre moins large verticalement */
+        /* lg:w-1/4 est conservé, mais style ajusté */
+        .lg\:h-screen {
+            height: auto; /* Supprimer la hauteur pleine écran */
+            max-height: calc(100vh - 8rem); /* Limiter la hauteur pour qu'elle soit moins large verticalement si nécessaire, tout en permettant le défilement */
+        }
+        @media (max-width: 1023px) {
+            .js-toc-container { display: none; }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <header class="sticky-header flex flex-col sm:flex-row justify-between items-center border-b border-blue-500/50 mb-8">
+            <a href="/" class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                NEXUS
+            </a>
+            <nav class="flex items-center space-x-4">
+                <a href="/support" class="px-6 py-3 bg-teal-600 text-white font-bold hover:bg-teal-700 transition duration-300 btn-square shadow-md">
+                    Contacter l'Administration
+                </a>
+                <button id="theme-toggle" class="theme-switch" aria-label="Basculer le thème">
+                    <span class="material-symbols-rounded">light_mode</span>
+                </button>
+            </nav>
+        </header>
+        <main class="flex flex-col lg:flex-row lg:space-x-8">
+            <div class="lg:w-3/4 js-toc-content">
+                <h1 class="text-4xl font-extrabold text-white mb-6">
+                    Mentions Légales
+                </h1>
+                <p class="text-gray-400 text-lg mb-10 border-l-4 border-blue-500 pl-4 italic">
+                    Ces mentions légales définissent les obligations légales de la plateforme Nexus.
+                </p>
+                <h2 id="editeur" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                    1. Informations sur l'Éditeur du Site
+                </h2>
+                <p class="text-gray-300 mb-6">
+                    Le présent site et l'API sont édités par :
+                </p>
+                <ul class="list-disc list-inside text-gray-300 space-y-2 ml-4 mb-6">
+                    <li>Dénomination Sociale : [Nom de l'Entreprise / Nom Personnel]</li>
+                    <li>Forme Juridique : [SARL / SAS / Entrepreneur Individuel, etc.]</li>
+                    <li>Adresse du Siège Social : [Adresse complète, Pays]</li>
+                    <li>Numéro d'immatriculation (RCS/SIRET) : [Numéro d'enregistrement légal]</li>
+                    <li>Capital Social : [Montant du Capital, si applicable]</li>
+                    <li>Adresse e-mail : contact@[votre-domaine].com</li>
+                    <li>Numéro de téléphone : [Numéro de téléphone de contact]</li>
+                    <li>Directeur de la publication : [Nom du Responsable Légal]</li>
+                </ul>
+                <h2 id="hebergement" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                    2. Hébergement
+                </h2>
+                <p class="text-gray-300 mb-6">
+                    L'hébergement du site web et de l'infrastructure API est assuré par :
+                </p>
+                <ul class="list-disc list-inside text-gray-300 space-y-2 ml-4 mb-6">
+                    <li>Nom de l'Hébergeur : Hugging Face</li>
+                    <li>Adresse du Siège Social : [Adresse complète de l'Hébergeur]</li>
+                    <li>Contact : https://academy.visiplus.com/blog/web-et-e-business/5-meilleurs-exemples-de-page-contact-pour-un-site-web-2018-07-23</li>
+                </ul>
+                <h2 id="propriete-intellectuelle" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                    3. Propriété Intellectuelle
+                </h2>
+                <h3 id="droits-auteur" class="text-2xl font-semibold text-white mt-8 mb-3 pt-2">
+                    3.1. Droits d'Auteur et Marques
+                </h3>
+                <p class="text-gray-300 mb-4">
+                    L'ensemble des éléments constituant la Plateforme Nexus (structure, textes, images, sons, logiciels, logos, bases de données, y compris les interfaces API) sont la propriété exclusive de [Nom de l'Entreprise] ou sont utilisés avec l'autorisation de leurs titulaires, et sont protégés par le droit d'auteur.
+                </p>
+                <p class="text-gray-300 mb-6">
+                    Toute reproduction, représentation, modification, publication, transmission ou dénaturation, totale ou partielle, du site ou de son contenu, par quelque procédé que ce soit, et sur quelque support que ce soit, est interdite. Les utilisateurs sont autorisés à utiliser l'API uniquement via la clé d'accès fournie et conformément aux Conditions d'Utilisation.
+                </p>
+                <h2 id="limitation-responsabilite" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                    4. Limitation de Responsabilité
+                </h2>
+                <p class="text-gray-300 mb-6">
+                    [Nom de l'Entreprise] s'efforce d'assurer au mieux de ses possibilités l'exactitude et la mise à jour des informations diffusées sur ce site, dont elle se réserve le droit de corriger, à tout moment et sans préavis, le contenu. Toutefois, l'Éditeur ne peut garantir l'exactitude, la précision ou l'exhaustivité des informations mises à disposition.
+                </p>
+                <ul class="list-disc list-inside text-gray-300 space-y-2 ml-4 mb-6">
+                    <li>Interruption de service : L'Éditeur n'est pas responsable des interruptions de service ou des dysfonctionnements techniques de l'API.</li>
+                    <li>Sécurité : L'Utilisateur est seul responsable de la protection de sa clé API et des conséquences d'une éventuelle compromission.</li>
+                </ul>
+                <h2 id="donnees-personnelles-ml" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                    5. Données Personnelles
+                </h2>
+                <p class="text-gray-300 mb-6">
+                    Les informations relatives à la collecte et au traitement des données personnelles sont détaillées dans la Politique de Confidentialité de Nexus, accessible via le lien en bas de page.
+                </p>
+                <div class="mt-12 text-center">
+                    <a href="/politique-confidentialite" class="px-6 py-3 bg-blue-600 text-white text-lg font-bold hover:bg-blue-700 transition duration-300 btn-square shadow-xl">
+                        Voir la Politique de Confidentialité
+                    </a>
+                </div>
+                </div>
+            <div class="lg:w-1/4 pt-4 sticky top-0 h-full lg:h-screen lg:overflow-y-auto js-toc-container">
+                <div class="lg:sticky lg:top-24 p-4 border border-gray-700 bg-gray-800/50">
+                    <h3 class="text-xl font-semibold mb-4 text-blue-500">Navigation Rapide</h3>
+                    <div class="js-toc"></div>
+                </div>
+            </div>
+        </main>
+        </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            tocbot.init({
+                tocSelector: '.js-toc',
+                contentSelector: '.js-toc-content',
+                headingSelector: 'h2, h3',
+                hasSmoothScroll: true,
+                headingsOffset: 60,
+                scrollSmoothOffset: -60,
+            });
+        });
+    </script>
+    <script>
+        const themeToggle = document.getElementById('theme-toggle');
+        const htmlElement = document.documentElement;
+        const iconElement = themeToggle.querySelector('.material-symbols-rounded');
+        // Charger le thème depuis le localStorage
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            htmlElement.classList.add('light');
+            iconElement.textContent = 'dark_mode';
+        } else {
+            // S'assurer que le mode sombre est le défaut et que l'icône est correcte
+            htmlElement.classList.remove('light');
+            iconElement.textContent = 'light_mode';
+        }
+        themeToggle.addEventListener('click', () => {
+            if (htmlElement.classList.contains('light')) {
+                // Basculer vers le mode sombre
+                htmlElement.classList.remove('light');
+                localStorage.setItem('theme', 'dark');
+                iconElement.textContent = 'light_mode';
+            } else {
+                // Basculer vers le mode clair
+                htmlElement.classList.add('light');
+                localStorage.setItem('theme', 'light');
+                iconElement.textContent = 'dark_mode';
+            }
+        });
+    </script>
+<footer class="mt-16 border-t border-gray-700 bg-gray-900">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 text-sm">
+            <div class="col-span-2 lg:col-span-1">
+                <a href="/" class="text-3xl font-extrabold text-blue-500 tracking-wider">NEXUS</a>
+                <p class="mt-3 text-gray-400">
+                    L'infrastructure API qui propulse votre avenir technologique.
+                </p>
+                <div class="mt-4 flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-blue-500 transition duration-200">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.014 4.85.07c3.275.146 4.47 1.583 4.61 4.85.056 1.266.07 1.646.07 4.85s-.014 3.584-.07 4.85c-.14 3.267-1.335 4.704-4.61 4.85-1.266.056-1.646.07-4.85.07s-3.584-.014-4.85-.07c-3.275-.146-4.47-1.583-4.61-4.85-.056-1.266-.07-1.646-.07-4.85s.014-3.584.07-4.85c.14-3.267 1.335-4.704 4.61-4.85 1.266-.056 1.646-.07 4.85-.07zM12 0c-3.784 0-4.285.016-5.773.083-4.722.211-6.755 2.24-6.965 6.965C.016 7.715 0 8.216 0 12s.016 4.285.083 5.773c.21 4.721 2.239 6.755 6.965 6.965 1.488.067 1.99.083 5.773.083s4.285-.016 5.773-.083c4.721-.21 6.755-2.239 6.965-6.965.067-1.488.083-1.99.083-5.773s-.016-4.285-.083-5.773c-.21-4.722-2.239-6.755-6.965-6.965C16.285.016 15.784 0 12 0zm0 14.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z"/></svg>
+                    </a>
+                </div>
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-white mb-4">Plateforme</h3>
+                <ul class="space-y-3 text-gray-400">
+                    <li><a href="/tarifs" class="hover:text-blue-500 transition duration-200">Tarifs</a></li>
+                    <li><a href="/documentation" class="hover:text-blue-500 transition duration-200">Documentation</a></li>
+                    <li><a href="/connexion" class="hover:text-blue-500 transition duration-200">Connexion</a></li>
+                    <li><a href="/support" class="hover:text-blue-500 transition duration-200">Support</a></li>
+                </ul>
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-white mb-4">Légal</h3>
+                <ul class="space-y-3 text-gray-400">
+                    <li><a href="/politique-confidentialite" class="hover:text-blue-500 transition duration-200">Politique de Confidentialité</a></li>
+                    <li><a href="/mentions-legales" class="hover:text-blue-500 transition duration-200">Mentions Légales</a></li>
+                    <li><a href="/conditions-utilisation" class="hover:text-blue-500 transition duration-200">Conditions d'Utilisation</a></li>
+                    <li><a href="/a-propos" class="hover:text-blue-500 transition duration-200">À Propos</a></li>
+                </ul>
+            </div>
+            <div class="col-span-2 md:col-span-1">
+                <h3 class="text-lg font-semibold text-white mb-4">Ressources</h3>
+                <ul class="space-y-3 text-gray-400">
+                    <li><a href="mailto:support@nexus.com" class="hover:text-blue-500 transition duration-200">Contact Email</a></li>
+                    <li><a href="/dashboard" class="hover:text-blue-500 transition duration-200">Espace Client</a></li>
+                    <li><a href="/api-logs" class="hover:text-blue-500 transition duration-200">Statut API</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
+            &copy; 2025 Nexus. Tous droits réservés. Construit pour l'ère des microservices.
+        </div>
+    </div>
+</footer>
+</body>
+</html>

templates/mot_de_passe_oublie.html ADDED Viewed

	@@ -0,0 +1,238 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Récupération de Mot de Passe - Nexus</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Transition pour un effet doux des couleurs */
+        .transition-colors-theme { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
+        /* Style et positionnement du bouton */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 24px;
+            transition: color 0.2s;
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            z-index: 10;
+        }
+        /* Définir les Variables de Thème (Harmonisé avec inscription.html) */
+        /* Mode Sombre (Défaut : noir très foncé #121212) */
+        :root, .dark {
+            --bg-page: #121212;
+            --bg-card: #1E1E1E;
+            --text-color: #FFFFFF; /* Texte général blanc en mode sombre */
+            --input-bg: #2C2C2C;
+            --border-color: #383838;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --error-color: #DC2626;
+        }
+        /* Mode Clair */
+        .light {
+            --bg-page: #F5F5F5;
+            --bg-card: #FFFFFF;
+            --text-color: #000000; /* Texte général noir foncé en mode clair */
+            --input-bg: #FFFFFF;
+            --border-color: #D1D5DB;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+            --error-color: #DC2626;
+        }
+        /* Appliquer les variables au body et aux éléments */
+        .bg-page-var { background-color: var(--bg-page); }
+        .bg-card-var { background-color: var(--bg-card); }
+        .text-color-var { color: var(--text-color); }
+        .bg-input-var { background-color: var(--input-bg); }
+        .border-color-var { border-color: var(--border-color); }
+        .text-primary-color-var { color: var(--primary-color); }
+        .bg-primary-color-var { background-color: var(--primary-color); }
+        .hover\:text-primary-hover-var:hover { color: var(--primary-hover); }
+        .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color); }
+        .focus\:border-primary-color-var:focus { border-color: var(--primary-color); }
+        /* Forcer le texte saisi dans les champs de formulaire en noir foncé (#000000) */
+        input[type="text"],
+        input[type="email"],
+        input[type="password"] {
+            color: #000000 !important;
+        }
+    </style>
+</head>
+<body class="bg-page-var transition-colors-theme min-h-screen flex items-center justify-center p-4">
+    <button id="theme-toggle" class="theme-switch text-color-var hover:text-primary-color-var transition-colors-theme">
+        <span class="material-symbols-rounded">dark_mode</span>
+    </button>
+    <div class="w-full max-w-6xl flex flex-col md:flex-row shadow-2xl rounded-lg overflow-hidden">
+        <div class="hidden md:block md:w-1/2 bg-primary-color-var p-12 flex flex-col justify-center items-center text-white transition-colors-theme">
+            <span class="material-symbols-rounded w-32 h-32 mb-6" style="font-size: 8rem;">key</span>
+            <h3 class="text-4xl font-extrabold mb-4 text-center">Sécurité du Compte</h3>
+            <p class="text-center text-lg">Suivez les étapes pour réinitialiser et protéger votre mot de passe.</p>
+        </div>
+        <div class="w-full md:w-1/2 bg-card-var transition-colors-theme p-8 md:p-12">
+            <h2 class="text-3xl font-bold text-center text-color-var mb-3 transition-colors-theme">Récupérer le Compte</h2>
+            <p class="text-center text-color-var text-sm mb-6 transition-colors-theme">Réinitialisez votre mot de passe en répondant à votre question secrète.</p>
+            <p id="message" class="text-center text-red-500 mb-4"></p>
+            <form id="forgotPasswordForm">
+                <div class="mb-4">
+                    <label for="username_or_email" class="block text-sm font-medium text-color-var">Nom d'utilisateur ou Email</label>
+                    <input type="text" id="username_or_email" name="username_or_email" placeholder="Votre identifiant" required
+                        class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                </div>
+                <div class="mb-4">
+                    <label for="security_answer" class="block text-sm font-medium text-color-var">Réponse à la Question Secrète</label>
+                    <input type="text" id="security_answer" name="security_answer" placeholder="Votre réponse secrète" required
+                        class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                </div>
+                <div class="flex flex-wrap -mx-2 mb-4">
+                    <div class="w-full md:w-1/2 px-2 mb-4 md:mb-0">
+                        <label for="new_password" class="block text-sm font-medium text-color-var">Nouveau Mot de Passe</label>
+                        <input type="password" id="new_password" name="new_password" placeholder="Votre nouveau mot de passe" required
+                            class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                    </div>
+                    <div class="w-full md:w-1/2 px-2">
+                        <label for="confirm_new_password" class="block text-sm font-medium text-color-var">Confirmer Nouveau Mot de Passe</label>
+                        <input type="password" id="confirm_new_password" name="confirm_new_password" placeholder="Répétez le nouveau mot de passe" required
+                            class="mt-1 block w-full px-3 py-2 border border-border-color-var rounded-md shadow-sm bg-input-bg-var text-color-var focus:outline-none focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                    </div>
+                </div>
+                <button type="submit"
+                    class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary-color-var hover:bg-primary-hover-var focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-color-var transition duration-150 ease-in-out">
+                    Réinitialiser et Se Connecter
+                </button>
+            </form>
+            <div class="mt-6 text-center">
+                <p class="text-sm text-color-var transition-colors-theme">
+                    Vous vous souvenez de votre mot de passe ?
+                    <a href="/connexion" class="text-primary-color-var hover:text-primary-hover-var font-medium">
+                        Retour à la connexion
+                    </a>
+                </p>
+            </div>
+        </div>
+    </div>
+    <script>
+        const form = document.getElementById('forgotPasswordForm');
+        const message = document.getElementById('message');
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            message.textContent = 'Réinitialisation en cours...';
+            message.className = 'text-gray-500 mb-4';
+            const new_password = form.new_password.value;
+            const confirm_new_password = form.confirm_new_password.value;
+            if (new_password !== confirm_new_password) {
+                message.textContent = 'Erreur : Les nouveaux mots de passe ne correspondent pas.';
+                message.className = 'text-red-500 mb-4';
+                return;
+            }
+            const formData = {
+                username_or_email: form.username_or_email.value,
+                security_answer: form.security_answer.value,
+                new_password: new_password,
+                // confirm_password n'est pas envoyé à l'API, seulement utilisé pour la vérification client
+            };
+            try {
+                const response = await fetch('/api/forgot-password', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(formData)
+                });
+                const data = await response.json();
+                if (data.status === 'Success') {
+                    // Le backend Flask tente une auto-connexion.
+                    // Si elle réussit, on redirige vers le dashboard.
+                    if (data.message.includes('connexion automatique')) {
+                        message.textContent = data.message + " Redirection vers le tableau de bord...";
+                        message.className = 'text-green-500 mb-4';
+                        setTimeout(() => {
+                            window.location.href = '/dashboard';
+                        }, 1500);
+                    } else {
+                        // Auto-connexion ratée (ou message générique de l'API)
+                        message.textContent = data.message + " Redirection vers la page de connexion...";
+                        message.className = 'text-green-500 mb-4';
+                        setTimeout(() => {
+                            window.location.href = '/connexion';
+                        }, 1500);
+                    }
+                } else {
+                    message.textContent = 'Erreur : ' + (data.message || 'Échec de la réinitialisation.');
+                    message.className = 'text-red-500 mb-4';
+                }
+            } catch (error) {
+                console.error('Erreur réseau ou du serveur Flask:', error);
+                message.textContent = 'Erreur de connexion au serveur.';
+                message.className = 'text-red-500 mb-4';
+            }
+        });
+        // Logique du thème (conservée pour l'esthétique)
+        const themeToggle = document.getElementById('theme-toggle');
+        const html = document.documentElement;
+        const updateIcon = () => {
+            const icon = themeToggle.querySelector('.material-symbols-rounded');
+            if (html.classList.contains('light')) {
+                icon.textContent = 'light_mode';
+            } else {
+                icon.textContent = 'dark_mode';
+            }
+        };
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            html.classList.remove('dark');
+            html.classList.add('light');
+        } else {
+            html.classList.add('dark');
+            html.classList.remove('light');
+        }
+        updateIcon();
+        themeToggle.addEventListener('click', () => {
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                html.classList.add('light');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.remove('light');
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+            updateIcon();
+        });
+    </script>
+</body>
+</html>

templates/nouveau_project.html ADDED Viewed

	@@ -0,0 +1,376 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mailix | Créer un Nouveau Projet</title>
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <style>
+        /* Configuration de la police Inter et réutilisation des styles du Dashboard */
+        body { font-family: 'Inter', sans-serif; }
+        /* Transition pour un effet doux des couleurs */
+        .transition-colors-theme { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
+        /* Style et positionnement du bouton de Thème */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 24px;
+            transition: color 0.2s;
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            z-index: 60;
+        }
+        /* Définir les Variables de Thème (RÉUTILISATION) */
+        :root, .dark {
+            --bg-page: #121212;
+            --bg-card: #1E1E1E;
+            --bg-sidebar: #1E1E1E;
+            --bg-sidebar-active: #2C2C2C;
+            --border-sidebar: #383838;
+            --text-color: #FFFFFF;
+            --text-secondary: #D1D5DB;
+            --text-link: #3B82F6;
+            --text-link-hover: #60A5FA;
+            --input-bg: #2C2C2C;
+            --input-border: #4B5563;
+            --input-text-key: #6EE7B7;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+        }
+        .light {
+            --bg-page: #F5F5F5;
+            --bg-card: #FFFFFF;
+            --bg-sidebar: #FFFFFF;
+            --bg-sidebar-active: #F3F4F6;
+            --border-sidebar: #D1D5DB;
+            --text-color: #000000;
+            --text-secondary: #4B5563;
+            --text-link: #1D4ED8;
+            --text-link-hover: #3B82F6;
+            --input-bg: #FFFFFF;
+            --input-border: #D1D5DB;
+            --input-text-key: #059669;
+            --primary-color: #3B82F6;
+            --primary-hover: #2563EB;
+        }
+        /* Appliquer les variables au body et aux éléments */
+        .bg-page-var { background-color: var(--bg-page); }
+        .bg-card-var { background-color: var(--bg-card); }
+        .bg-sidebar-var { background-color: var(--bg-sidebar); }
+        .border-sidebar-var { border-color: var(--border-sidebar); }
+        .text-color-var { color: var(--text-color); }
+        .text-secondary-var { color: var(--text-secondary); }
+        .text-link-var { color: var(--text-link); }
+        .hover\:text-link-hover-var:hover { color: var(--text-link-hover); }
+        .bg-input-var { background-color: var(--input-bg); }
+        .border-input-var { border-color: var(--input-border); }
+        .text-input-key-var { color: var(--input-text-key); }
+        .bg-primary-color-var { background-color: var(--primary-color); }
+        .hover\:bg-primary-hover-var:hover { background-color: var(--primary-hover); }
+        .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color); }
+        .focus\:border-primary-color-var:focus { border-color: var(--primary-color); }
+        .bg-sidebar-active-var { background-color: var(--bg-sidebar-active); }
+        /* Sidebar Gauche - Fixée et masquée sur mobile */
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+            position: fixed;
+            top: 0;
+            left: 0;
+            z-index: 30;
+            height: 100vh;
+            transform: translateX(-100%);
+        }
+        .sidebar.open {
+            transform: translateX(0);
+        }
+        /* Sur les grands écrans (lg), la sidebar est statique et toujours visible */
+        @media (min-width: 1024px) {
+            .sidebar {
+                transform: translateX(0) !important;
+                position: sticky; /* Changer à sticky ou rester fixed si vous voulez la scrollbar du body */
+            }
+            .main-content {
+                margin-left: 256px; /* Décaler le contenu principal de la largeur de la sidebar */
+            }
+        }
+    </style>
+</head>
+<body class="bg-page-var text-color-var min-h-screen transition-colors-theme flex">
+    <button id="theme-toggle" class="theme-switch text-color-var hover:text-link-hover-var transition-colors-theme">
+        <span class="material-symbols-rounded">dark_mode</span>
+    </button>
+    <aside id="sidebar-left" class="sidebar sidebar-left w-64 bg-sidebar-var border-r border-sidebar-var p-6 flex flex-col transition-colors-theme">
+    <div class="flex items-center mb-6 shrink-0">
+        <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+        <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Mailix</span>
+    </div>
+    <div class="flex-grow overflow-y-auto pr-2" id="scrollable-nav-container">
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-secondary-var mb-2">Fichiers Ouverts</h3>
+        <nav id="file-explorer" class="space-y-1 pb-4 border-b border-sidebar-var/50 mb-4">
+            </nav>
+        <h3 class="text-xs font-semibold uppercase tracking-wider text-secondary-var mb-2">Navigation</h3>
+        <nav class="space-y-3 pb-4">
+            <a href="{{ url_for('user_bp.dashboard') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">dashboard</span>
+                <span class="ml-3">Dashboard</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+            <a href="/parametres" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">settings</span> <span class="ml-3">Paramètres</span>
+            </a>
+            <a href="/aide" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">help</span>
+                <span class="ml-3">Aide & Support</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+            <a href="/statut" class="flex items-center p-3 bg-sidebar-active-var text-color-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">monitor_heart</span>
+                <span class="ml-3">Statut de l'API</span>
+            </a>
+            <a href="{{ url_for('user_bp.deconnexion') }}" id="logout-button-sidebar" class="flex items-center p-3 text-red-500 hover:text-red-400 hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">deconnexion</span>
+                <span class="ml-3">Déconnexion</span>
+            </a>
+        </nav>
+    </div>
+    <div class="mt-auto pt-4 text-xs text-secondary-var transition-colors-theme border-t border-sidebar-var/50 shrink-0">
+        <p>Connecté en tant que: <span class="font-semibold text-color-var transition-colors-theme">{{ user.email if user and user.email else 'Chargement...' }}</span></p>
+        <p>Plan: <span class="font-semibold text-color-var transition-colors-theme">{{ (user.plan | upper) if user and user.plan else 'GRATUIT' }}</span></p>
+    </div>
+</aside>
+    <div id="main-content" class="main-content flex-1 p-8 transition-colors-theme">
+        <header class="lg:hidden flex justify-between items-center mb-8">
+            <button id="sidebar-left-toggle" class="p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme">
+                 <span class="material-symbols-rounded text-color-var">menu</span>
+            </button>
+            <div class="flex items-center">
+                 <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+                <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Mailix</span>
+            </div>
+            <div class="w-8"></div>
+        </header>
+        <h1 class="text-3xl font-bold mb-2 text-color-var transition-colors-theme">Créer un Nouveau Projet</h1>
+        <p class="text-secondary-var mb-8 transition-colors-theme">Configurez les paramètres de base de votre projet avant de passer à l'éditeur.</p>
+        <div class="max-w-3xl bg-card-var p-8 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme">
+            <form id="new-project-form" action="/project/editor" method="GET">
+                <div class="mb-6">
+                    <label for="project-name" class="block text-sm font-medium text-color-var mb-2 transition-colors-theme">
+                        Nom du Projet <span class="text-red-500">*</span>
+                    </label>
+                    <input type="text" id="project-name" name="name" required
+                           class="w-full p-3 rounded-lg border border-input-border-var bg-input-var text-color-var
+                                  focus:outline-none focus:ring-2 focus:ring-primary-color-var transition-colors-theme"
+                           placeholder="Ex: API de Stockage de Données">
+                    <p class="text-xs text-secondary-var mt-1">Choisissez un nom descriptif pour votre projet.</p>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-sm font-medium text-color-var mb-2 transition-colors-theme">
+                        Visibilité
+                    </label>
+                    <div class="flex items-center space-x-4">
+                        <span class="text-secondary-var font-medium flex items-center">
+                            <span class="material-symbols-rounded text-lg mr-1">lock</span> Privé
+                        </span>
+                        <div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
+                            <input type="checkbox" name="visibility" id="toggle-visibility" value="public" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-input-border-var border-4 appearance-none cursor-pointer" />
+                            <label for="toggle-visibility" class="toggle-label block overflow-hidden h-6 rounded-full bg-input-border-var cursor-pointer transition-colors duration-200 ease-in"></label>
+                        </div>
+                        <span class="text-primary-color-var font-medium flex items-center">
+                            <span class="material-symbols-rounded text-lg mr-1">public</span> Public
+                        </span>
+                    </div>
+                    <p class="text-xs text-secondary-var mt-1">
+                        <span id="visibility-status-text" class="font-semibold text-color-var transition-colors-theme">Privé</span>
+                    </p>
+                </div>
+                <div class="mb-8">
+                    <label for="project-license" class="block text-sm font-medium text-color-var mb-2 transition-colors-theme">
+                        Licence
+                    </label>
+                    <select id="project-license" name="license"
+                            class="w-full p-3 rounded-lg border border-input-border-var bg-input-var text-color-var
+                                   focus:outline-none focus:ring-2 focus:ring-primary-color-var appearance-none transition-colors-theme">
+                        <option value="none" class="bg-input-var text-color-var transition-colors-theme">Pas de licence (Droit d'auteur standard)</option>
+                        <option value="MIT" class="bg-input-var text-color-var transition-colors-theme">MIT License (Très Permissive)</option>
+                        <option value="Apache-2.0" class="bg-input-var text-color-var transition-colors-theme">Apache License 2.0</option>
+                        <option value="GPL-3.0" class="bg-input-var text-color-var transition-colors-theme">GNU GPL v3.0 (Copyleft)</option>
+                        <option value="CC0-1.0" class="bg-input-var text-color-var transition-colors-theme">CC0-1.0 (Domaine Public)</option>
+                    </select>
+                    <p class="text-xs text-secondary-var mt-1">
+                        La licence que vous choisissez sera ajoutée automatiquement à votre projet.
+                    </p>
+                </div>
+                <div class="flex justify-end">
+                    <button type="submit"
+                            class="px-6 py-3 bg-primary-color-var hover:bg-primary-hover-var text-white font-semibold rounded-lg shadow-md
+                                   transition duration-150 flex items-center">
+                        Suivant : Configurer l'Éditeur
+                        <span class="material-symbols-rounded ml-2">arrow_forward</span>
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script>
+        // --- LOGIQUE GÉNÉRALE (Thème et Sidebar) ---
+        const themeToggle = document.getElementById('theme-toggle');
+        const html = document.documentElement;
+        const updateIcon = () => {
+            const icon = themeToggle.querySelector('.material-symbols-rounded');
+            if (html.classList.contains('light')) {
+                icon.textContent = 'light_mode';
+            } else {
+                icon.textContent = 'dark_mode';
+            }
+        };
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            html.classList.remove('dark');
+            html.classList.add('light');
+        } else {
+            html.classList.add('dark');
+            html.classList.remove('light');
+        }
+        updateIcon();
+        themeToggle.addEventListener('click', () => {
+            if (html.classList.contains('dark')) {
+                html.classList.remove('dark');
+                html.classList.add('light');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.remove('light');
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+            updateIcon();
+        });
+        // Logique pour la Sidebar Gauche sur mobile
+        const sidebarLeftToggle = document.getElementById('sidebar-left-toggle');
+        const sidebarLeft = document.getElementById('sidebar-left');
+        sidebarLeftToggle.addEventListener('click', () => {
+            sidebarLeft.classList.toggle('open');
+        });
+        // --- LOGIQUE SPÉCIFIQUE AU FORMULAIRE ---
+        // Logique de l'interrupteur Public/Privé
+        const visibilityToggle = document.getElementById('toggle-visibility');
+        const visibilityStatusText = document.getElementById('visibility-status-text');
+        // Styles pour l'interrupteur (tailwind ne supporte pas l'accès direct aux pseudo-éléments 'checked')
+        const updateToggleStyle = () => {
+            // Mise à jour de la couleur de fond de la piste de l'interrupteur (label)
+            const label = visibilityToggle.nextElementSibling;
+            if (visibilityToggle.checked) {
+                // Public (case cochée)
+                label.style.backgroundColor = 'var(--primary-color)';
+                visibilityStatusText.textContent = 'Public';
+                visibilityStatusText.classList.add('text-primary-color-var');
+                visibilityStatusText.classList.remove('text-warning-text-var'); // Si on avait un style d'alerte pour privé
+            } else {
+                // Privé (case non cochée)
+                label.style.backgroundColor = 'var(--input-border)';
+                visibilityStatusText.textContent = 'Privé';
+                visibilityStatusText.classList.remove('text-primary-color-var');
+            }
+        };
+        visibilityToggle.addEventListener('change', updateToggleStyle);
+        // Au chargement initial (par défaut, il est non coché -> Privé)
+        updateToggleStyle();
+        // Gestion du déplacement du bouton de l'interrupteur
+        // NOTE: Le style ci-dessous est nécessaire car Tailwind CSS ne gère pas directement le `:checked` + `+` (sibling) pour le style d'un toggle complex.
+        const style = document.createElement('style');
+        style.innerHTML = `
+            .toggle-checkbox:checked {
+                 background-color: var(--primary-color);
+            }
+            .toggle-checkbox:checked + .toggle-label {
+                background-color: var(--primary-color);
+            }
+            .toggle-checkbox:checked + .toggle-label:before {
+                transform: translateX(100%);
+            }
+            .toggle-checkbox {
+                opacity: 0;
+            }
+            .toggle-label {
+                position: relative;
+                height: 24px;
+                width: 48px;
+                background-color: var(--input-border);
+            }
+            .toggle-label:before {
+                content: '';
+                position: absolute;
+                top: 2px;
+                left: 2px;
+                width: 20px;
+                height: 20px;
+                border-radius: 9999px;
+                background: white; /* Blanc pour le cercle, peu importe le thème */
+                transition: transform 0.2s ease-in-out;
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>

templates/politique_confidentialite.html ADDED Viewed

	@@ -0,0 +1,370 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Politique de Confidentialité - Nexus</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.css">
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Styles pour un noir très foncé et le mode clair */
+        /* Mode Sombre (Défaut, ajusté pour un noir très foncé) */
+        :root {
+            /* Couleurs par défaut (sombre) - Ajustées pour être plus noires que le gris/bleu de Tailwind */
+            --bg-page: #0A0A0A; /* Noir très foncé pour le fond principal */
+            --bg-card: #151515; /* Noir foncé pour les éléments/conteneurs */
+            --text-main: #E5E7EB; /* Gris très clair pour le texte principal (gray-200) */
+            --text-secondary: #9CA3AF; /* Gris moyen pour le texte secondaire (gray-400) */
+            --border-color: #374151; /* Gris foncé pour les bordures (gray-700) */
+            --blue-main: #3B82F6; /* Bleu Vif (blue-500) */
+            --blue-light: #60A5FA; /* Bleu Clair (blue-400) */
+        }
+        /* Mode Clair */
+        html.light {
+            --bg-page: #F3F4F6; /* Gris très clair pour le fond principal (gray-100) */
+            --bg-card: #FFFFFF; /* Blanc pour les éléments/conteneurs */
+            --text-main: #1F2937; /* Gris très foncé pour le texte principal (gray-800) */
+            --text-secondary: #4B5563; /* Gris foncé pour le texte secondaire (gray-600) */
+            --border-color: #D1D5DB; /* Gris clair pour les bordures (gray-300) */
+            --blue-main: #2563EB; /* Bleu Vif (blue-600) */
+            --blue-light: #1D4ED8; /* Bleu Clair (blue-700) */
+        }
+        /* Application des variables aux éléments de base */
+        body {
+            background-color: var(--bg-page);
+            color: var(--text-main);
+            transition: background-color 0.3s, color 0.3s;
+        }
+        /* Remplacement des classes Tailwind par des variables CSS */
+        .bg-gray-900 { background-color: var(--bg-page) !important; }
+        .bg-gray-800\/50, .bg-gray-800 { background-color: var(--bg-card) !important; }
+        .text-white { color: var(--text-main) !important; }
+        .text-gray-400 { color: var(--text-secondary) !important; }
+        .text-gray-300 { color: var(--text-secondary) !important; }
+        .border-gray-700 { border-color: var(--border-color) !important; }
+        .border-gray-800 { border-color: var(--border-color) !important; }
+        .border-blue-500\/50 { border-color: var(--blue-main) !important; }
+        .text-blue-500 { color: var(--blue-main) !important; }
+        .text-blue-400 { color: var(--blue-light) !important; }
+        /* Style pour les boutons carrés */
+        .btn-square {
+            border-radius: 0; /* Supprime l'arrondi */
+        }
+        /* Styles personnalisés pour intégrer Tocbot au thème "chat-like" */
+        .toc-list {
+            list-style: none;
+            padding-left: 0;
+            margin: 0;
+        }
+        .toc-list-item {
+            margin-bottom: 0.25rem;
+        }
+        .toc-list-item a {
+            display: block;
+            padding: 0.5rem 0.75rem;
+            color: var(--text-secondary); /* gray-400 */
+            border-left: 2px solid transparent;
+            transition: all 0.2s;
+            font-size: 0.9rem;
+        }
+        .toc-list-item a:hover {
+            color: var(--text-main); /* white */
+            border-left-color: var(--blue-main); /* blue-500 */
+        }
+        .is-active-link {
+            font-weight: 700;
+            color: var(--blue-main) !important; /* blue-500 */
+            border-left-color: var(--blue-main) !important;
+            background-color: var(--bg-card); /* gray-800 */
+            border-radius: 0; /* Style carré */
+        }
+        /* Style du bouton theme-switch (Étape 2) */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-main);
+            font-size: 28px; /* Rendu légèrement plus grand */
+            transition: color 0.2s;
+            margin-left: 1rem;
+        }
+        .theme-switch:hover {
+            color: var(--blue-main);
+        }
+        /* Fixer la barre latérale pour la rendre moins large (verticalement) et la cacher sur mobile */
+        /* Ajustement de la largeur de la barre latérale (lg:w-1/4 est conservé pour la structure) */
+        .lg\:w-1\/4 {
+            max-width: 300px; /* Limiter la largeur r��elle de la barre latérale sur grand écran */
+            width: 100%; /* S'assurer qu'il utilise l'espace disponible */
+        }
+        @media (max-width: 1023px) {
+            .js-toc-container { display: none; }
+        }
+        /* Ajustement pour l'en-tête fixe */
+        .header-fixed {
+            background-color: var(--bg-page);
+            z-index: 50;
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <div class="max-w-7xl mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="header-fixed fixed top-0 w-full flex flex-col sm:flex-row justify-between items-center py-4 border-b border-blue-500/50 mb-8">
+            <div class="flex justify-between items-center w-full sm:w-auto">
+                <a href="/" class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                    NEXUS
+                </a>
+                <nav class="flex items-center space-x-4">
+                    <a href="/support" class="px-6 py-3 bg-teal-600 text-white font-bold hover:bg-teal-700 transition duration-300 btn-square shadow-md">
+                        Contacter le Support
+                    </a>
+                    <button id="theme-toggle" class="theme-switch" aria-label="Basculer le thème">
+                        <span class="material-symbols-rounded">light_mode</span>
+                    </button>
+                </nav>
+            </div>
+        </header>
+        <div class="pt-28">
+            <main class="flex flex-col lg:flex-row lg:space-x-8">
+                <div class="lg:w-3/4 js-toc-content">
+                    <h1 class="text-4xl font-extrabold text-white mb-6">
+                        Politique de Confidentialité
+                    </h1>
+                    <p class="text-gray-400 text-lg mb-10 border-l-4 border-blue-500 pl-4 italic">
+                        Dernière mise à jour : 15 Octobre 2024. Veuillez lire attentivement avant d'utiliser la plateforme Nexus.
+                    </p>
+                    <h2 id="champ-application" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                        1. Champ d'Application
+                    </h2>
+                    <p class="text-gray-300 mb-6">
+                        La présente Politique de Confidentialité régit la manière dont Nexus collecte, utilise, maintient et divulgue les informations collectées auprès des utilisateurs (chacun, un "Utilisateur") du site web, de l'application et de l'API Nexus (la "Plateforme"). Elle s'applique à la Plateforme et à tous les produits et services proposés par Nexus.
+                    </p>
+                    <h2 id="collecte-donnees" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                        2. Collecte des Données Personnelles
+                    </h2>
+                    <p class="text-gray-300 mb-4">
+                        Nous collectons des informations d'identification personnelle auprès des Utilisateurs de diverses manières, y compris, mais sans s'y limiter, lorsque les Utilisateurs visitent notre site, s'inscrivent sur la Plateforme, passent une commande d'API, remplissent un formulaire, et en relation avec d'autres activités, services, fonctionnalités ou ressources que nous mettons à disposition.
+                    </p>
+                    <h3 id="donnees-fournies" class="text-2xl font-semibold text-white mt-8 mb-3 pt-2">
+                        2.1. Données que vous nous fournissez directement
+                    </h3>
+                    <ul class="list-disc list-inside text-gray-300 space-y-2 ml-4 mb-6">
+                        <li>Informations de Compte : Nom, adresse e-mail, mot de passe chiffré.</li>
+                        <li>Informations de Facturation : Adresse de facturation, informations de paiement (traitées par un prestataire tiers sécurisé et non stockées par Nexus).</li>
+                        <li>Communications : Enregistrements de correspondance lorsque vous contactez notre support.</li>
+                    </ul>
+                    <h3 id="donnees-automatiques" class="text-2xl font-semibold text-white mt-8 mb-3 pt-2">
+                        2.2. Données collectées automatiquement (Logs API)
+                    </h3>
+                    <p class="text-gray-300 mb-6">
+                        Lors de l'utilisation de notre API, nous enregistrons automatiquement des informations dans nos logs serveurs pour la sécurité, le dépannage et la facturation.
+                    </p>
+                    <ul class="list-disc list-inside text-gray-300 space-y-2 ml-4 mb-6">
+                        <li>Adresses IP des requêtes.</li>
+                        <li>Horodatage, méthode et statut de l'appel API.</li>
+                        <li>Erreurs et avertissements générés.</li>
+                        <li>Clé API partiellement masquée (pour l'identification du compte).</li>
+                    </ul>
+                    <h2 id="utilisation-donnees" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                        3. Comment nous utilisons les informations collectées
+                    </h2>
+                    <p class="text-gray-300 mb-4">
+                        Nexus utilise les données collectées aux fins suivantes :
+                    </p>
+                    <ul class="list-decimal list-inside text-gray-300 space-y-2 ml-4 mb-6">
+                        <li>Pour fournir et maintenir le service : Assurer le bon fonctionnement de l'API et du Dashboard.</li>
+                        <li>Pour la facturation : Calculer et traiter les frais d'utilisation de l'API.</li>
+                        <li>Pour la sécurité : Détecter et prévenir les fraudes et les abus.</li>
+                        <li>Pour l'amélioration : Améliorer nos produits et services API en fonction des données d'utilisation agrégées.</li>
+                        <li>Pour la communication : Envoyer des notifications de service importantes et des informations de sécurité.</li>
+                    </ul>
+                    <h2 id="protection-donnees" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                        4. Protection et Partage des Données
+                    </h2>
+                    <h3 id="mesures-securite" class="text-2xl font-semibold text-white mt-8 mb-3 pt-2">
+                        4.1. Mesures de Sécurité
+                    </h3>
+                    <p class="text-gray-300 mb-6">
+                        Nous adoptons des pratiques de collecte, de stockage et de traitement des données et des mesures de sécurité appropriées pour protéger contre l'accès non autorisé, la modification, la divulgation ou la destruction de vos informations personnelles et des données stockées sur notre Plateforme. Les informations sensibles et privées sont échangées via un canal de communication sécurisé SSL et sont chiffrées.
+                    </p>
+                    <h3 id="partage-tiers" class="text-2xl font-semibold text-white mt-8 mb-3 pt-2">
+                        4.2. Partage avec des Tiers
+                    </h3>
+                    <p class="text-gray-300 mb-6">
+                        Nous ne vendons, n'échangeons ni ne louons les informations d'identification personnelle des Utilisateurs à des tiers. Nous pouvons partager des informations démographiques agrégées et génériques non liées à des informations d'identification personnelle concernant les visiteurs et les Utilisateurs avec nos partenaires commerciaux, affiliés de confiance et annonceurs à des fins de marketing. Nous utilisons des fournisseurs de services tiers pour nous aider à exploiter notre activité (ex: traitement des paiements), mais ils sont contractuellement obligés de garder vos informations confidentielles.
+                    </p>
+                    <h2 id="droits-utilisateur" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                        5. Droits des Utilisateurs (RGPD et autres)
+                    </h2>
+                    <p class="text-gray-300 mb-6">
+                        Conformément aux réglementations applicables (comme le RGPD), vous disposez de droits concernant vos données personnelles :
+                    </p>
+                    <ul class="list-disc list-inside text-gray-300 space-y-2 ml-4 mb-6">
+                        <li>Droit d'accès : Demander une copie des données que nous détenons sur vous.</li>
+                        <li>Droit de rectification : Demander la correction de données inexactes.</li>
+                        <li>Droit à l'oubli : Demander la suppression de vos données dans certaines conditions.</li>
+                        <li>Droit à la limitation : Demander la limitation du traitement.</li>
+                    </ul>
+                    <p class="text-gray-300 mb-6">
+                        Pour exercer l'un de ces droits, veuillez nous contacter via notre page de support. Nous répondrons à votre demande dans un délai légal.
+                    </p>
+                    <h2 id="modifications-politique" class="text-3xl font-bold text-blue-400 mt-10 mb-4 pt-2">
+                        6. Modifications de cette politique
+                    </h2>
+                    <p class="text-gray-300 mb-6">
+                        Nexus a la discrétion de mettre à jour cette politique de confidentialité à tout moment. Lorsque nous le ferons, nous réviserons la date de "Dernière mise à jour" au début de cette page. Nous encourageons les Utilisateurs à consulter fréquemment cette page pour tout changement. Vous reconnaissez et acceptez qu'il est de votre responsabilité de consulter périodiquement cette politique de confidentialité et de prendre connaissance des modifications.
+                    </p>
+                    <div class="mt-12 text-center">
+                        <a href="/" class="px-6 py-3 bg-blue-600 text-white text-lg font-bold hover:bg-blue-700 transition duration-300 btn-square shadow-xl">
+                            Retour à l'Accueil
+                        </a>
+                    </div>
+                    </div>
+                <div class="lg:w-1/4 pt-4 sticky top-0 h-full lg:h-screen lg:overflow-y-auto js-toc-container">
+                    <div class="lg:sticky lg:top-24 p-4 border border-gray-700 bg-gray-800/50">
+                        <h3 class="text-xl font-semibold mb-4 text-blue-500">Navigation Rapide</h3>
+                        <div class="js-toc"></div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.21.0/tocbot.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            tocbot.init({
+                tocSelector: '.js-toc',
+                contentSelector: '.js-toc-content',
+                headingSelector: 'h2, h3',
+                hasSmoothScroll: true,
+                headingsOffset: 120, // Ajusté pour le header fixe
+                scrollSmoothOffset: -120, // Ajusté pour le header fixe
+            });
+        });
+        // Étape 3 : Logique de bascule du mode sombre/clair
+        const themeToggle = document.getElementById('theme-toggle');
+        const htmlElement = document.documentElement;
+        const iconElement = themeToggle.querySelector('.material-symbols-rounded');
+        // Charger le thème depuis le localStorage
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            htmlElement.classList.add('light');
+            iconElement.textContent = 'dark_mode'; // Afficher l'icône sombre
+        } else {
+            // Thème sombre par défaut
+            iconElement.textContent = 'light_mode'; // Afficher l'icône claire
+            if (!savedTheme) {
+                // S'assurer que le mode sombre est appliqué au chargement si aucun thème n'est sauvegardé
+                htmlElement.classList.remove('light');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+        themeToggle.addEventListener('click', () => {
+            if (htmlElement.classList.contains('light')) {
+                // Passer au mode sombre
+                htmlElement.classList.remove('light');
+                localStorage.setItem('theme', 'dark');
+                iconElement.textContent = 'light_mode'; // Afficher l'icône claire
+            } else {
+                // Passer au mode clair
+                htmlElement.classList.add('light');
+                localStorage.setItem('theme', 'light');
+                iconElement.textContent = 'dark_mode'; // Afficher l'icône sombre
+            }
+        });
+    </script>
+<footer class="mt-16 border-t border-gray-700">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 text-sm">
+            <div class="col-span-2 lg:col-span-1">
+                <a href="/" class="text-3xl font-extrabold text-blue-500 tracking-wider">NEXUS</a>
+                <p class="mt-3 text-gray-400">
+                    L'infrastructure API qui propulse votre avenir technologique.
+                </p>
+                <div class="mt-4 flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-blue-500 transition duration-200">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.014 4.85.07c3.275.146 4.47 1.583 4.61 4.85.056 1.266.07 1.646.07 4.85s-.014 3.584-.07 4.85c-.14 3.267-1.335 4.704-4.61 4.85-1.266.056-1.646.07-4.85.07s-3.584-.014-4.85-.07c-3.275-.146-4.47-1.583-4.61-4.85-.056-1.266-.07-1.646-.07-4.85s.014-3.584.07-4.85c.14-3.267 1.335-4.704 4.61-4.85 1.266-.056 1.646-.07 4.85-.07zM12 0c-3.784 0-4.285.016-5.773.083-4.722.211-6.755 2.24-6.965 6.965C.016 7.715 0 8.216 0 12s.016 4.285.083 5.773c.21 4.721 2.239 6.755 6.965 6.965 1.488.067 1.99.083 5.773.083s4.285-.016 5.773-.083c4.721-.21 6.755-2.239 6.965-6.965.067-1.488.083-1.99.083-5.773s-.016-4.285-.083-5.773c-.21-4.722-2.239-6.755-6.965-6.965C16.285.016 15.784 0 12 0zm0 14.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z"/></svg>
+                    </a>
+                </div>
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-white mb-4">Plateforme</h3>
+                <ul class="space-y-3 text-gray-400">
+                    <li><a href="/tarifs" class="hover:text-blue-500 transition duration-200">Tarifs</a></li>
+                    <li><a href="/documentation" class="hover:text-blue-500 transition duration-200">Documentation</a></li>
+                    <li><a href="/connexion" class="hover:text-blue-500 transition duration-200">Connexion</a></li>
+                    <li><a href="/support" class="hover:text-blue-500 transition duration-200">Support</a></li>
+                </ul>
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-white mb-4">Légal</h3>
+                <ul class="space-y-3 text-gray-400">
+                    <li><a href="/politique-confidentialite" class="hover:text-blue-500 transition duration-200">Politique de Confidentialité</a></li>
+                    <li><a href="/mentions-legales" class="hover:text-blue-500 transition duration-200">Mentions Légales</a></li>
+                    <li><a href="/conditions-utilisation" class="hover:text-blue-500 transition duration-200">Conditions d'Utilisation</a></li>
+                    <li><a href="/a-propos" class="hover:text-blue-500 transition duration-200">À Propos</a></li>
+                </ul>
+            </div>
+            <div class="col-span-2 md:col-span-1">
+                <h3 class="text-lg font-semibold text-white mb-4">Ressources</h3>
+                <ul class="space-y-3 text-gray-400">
+                    <li><a href="mailto:support@nexus.com" class="hover:text-blue-500 transition duration-200">Contact Email</a></li>
+                    <li><a href="/dashboard" class="hover:text-blue-500 transition duration-200">Espace Client</a></li>
+                    <li><a href="/api-logs" class="hover:text-blue-500 transition duration-200">Statut API</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
+            &copy; 2025 Nexus. Tous droits réservés. Construit pour l'ère des microservices.
+        </div>
+    </div>
+</footer>
+</body>
+</html>

templates/profile.html ADDED Viewed

	@@ -0,0 +1,338 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nexus | Profil Utilisateur - Pro</title>
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+<style>
+    /* Configuration de la police Inter */
+    body { font-family: 'Inter', sans-serif; }
+    /* Définition des variables de thème (Ajoutées pour le style) */
+    :root {
+        /* Couleurs de base (exemple - ajustez si nécessaire) */
+        --page-var: #f8fafc; /* light - slate-50 */
+        --color-var: #0f172a; /* light - slate-900 */
+        --secondary-var: #64748b; /* light - slate-500 */
+        --card-var: #ffffff; /* light - white */
+        --sidebar-var: #e2e8f0; /* light - slate-200 */
+        --sidebar-active-var: #cbd5e1; /* light - slate-300 */
+        --input-var: #f1f5f9; /* light - slate-100 */
+        --primary-color-var: #4f46e5; /* indigo-600 */
+        --primary-hover-var: #4338ca; /* indigo-700 */
+        --error-var: #fef2f2; /* red-50 */
+        --success-var: #f0fdf4; /* green-50 */
+        --warning-var: #fcd34d; /* amber-400 */
+    }
+    .dark {
+        --page-var: #18181b; /* dark - zinc-900 (Gris très foncé pour l'arrière-plan de la page) */
+        --color-var: #f4f4f5; /* dark - zinc-100 (Texte clair) */
+        --secondary-var: #a1a1aa; /* dark - zinc-400 (Texte secondaire) */
+        --card-var: #27272a; /* dark - zinc-800 (Gris foncé pour les cartes et la sidebar) */
+        --sidebar-var: #27272a; /* dark - zinc-800 */
+        --sidebar-active-var: #3f3f46; /* dark - zinc-700 (Gris un peu plus clair pour l'actif) */
+        --input-var: #18181b; /* dark - zinc-900 (Fond de champ de saisie) */
+        --primary-color-var: #6366f1; /* indigo-500 (Couleur primaire inchangée) */
+        --primary-hover-var: #4f46e5; /* indigo-600 */
+        --error-var: #450a0a; /* red-950 */
+        --success-var: #052e16; /* green-950 */
+        --warning-var: #b45309; /* amber-800 */
+    }
+    /* Transition pour un effet doux des couleurs */
+    .transition-colors-theme { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
+    /* Style et positionnement du bouton de Thème */
+    .theme-switch {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 24px;
+        transition: color 0.2s;
+        position: fixed; /* Reste fixe même si le reste défile */
+        top: 1rem;
+        right: 1rem;
+        z-index: 50; /* Doit être au-dessus du reste */
+    }
+    /* Style pour la sidebar responsive */
+    .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        z-index: 40;
+        transform: translateX(-100%);
+    }
+    /* Styles pour le mode desktop/large screen */
+    @media (min-width: 1024px) {
+        .sidebar {
+            transform: translateX(0);
+        }
+        .main-content {
+            margin-left: 16rem; /* 64px width */
+        }
+    }
+    /* Styles pour le mode mobile/tablet */
+    @media (max-width: 1023px) {
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+        }
+        .sidebar.open {
+            transform: translateX(0);
+        }
+    }
+    /* Ajout des styles pour les variables CSS dans Tailwind */
+    .bg-page-var { background-color: var(--page-var); }
+    .text-color-var { color: var(--color-var); }
+    .text-secondary-var { color: var(--secondary-var); }
+    .bg-card-var { background-color: var(--card-var); }
+    .bg-sidebar-var { background-color: var(--sidebar-var); }
+    .border-sidebar-var { border-color: var(--sidebar-var); }
+    .bg-sidebar-active-var { background-color: var(--sidebar-active-var); }
+    .bg-input-var { background-color: var(--input-var); }
+    .border-input-var { border-color: var(--input-var); }
+    .text-primary-color-var { color: var(--primary-color-var); }
+    .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color-var); }
+    .focus\:border-primary-color-var:focus { border-color: var(--primary-color-var); }
+    .bg-primary-color-var { background-color: var(--primary-color-var); }
+    .hover\:bg-primary-hover-var:hover { background-color: var(--primary-hover-var); }
+    .hover\:bg-sidebar-active-var:hover { background-color: var(--sidebar-active-var); }
+    .hover\:bg-sidebar-active-var\/80:hover { background-color: color-mix(in srgb, var(--sidebar-active-var) 80%, transparent); }
+    /* Correction pour les messages flash pour utiliser les variables */
+    .bg-red-900\/20 { background-color: color-mix(in srgb, var(--error-var) 20%, transparent); } /* Approximation des couleurs spécifiques */
+    .text-red-500 { color: #ef4444; } /* Laissez le rouge spécifique pour les erreurs */
+    .border-red-900 { border-color: #7f1d1d; } /* Laissez le rouge spécifique pour les erreurs */
+    .bg-green-900\/20 { background-color: color-mix(in srgb, var(--success-var) 20%, transparent); } /* Approximation des couleurs spécifiques */
+    .text-green-500 { color: #22c55e; } /* Laissez le vert spécifique pour le succès */
+    .border-green-900 { border-color: #064e3b; } /* Laissez le vert spécifique pour le succès */
+    .hover\:text-link-hover-var:hover { color: var(--secondary-var); } /* Ajout d'une pseudo-variable pour le hover de l'icône de thème (simple fallback) */
+</style>
+</head>
+<body class="bg-page-var text-color-var min-h-screen transition-colors-theme">
+    <button id="theme-switch" class="theme-switch text-color-var hover:text-link-hover-var transition-colors-theme">
+        <span class="material-symbols-rounded">dark_mode</span>
+    </button>
+    <aside id="sidebar" class="sidebar w-64 bg-sidebar-var border-r border-sidebar-var p-6 lg:block transition-colors-theme">
+        <div class="flex items-center mb-10">
+            <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+            <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Nexus Pro</span>
+        </div>
+        <nav class="space-y-3">
+            <a href="{{ url_for('user_bp.dashboard') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">dashboard</span>
+                <span class="ml-3">Dashboard</span>
+            </a>
+            <a href="{{ url_for('user_bp.api_key') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">key</span>
+                <span class="ml-3">Clés API</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 bg-sidebar-active-var text-color-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+                <a href="/api_logs" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">list_alt</span>
+                <span class="ml-3">Logs d'API</span>
+            </a>
+                <a href="/tarifs" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">payments</span>
+                <span class="ml-3">Tarifs</span>
+            </a>
+            <a href="/statut" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">monitor_heart</span>
+                <span class="ml-3">Statut de l'API</span>
+            </a>
+            <a href="{{ url_for('user_bp.deconnexion') }}" id="logout-button-sidebar" class="flex items-center p-3 text-red-500 hover:text-red-400 hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">logout</span>
+                <span class="ml-3">Déconnexion</span>
+            </a>
+        </nav>
+        <div class="absolute bottom-6 w-52 text-xs text-secondary-var transition-colors-theme">
+            <p>Connecté en tant que: <span class="font-semibold text-color-var transition-colors-theme">{{ user.email if user and user.email else 'Chargement...' }}</span></p>
+            <p>Plan: <span class="font-semibold text-color-var transition-colors-theme">{{ (user.plan | upper) if user and user.plan else 'GRATUIT' }}</span></p>
+        </div>
+    </aside>
+    <div id="main-content" class="main-content p-8 transition-colors-theme">
+        <header class="lg:hidden flex justify-between items-center mb-8">
+            <div class="flex items-center">
+                 <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+                <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Nexus Pro</span>
+            </div>
+            <button id="sidebar-toggle" class="p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme">
+                 <span class="material-symbols-rounded text-color-var">menu</span>
+            </button>
+        </header>
+        <h1 class="text-3xl font-bold mb-8 text-color-var transition-colors-theme">Profil Utilisateur et Compte</h1>
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="p-4 mb-4 text-sm rounded-lg border border-transparent
+                          {{ 'bg-red-900/20 text-red-500 border-red-900' if category == 'error' or category == 'danger' or category == 'warning' else 'bg-green-900/20 text-green-500 border-green-900' }}" role="alert">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme mb-8">
+            <h2 class="text-xl font-semibold mb-4 flex items-center text-color-var transition-colors-theme">
+                <span class="material-symbols-rounded mr-2">info</span>
+                Vos Informations de Compte
+            </h2>
+            <div class="space-y-3 text-secondary-var transition-colors-theme">
+                <p><strong>Nom d'utilisateur:</strong> <span class="text-color-var font-medium">{{ user.username if user and user.username else 'N/A' }}</span></p>
+                <p><strong>Adresse Email:</strong> <span class="text-color-var font-medium">{{ user.email if user and user.email else 'N/A' }}</span></p>
+                <p><strong>Plan d'abonnement:</strong> <span class="text-color-var font-medium">{{ (user.plan | upper) if user and user.plan else 'GRATUIT' }}</span></p>
+                <p><strong>Date d'inscription:</strong> <span class="text-color-var font-medium">{{ user.registration_date if user and user.registration_date else 'N/A' }}</span></p>
+            </div>
+        </div>
+        <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme mb-8">
+            <h2 class="text-xl font-semibold mb-4 flex items-center text-color-var transition-colors-theme">
+                <span class="material-symbols-rounded mr-2 text-primary-color-var">edit</span>
+                Mettre à Jour le Profil et le Mot de Passe
+            </h2>
+            <p class="text-secondary-var mb-6 text-sm transition-colors-theme">Modifiez votre nom, votre adresse e-mail ou votre mot de passe. Remplissez uniquement les champs que vous souhaitez mettre à jour (sauf pour les champs Nom et Email).</p>
+            <form id="profile-update-form" method="POST" action="{{ url_for('user_bp.profile') }}">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="mb-4">
+                        <label for="username" class="block text-sm font-medium text-secondary-var mb-2 transition-colors-theme">Nom d'utilisateur</label>
+                        <input type="text" id="username" name="username" value="{{ user.username if user and user.username else '' }}" required
+                               class="w-full bg-input-var text-color-var p-3 rounded-lg border border-input-var focus:outline-none focus:ring-2 focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                    </div>
+                    <div class="mb-4">
+                        <label for="email" class="block text-sm font-medium text-secondary-var mb-2 transition-colors-theme">Adresse E-mail</label>
+                        <input type="email" id="email" name="email" value="{{ user.email if user and user.email else '' }}" required
+                               class="w-full bg-input-var text-color-var p-3 rounded-lg border border-input-var focus:outline-none focus:ring-2 focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                    </div>
+                </div>
+                <div class="border-t border-sidebar-var pt-6 mt-4">
+                    <h3 class="text-lg font-semibold mb-4 flex items-center text-color-var transition-colors-theme">
+                        <span class="material-symbols-rounded mr-2 text-primary-color-var">lock</span>
+                        Changement de Mot de Passe (Optionnel)
+                    </h3>
+                    <p class="text-secondary-var mb-6 text-sm transition-colors-theme">Remplissez ces champs UNIQUEMENT si vous souhaitez changer votre mot de passe.</p>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div class="mb-4">
+                            <label for="new_password" class="block text-sm font-medium text-secondary-var mb-2 transition-colors-theme">Nouveau Mot de Passe</label>
+                            <input type="password" id="new_password" name="new_password" placeholder="Laisser vide pour ne pas changer"
+                                   class="w-full bg-input-var text-color-var p-3 rounded-lg border border-input-var focus:outline-none focus:ring-2 focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                        </div>
+                        <div class="mb-4">
+                            <label for="confirm_password" class="block text-sm font-medium text-secondary-var mb-2 transition-colors-theme">Confirmer le Nouveau Mot de Passe</label>
+                             <input type="password" id="confirm_password" name="confirm_password" placeholder="Confirmer le nouveau mot de passe"
+                                   class="w-full bg-input-var text-color-var p-3 rounded-lg border border-input-var focus:outline-none focus:ring-2 focus:ring-primary-color-var focus:border-primary-color-var transition-colors-theme">
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-6">
+                    <button type="submit" class="w-full bg-primary-color-var hover:bg-primary-hover-var text-white font-bold py-3 px-4 transition duration-200 flex items-center justify-center btn-square transition-colors-theme">
+                        <span class="material-symbols-rounded mr-2">save</span>
+                        Sauvegarder les Changements
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script>
+        // Fonction utilitaire pour appliquer le thème
+        function applyTheme(theme) {
+            if (theme === 'dark') {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            }
+            // Mettre à jour l'icône du switch si nécessaire
+            const icon = document.querySelector('#theme-switch .material-symbols-rounded');
+            if (icon) {
+                // S'assurer que l'icône reflète le mode ACTIF
+                icon.textContent = theme === 'dark' ? 'light_mode' : 'dark_mode';
+            }
+        }
+        // 1. Initialisation du thème au chargement
+        // Récupérer le thème sauvé ou utiliser 'dark' comme défaut
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        applyTheme(savedTheme);
+        // 2. Logique du switch de thème
+        document.getElementById('theme-switch').addEventListener('click', () => {
+            // Vérifier si la classe 'dark' est présente sur l'élément racine
+            const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+            applyTheme(newTheme);
+        });
+        // 3. Logique de bascule de la sidebar pour mobile/tablette
+        const sidebarToggle = document.getElementById('sidebar-toggle');
+        const sidebar = document.getElementById('sidebar');
+        if (sidebarToggle && sidebar) {
+            sidebarToggle.addEventListener('click', () => {
+                sidebar.classList.toggle('open');
+            });
+        }
+        // 4. Fermeture de la sidebar lors du clic sur un lien (pour mobile)
+        // Note: Assurez-vous que 'sidebar' est défini avant d'appeler querySelectorAll
+        if (sidebar) {
+            const sidebarLinks = sidebar.querySelectorAll('a');
+            if (sidebarLinks) {
+                sidebarLinks.forEach(link => {
+                    link.addEventListener('click', () => {
+                        // Fermer la sidebar uniquement sur les petits écrans
+                        if (window.innerWidth < 1024) {
+                            sidebar.classList.remove('open');
+                        }
+                    });
+                });
+            }
+        }
+        // 5. Logique de Déconnexion (Conservée)
+        const logoutHandler = async (e) => {
+            e.preventDefault();
+            // La déconnexion est gérée par la route Flask directe
+            window.location.href = document.getElementById('logout-button-sidebar').href;
+        };
+        // On attache l'événement à la déconnexion dans la sidebar.
+        const logoutButtonSidebar = document.getElementById('logout-button-sidebar');
+        if (logoutButtonSidebar) {
+            logoutButtonSidebar.addEventListener('click', logoutHandler);
+        }
+    </script>
+</body>
+</html>

templates/statut.html ADDED Viewed

	@@ -0,0 +1,468 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nexus | Statut de l'API</title>
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+<style>
+    /* Configuration de la police Inter */
+    body { font-family: 'Inter', sans-serif; }
+    /* Définition des variables de thème (Ajoutées pour le style) */
+    :root {
+        /* Couleurs de base (exemple - ajustez si nécessaire) */
+        --page-var: #f8fafc; /* light - slate-50 */
+        --color-var: #0f172a; /* light - slate-900 */
+        --secondary-var: #64748b; /* light - slate-500 */
+        --card-var: #ffffff; /* light - white */
+        --sidebar-var: #e2e8f0; /* light - slate-200 */
+        --sidebar-active-var: #cbd5e1; /* light - slate-300 */
+        --input-var: #f1f5f9; /* light - slate-100 */
+        --primary-color-var: #4f46e5; /* indigo-600 */
+        --primary-hover-var: #4338ca; /* indigo-700 */
+        --error-var: #fef2f2; /* red-50 */
+        --success-var: #f0fdf4; /* green-50 */
+        --warning-var: #fcd34d; /* amber-400 */
+    }
+    .dark {
+        --page-var: #18181b; /* dark - zinc-900 (Gris très foncé pour l'arrière-plan de la page) */
+        --color-var: #f4f4f5; /* dark - zinc-100 (Texte clair) */
+        --secondary-var: #a1a1aa; /* dark - zinc-400 (Texte secondaire) */
+        --card-var: #27272a; /* dark - zinc-800 (Gris foncé pour les cartes et la sidebar) */
+        --sidebar-var: #27272a; /* dark - zinc-800 */
+        --sidebar-active-var: #3f3f46; /* dark - zinc-700 (Gris un peu plus clair pour l'actif) */
+        --input-var: #18181b; /* dark - zinc-900 (Fond de champ de saisie) */
+        --primary-color-var: #6366f1; /* indigo-500 (Couleur primaire inchangée) */
+        --primary-hover-var: #4f46e5; /* indigo-600 */
+        --error-var: #450a0a; /* red-950 */
+        --success-var: #052e16; /* green-950 */
+        --warning-var: #b45309; /* amber-800 */
+    }
+    /* Transition pour un effet doux des couleurs */
+    .transition-colors-theme { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
+    /* Style et positionnement du bouton de Thème */
+    .theme-switch {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 24px;
+        transition: color 0.2s;
+        position: fixed; /* Reste fixe même si le reste défile */
+        top: 1rem;
+        right: 1rem;
+        z-index: 50; /* Doit être au-dessus du reste */
+    }
+    /* Style pour la sidebar responsive */
+    .sidebar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        z-index: 40;
+        transform: translateX(-100%);
+    }
+    /* Styles pour le mode desktop/large screen */
+    @media (min-width: 1024px) {
+        .sidebar {
+            transform: translateX(0);
+        }
+        .main-content {
+            margin-left: 16rem; /* 64px width */
+        }
+    }
+    /* Styles pour le mode mobile/tablet */
+    @media (max-width: 1023px) {
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+        }
+        .sidebar.open {
+            transform: translateX(0);
+        }
+    }
+    /* Ajout des styles pour les variables CSS dans Tailwind */
+    .bg-page-var { background-color: var(--page-var); }
+    .text-color-var { color: var(--color-var); }
+    .text-secondary-var { color: var(--secondary-var); }
+    .bg-card-var { background-color: var(--card-var); }
+    .bg-sidebar-var { background-color: var(--sidebar-var); }
+    .border-sidebar-var { border-color: var(--sidebar-var); }
+    .bg-sidebar-active-var { background-color: var(--sidebar-active-var); }
+    .bg-input-var { background-color: var(--input-var); }
+    .border-input-var { border-color: var(--input-var); }
+    .text-primary-color-var { color: var(--primary-color-var); }
+    .focus\:ring-primary-color-var:focus { --tw-ring-color: var(--primary-color-var); }
+    .focus\:border-primary-color-var:focus { border-color: var(--primary-color-var); }
+    .bg-primary-color-var { background-color: var(--primary-color-var); }
+    .hover\:bg-primary-hover-var:hover { background-color: var(--primary-hover-var); }
+    .hover\:bg-sidebar-active-var:hover { background-color: var(--sidebar-active-var); }
+    .hover\:bg-sidebar-active-var\/80:hover { background-color: color-mix(in srgb, var(--sidebar-active-var) 80%, transparent); }
+    /* Correction pour les messages flash pour utiliser les variables */
+    .bg-red-900\/20 { background-color: color-mix(in srgb, var(--error-var) 20%, transparent); } /* Approximation des couleurs spécifiques */
+    .text-red-500 { color: #ef4444; } /* Laissez le rouge spécifique pour les erreurs */
+    .border-red-900 { border-color: #7f1d1d; } /* Laissez le rouge spécifique pour les erreurs */
+    .bg-green-900\/20 { background-color: color-mix(in srgb, var(--success-var) 20%, transparent); } /* Approximation des couleurs spécifiques */
+    .text-green-500 { color: #22c55e; } /* Laissez le vert spécifique pour le succès */
+    .border-green-900 { border-color: #064e3b; } /* Laissez le vert spécifique pour le succès */
+    .hover\:text-link-hover-var:hover { color: var(--secondary-var); } /* Ajout d'une pseudo-variable pour le hover de l'icône de thème (simple fallback) */
+    /* Nouveaux styles pour le statut de l'API */
+    .status-bar {
+        height: 1.5rem; /* 6px */
+        border-radius: 0.375rem; /* rounded-md */
+        transition: width 0.5s ease-out; /* Animation douce pour le changement de statut */
+        display: flex;
+        align-items: center;
+        padding-left: 0.75rem;
+        font-weight: 600;
+        color: white; /* Texte blanc par défaut pour la barre de statut */
+    }
+    /* Couleurs spécifiques pour le statut */
+    .status-green { background-color: #22c55e; } /* green-500 */
+    .status-yellow { background-color: #f59e0b; } /* amber-500 */
+    .status-red { background-color: #ef4444; } /* red-500 */
+</style>
+</head>
+<body class="bg-page-var text-color-var min-h-screen transition-colors-theme">
+    <button id="theme-switch" class="theme-switch text-color-var hover:text-link-hover-var transition-colors-theme">
+        <span class="material-symbols-rounded">dark_mode</span>
+    </button>
+ <aside id="sidebar" class="sidebar w-64 bg-sidebar-var border-r border-sidebar-var p-6 flex flex-col lg:block transition-colors-theme">
+    <div class="flex items-center mb-6 shrink-0">
+        <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+        <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Nexus Pro</span>
+    </div>
+    <div class="flex-grow overflow-y-auto pr-2" id="scrollable-nav-container">
+        <nav class="space-y-3 pb-4">
+            <a href="{{ url_for('user_bp.dashboard') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">dashboard</span>
+                <span class="ml-3">Dashboard</span>
+            </a>
+            <a href="{{ url_for('user_bp.api_key') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">key</span>
+                <span class="ml-3">Clés API</span>
+            </a>
+            <a href="{{ url_for('user_bp.profile') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">person</span>
+                <span class="ml-3">Profil</span>
+            </a>
+            <a href="{{ url_for('user_bp.embed_forms') }}" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">code</span>
+                <span class="ml-3">Formulaires Embarqués</span>
+            </a>
+            <a href="/api_logs" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">list_alt</span>
+                <span class="ml-3">Logs d'API</span>
+            </a>
+            <a href="/tarifs" class="flex items-center p-3 text-secondary-var hover:text-color-var hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">payments</span>
+                <span class="ml-3">Tarifs</span>
+            </a>
+            <a href="/statut" class="flex items-center p-3 bg-sidebar-active-var text-color-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">monitor_heart</span>
+                <span class="ml-3">Statut de l'API</span>
+            </a>
+            <a href="{{ url_for('user_bp.deconnexion') }}" id="logout-button-sidebar" class="flex items-center p-3 text-red-500 hover:text-red-400 hover:bg-sidebar-active-var rounded-lg transition duration-150 transition-colors-theme">
+                <span class="material-symbols-rounded">logout</span>
+                <span class="ml-3">Déconnexion</span>
+            </a>
+        </nav>
+    </div>
+    <div class="mt-auto pt-4 text-xs text-secondary-var transition-colors-theme border-t border-sidebar-var/50 shrink-0">
+        <p>Connecté en tant que: <span class="font-semibold text-color-var transition-colors-theme">{{ user.email if user and user.email else 'Chargement...' }}</span></p>
+        <p>Plan: <span class="font-semibold text-color-var transition-colors-theme">{{ (user.plan | upper) if user and user.plan else 'GRATUIT' }}</span></p>
+    </div>
+</aside>
+    <div id="main-content" class="main-content p-8 transition-colors-theme">
+        <header class="lg:hidden flex justify-between items-center mb-8">
+            <div class="flex items-center">
+                 <img src="https://i.imgur.com/7Gn3toV.png" alt="Nexus Pro Logo" class="h-8">
+                <span class="text-xl font-bold text-color-var ml-2 transition-colors-theme">Nexus Pro</span>
+            </div>
+            <button id="sidebar-toggle" class="p-2 rounded-lg bg-sidebar-active-var hover:bg-sidebar-active-var/80 transition-colors-theme">
+                 <span class="material-symbols-rounded text-color-var">menu</span>
+            </button>
+        </header>
+        <h1 class="text-3xl font-bold mb-8 text-color-var transition-colors-theme">Statut de l'API Nexus</h1>
+        {% with messages = get_flashed_messages(with_categories=true) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="p-4 mb-4 text-sm rounded-lg border border-transparent
+                          {{ 'bg-red-900/20 text-red-500 border-red-900' if category == 'error' or category == 'danger' or category == 'warning' else 'bg-green-900/20 text-green-500 border-green-900' }}" role="alert">
+                        {{ message }}
+                    </div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme mb-8">
+            <h2 class="text-xl font-semibold mb-4 flex items-center text-color-var transition-colors-theme">
+                <span class="material-symbols-rounded mr-2 text-primary-color-var">cloud_queue</span>
+                État Global du Service
+            </h2>
+            <div id="overall-status-display" class="p-4 rounded-lg text-lg font-bold text-white transition duration-300 shadow-md">
+                <p id="overall-status-text">Chargement du statut...</p>
+            </div>
+        </div>
+        <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme mb-8">
+            <h2 class="text-xl font-semibold mb-6 flex items-center text-color-var transition-colors-theme">
+                <span class="material-symbols-rounded mr-2 text-primary-color-var">bar_chart</span>
+                Statut des Composants API
+            </h2>
+            <div class="space-y-6">
+                <div class="flex flex-col md:flex-row items-start md:items-center justify-between border-b border-sidebar-var pb-4">
+                    <span class="text-lg font-medium text-color-var w-full md:w-1/3 mb-2 md:mb-0 transition-colors-theme">Service d'Authentification</span>
+                    <div class="w-full md:w-2/3">
+                        <div id="auth-status-bar" data-status="{{ api_status.auth }}" class="status-bar" style="width: 100%;" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+                            {{ api_status.auth_display if api_status and api_status.auth_display else 'Chargement...' }}
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col md:flex-row items-start md:items-center justify-between border-b border-sidebar-var pb-4">
+                    <span class="text-lg font-medium text-color-var w-full md:w-1/3 mb-2 md:mb-0 transition-colors-theme">Traitement des Données (Endpoints V1)</span>
+                    <div class="w-full md:w-2/3">
+                        <div id="data-status-bar" data-status="{{ api_status.data_v1 }}" class="status-bar" style="width: 100%;" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+                            {{ api_status.data_v1_display if api_status and api_status.data_v1_display else 'Chargement...' }}
+                        </div>
+                    </div>
+                </div>
+                <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
+                    <span class="text-lg font-medium text-color-var w-full md:w-1/3 mb-2 md:mb-0 transition-colors-theme">Base de Données Principale</span>
+                    <div class="w-full md:w-2/3">
+                        <div id="db-status-bar" data-status="{{ api_status.database }}" class="status-bar" style="width: 100%;" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
+                            {{ api_status.database_display if api_status and api_status.database_display else 'Chargement...' }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <p class="mt-8 text-sm text-secondary-var">Dernière mise à jour: <span id="last-updated">{{ api_status.last_updated if api_status and api_status.last_updated else 'N/A' }}</span></p>
+        </div>
+        <div class="bg-card-var p-6 rounded-lg shadow-xl border border-sidebar-var transition-colors-theme">
+            <h2 class="text-xl font-semibold mb-4 flex items-center text-color-var transition-colors-theme">
+                <span class="material-symbols-rounded mr-2 text-primary-color-var">history</span>
+                Historique des Incidents
+            </h2>
+            {% if incidents %}
+                <ul class="space-y-4">
+                    {% for incident in incidents %}
+                    <li class="border-l-4 p-4 rounded-r-lg shadow-sm
+                        {% if incident.status == 'resolved' %} border-green-500 bg-green-900/20 text-green-500
+                        {% elif incident.status == 'monitoring' %} border-yellow-500 bg-yellow-900/20 text-yellow-500
+                        {% elif incident.status == 'investigating' %} border-red-500 bg-red-900/20 text-red-500
+                        {% else %} border-secondary-var bg-input-var text-secondary-var
+                        {% endif %}">
+                        <p class="font-bold">{{ incident.title }} -
+                            <span class="text-sm font-normal uppercase">[{{ incident.status_display }}]</span></p>
+                        <p class="text-sm mt-1">{{ incident.description }}</p>
+                        <p class="text-xs mt-2 opacity-75">Date: {{ incident.date }}</p>
+                    </li>
+                    {% endfor %}
+                </ul>
+            {% else %}
+                <p class="text-secondary-var italic">Aucun incident récent à signaler. Le service est stable.</p>
+            {% endif %}
+        </div>
+    </div>
+    <script>
+        // Fonction utilitaire pour appliquer le thème
+        function applyTheme(theme) {
+            if (theme === 'dark') {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            }
+            // Mettre à jour l'icône du switch si nécessaire
+            const icon = document.querySelector('#theme-switch .material-symbols-rounded');
+            if (icon) {
+                // S'assurer que l'icône reflète le mode ACTIF
+                icon.textContent = theme === 'dark' ? 'light_mode' : 'dark_mode';
+            }
+        }
+        // 1. Initialisation du thème au chargement
+        // Récupérer le thème sauvé ou utiliser 'dark' comme défaut
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        applyTheme(savedTheme);
+        // 2. Logique du switch de thème
+        document.getElementById('theme-switch').addEventListener('click', () => {
+            // Vérifier si la classe 'dark' est présente sur l'élément racine
+            const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+            applyTheme(newTheme);
+        });
+        // 3. Logique de bascule de la sidebar pour mobile/tablette
+        const sidebarToggle = document.getElementById('sidebar-toggle');
+        const sidebar = document.getElementById('sidebar');
+        if (sidebarToggle && sidebar) {
+            sidebarToggle.addEventListener('click', () => {
+                sidebar.classList.toggle('open');
+            });
+        }
+        // 4. Fermeture de la sidebar lors du clic sur un lien (pour mobile)
+        if (sidebar) {
+            const sidebarLinks = sidebar.querySelectorAll('a');
+            if (sidebarLinks) {
+                sidebarLinks.forEach(link => {
+                    link.addEventListener('click', () => {
+                        // Fermer la sidebar uniquement sur les petits écrans
+                        if (window.innerWidth < 1024) {
+                            sidebar.classList.remove('open');
+                        }
+                    });
+                });
+            }
+        }
+        // 5. Logique de Déconnexion (Conservée)
+        const logoutHandler = async (e) => {
+            e.preventDefault();
+            // La déconnexion est gérée par la route Flask directe
+            window.location.href = document.getElementById('logout-button-sidebar').href;
+        };
+        // On attache l'événement à la déconnexion dans la sidebar.
+        const logoutButtonSidebar = document.getElementById('logout-button-sidebar');
+        if (logoutButtonSidebar) {
+            logoutButtonSidebar.addEventListener('click', logoutHandler);
+        }
+        // 6. Logique de Mise à Jour du Statut de l'API (Simulée pour l'exemple)
+        function updateStatusBar(elementId, status) {
+            const bar = document.getElementById(elementId);
+            if (!bar) return;
+            // Réinitialiser les classes de couleur
+            bar.classList.remove('status-green', 'status-yellow', 'status-red');
+            let colorClass = 'status-green';
+            let statusText = 'Opérationnel';
+            // Le statut peut venir de Jinja (comme 'operational', 'degraded', 'outage')
+            switch (status) {
+                case 'operational':
+                    colorClass = 'status-green';
+                    statusText = 'Opérationnel';
+                    bar.style.width = '100%';
+                    break;
+                case 'degraded':
+                    colorClass = 'status-yellow';
+                    statusText = 'Performance Dégradée';
+                    bar.style.width = '80%'; // Visuel de barre partielle
+                    break;
+                case 'outage':
+                    colorClass = 'status-red';
+                    statusText = 'Panne Majeure';
+                    bar.style.width = '20%'; // Visuel de barre presque vide
+                    break;
+                default:
+                    colorClass = 'bg-secondary-var';
+                    statusText = 'Indisponible / Inconnu';
+                    bar.style.width = '100%';
+            }
+            bar.classList.add(colorClass);
+            // S'assurer que le texte est à jour (seulement si non fourni par Jinja)
+            if (bar.textContent.trim() === 'Chargement...') {
+                bar.textContent = statusText;
+            }
+            bar.setAttribute('aria-valuenow', bar.style.width.replace('%', ''));
+        }
+        function updateOverallStatus(authStatus, dataStatus, dbStatus) {
+            const display = document.getElementById('overall-status-display');
+            const text = document.getElementById('overall-status-text');
+            if (!display || !text) return;
+            display.classList.remove('bg-green-500', 'bg-yellow-500', 'bg-red-500', 'bg-secondary-var');
+            // Logique de statut général
+            if (authStatus === 'outage' || dataStatus === 'outage' || dbStatus === 'outage') {
+                display.classList.add('bg-red-500');
+                text.textContent = 'PANNE MAJEURE - Nous enquêtons sur un problème.';
+            } else if (authStatus === 'degraded' || dataStatus === 'degraded' || dbStatus === 'degraded') {
+                display.classList.add('bg-yellow-500');
+                text.textContent = 'PERFORMANCE DÉGRADÉE - Certains services sont affectés.';
+            } else if (authStatus === 'operational' && dataStatus === 'operational' && dbStatus === 'operational') {
+                display.classList.add('bg-green-500');
+                text.textContent = 'TOUT EST OPÉRATIONNEL - L\'API fonctionne normalement.';
+            } else {
+                display.classList.add('bg-secondary-var');
+                text.textContent = 'Statut Indéterminé.';
+            }
+        }
+        // Fonction pour lire les statuts depuis les attributs de données (simulant le backend)
+        function initializeStatus() {
+            // Lecture des données Jinja2 pré-remplies (simulées)
+            const authStatus = document.getElementById('auth-status-bar').dataset.status || 'operational';
+            const dataStatus = document.getElementById('data-status-bar').dataset.status || 'operational';
+            const dbStatus = document.getElementById('db-status-bar').dataset.status || 'operational';
+            // Mise à jour visuelle
+            updateStatusBar('auth-status-bar', authStatus);
+            updateStatusBar('data-status-bar', dataStatus);
+            updateStatusBar('db-status-bar', dbStatus);
+            updateOverallStatus(authStatus, dataStatus, dbStatus);
+            // ** Simulation d'une mise à jour en temps réel (Animation) **
+            // Dans une application réelle, cette fonction appellerait une API / WebSocket.
+            // Pour l'exemple, nous allons animer les barres après le chargement initial.
+            setTimeout(() => {
+                // Le backend peut ajuster la largeur pour montrer la "santé" (par exemple, 90% pour opé)
+                // Ici, nous utilisons juste les couleurs/texte basés sur le statut simple (operational/degraded/outage)
+                document.getElementById('auth-status-bar').style.width = authStatus === 'operational' ? '100%' : (authStatus === 'degraded' ? '80%' : '20%');
+                document.getElementById('data-status-bar').style.width = dataStatus === 'operational' ? '100%' : (dataStatus === 'degraded' ? '80%' : '20%');
+                document.getElementById('db-status-bar').style.width = dbStatus === 'operational' ? '100%' : (dbStatus === 'degraded' ? '80%' : '20%');
+            }, 100); // Petite pause pour l'effet de chargement initial.
+        }
+        // 7. Initialisation du statut au chargement de la page
+        document.addEventListener('DOMContentLoaded', initializeStatus);
+    </script>
+</body>
+</html>

templates/support.html ADDED Viewed

	@@ -0,0 +1,303 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Support & Contact - Nexus</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        /* Étape 2 : Définir les Variables de Thème (SOMBRE par défaut) */
+        :root {
+            /* Couleurs SOMBRE (Noir très foncé pour le fond) */
+            --bg-darker: #0A0A0A; /* Très foncé pour la barre ou le footer */
+            --bg-default: #121212; /* Fond général */
+            --bg-form: #1F1F1F; /* Fond des blocs de contenu */
+            --text-color: #E3E3E3;
+            --input-bg: #2C2C2C;
+            --input-border: #2C2C2C;
+            --header-border: #333333; /* Bordure plus discrète */
+            --blue-500: #3B82F6; /* Couleur primaire pour rester visible */
+            --blue-600: #2563EB;
+            --blue-700: #1D4ED8;
+        }
+        /* Mode CLAIR */
+        html.light {
+            /* Couleurs CLAIR */
+            --bg-darker: #FFFFFF;
+            --bg-default: #F7F7F7;
+            --bg-form: #FFFFFF;
+            --text-color: #333333;
+            --input-bg: #EAEAEA;
+            --input-border: #D1D5DB;
+            --header-border: #E5E7EB;
+            --blue-500: #1D4ED8;
+            --blue-600: #2563EB;
+            --blue-700: #1D4ED8;
+        }
+        /* Appliquer les variables et transitions */
+        body {
+            background-color: var(--bg-default) !important;
+            color: var(--text-color) !important;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        /* Réinitialiser les classes Tailwind par défaut pour utiliser les variables */
+        .bg-gray-900 { background-color: var(--bg-default) !important; }
+        .bg-gray-800 { background-color: var(--bg-form) !important; }
+        .bg-gray-700 { background-color: var(--input-bg) !important; }
+        .text-white { color: var(--text-color) !important; }
+        .text-gray-300 { color: var(--text-color) !important; }
+        .text-gray-400 { color: #A0A0A0 !important; } /* Garder gris pour les textes secondaires */
+        .text-gray-500 { color: #888888 !important; }
+        .border-gray-700 { border-color: var(--header-border) !important; }
+        .border-blue-500\/50 { border-color: color-mix(in srgb, var(--blue-500) 50%, transparent) !important; }
+        .text-blue-500 { color: var(--blue-500) !important; }
+        .bg-blue-600 { background-color: var(--blue-600) !important; }
+        .hover\:bg-blue-700:hover { background-color: var(--blue-700) !important; }
+        .hover\:text-blue-500:hover { color: var(--blue-500) !important; }
+        .border-blue-600 { border-color: var(--blue-600) !important; }
+        /* Style du bouton de thème */
+        #theme-toggle {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-color);
+            font-size: 24px;
+            transition: color 0.2s;
+            margin-right: 16px; /* Espace à droite du bouton */
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="flex flex-col sm:flex-row justify-between items-center py-4 border-b border-blue-500/50 mb-8
+                       bg-[var(--bg-default)] sticky top-0 z-50 transition duration-300 shadow-xl shadow-black/20">
+            <h1 class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                Support & Contact
+            </h1>
+            <nav class="flex items-center space-x-4">
+                <button id="theme-toggle" aria-label="Basculer le thème">
+                    <span class="material-symbols-rounded">light_mode</span>
+                </button>
+                <a href="/" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                    Accueil
+                </a>
+                {% if is_logged_in %}
+                    <a href="/dashboard" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition duration-200 font-medium">
+                        Dashboard
+                    </a>
+                {% else %}
+                    <a href="/connexion" class="px-4 py-2 border-2 border-blue-600 text-blue-600 rounded-lg hover:bg-blue-600 hover:text-white font-medium transition duration-200">
+                        Connexion
+                    </a>
+                {% endif %}
+            </nav>
+        </header>
+        <main class="space-y-10 max-w-2xl mx-auto">
+            <div class="p-8 bg-gray-800 rounded-xl shadow-2xl border-l-4 border-blue-500">
+                {% if is_logged_in %}
+                    <h2 class="text-3xl font-bold text-blue-500 mb-4">Envoyer une Requête (Connecté)</h2>
+                    <p class="text-gray-300 mb-6">
+                        Votre ID utilisateur ({{ user_id }}) sera automatiquement attaché à votre ticket, garantissant un traitement plus rapide.
+                    </p>
+                {% else %}
+                    <h2 class="text-3xl font-bold text-blue-500 mb-4">Contactez notre Équipe</h2>
+                    <p class="text-gray-300 mb-6">
+                        Veuillez vous connecter pour un support prioritaire.
+                    </p>
+                {% endif %}
+                <form id="supportForm" class="space-y-6">
+                    <div>
+                        <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">Sujet de la Requête</label>
+                        <input type="text" id="subject" name="subject" required
+                               class="w-full px-4 py-3 bg-gray-700 text-white border-2 border-gray-700 rounded-lg focus:border-blue-500 transition duration-200"
+                               placeholder="Problème de connexion, Question de facturation...">
+                    </div>
+                    <div>
+                        <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Votre E-mail</label>
+                        <input type="email" id="email" name="email" required
+                               class="w-full px-4 py-3 bg-gray-700 text-white border-2 border-gray-700 rounded-lg focus:border-blue-500 transition duration-200"
+                               placeholder="votre.email@exemple.com"
+                               value="{% if is_logged_in %}L'email serait ici (via API){% endif %}">
+                    </div>
+                    <div>
+                        <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Message</label>
+                        <textarea id="message" name="message" rows="5" required
+                                  class="w-full px-4 py-3 bg-gray-700 text-white border-2 border-gray-700 rounded-lg focus:border-blue-500 transition duration-200"
+                                  placeholder="Décrivez votre problème ou votre question en détail."></textarea>
+                    </div>
+                    <div id="messageBoxSupport" class="text-sm p-3 rounded-lg hidden" role="alert"></div>
+                    <button type="submit"
+                            class="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition duration-300 shadow-lg">
+                        Envoyer le Message
+                    </button>
+                </form>
+            </div>
+        </main>
+        <footer class="mt-12 pt-6 border-t border-gray-700 text-center text-gray-500 text-sm">
+            &copy; 2024 Nexus. Tous droits réservés.
+        </footer>
+    </div>
+    <script>
+        // Logique de bascule du mode sombre/clair (Étape 3)
+        const themeToggle = document.getElementById('theme-toggle');
+        const htmlElement = document.documentElement;
+        const iconElement = themeToggle.querySelector('.material-symbols-rounded');
+        // Charger le thème depuis le localStorage
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            htmlElement.classList.add('light');
+            iconElement.textContent = 'dark_mode'; // Afficher l'icône "Sombre" en mode clair
+        } else {
+            // Default is 'dark' (or first visit)
+            iconElement.textContent = 'light_mode'; // Afficher l'icône "Clair" en mode sombre
+        }
+        themeToggle.addEventListener('click', () => {
+            if (htmlElement.classList.contains('light')) {
+                // Passage du mode Clair au mode Sombre
+                htmlElement.classList.remove('light');
+                localStorage.setItem('theme', 'dark');
+                iconElement.textContent = 'light_mode';
+            } else {
+                // Passage du mode Sombre au mode Clair
+                htmlElement.classList.add('light');
+                localStorage.setItem('theme', 'light');
+                iconElement.textContent = 'dark_mode';
+            }
+        });
+        // Logique du formulaire de support (existante)
+        document.getElementById('supportForm').addEventListener('submit', async (event) => {
+            event.preventDefault();
+            const subject = document.getElementById('subject').value;
+            const email = document.getElementById('email').value;
+            const message = document.getElementById('message').value;
+            const messageBox = document.getElementById('messageBoxSupport');
+            messageBox.classList.add('hidden');
+            messageBox.textContent = '';
+            const formData = {
+                subject,
+                email,
+                message,
+                {% if is_logged_in %}
+                user_id: "{{ user_id }}" // Ajout automatique de l'ID si connecté
+                {% else %}
+                user_id: null
+                {% endif %}
+            };
+            try {
+                // Utiliser la route proxy Flask pour contacter l'API Nexus
+                const response = await fetch('/api/support', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(formData)
+                });
+                // Simuler la réponse, car la route /api/support est un placeholder dans app.py
+                const data = await response.json();
+                // Si la route /api/support n'est qu'un proxy sans réponse complète, on simule:
+                if (response.ok) {
+                    messageBox.classList.remove('bg-red-900/50', 'text-red-300');
+                    messageBox.classList.add('bg-green-900/50', 'text-green-300');
+                    messageBox.textContent = "Votre requête a été envoyée avec succès ! (Simulé pour l'API Nexus)";
+                    document.getElementById('supportForm').reset();
+                } else {
+                    messageBox.classList.remove('bg-green-900/50', 'text-green-300');
+                    messageBox.classList.add('bg-red-900/50', 'text-red-300');
+                    messageBox.textContent = data.message || "Erreur lors de l'envoi. Veuillez réessayer.";
+                }
+                messageBox.classList.remove('hidden');
+            } catch (error) {
+                console.error('Erreur réseau ou du serveur Flask:', error);
+                messageBox.classList.remove('bg-green-900/50', 'text-green-300');
+                messageBox.classList.add('bg-red-900/50', 'text-red-300');
+                messageBox.textContent = "Impossible de contacter le serveur. Veuillez réessayer.";
+                messageBox.classList.remove('hidden');
+            }
+        });
+    </script>
+<footer class="mt-16 border-t border-gray-700 bg-gray-900">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 text-sm">
+            <div class="col-span-2 lg:col-span-1">
+                <a href="/" class="text-3xl font-extrabold text-blue-500 tracking-wider">NEXUS</a>
+                <p class="mt-3 text-gray-400">
+                    L'infrastructure API qui propulse votre avenir technologique.
+                </p>
+                <div class="mt-4 flex space-x-4">
+                    <a href="#" class="text-gray-400 hover:text-blue-500 transition duration-200">
+                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.014 4.85.07c3.275.146 4.47 1.583 4.61 4.85.056 1.266.07 1.646.07 4.85s-.014 3.584-.07 4.85c-.14 3.267-1.335 4.704-4.61 4.85-1.266.056-1.646.07-4.85.07s-3.584-.014-4.85-.07c-3.275-.146-4.47-1.583-4.61-4.85-.056-1.266-.07-1.646-.07-4.85s.014-3.584.07-4.85c.14-3.267 1.335-4.704 4.61-4.85 1.266-.056 1.646-.07 4.85-.07zM12 0c-3.784 0-4.285.016-5.773.083-4.722.211-6.755 2.24-6.965 6.965C.016 7.715 0 8.216 0 12s.016 4.285.083 5.773c.21 4.721 2.239 6.755 6.965 6.965 1.488.067 1.99.083 5.773.083s4.285-.016 5.773-.083c4.721-.21 6.755-2.239 6.965-6.965.067-1.488.083-1.99.083-5.773s-.016-4.285-.083-5.773c-.21-4.722-2.239-6.755-6.965-6.965C16.285.016 15.784 0 12 0zm0 14.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z"/></svg>
+                    </a>
+                </div>
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-white mb-4">Plateforme</h3>
+                <ul class="space-y-3 text-gray-400">
+                    <li><a href="/tarifs" class="hover:text-blue-500 transition duration-200">Tarifs</a></li>
+                    <li><a href="/documentation" class="hover:text-blue-500 transition duration-200">Documentation</a></li>
+                    <li><a href="/connexion" class="hover:text-blue-500 transition duration-200">Connexion</a></li>
+                    <li><a href="/support" class="hover:text-blue-500 transition duration-200">Support</a></li>
+                </ul>
+            </div>
+            <div>
+                <h3 class="text-lg font-semibold text-white mb-4">Légal</h3>
+                <ul class="space-y-3 text-gray-400">
+                    <li><a href="/politique-confidentialite" class="hover:text-blue-500 transition duration-200">Politique de Confidentialité</a></li>
+                    <li><a href="/mentions-legales" class="hover:text-blue-500 transition duration-200">Mentions Légales</a></li>
+                    <li><a href="/conditions-utilisation" class="hover:text-blue-500 transition duration-200">Conditions d'Utilisation</a></li>
+                    <li><a href="/a-propos" class="hover:text-blue-500 transition duration-200">À Propos</a></li>
+                </ul>
+            </div>
+            <div class="col-span-2 md:col-span-1">
+                <h3 class="text-lg font-semibold text-white mb-4">Ressources</h3>
+                <ul class="space-y-3 text-gray-400">
+                    <li><a href="mailto:support@nexus.com" class="hover:text-blue-500 transition duration-200">Contact Email</a></li>
+                    <li><a href="/dashboard" class="hover:text-blue-500 transition duration-200">Espace Client</a></li>
+                    <li><a href="/api-logs" class="hover:text-blue-500 transition duration-200">Statut API</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm">
+            &copy; 2025 Nexus. Tous droits réservés. Construit pour l'ère des microservices.
+        </div>
+    </div>
+</footer>
+</body>
+</html>

templates/tarifs.html ADDED Viewed

	@@ -0,0 +1,428 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
+    <title>Tarifs - Nexus Pro</title>
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Assure une meilleure compatibilité responsive pour la grille */
+        .pricing-grid {
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        }
+        /* Variables de Thème - Couleurs Noir Foncé (Mode Sombre par défaut) */
+        :root, html.dark {
+            --bg-page: #181818; /* Noir très foncé, pas de bleu marine */
+            --bg-card: #282828;
+            --text-main: #EAEAEA;
+            --text-secondary: #B0B0B0;
+            --border-color: #404040;
+            --shadow-color: rgba(0, 0, 0, 0.5);
+        }
+        /* Mode Clair */
+        html.light {
+            --bg-page: #F5F5F5;
+            --bg-card: #FFFFFF;
+            --text-main: #202020;
+            --text-secondary: #5C5C5C;
+            --border-color: #E0E0E0;
+            --shadow-color: rgba(0, 0, 0, 0.1);
+        }
+        /* Application des variables */
+        body {
+            background-color: var(--bg-page);
+            color: var(--text-main);
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .bg-gray-900 { background-color: var(--bg-page) !important; }
+        .text-white { color: var(--text-main) !important; }
+        .bg-gray-800, .bg-gray-800\/50 {
+            background-color: var(--bg-card) !important;
+            box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
+        }
+        .text-gray-400 { color: var(--text-secondary) !important; }
+        .border-gray-700, .border-gray-800 { border-color: var(--border-color) !important; }
+        .text-gray-300 { color: var(--text-secondary) !important; } /* Utilisation de la même couleur pour uniformité */
+        .bg-gray-700 { background-color: #404040 !important; }
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-main);
+            font-size: 24px;
+            transition: color 0.2s;
+            padding: 0.5rem; /* Espace autour du bouton */
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <header class="sticky top-0 z-50 flex flex-col sm:flex-row justify-between items-center py-4 border-b border-blue-500/50 mb-8 bg-gray-900" style="background-color: var(--bg-page); transition: background-color 0.3s;">
+            <a href="/" class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                NEXUS
+            </a>
+            <nav class="flex items-center space-x-4">
+                <a href="/documentation" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                    Documentation
+                </a>
+                <a href="/a-propos" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                    À Propos
+                </a>
+                <button id="theme-toggle" class="theme-switch" aria-label="Basculer le thème">
+                    <span class="material-symbols-rounded">light_mode</span>
+                </button>
+                {% if is_logged_in %}
+                    <a href="/dashboard" class="px-4 py-2 bg-blue-600 border border-blue-600 hover:bg-blue-700 font-medium transition duration-200">
+                        Dashboard
+                    </a>
+                {% else %}
+                    <a href="/connexion" class="px-4 py-2 bg-blue-600 border border-blue-600 hover:bg-blue-700 font-medium transition duration-200">
+                        Connexion
+                    </a>
+                {% endif %}
+            </nav>
+        </header>
+        <main class="space-y-12">
+            <section class="text-center p-8 bg-gray-800/50 shadow-lg">
+                <h1 class="text-5xl font-extrabold text-white mb-4 leading-tight">
+                    Plans de Tarification
+                </h1>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                    Sécurité robuste et évolutive. Choisissez le plan adapté à votre nombre d'utilisateurs.
+                </p>
+                <div class="mt-8 flex justify-center">
+                    <div class="inline-flex bg-gray-700 p-1 rounded-full shadow-inner">
+                        <button id="monthly-btn" class="px-6 py-2 text-sm font-semibold bg-blue-600 text-white shadow-md transition duration-200 rounded-full">
+                            Mensuel
+                        </button>
+                        <button id="annual-btn" class="px-6 py-2 text-sm font-semibold text-gray-300 hover:text-white transition duration-200 rounded-full relative">
+                            Annuel
+                            <span class="ml-2 px-2 py-0.5 bg-yellow-500 text-black text-xs font-bold rounded-full">
+                                ÉCONOMISEZ ~17%
+                            </span>
+                        </button>
+                    </div>
+                </div>
+            </section>
+            <div class="grid pricing-grid gap-8">
+                <div class="bg-gray-800 p-6 shadow-2xl border-t-4 border-teal-300 flex flex-col">
+                    <h2 class="text-2xl font-bold text-teal-400 mb-2">Développeur</h2>
+                    <p class="text-gray-400 mb-6 text-sm">Tests et prototypes.</p>
+                    <div class="text-4xl font-extrabold text-white mb-8">
+                        0<span class="text-xl text-gray-400 price-unit"> €/mois</span>
+                    </div>
+                    <div class="text-lg font-semibold text-white mb-4 border-b border-gray-700 pb-2">
+                        Jusqu'à 500 Comptes Utilisateurs
+                    </div>
+                    <ul class="space-y-3 flex-grow text-sm">
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-teal-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Authentification Sécurisée (API & URL)
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-teal-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Logs d'activité de base
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-teal-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Support par email communautaire
+                        </li>
+                    </ul>
+                    <a href="/inscription" class="mt-8 block text-center px-6 py-3 bg-teal-600 text-white text-lg font-bold shadow-md hover:bg-teal-700 transition duration-300 plan-button" data-plan="developer">
+                        Commencer Gratuitement
+                    </a>
+                </div>
+                <div class="bg-gray-800 p-6 shadow-2xl border-t-4 border-yellow-500 flex flex-col">
+                    <h2 class="text-2xl font-bold text-yellow-400 mb-2">Standard</h2>
+                    <p class="text-gray-400 mb-6 text-sm">Premier pas vers la production.</p>
+                    <div class="text-4xl font-extrabold text-white mb-8">
+                        <span class="monthly-price" data-price="5">5</span>
+                        <span class="annual-price hidden" data-price="50">50</span>
+                        <span class="text-xl text-gray-400 price-unit"> €/mois</span>
+                    </div>
+                    <div class="text-lg font-semibold text-white mb-4 border-b border-gray-700 pb-2">
+                        Jusqu'à 1 000 Comptes Utilisateurs
+                    </div>
+                    <ul class="space-y-3 flex-grow text-sm">
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Authentification Sécurisée
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Logs d'activité avancés
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Support par email standard (24-48h)
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Option de dépassement ($/100 comptes)
+                        </li>
+                    </ul>
+                    <a href="/checkout?plan=standard_monthly" class="mt-8 block text-center px-6 py-3 bg-yellow-600 text-white text-lg font-bold shadow-md hover:bg-yellow-700 transition duration-300 plan-button" data-plan="standard">
+                        Choisir Standard
+                    </a>
+                </div>
+                <div class="bg-gray-800 p-6 shadow-2xl border-t-4 border-blue-500 flex flex-col relative">
+                    <span class="absolute top-0 right-0 -mt-3 -mr-3 bg-indigo-500 text-white font-bold py-1 px-3 shadow-lg text-xs">POPULAIRE</span>
+                    <h2 class="text-2xl font-bold text-blue-400 mb-2">Professionnel</h2>
+                    <p class="text-gray-400 mb-6 text-sm">Croissance et haute disponibilité.</p>
+                    <div class="text-4xl font-extrabold text-white mb-8">
+                        <span class="monthly-price" data-price="10">10</span>
+                        <span class="annual-price hidden" data-price="100">100</span>
+                        <span class="text-xl text-gray-400 price-unit"> €/mois</span>
+                    </div>
+                    <div class="text-lg font-semibold text-white mb-4 border-b border-gray-700 pb-2">
+                        Jusqu'à 2 000 Comptes Utilisateurs
+                    </div>
+                    <ul class="space-y-3 flex-grow text-sm">
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Monitoring et Alertes en Temps Réel
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Logs API Détaillés (Accès à `/api-logs`)
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Support Prioritaire (24h)
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Option de dépassement ($/100 comptes)
+                        </li>
+                    </ul>
+                    <a href="/checkout?plan=professional_monthly" class="mt-8 block text-center px-6 py-3 bg-blue-600 text-white text-lg font-bold shadow-md hover:bg-blue-700 transition duration-300 plan-button" data-plan="professional">
+                        Passer au Plan Pro
+                    </a>
+                </div>
+                <div class="bg-gray-800 p-6 shadow-2xl border-t-4 border-red-500 flex flex-col">
+                    <h2 class="text-2xl font-bold text-red-400 mb-2">Entreprise</h2>
+                    <p class="text-gray-400 mb-6 text-sm">Solutions haut de gamme et grandes équipes.</p>
+                    <div class="text-4xl font-extrabold text-white mb-8">
+                        <span class="monthly-price" data-price="Sur Devis">Sur Devis</span>
+                        <span class="annual-price hidden" data-price="Sur Devis">Sur Devis</span>
+                        <span class="text-xl text-gray-400 price-unit"></span>
+                    </div>
+                    <div class="text-lg font-semibold text-white mb-4 border-b border-gray-700 pb-2">
+                        Comptes Utilisateurs Illimités
+                    </div>
+                    <ul class="space-y-3 flex-grow text-sm">
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Garantie de Niveau de Service (SLA)
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Authentification Unique (SSO)
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Gestion des Accès Privilégiés
+                        </li>
+                        <li class="flex items-start text-gray-300">
+                            <svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                            Support Dédicacé 24/7
+                        </li>
+                    </ul>
+                    <a href="/contact" class="mt-8 block text-center px-6 py-3 bg-red-600 text-white text-lg font-bold shadow-md hover:bg-red-700 transition duration-300 plan-button" data-plan="enterprise">
+                        Contacter les Ventes
+                    </a>
+                </div>
+            </div>
+        </main>
+        <footer class="mt-12 pt-6 border-t border-gray-700 text-center text-gray-500 text-sm">
+            &copy; 2025 Nexus. Tarifs et Plans de Service.
+        </footer>
+    </div>
+    <script>
+        const monthlyBtn = document.getElementById('monthly-btn');
+        const annualBtn = document.getElementById('annual-btn');
+        const monthlyPrices = document.querySelectorAll('.monthly-price');
+        const annualPrices = document.querySelectorAll('.annual-price');
+        const priceUnits = document.querySelectorAll('.price-unit');
+        const planButtons = document.querySelectorAll('.plan-button'); // Nouveaux boutons
+        // ... (Logique de bascule du mode sombre/clair - inchangée) ...
+        const themeToggle = document.getElementById('theme-toggle');
+        const htmlElement = document.documentElement;
+        const iconElement = themeToggle.querySelector('.material-symbols-rounded');
+        // Charger le thème depuis le localStorage
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme === 'light') {
+            htmlElement.classList.remove('dark');
+            htmlElement.classList.add('light');
+            iconElement.textContent = 'dark_mode';
+        } else {
+            // Dark mode par défaut si rien n'est sauvegardé ou 'dark'
+            htmlElement.classList.add('dark');
+            htmlElement.classList.remove('light');
+            iconElement.textContent = 'light_mode';
+        }
+        themeToggle.addEventListener('click', () => {
+            if (htmlElement.classList.contains('light')) {
+                htmlElement.classList.remove('light');
+                htmlElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+                iconElement.textContent = 'light_mode';
+            } else {
+                htmlElement.classList.add('light');
+                htmlElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+                iconElement.textContent = 'dark_mode';
+            }
+        });
+        // ... (Fin de la logique de bascule du mode sombre/clair) ...
+        // Fonction pour mettre à jour l'affichage des tarifs et les liens
+        function updatePricing(isAnnual) {
+            const period = isAnnual ? '_annual' : '_monthly';
+            const unit = isAnnual ? ' €/an' : ' €/mois';
+            // Mise à jour visuelle des boutons Mensuel/Annuel
+            monthlyBtn.classList.remove('bg-blue-600', 'text-white');
+            monthlyBtn.classList.add('text-gray-300', 'hover:text-white');
+            annualBtn.classList.remove('bg-blue-600', 'text-white');
+            annualBtn.classList.add('text-gray-300', 'hover:text-white');
+            if (isAnnual) {
+                annualBtn.classList.add('bg-blue-600', 'text-white');
+                annualBtn.classList.remove('text-gray-300', 'hover:text-white');
+            } else {
+                monthlyBtn.classList.add('bg-blue-600', 'text-white');
+                monthlyBtn.classList.remove('text-gray-300', 'hover:text-white');
+            }
+            // Mise à jour des prix et des unités
+            monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
+            annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
+            priceUnits.forEach(el => el.textContent = unit);
+            // Le plan développeur est toujours gratuit, mais l'unité change
+            document.querySelector('.pricing-grid > div:first-child .price-unit').textContent = unit;
+            // Le plan entreprise est "Sur Devis" sans unité
+            document.querySelector('.pricing-grid > div:last-child .price-unit').textContent = '';
+            // Mise à jour des liens des boutons
+            planButtons.forEach(button => {
+                const planType = button.getAttribute('data-plan');
+                if (planType === 'developer') {
+                    button.setAttribute('href', '/inscription'); // Gratuit, lien inchangé
+                } else if (planType === 'enterprise') {
+                    button.setAttribute('href', '/contact'); // Sur Devis, lien inchangé
+                } else {
+                    button.setAttribute('href', `/checkout?plan=${planType}${period}`);
+                }
+            });
+        }
+        // Événements Tarification
+        monthlyBtn.addEventListener('click', () => updatePricing(false));
+        annualBtn.addEventListener('click', () => updatePricing(true));
+        // Initialisation Tarification au chargement
+        updatePricing(false);
+    </script>
+    <footer class="mt-16 border-t border-gray-700 bg-gray-900" style="background-color: var(--bg-card); border-color: var(--border-color);">
+        <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 text-sm">
+                <div class="col-span-2 lg:col-span-1">
+                    <a href="/" class="text-3xl font-extrabold text-blue-500 tracking-wider">NEXUS</a>
+                    <p class="mt-3 text-gray-400">
+                        L'infrastructure API qui propulse votre avenir technologique.
+                    </p>
+                    <div class="mt-4 flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-blue-500 transition duration-200">
+                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.014 4.85.07c3.275.146 4.47 1.583 4.61 4.85.056 1.266.07 1.646.07 4.85s-.014 3.584-.07 4.85c-.14 3.267-1.335 4.704-4.61 4.85-1.266.056-1.646.07-4.85.07s-3.584-.014-4.85-.07c-3.275-.146-4.47-1.583-4.61-4.85-.056-1.266-.07-1.646-.07-4.85s.014-3.584.07-4.85c.14-3.267 1.335-4.704 4.61-4.85 1.266-.056 1.646-.07 4.85-.07zM12 0c-3.784 0-4.285.016-5.773.083-4.722.211-6.755 2.24-6.965 6.965C.016 7.715 0 8.216 0 12s.016 4.285.083 5.773c.21 4.721 2.239 6.755 6.965 6.965 1.488.067 1.99.083 5.773.083s4.285-.016 5.773-.083c4.721-.21 6.755-2.239 6.965-6.965.067-1.488.083-1.99.083-5.773s-.016-4.285-.083-5.773c-.21-4.722-2.239-6.755-6.965-6.965C16.285.016 15.784 0 12 0zm0 14.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z"/></svg>
+                        </a>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold text-white mb-4">Plateforme</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li><a href="/tarifs" class="hover:text-blue-500 transition duration-200">Tarifs</a></li>
+                        <li><a href="/documentation" class="hover:text-blue-500 transition duration-200">Documentation</a></li>
+                        <li><a href="/connexion" class="hover:text-blue-500 transition duration-200">Connexion</a></li>
+                        <li><a href="/support" class="hover:text-blue-500 transition duration-200">Support</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-semibold text-white mb-4">Légal</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li><a href="/politique-confidentialite" class="hover:text-blue-500 transition duration-200">Politique de Confidentialité</a></li>
+                        <li><a href="/mentions-legales" class="hover:text-blue-500 transition duration-200">Mentions Légales</a></li>
+                        <li><a href="/conditions-utilisation" class="hover:text-blue-500 transition duration-200">Conditions d'Utilisation</a></li>
+                        <li><a href="/a-propos" class="hover:text-blue-500 transition duration-200">À Propos</a></li>
+                    </ul>
+                </div>
+                <div class="col-span-2 md:col-span-1">
+                    <h3 class="text-lg font-semibold text-white mb-4">Ressources</h3>
+                    <ul class="space-y-3 text-gray-400">
+                        <li><a href="mailto:support@nexus.com" class="hover:text-blue-500 transition duration-200">Contact Email</a></li>
+                        <li><a href="/dashboard" class="hover:text-blue-500 transition duration-200">Espace Client</a></li>
+                        <li><a href="/api-logs" class="hover:text-blue-500 transition duration-200">Statut API</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm" style="border-color: var(--border-color);">
+                &copy; 2025 Nexus. Tous droits réservés. Construit pour l'ère des microservices.
+            </div>
+        </div>
+    </footer>
+</body>
+</html>