Spaces:

ernestmindres
/

Nexus

Sleeping

App Files Files Community

ernestmindres commited on Oct 19, 2025

Commit

e1e5b1e

verified ·

1 Parent(s): 3333760

Update templates/tarifs.html

Browse files

Files changed (1) hide show

templates/tarifs.html +427 -400

templates/tarifs.html CHANGED Viewed

@@ -1,401 +1,428 @@
-<!DOCTYPE html>
-<html lang="fr" class="dark">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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>

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