Spaces:

ernestmindres
/

Nexus

Sleeping

App Files Files Community

ernestmindres commited on Oct 17, 2025

Commit

88d3a44

verified ·

1 Parent(s): 9f69ded

Upload 15 files

Browse files

Files changed (15) hide show

templates/a_propos.html +235 -0
templates/api_key.html +363 -0
templates/api_logs.html +282 -0
templates/conditions_utilisation.html +357 -0
templates/connexion.html +203 -0
templates/dashboard.html +268 -0
templates/documentation.html +285 -0
templates/index.html +488 -0
templates/inscription.html +247 -0
templates/mentions_legales.html +327 -0
templates/mot_de_passe_oublie.html +238 -0
templates/politique_confidentialite.html +370 -0
templates/profile.html +258 -0
templates/support.html +303 -0
templates/tarifs.html +401 -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/api_key.html ADDED Viewed

	@@ -0,0 +1,363 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Clés API - Nexus Pro</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>
+        /* Configuration de la police Inter et thème sombre */
+        body { font-family: 'Inter', sans-serif; }
+        /* Style pour les boutons et cartes carrés (Artboard) */
+        .btn-square, .card-square {
+            border-radius: 0; /* Supprime l'arrondi */
+        }
+        /* Styles spécifiques pour le chargement/spinner */
+        .spinner {
+            border-top-color: var(--spinner-color); /* Utilisation de variable */
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Style pour la Sidebar - FIXE et complète (Correction pour la stabilité) */
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+            transform: translateX(-100%);
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 100vh;
+            z-index: 30;
+        }
+        .sidebar.open {
+            transform: translateX(0);
+        }
+        @media (min-width: 1024px) {
+            .sidebar {
+                transform: translateX(0) !important;
+                /* Utilisation de sticky pour maintenir la barre latérale fixe lors du défilement */
+                position: sticky;
+                height: 100vh;
+                top: 0;
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen flex">
+    <aside id="sidebar"
+        class="sidebar w-64 bg-gray-800 border-r border-gray-700 flex-shrink-0 flex flex-col p-4">
+        <h1 class="text-2xl font-bold mb-8 border-b border-gray-700 pb-4 text-blue-400">Nexus Pro</h1>
+        <nav class="flex-grow overflow-y-auto">
+            <ul class="space-y-2">
+                <li>
+                    <a href="/dashboard"
+                        class="flex items-center p-3 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition duration-200 btn-square">
+                        <span class="material-symbols-rounded mr-3">dashboard</span>
+                        Dashboard
+                    </a>
+                </li>
+                <li>
+                    <a href="/profile"
+                        class="flex items-center p-3 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition duration-200 btn-square">
+                        <span class="material-symbols-rounded mr-3">account_circle</span>
+                        Profil
+                    </a>
+                </li>
+                <li>
+                    <a href="/api-keys"
+                        class="flex items-center p-3 text-sm font-medium text-white bg-gray-700 transition duration-200 btn-square">
+                        <span class="material-symbols-rounded mr-3">key</span>
+                        Clés API
+                    </a>
+                </li>
+                <li>
+                    <a href="/api-logs"
+                        class="flex items-center p-3 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition duration-200 btn-square">
+                        <span class="material-symbols-rounded mr-3">history</span>
+                        Logs API
+                    </a>
+                </li>
+                <li class="border-t border-gray-700 my-2 pt-2"></li>
+                 <li>
+                    <a href="/documentation"
+                        class="flex items-center p-3 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition duration-200 btn-square">
+                        <span class="material-symbols-rounded mr-3">article</span>
+                        Documentation
+                    </a>
+                </li>
+                 <li>
+                    <a href="/tarifs"
+                        class="flex items-center p-3 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition duration-200 btn-square">
+                        <span class="material-symbols-rounded mr-3">payments</span>
+                        Tarifs
+                    </a>
+                </li>
+                 <li>
+                    <a href="/support"
+                        class="flex items-center p-3 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition duration-200 btn-square">
+                        <span class="material-symbols-rounded mr-3">help</span>
+                        Support
+                    </a>
+                </li>
+            </ul>
+        </nav>
+        <div class="mt-auto pt-4 border-t border-gray-700">
+            <button id="logout-button-sidebar"
+                class="flex items-center justify-center w-full p-3 text-sm font-medium text-red-400 hover:bg-red-900/50 transition duration-200 btn-square">
+                <span class="material-symbols-rounded mr-3">logout</span>
+                Déconnexion
+            </button>
+        </div>
+    </aside>
+    <button id="sidebar-toggle"
+        class="lg:hidden fixed top-4 left-4 z-40 p-2 bg-gray-800 text-white rounded-full shadow-lg">
+        <span class="material-symbols-rounded">menu</span>
+    </button>
+    <main class="flex-grow p-4 lg:p-8">
+        <header class="mb-8 flex justify-between items-center">
+            <h2 class="text-3xl font-bold text-white">Gestion des Clés API</h2>
+            </header>
+        <div id="status-message" class="hidden p-3 mb-4 rounded-md font-medium"></div>
+        <section class="bg-gray-800 p-6 card-square shadow-xl">
+            <div id="key-display-area" class="hidden">
+                <h3 class="text-xl font-semibold mb-4 text-white">Votre Clé API Actuelle</h3>
+                <div class="flex flex-col md:flex-row items-stretch md:items-center space-y-4 md:space-y-0 md:space-x-4">
+                    <div class="flex-grow relative">
+                        <input type="password" id="api-key-input" readonly
+                            value="****************************************"
+                            class="w-full p-4 pr-12 text-sm bg-gray-700 border border-gray-600 focus:border-blue-500 focus:ring-blue-500 text-gray-300 btn-square select-text"
+                            placeholder="Clé API non générée">
+                        <button id="toggle-key-visibility"
+                            class="absolute right-0 top-0 h-full w-12 flex items-center justify-center text-gray-400 hover:text-white transition duration-200">
+                            <span class="material-symbols-rounded text-xl">visibility</span>
+                        </button>
+                    </div>
+                    <button id="copy-key-btn"
+                        class="flex-shrink-0 flex items-center justify-center p-4 bg-blue-600 hover:bg-blue-700 transition duration-200 text-white font-medium btn-square shadow-md">
+                        <span class="material-symbols-rounded mr-2">content_copy</span>
+                        Copier
+                    </button>
+                    <button id="regenerate-key-btn"
+                        class="flex-shrink-0 flex items-center justify-center p-4 bg-red-600 hover:bg-red-700 transition duration-200 text-white font-medium btn-square shadow-md">
+                        <span class="material-symbols-rounded mr-2">refresh</span>
+                        Régénérer
+                    </button>
+                </div>
+                <p class="mt-4 text-sm text-gray-400">Attention : La régénération invalidera immédiatement votre clé actuelle.</p>
+            </div>
+            <div id="initial-creation-area" class="text-center p-8 border-2 border-dashed border-gray-600">
+                <h3 class="text-2xl font-semibold mb-3 text-white">Générer votre Clé API</h3>
+                <p class="text-gray-400 mb-6">Vous n'avez pas encore de clé API. Générez-la pour commencer à interagir avec nos services.</p>
+                <button id="generate-key-btn"
+                    class="inline-flex items-center justify-center p-4 bg-green-600 hover:bg-green-700 transition duration-200 text-white font-medium btn-square shadow-md">
+                    <span class="material-symbols-rounded mr-2">vpn_key</span>
+                    Générer la Clé API
+                </button>
+            </div>
+            <div id="key-spinner" class="hidden text-center mt-4">
+                <div class="spinner w-8 h-8 border-4 border-gray-600 rounded-full mx-auto" style="--spinner-color: #3b82f6;"></div>
+                <p class="text-gray-400 mt-2">Chargement ou génération en cours...</p>
+            </div>
+        </section>
+        <section class="mt-8">
+            <h3 class="text-xl font-bold mb-4">Utilisation de la Clé</h3>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div class="bg-gray-800 p-6 card-square">
+                    <h4 class="font-semibold mb-3 text-blue-400">Méthode 1 : En-tête HTTP (Recommandée)</h4>
+                    <p class="text-gray-400 mb-4 text-sm">Transmettez votre clé via l'en-tête `X-User-API-Key` pour des raisons de sécurité et de standardisation.</p>
+                    <div class="bg-gray-900 p-3 text-sm overflow-x-auto">
+                        <code class="text-green-400">X-User-API-Key: VOTRE_CLE_API</code>
+                    </div>
+                </div>
+                <div class="bg-gray-800 p-6 card-square">
+                    <h4 class="font-semibold mb-3 text-blue-400">Méthode 2 : Paramètre d'URL (Simple)</h4>
+                    <p class="text-gray-400 mb-4 text-sm">Utilisez le paramètre `api_key` pour les requêtes simples ou les tests.</p>
+                    <div class="bg-gray-900 p-3 text-sm overflow-x-auto">
+                        <code class="text-green-400">/api/endpoint?api_key=VOTRE_CLE_API</code>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script>
+        // 1. Déclaration des éléments du DOM
+        const sidebar = document.getElementById('sidebar');
+        const sidebarToggle = document.getElementById('sidebar-toggle');
+        const keyDisplayArea = document.getElementById('key-display-area');
+        const initialCreationArea = document.getElementById('initial-creation-area');
+        const keyInput = document.getElementById('api-key-input');
+        const generateBtn = document.getElementById('generate-key-btn');
+        const regenerateBtn = document.getElementById('regenerate-key-btn');
+        const copyBtn = document.getElementById('copy-key-btn');
+        const toggleVisibilityBtn = document.getElementById('toggle-key-visibility');
+        const statusMessage = document.getElementById('status-message');
+        const spinner = document.getElementById('key-spinner');
+        // 2. Fonctions utilitaires
+        const showStatus = (message, isError = false) => {
+            statusMessage.textContent = message;
+            statusMessage.className = `p-3 mb-4 rounded-md font-medium ${isError ? 'bg-red-900 text-red-300' : 'bg-green-900 text-green-300'}`;
+            statusMessage.classList.remove('hidden');
+        };
+        toggleVisibilityBtn.addEventListener('click', () => {
+            const icon = toggleVisibilityBtn.querySelector('.material-symbols-rounded');
+            if (keyInput.type === 'password') {
+                keyInput.type = 'text';
+                icon.textContent = 'visibility_off';
+            } else {
+                keyInput.type = 'password';
+                icon.textContent = 'visibility';
+            }
+        });
+        copyBtn.addEventListener('click', () => {
+            const originalType = keyInput.type;
+            keyInput.type = 'text';
+            keyInput.select();
+            keyInput.setSelectionRange(0, 99999);
+            document.execCommand('copy');
+            keyInput.type = originalType;
+            showStatus('Clé API copiée dans le presse-papiers.', false);
+        });
+        // 3. Logique d'affichage
+        const updateKeyDisplay = (apiKey) => {
+            if (apiKey) {
+                keyInput.value = apiKey;
+                keyInput.type = 'password';
+                toggleVisibilityBtn.querySelector('.material-symbols-rounded').textContent = 'visibility';
+                keyDisplayArea.classList.remove('hidden');
+                initialCreationArea.classList.add('hidden');
+            } else {
+                keyInput.value = 'Clé API non générée';
+                keyInput.type = 'password';
+                keyDisplayArea.classList.add('hidden');
+                initialCreationArea.classList.remove('hidden');
+            }
+        }
+        // 4. Récupération de l'état de la clé
+        const fetchApiKey = async () => {
+            statusMessage.classList.add('hidden');
+            spinner.classList.remove('hidden');
+            try {
+                // Appel à la route proxy /api/user/info pour obtenir les infos, y compris la clé.
+                const response = await fetch('/api/user/info', {
+                    method: 'GET',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+                const data = await response.json();
+                if (data.status === 'Success') {
+                    // L'API Nexus est censée retourner 'api_key' dans le profil
+                    const apiKey = data.api_key || null;
+                    updateKeyDisplay(apiKey);
+                } else if (response.status === 401) {
+                    window.location.href = '/connexion';
+                } else {
+                    console.error('Erreur lors de la récupération des données utilisateur:', data.message);
+                    showStatus("Erreur: Impossible de vérifier le statut de la clé API.", true);
+                    updateKeyDisplay(null);
+                }
+            } catch (error) {
+                console.error('Erreur réseau ou du serveur Flask:', error);
+                showStatus("Erreur: Impossible de contacter le serveur Flask.", true);
+                updateKeyDisplay(null);
+            } finally {
+                spinner.classList.add('hidden');
+            }
+        };
+        // 5. Génération/Régénération de la clé (generateApiKey)
+        const generateApiKey = async () => {
+            statusMessage.classList.add('hidden');
+            spinner.classList.remove('hidden');
+            keyInput.value = 'Génération...';
+            try {
+                // *** CORRIGÉ *** : L'URL correspond maintenant à la route dans user_routes.py (/api/user/generate-key)
+                const response = await fetch('/api/user/generate-key', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+                const data = await response.json();
+                if (data.status === 'Success' && data.api_key) {
+                    updateKeyDisplay(data.api_key);
+                    showStatus("Nouvelle clé API générée avec succès ! Veuillez la copier.", false);
+                } else {
+                    console.error('Échec de la génération de clé:', data.message);
+                    showStatus(`Échec de la génération: ${data.message}`, true);
+                    fetchApiKey();
+                }
+            } catch (error) {
+                console.error('Erreur réseau ou du serveur Flask:', error);
+                showStatus("Erreur: Impossible de contacter le serveur pour générer la clé.", true);
+            } finally {
+                spinner.classList.add('hidden');
+            }
+        };
+        // 6. Événements et Initialisation
+        generateBtn.addEventListener('click', generateApiKey);
+        regenerateBtn.addEventListener('click', generateApiKey);
+        window.addEventListener('load', fetchApiKey);
+        // Logique de Déconnexion
+        const logoutHandler = async (e) => {
+            e.preventDefault();
+            const response = await fetch('/api/logout', { // Utilise /api/logout qui est gérée dans app.py
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+            const data = await response.json();
+            if (data.status === 'Success' && data.redirect) {
+                window.location.href = data.redirect;
+            } else {
+                 alert('Erreur lors de la déconnexion.');
+            }
+        };
+        document.getElementById('logout-button-sidebar').addEventListener('click', logoutHandler);
+        // Logique de la Sidebar sur mobile
+        sidebarToggle.addEventListener('click', () => {
+            sidebar.classList.toggle('open');
+        });
+    </script>
+</body>
+</html>

templates/api_logs.html ADDED Viewed

	@@ -0,0 +1,282 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Logs API - Nexus Pro</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;
+            /* Appliquer les variables de thème */
+            background-color: var(--bg-color);
+            color: var(--text-color-primary); /* Utilisation de la variable primaire pour le texte du body */
+            transition: background-color 0.3s, color 0.3s; /* Transition pour un effet doux */
+        }
+        /* Étape 2 : Définir les Styles (CSS) - Variables de Thème */
+        /* Mode Sombre (par défaut - noir très foncé) */
+        :root, .dark {
+            --bg-color: #0A0A0A; /* Noir très foncé (pour body, header, footer) */
+            --bg-card: #1C1C1C; /* Fond des cartes/panneaux */
+            --text-color-primary: #E3E3E3; /* Texte principal (ancien text-white) */
+            --text-color-secondary: #A0A0A0; /* Texte secondaire (pour gray-400/500) */
+            --primary-color: #3B82F6; /* blue-500 par défaut */
+            --border-color: #4B5563; /* gray-600 */
+            --border-card-divide: #374151; /* gray-700 pour les séparations dans les cartes */
+        }
+        /* Mode Clair */
+        html.light {
+            --bg-color: #F8F8F8;
+            --bg-card: #FFFFFF;
+            --text-color-primary: #1F2937; /* Texte principal (gray-800) */
+            --text-color-secondary: #6B7280; /* Texte secondaire (gray-500) */
+            --primary-color: #1D4ED8; /* blue-700 */
+            --border-color: #D1D5DB; /* gray-300 */
+            --border-card-divide: #E5E7EB; /* gray-200 pour les séparations dans les cartes */
+        }
+        /* Mappage des classes Tailwind aux variables de thème pour le mode sombre/clair */
+        /* Modification pour que le header et les footers utilisent --bg-color */
+        .bg-gray-900 { background-color: var(--bg-color); }
+        /* Modification pour que les cartes et le panneau de logs utilisent --bg-card */
+        .bg-gray-800 { background-color: var(--bg-card); }
+        /* Mappage des couleurs de texte pour le mode sombre/clair */
+        .text-white { color: var(--text-color-primary); }
+        /* Pour les textes dans les cartes et le footer qui utilisaient des nuances de gris */
+        .text-gray-300 { color: var(--text-color-primary); }
+        .text-gray-400 { color: var(--text-color-secondary); }
+        .text-gray-500 { color: var(--text-color-secondary); opacity: 0.9; } /* Ajustement léger pour les nuances */
+        .border-blue-500\/50 { border-color: var(--primary-color); }
+        .text-blue-500 { color: var(--primary-color); }
+        .hover\:text-blue-300:hover { color: var(--primary-color); }
+        .border-l-4 { border-color: var(--primary-color); }
+        .border-t-2 { border-color: var(--primary-color); } /* Ajustement pour un meilleur contraste en mode clair */
+        .border-b { border-color: var(--border-color); }
+        .divide-y { border-color: var(--border-color); }
+        /* Pour les séparateurs dans la table des logs */
+        .border-gray-700 { border-color: var(--border-card-divide); }
+        .divide-gray-700 { border-color: var(--border-card-divide); }
+        .border-gray-800 { border-color: var(--border-card-divide); } /* Utilisé dans le footer */
+        /* Classe pour la barre de navigation fixe (stable) */
+        .header-fixed {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            z-index: 50;
+            /* Suppression des marges pour un aspect moins haut, tout en restant responsive */
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+        }
+    </style>
+</head>
+<body class="min-h-screen pt-20"> <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <header class="header-fixed bg-gray-900 text-white flex flex-col sm:flex-row justify-between items-center px-4 sm:px-6 lg:px-8 border-b border-blue-500/50">
+            <h1 class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                Historique des Logs API
+            </h1>
+            <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="/dashboard" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                    Dashboard
+                </a>
+                <a href="/profile" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
+                    Profil
+                </a>
+                <button id="logout-button" class="px-4 py-2 bg-red-600 hover:bg-red-700 transition duration-200 font-medium shadow-md">
+                    Déconnexion
+                </button>
+            </nav>
+        </header>
+        <main class="space-y-8 mt-4">
+            <div class="p-6 bg-gray-800 shadow-2xl border-l-4 border-blue-500">
+                <h2 class="text-3xl font-bold text-blue-500 mb-2">Statistiques d'Utilisation</h2>
+                <p class="text-lg text-gray-300">
+                    ID Utilisateur Connecté: <strong class="text-white">{{ user_id }}</strong>
+                </p>
+            </div>
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
+                <div class="p-5 bg-gray-800 shadow-xl border-t-2 border-green-500 text-center">
+                    <p class="text-4xl font-bold text-green-400" id="requestsCount">--</p>
+                    <p class="text-gray-400 mt-1">Requêtes (30 jours)</p>
+                </div>
+                <div class="p-5 bg-gray-800 shadow-xl border-t-2 border-yellow-500 text-center">
+                    <p class="text-4xl font-bold text-yellow-400" id="errorsCount">--</p>
+                    <p class="text-gray-400 mt-1">Erreurs 5xx (30 jours)</p>
+                </div>
+                <div class="p-5 bg-gray-800 shadow-xl border-t-2 border-purple-500 text-center">
+                    <p class="text-4xl font-bold text-purple-400" id="lastActivity">--</p>
+                    <p class="text-gray-400 mt-1">Dernière Activité</p>
+                </div>
+            </div>
+            <div class="bg-gray-800 shadow-xl overflow-x-auto">
+                <h3 class="text-2xl font-semibold text-white p-6 border-b border-gray-700">Logs Récents</h3>
+                <table class="min-w-full divide-y divide-gray-700">
+                    <thead>
+                        <tr>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Date/Heure</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Méthode</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Endpoint</th>
+                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Statut</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-700" id="logsTableBody">
+                        <tr class="text-gray-300">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm">2024-10-14 10:30:00</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="bg-green-600/20 text-green-400 px-2 py-0.5 text-xs font-semibold">GET</span></td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm">/api/data/fetch</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="bg-green-600/20 text-green-400 px-2 py-0.5 text-xs font-semibold">200</span></td>
+                        </tr>
+                        <tr class="text-gray-300">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm">2024-10-14 10:29:55</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="bg-red-600/20 text-red-400 px-2 py-0.5 text-xs font-semibold">POST</span></td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm">/api/user/update</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="bg-red-600/20 text-red-400 px-2 py-0.5 text-xs font-semibold">401</span></td>
+                        </tr>
+                        <tr class="text-gray-300">
+                            <td class="px-6 py-4 whitespace-nowrap text-sm">2024-10-14 10:29:01</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="bg-green-600/20 text-green-400 px-2 py-0.5 text-xs font-semibold">GET</span></td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm">/api/status</td>
+                            <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="bg-green-600/20 text-green-400 px-2 py-0.5 text-xs font-semibold">200</span></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <p class="text-sm text-gray-500 text-center">
+                *Ceci est un exemple. L'intégration finale nécessitera un appel à l'API Nexus (`GET /api/logs/{{ user_id }}`).
+            </p>
+        </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. | Espace Sécurisé
+        </footer>
+    </div>
+    <script>
+        document.getElementById('logout-button').addEventListener('click', async () => {
+            const response = await fetch('/logout', { method: 'POST' });
+            const data = await response.json();
+            if (data.status === 'Success' && data.redirect) {
+                window.location.href = data.redirect;
+            } else {
+                console.error("Erreur lors de la déconnexion.");
+            }
+        });
+        // Simuler le chargement des statistiques
+        document.addEventListener('DOMContentLoaded', () => {
+            document.getElementById('requestsCount').textContent = '1248';
+            document.getElementById('errorsCount').textContent = '12';
+            document.getElementById('lastActivity').textContent = 'Il y a 5 min';
+        });
+        /* 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');
+        // Si le thème est sauvegardé, l'appliquer. Sinon, laisser le thème sombre par défaut.
+        if (savedTheme === 'light') {
+            htmlElement.classList.add('light');
+            htmlElement.classList.remove('dark');
+            iconElement.textContent = 'dark_mode';
+        } else {
+            // S'assurer que le mode sombre est appliqué si non light
+            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 Logique Mode Sombre/Clair */
+    </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/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/dashboard.html ADDED Viewed

	@@ -0,0 +1,268 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dashboard - Nexus Pro</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Configuration de la police Inter et thème sombre */
+        body { font-family: 'Inter', sans-serif; }
+        /* Style pour les boutons et cartes carrés (Artboard) */
+        .btn-square, .card-square {
+            border-radius: 0; /* Supprime l'arrondi */
+        }
+        /* Style pour la Sidebar (masquée sur mobile, visible sur Lg+) */
+        .sidebar {
+            transition: transform 0.3s ease-in-out;
+            transform: translateX(-100%);
+            /* Fixe la sidebar sur mobile pour qu'elle s'ouvre au-dessus du contenu */
+            position: fixed;
+            z-index: 30;
+        }
+        .sidebar.open {
+            transform: translateX(0);
+        }
+        /* Sur les grands écrans, la sidebar est statique et toujours visible */
+        @media (min-width: 1024px) {
+            .sidebar {
+                transform: translateX(0) !important;
+                position: relative;
+            }
+        }
+        /* ======================================================= */
+        /* Étape 2: Définir les Styles (CSS) - Variables de Thème */
+        /* ======================================================= */
+        /* Mode Sombre (Défaut - Noir très foncé) */
+        :root {
+            --bg-body: #0f0f0f;
+            --bg-sidebar-card: #1f1f1f;
+            --bg-item-hover: #2a2a2a;
+            --text-primary: #E3E3E3;
+            --text-secondary: #A0A0A0; /* Correspond à gray-400 */
+            --border-color: #333333; /* Correspond à gray-700 */
+        }
+        /* Mode Clair */
+        html.light {
+            --bg-body: #F5F5F5;
+            --bg-sidebar-card: #FFFFFF;
+            --bg-item-hover: #EBEBEB;
+            --text-primary: #1F1F1F;
+            --text-secondary: #6B7280; /* Correspond à gray-500 */
+            --border-color: #D1D5DB; /* Correspond à gray-300 */
+        }
+        /* Application des Variables pour la transition */
+        body {
+            background-color: var(--bg-body);
+            color: var(--text-primary);
+            transition: background-color 0.3s, color 0.3s;
+        }
+        /* Sidebar et Cartes (bg-gray-800 remplacé par --bg-sidebar-card) */
+        .sidebar, .card-square {
+            background-color: var(--bg-sidebar-card);
+        }
+        /* Items (bg-gray-900 remplacé par --bg-body) */
+        .p-4.bg-gray-900 {
+            background-color: var(--bg-body) !important;
+        }
+        .p-3.bg-gray-900 {
+            background-color: var(--bg-body) !important;
+        }
+        /* Texte et bordures standards */
+        .text-gray-400 { color: var(--text-secondary) !important; }
+        .text-gray-200 { color: var(--text-primary) !important; }
+        .border-gray-700 { border-color: var(--border-color) !important; }
+        .border-gray-700:hover { border-color: var(--border-color) !important; }
+        .border-t-4 { border-top-color: var(--border-color) !important; }
+        /* Application du hover sur les liens de navigation */
+        .sidebar nav a:not(.bg-blue-600):hover {
+            background-color: var(--bg-item-hover) !important;
+        }
+        /* Style du bouton de thème (Theme Toggle Button) */
+        #theme-toggle {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-primary);
+            font-size: 24px;
+            transition: color 0.2s;
+            padding: 8px;
+            line-height: 1; /* Assure que l'icône est bien centrée */
+        }
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
+</head>
+<body class="min-h-screen">
+    <div class="flex min-h-screen">
+        <aside id="sidebar" class="sidebar flex-shrink-0 w-64 border-r border-blue-500/50 p-4 lg:block">
+            <h2 class="text-3xl font-extrabold text-blue-500 mb-8 tracking-wider">NEXUS</h2>
+            <nav class="space-y-3">
+                <a href="/dashboard" class="flex items-center w-full px-4 py-3 bg-blue-600 text-white hover:bg-blue-700 font-bold transition duration-200 btn-square shadow-lg border-2 border-blue-500">
+                    <i class="fas fa-home w-5 mr-3"></i>
+                    Dashboard
+                </a>
+                <a href="/api-keys" class="flex items-center w-full px-4 py-3 hover:text-blue-400 font-medium transition duration-200 btn-square shadow-lg border hover:border-blue-500">
+                    <i class="fas fa-key w-5 mr-3"></i>
+                    Clés API
+                </a>
+                <a href="/profile" class="flex items-center w-full px-4 py-3 hover:text-blue-400 font-medium transition duration-200 btn-square shadow-lg border hover:border-blue-500">
+                    <i class="fas fa-user-circle w-5 mr-3"></i>
+                    Mon Profil
+                </a>
+                <a href="/documentation" class="flex items-center w-full px-4 py-3 hover:text-blue-400 font-medium transition duration-200 btn-square shadow-lg border hover:border-blue-500">
+                    <i class="fas fa-book w-5 mr-3"></i>
+                    Documentation
+                </a>
+                <a href="/support" class="flex items-center w-full px-4 py-3 hover:text-blue-400 font-medium transition duration-200 btn-square shadow-lg border hover:border-blue-500">
+                    <i class="fas fa-life-ring w-5 mr-3"></i>
+                    Centre d'Aide
+                </a>
+            </nav>
+            <div class="mt-8 pt-4 border-t border-gray-700">
+                 <button id="logout-button-sidebar" class="flex items-center w-full px-4 py-3 bg-red-700 text-white hover:bg-red-800 font-medium transition duration-200 btn-square shadow-lg border border-red-500">
+                    <i class="fas fa-sign-out-alt w-5 mr-3"></i>
+                    Déconnexion
+                </button>
+            </div>
+        </aside>
+        <div class="flex-grow 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">
+                <h1 class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                    Dashboard
+                </h1>
+                <div 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>
+                    <span class="text-sm text-gray-400 hidden md:block">
+                        ID Utilisateur : <strong class="text-white">{{ user_id }}</strong>
+                    </span>
+                    <button id="menu-button" class="lg:hidden p-3 text-white bg-blue-600 hover:bg-blue-700 transition duration-200 btn-square">
+                         <i class="fas fa-bars w-5 h-5"></i>
+                    </button>
+                </div>
+            </header>
+            <main class="space-y-8">
+                <div class="card-square p-6 shadow-xl border-t-4 border-blue-500">
+                    <h2 class="text-2xl font-semibold mb-4 text-blue-400">Statistiques Clés</h2>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div class="p-4 border btn-square">
+                            <p class="text-sm text-gray-400">Requêtes du Mois</p>
+                            <p class="text-3xl font-bold mt-1 text-white">45,678</p>
+                        </div>
+                        <div class="p-4 border btn-square">
+                            <p class="text-sm text-gray-400">Latence Moyenne (ms)</p>
+                            <p class="text-3xl font-bold mt-1 text-white">85ms</p>
+                        </div>
+                        <div class="p-4 border btn-square">
+                            <p class="text-sm text-gray-400">Taux de Succès</p>
+                            <p class="text-3xl font-bold mt-1 text-green-500">99.9%</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="card-square p-6 shadow-xl border-t-4 border-teal-500">
+                    <h2 class="text-2xl font-semibold mb-4 text-teal-400">Dernières Activités</h2>
+                    <ul class="space-y-3 text-gray-400">
+                        <li class="p-3 border btn-square flex justify-between">
+                            <span>[2024-10-15 10:30] Clé API Regénérée.</span>
+                            <span class="text-teal-400">Sécurité</span>
+                        </li>
+                         <li class="p-3 border btn-square flex justify-between">
+                            <span>[2024-10-15 10:25] Connexion réussie.</span>
+                            <span class="text-green-400">Auth</span>
+                        </li>
+                    </ul>
+                </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. | Espace Sécurisé
+            </footer>
+        </div>
+    </div>
+<script>
+        // ... (Existing Sidebar and Theme Toggle Logic) ...
+        // 1.3. Logique de Déconnexion
+        const logoutHandler = async (e) => {
+            e.preventDefault();
+            const response = await fetch('/logout', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+            const data = await response.json();
+            if (data.status === 'Success' && data.redirect) {
+                window.location.href = data.redirect;
+            } else {
+                 alert('Erreur lors de la déconnexion.');
+            }
+        };
+        // Assurez-vous que l'ID 'logout-button-sidebar' est utilisé sur votre bouton de déconnexion
+        document.getElementById('logout-button-sidebar').addEventListener('click', logoutHandler);
+        // 2.2. Récupération des Informations Utilisateur au chargement
+        const fetchUserInfo = async () => {
+            try {
+                const response = await fetch('/api/user/info', {
+                    method: 'GET',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+                const data = await response.json();
+                if (data.status === 'Success') {
+                    // Mettre à jour les éléments du DOM avec les données (email et plan)
+                    document.getElementById('user-email').textContent = data.email || 'N/A';
+                    document.getElementById('user-plan').textContent = data.plan ? data.plan.toUpperCase() : 'N/A';
+                    // Optionnel : Afficher le user_id dans le dashboard
+                    // document.getElementById('user-id-display').textContent = data.user_id;
+                } else if (response.status === 401 || data.message === 'Non autorisé') {
+                    // Gérer la non-connexion (normalement géré par le décorateur Flask, mais utile ici)
+                    window.location.href = '/connexion';
+                } else {
+                    console.error('Erreur lors de la récupération des données utilisateur:', data.message);
+                }
+            } catch (error) {
+                console.error('Erreur réseau ou du serveur Flask:', error);
+            }
+        };
+        // Appeler la fonction au chargement de la page
+        window.addEventListener('load', fetchUserInfo);
+    </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,488 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nexus - L'Avenir de la Technologie</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>
+        /* ÉTAPE 2.1 : Définition des Variables de Thème (Adaptation Tailwind) */
+        /* Mode Sombre (Défaut) */
+        :root {
+            --bg-body: #0a0a0a; /* Sombre pour le body */
+            --bg-card: #1f2937; /* gray-800 */
+            --bg-section: #1f2937; /* gray-800/50 */
+            --bg-code: #1f2937; /* gray-800 */
+            --border-color: #4b5563; /* gray-600 */
+            --text-color: #ffffff;
+            --text-secondary: #d1d5db; /* gray-300 */
+            --text-muted: #9ca3af; /* gray-400 */
+            --text-blue: #3b82f6; /* blue-500 */
+            --shadow-color: rgba(0, 0, 0, 0.5); /* Ombre plus foncée */
+        }
+        /* Mode Clair */
+        html.light {
+            --bg-body: #ffffff;
+            --bg-card: #f3f4f6; /* gray-100 */
+            --bg-section: #e5e7eb; /* gray-200/50 */
+            --bg-code: #ffffff;
+            --border-color: #d1d5db; /* gray-300 */
+            --text-color: #1f2937; /* gray-800 */
+            --text-secondary: #4b5563; /* gray-600 */
+            --text-muted: #6b7280; /* gray-500 */
+            --text-blue: #2563eb; /* blue-600 */
+            --shadow-color: rgba(0, 0, 0, 0.1); /* Ombre plus claire */
+        }
+        /* Application des variables aux styles existants et aux nouveaux éléments */
+        /* ÉTAPE 2.2 : Appliquer les Variables (body et theme-switch) */
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-body);
+            color: var(--text-color);
+            min-height: 100vh;
+            transition: background-color 0.3s, color 0.3s; /* Transition pour un effet doux */
+        }
+        .code-block {
+            border: 1px solid var(--border-color);
+            overflow-x: auto;
+            background-color: var(--bg-code);
+        }
+        /* Style du bouton (copié de l'exemple) */
+        .theme-switch {
+            background: none;
+            border: none;
+            cursor: pointer;
+            color: var(--text-color);
+            font-size: 24px;
+            transition: color 0.2s;
+            margin-left: 1rem; /* Espace le bouton du reste de la nav */
+        }
+        /* Adaptation Tailwind pour les autres éléments */
+        .header-border { border-color: var(--text-blue); }
+        .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);
+        }
+        .card-bg { background-color: var(--bg-card); }
+        .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 */
+        header { border-bottom: 1px solid var(--text-blue); }
+        footer { border-top: 1px solid var(--border-color); }
+        .tab-button { border-bottom-color: var(--border-color); }
+        .tab-button.border-blue-500 { border-bottom-color: var(--text-blue) !important; color: var(--text-blue) !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; }
+        .bg-blue-900\/40 { background-color: rgba(29, 78, 216, 0.4); } /* Couleur fixe car c'est un accent */
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
+</head>
+<body>
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
+        <header class="flex flex-col sm:flex-row justify-between items-center py-4 header-border mb-8">
+            <h1 class="text-4xl font-extrabold text-blue-500-var tracking-wider mb-4 sm:mb-0">
+                NEXUS
+            </h1>
+            <nav class="flex items-center space-x-4">
+                {% if user_id %}
+                <span class="text-sm text-gray-400-var hidden md:block">Connecté : <strong class="text-color">{{ user_id[:8] }}...</strong></span>
+                {% else %}
+                <span class="text-sm text-gray-400-var hidden md:block">Non connecté</span>
+                {% endif %}
+                <a href="/documentation" class="px-4 py-2 text-color hover:text-blue-500-var transition duration-200 font-medium">
+                    Documentation
+                </a>
+                <a href="/tarifs" class="px-4 py-2 text-color hover:text-blue-500-var transition duration-200 font-medium">
+                    Tarifs
+                </a>
+                <a href="/a-propos" class="px-4 py-2 text-color hover:text-blue-500-var transition duration-200 font-medium">
+                    À Propos
+                </a>
+                <a href="/support" class="px-4 py-2 text-color hover:text-blue-500-var transition duration-200 font-medium">
+                    Support
+                </a>
+                {% if is_logged_in %}
+                    <a href="/profile" class="px-4 py-2 text-color hover:text-blue-500-var transition duration-200 font-medium hidden sm:block">
+                        Profil
+                    </a>
+                    <a href="/dashboard" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 font-medium transition duration-200">
+                        Dashboard
+                    </a>
+                    <button id="logout-button" class="px-4 py-2 bg-red-600 hover:bg-red-700 font-medium transition duration-200 hidden sm:block">
+                        Déconnexion
+                    </button>
+                {% else %}
+                    <a href="/connexion" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 font-medium transition duration-200">
+                        Connexion
+                    </a>
+                    <a href="/inscription" class="px-4 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-medium transition duration-200 hidden sm:block">
+                        Inscription
+                    </a>
+                {% endif %}
+                <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="space-y-16">
+            <section class="text-center p-8 section-bg shadow-lg border border-gray-700">
+                <h2 class="text-5xl font-extrabold text-color mb-4 leading-tight">
+                    Nexus : Plateforme d'Authentification Unifiée
+                </h2>
+                <p class="text-xl text-gray-300-var max-w-4xl mx-auto">
+                    Construisez, déployez et connectez vos applications en toute sécurité. <strong class="text-blue-400">Pas de configuration requise, juste une API et une URL.</strong>
+                </p>
+                {% if not is_logged_in %}
+                <div class="mt-8 flex justify-center space-x-4">
+                    <a href="/inscription" class="px-6 py-3 bg-blue-600 text-white text-lg font-bold shadow-md hover:bg-blue-700 transition duration-300">
+                        Commencer Gratuitement
+                    </a>
+                    <a href="/documentation" class="px-6 py-3 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white text-lg font-bold shadow-md transition duration-300">
+                        Lire la Documentation
+                    </a>
+                </div>
+                {% endif %}
+            </section>
+            <section>
+                <h2 class="text-4xl font-extrabold text-color mb-8 text-center">
+                    Pourquoi Choisir Nexus ?
+                </h2>
+                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+                    <div class="card-bg p-6 shadow-xl border-t-4 border-teal-500">
+                        <h3 class="text-2xl font-semibold text-teal-400 mb-3">Sécurité Zéro Confiance</h3>
+                        <p class="text-gray-300-var text-sm">Chiffrement de bout en bout et gestion des tokens JWT pour une protection maximale des données utilisateurs.</p>
+                    </div>
+                    <div class="card-bg p-6 shadow-xl border-t-4 border-yellow-500">
+                        <h3 class="text-2xl font-semibold text-yellow-400 mb-3">Scalabilité Robuste</h3>
+                        <p class="text-gray-300-var text-sm">Architecture conçue pour gérer des millions de comptes et des pics de trafic sans dégradation de performance.</p>
+                    </div>
+                    <div class="card-bg p-6 shadow-xl border-t-4 border-purple-500">
+                        <h3 class="text-2xl font-semibold text-purple-400 mb-3">Logs et Monitoring</h3>
+                        <p class="text-gray-300-var text-sm">Accès à des logs API détaillés pour suivre les tentatives de connexion et les erreurs en temps réel.</p>
+                    </div>
+                    <div class="card-bg p-6 shadow-xl border-t-4 border-blue-500">
+                        <h3 class="text-2xl font-semibold text-blue-400 mb-3">Intégration Universelle</h3>
+                        <p class="text-gray-300-var text-sm">API REST simple utilisable dans n'importe quel langage ou framework (Python, Node.js, PHP, Go, etc.).</p>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <h2 class="text-4xl font-extrabold 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">
+                    Authentifiez vos utilisateurs en quelques lignes de code seulement.
+                </p>
+                <div class="max-w-4xl mx-auto">
+                    <div id="language-tabs" class="flex flex-wrap sm:flex-nowrap mb-0 border-b border-gray-700">
+                        <button data-lang="python" class="tab-button px-4 py-3 text-lg font-semibold border-b-2 border-blue-500 text-blue-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 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 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 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 Nexus pour l'inscription
+url = "https://ernestmindres-nexus.hf.space/api/register"
+headers = {"Content-Type": "application/json"}
+payload = {"email": "utilisateur@example.com", "password": "MonMotDePasse"}
+# Envoi de la requête POST
+response = requests.post(url, headers=headers, data=json.dumps(payload))
+print(response.json())</code></pre>
+                        <pre class="hidden"><code id="code-javascript" class="language-javascript tab-code">const registerUser = async () => {
+  // URL de l'API Nexus pour l'inscription
+  const url = 'https://ernestmindres-nexus.hf.space/api/register';
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      email: 'utilisateur@example.com',
+      password: 'MonMotDePasse'
+    })
+  });
+  const data = await response.json();
+  console.log(data);
+};
+registerUser();</code></pre>
+                        <pre class="hidden"><code id="code-php" class="language-php tab-code">&lt;?php
+// URL de l'API Nexus pour l'inscription
+$url = "https://ernestmindres-nexus.hf.space/api/register";
+$data = array("email" => "utilisateur@example.com", "password" => "MonMotDePasse");
+$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 Nexus pour l'inscription
+curl -X POST \
+  -H "Content-Type: application/json" \
+  -d '{"email": "utilisateur@example.com", "password": "MonMotDePasse"}' \
+  "https://ernestmindres-nexus.hf.space/api/register"</code></pre>
+                    </div>
+                </div>
+            </section>
+            <section class="max-w-4xl mx-auto bg-blue-900/40 p-8 shadow-xl border border-blue-600">
+                <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8">
+                    <svg class="w-12 h-12 text-blue-400 flex-shrink-0" 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="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                    <div>
+                        <h3 class="text-3xl font-bold text-color mb-2">Conçu pour l'Évolutivité Illimitée</h3>
+                        <p class="text-blue-200">
+                            Notre architecture est élastique. De 10 à 10 millions d'utilisateurs, Nexus s'adapte automatiquement. Atteignez la croissance sans jamais vous soucier des limites techniques. Découvrez notre <a href="/tarifs" class="text-yellow-400 underline font-semibold">Plan Entreprise Illimité</a>.
+                        </p>
+                    </div>
+                </div>
+            </section>
+        </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. | Politique de Confidentialité
+        </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/php.min.js"></script>
+    <script>
+        // ÉTAPE 3.1 : Intégrer la Logique JavaScript du Mode Sombre/Clair
+        const themeToggle = document.getElementById('theme-toggle');
+        const htmlElement = document.documentElement;
+        // Vérifiez si le bouton et son contenu existent avant d'essayer de le manipuler
+        const iconElement = themeToggle ? themeToggle.querySelector('.material-symbols-rounded') : null;
+        // Charger le thème depuis le localStorage
+        const savedTheme = localStorage.getItem('theme');
+        if (iconElement) {
+            if (savedTheme === 'light') {
+                htmlElement.classList.add('light');
+                iconElement.textContent = 'dark_mode'; // Afficher l'icône de lune
+            } else {
+                // Par défaut ou 'dark'
+                htmlElement.classList.remove('light');
+                iconElement.textContent = 'light_mode'; // Afficher l'icône de soleil
+            }
+        }
+        if (themeToggle) {
+            themeToggle.addEventListener('click', () => {
+                if (htmlElement.classList.contains('light')) {
+                    // Passer au mode sombre
+                    htmlElement.classList.remove('light');
+                    localStorage.setItem('theme', 'dark');
+                    if (iconElement) iconElement.textContent = 'light_mode'; // Afficher le soleil
+                } else {
+                    // Passer au mode clair
+                    htmlElement.classList.add('light');
+                    localStorage.setItem('theme', 'light');
+                    if (iconElement) iconElement.textContent = 'dark_mode'; // Afficher la lune
+                }
+            });
+        }
+        // Logique de changement d'onglet (responsive)
+        document.addEventListener('DOMContentLoaded', () => {
+            const tabsContainer = document.getElementById('language-tabs');
+            const codeBlocks = document.querySelectorAll('.tab-code');
+            const tabButtons = document.querySelectorAll('.tab-button');
+            function showCode(lang) {
+                // Masquer tous les blocs de code
+                codeBlocks.forEach(block => block.parentElement.classList.add('hidden'));
+                // Mettre à jour l'état des boutons
+                tabButtons.forEach(button => {
+                    if (button.dataset.lang === lang) {
+                        // Utilisation des classes CSS pour gérer le style actif
+                        button.classList.add('border-blue-500', 'text-blue-500-var');
+                        button.classList.remove('border-transparent', 'text-gray-400-var', 'hover:text-white', 'hover:bg-gray-800');
+                    } else {
+                        button.classList.remove('border-blue-500', 'text-blue-500-var');
+                        button.classList.add('border-transparent', 'text-gray-400-var', 'hover:text-white', 'hover:bg-gray-800');
+                    }
+                });
+                // Afficher le bloc de code sélectionné
+                const selectedCodeBlock = document.getElementById(`code-${lang}`);
+                if (selectedCodeBlock) {
+                    selectedCodeBlock.parentElement.classList.remove('hidden');
+                    // Ré-initialiser la coloration après changement (au cas où)
+                    hljs.highlightElement(selectedCodeBlock);
+                }
+            }
+            if (tabsContainer) {
+                tabsContainer.addEventListener('click', (event) => {
+                    if (event.target.classList.contains('tab-button')) {
+                        const lang = event.target.dataset.lang;
+                        showCode(lang);
+                    }
+                });
+            }
+            // Initialisation de la coloration syntaxique
+            hljs.highlightAll();
+            // Afficher Python par défaut au chargement
+            showCode('python');
+        });
+        // Logique existante de déconnexion et de message
+        function showMessageBox(message, isError = true) {
+            const container = document.body;
+            let messageBox = document.getElementById('custom-message-box');
+            if (!messageBox) {
+                messageBox = document.createElement('div');
+                messageBox.id = 'custom-message-box';
+                messageBox.className = 'fixed top-4 right-4 p-4 shadow-xl text-white font-medium z-50 transition-opacity duration-300';
+                container.appendChild(messageBox);
+            }
+            messageBox.textContent = message;
+            messageBox.className = messageBox.className.replace(/bg-red-\d+\/50|bg-green-\d+\/50|text-red-\d+|text-green-\d+/g, '').trim();
+            if (isError) {
+                messageBox.classList.add('bg-red-800/80', 'text-red-100');
+            } else {
+                messageBox.classList.add('bg-green-800/80', 'text-green-100');
+            }
+            messageBox.style.opacity = '1';
+            setTimeout(() => {
+                messageBox.style.opacity = '0';
+            }, 3000); // Masquer après 3 secondes
+        }
+        // Ajoutez l'écouteur d'événement seulement si l'utilisateur est connecté
+        {% if is_logged_in %}
+        document.getElementById('logout-button').addEventListener('click', async () => {
+            const response = await fetch('/logout', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+            const data = await response.json();
+            if (data.status === 'Success' && data.redirect) {
+                // Redirection vers la page de connexion après déconnexion réussie
+                showMessageBox("Déconnexion réussie.", false);
+                setTimeout(() => {
+                    window.location.href = data.redirect;
+                }, 1000);
+            } else {
+                console.error("Erreur lors de la déconnexion.", data.message);
+                showMessageBox(data.message || "Erreur de déconnexion. Veuillez réessayer.", true);
+            }
+        });
+        {% endif %}
+    </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-var tracking-wider">NEXUS</a>
+                <p class="mt-3 text-gray-400-var">
+                    L'infrastructure API qui propulse votre avenir technologique.
+                </p>
+                <div class="mt-4 flex space-x-4">
+                    <a href="#" class="text-gray-400-var hover:text-blue-500-var 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-color mb-4">Plateforme</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="/documentation" class="hover:text-blue-500-var transition duration-200">Documentation</a></li>
+                    <li><a href="/connexion" class="hover:text-blue-500-var transition duration-200">Connexion</a></li>
+                    <li><a href="/support" class="hover:text-blue-500-var transition duration-200">Support</a></li>
+                </ul>
+            </div>
+            <div>
+                <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@nexus.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-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/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/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,258 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mon Profil - Nexus Pro</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; }
+        /* Forcer le thème sombre/clair de Tailwind via la classe 'dark' sur <html> */
+        .dark .bg-gray-900 { background-color: #121212; } /* Noir très foncé */
+        .dark .text-white { color: #E3E3E3; }
+        .light .bg-gray-900 { background-color: #F8F8F8; }
+        .light .text-white { color: #333333; }
+        /* Ajustements de couleur pour le mode clair */
+        .light .bg-gray-800 { background-color: #FFFFFF; border: 1px solid #E5E7EB; }
+        .light .text-gray-400 { color: #6B7280; }
+        .light .bg-gray-700 { background-color: #F3F4F6; }
+        .light .text-blue-500 { color: #1D4ED8; }
+        .light .text-yellow-500 { color: #D97706; }
+        .light .border-gray-700 { border-color: #D1D5DB; }
+        .light #logout-button { background-color: #DC2626; }
+        .light #logout-button:hover { background-color: #B91C1C; }
+        .light #passwordUpdateForm .bg-gray-700 { background-color: #F3F4F6; color: #1F2937; }
+        .light #passwordUpdateForm input:focus { border-color: #D97706; }
+    </style>
+</head>
+<body class="bg-gray-900 text-white min-h-screen transition-colors duration-300">
+    <div class="container mx-auto p-4 sm:p-6 lg:p-8">
+        <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 transition-colors duration-300">
+            <h1 class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
+                Mon Profil
+            </h1>
+            <nav class="flex items-center space-x-4">
+                <button id="theme-toggle" class="theme-switch p-2 rounded-full hover:bg-gray-700 transition duration-200" aria-label="Basculer le thème">
+                    <span class="material-symbols-rounded text-white dark:text-white light:text-gray-800 text-2xl">
+                        light_mode
+                    </span>
+                </button>
+                <a href="/dashboard" class="px-4 py-2 text-white hover:text-blue-300 light:text-gray-800 light:hover:text-blue-500 transition duration-200 font-medium">
+                    Dashboard
+                </a>
+                <span class="text-sm text-gray-400 hidden md:block">
+                    ID Utilisateur : <strong class="text-white light:text-gray-800">{{ user_id }}</strong>
+                </span>
+                <button id="logout-button" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg transition duration-200 font-medium shadow-md">
+                    Déconnexion
+                </button>
+            </nav>
+        </header>
+        <main class="space-y-10 max-w-4xl mx-auto">
+            <div class="p-8 bg-gray-800 rounded-xl shadow-2xl border-l-4 border-blue-500 transition-colors duration-300">
+                <h2 class="text-3xl font-bold text-blue-500 mb-6">Détails du Compte</h2>
+                <div class="space-y-4">
+                    <div>
+                        <p class="text-sm font-medium text-gray-400">ID Utilisateur Nexus</p>
+                        <p class="text-lg font-mono text-white p-3 bg-gray-700 rounded-lg select-all transition-colors duration-300">{{ user_id }}</p>
+                    </div>
+                    <div>
+                        <p class="text-sm font-medium text-gray-400">Adresse E-mail (Placeholder)</p>
+                        <p class="text-lg text-white p-3 bg-gray-700 rounded-lg transition-colors duration-300">utilisateur.exemple@nexus.pro</p>
+                    </div>
+                    <p class="text-sm text-gray-500 mt-4">
+                        *L'e-mail réel devrait être chargé via une requête GET à l'API Nexus (`/api/user/{{ user_id }}`).
+                    </p>
+                </div>
+            </div>
+            <div class="p-8 bg-gray-800 rounded-xl shadow-2xl border-l-4 border-yellow-500 transition-colors duration-300">
+                <h2 class="text-3xl font-bold text-yellow-500 mb-6">Sécurité et Mot de Passe</h2>
+                <form id="passwordUpdateForm" class="space-y-6">
+                    <div>
+                        <label for="new_password" class="block text-sm font-medium text-gray-300 light:text-gray-600 mb-1">Nouveau Mot de passe</label>
+                        <input type="password" id="new_password" name="new_password" required
+                               class="w-full px-4 py-3 bg-gray-700 text-white border-2 border-gray-700 rounded-lg focus:border-yellow-500 transition duration-200 light:border-gray-300 light:bg-white light:text-gray-900"
+                               placeholder="Nouveau mot de passe">
+                    </div>
+                    <div>
+                        <label for="confirm_password" class="block text-sm font-medium text-gray-300 light:text-gray-600 mb-1">Confirmer le Mot de passe</label>
+                        <input type="password" id="confirm_password" name="confirm_password" required
+                               class="w-full px-4 py-3 bg-gray-700 text-white border-2 border-gray-700 rounded-lg focus:border-yellow-500 transition duration-200 light:border-gray-300 light:bg-white light:text-gray-900"
+                               placeholder="Confirmer le mot de passe">
+                    </div>
+                    <div id="messageBoxProfile" class="text-sm p-3 rounded-lg hidden" role="alert"></div>
+                    <button type="submit"
+                            class="w-full py-3 bg-yellow-600 hover:bg-yellow-700 text-white font-semibold rounded-lg transition duration-300 shadow-lg">
+                        Mettre à jour le Mot de Passe
+                    </button>
+                </form>
+            </div>
+        </main>
+        <footer class="mt-12 pt-6 border-t border-gray-700 text-center text-gray-500 text-sm transition-colors duration-300">
+            &copy; 2024 Nexus. Tous droits réservés. | Espace Sécurisé
+        </footer>
+    </div>
+<script>
+        // ... (Existing Sidebar and Theme Toggle Logic) ...
+        const profileForm = document.getElementById('profile-form');
+        const messageBox = document.getElementById('profile-message');
+        const emailInput = document.getElementById('email-input');
+        const currentPlanDisplay = document.getElementById('current-plan');
+        const updateButton = document.getElementById('update-button');
+        // 1.3. Logique de Déconnexion
+        const logoutHandler = async (e) => {
+            e.preventDefault();
+            // Appel à la route de déconnexion Flask
+            const response = await fetch('/logout', { method: 'POST' });
+            const data = await response.json();
+            if (data.status === 'Success' && data.redirect) {
+                window.location.href = data.redirect;
+            } else {
+                 alert('Erreur lors de la déconnexion.');
+            }
+        };
+        document.getElementById('logout-button-sidebar').addEventListener('click', logoutHandler);
+        // 2.2. Récupération des Informations Utilisateur (Email et Plan)
+        const fetchUserInfo = async () => {
+            try {
+                const response = await fetch('/api/user/info', { method: 'GET' });
+                const data = await response.json();
+                if (data.status === 'Success') {
+                    emailInput.value = data.email || 'N/A';
+                    currentPlanDisplay.textContent = data.plan ? data.plan.toUpperCase() : 'N/A';
+                    emailInput.disabled = true; // L'email ne doit pas être modifiable ici
+                } else {
+                    console.error('Erreur lors de la récupération des données utilisateur:', data.message);
+                    messageBox.textContent = 'Erreur: Impossible de charger les données du profil.';
+                    messageBox.classList.remove('hidden');
+                }
+            } catch (error) {
+                console.error('Erreur réseau:', error);
+            }
+        };
+        // 3.3. Logique de Mise à Jour du Profil (Exemple : Plan)
+        profileForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            messageBox.classList.add('hidden');
+            updateButton.disabled = true;
+            // Récupérer la valeur du plan sélectionné (adapter selon la structure de votre formulaire)
+            // Ici, on suppose un champ caché ou une déduction si le plan est le seul à être mis à jour.
+            // Pour l'exemple, nous allons simuler le passage au plan 'premium' comme dans votre test cURL
+            const newPlan = 'premium';
+            try {
+                const response = await fetch('/api/user/update-info', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ plan: newPlan })
+                });
+                const data = await response.json();
+                if (data.status === 'Success') {
+                    messageBox.classList.remove('bg-red-900/50', 'text-red-300');
+                    messageBox.classList.add('bg-green-900/50', 'text-green-300');
+                    messageBox.textContent = data.message || "Profil mis à jour avec succès.";
+                    // Mettre à jour l'affichage du plan (et recharger les données pour s'assurer)
+                    fetchUserInfo();
+                } 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 la mise à jour du profil.";
+                }
+                messageBox.classList.remove('hidden');
+            } catch (error) {
+                messageBox.classList.remove('bg-green-900/50', 'text-green-300');
+                messageBox.classList.add('bg-red-900/50', 'text-red-300');
+                messageBox.textContent = "Erreur réseau: Impossible de communiquer avec le serveur.";
+                messageBox.classList.remove('hidden');
+            } finally {
+                updateButton.disabled = false;
+            }
+        });
+        // Appeler au chargement
+        window.addEventListener('load', fetchUserInfo);
+    </script>
+    <footer class="mt-16 border-t border-gray-700 bg-gray-900 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-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 light:text-gray-900 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 light:text-gray-900 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 light:text-gray-900 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 light:border-gray-300 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/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,401 @@

+<!DOCTYPE html>
+<html lang="fr" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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">
+                        <button id="monthly-btn" class="px-6 py-2 text-sm font-semibold bg-blue-600 text-white shadow-md transition duration-200">
+                            Mensuel
+                        </button>
+                        <button id="annual-btn" class="px-6 py-2 text-sm font-semibold text-gray-300 hover:text-white transition duration-200">
+                            Annuel (Économisez ~17%)
+                        </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">
+                        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">5</span><span class="annual-price hidden">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="/profile/upgrade" 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">
+                        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">10</span><span class="annual-price hidden">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="/profile/upgrade" 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">
+                        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">Sur Devis</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">
+                        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');
+        // 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.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';
+            }
+        });
+        // Fonction pour mettre à jour l'affichage des tarifs
+        function updatePricing(isAnnual) {
+            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');
+                monthlyPrices.forEach(el => el.classList.add('hidden'));
+                annualPrices.forEach(el => el.classList.remove('hidden'));
+                priceUnits.forEach(el => el.textContent = ' €/an');
+                // Gérer le cas du plan Développeur
+                document.querySelector('.pricing-grid > div:first-child .price-unit').textContent = ' €/an';
+            } else {
+                monthlyBtn.classList.add('bg-blue-600', 'text-white');
+                monthlyBtn.classList.remove('text-gray-300', 'hover:text-white');
+                monthlyPrices.forEach(el => el.classList.remove('hidden'));
+                annualPrices.forEach(el => el.classList.add('hidden'));
+                priceUnits.forEach(el => el.textContent = ' €/mois');
+                // Gérer le cas du plan Développeur
+                document.querySelector('.pricing-grid > div:first-child .price-unit').textContent = ' €/mois';
+            }
+             // Gérer le prix "Sur Devis" du plan Entreprise
+            document.querySelector('.pricing-grid > div:last-child .price-unit').textContent = '';
+        }
+        // É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; 2024 Nexus. Tous droits réservés. Construit pour l'ère des microservices.
+        </div>
+    </div>
+</footer>
+</body>
+</html>