/* =============================================
   DARK MODE PERMANENT - OVERRIDE FINAL
   Ce fichier force le dark mode sur TOUTES les pages
   Doit être chargé en DERNIER pour priorité maximale
   ============================================= */

/* Forcer dark mode sur HTML et BODY */
html, body {
    background-color: #0f0f23 !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    color: #f9fafb !important;
    color-scheme: dark !important;
}

/* Forcer la classe dark-mode */
html {
    @apply dark-mode !important;
}

/* Variables CSS forcées en dark mode */
:root {
    /* Primary Colors - Dark Mode */
    --primary-color: #818cf8 !important;
    --primary-hover: #9ca3ff !important;
    --primary-dark: #6366f1 !important;
    --primary-light: #a5b4fc !important;
    --primary-gradient: linear-gradient(135deg, #818cf8 0%, #9333ea 100%) !important;
    
    /* Secondary Colors - Dark Mode */
    --secondary-color: #f472b6 !important;
    --secondary-hover: #f9a8d4 !important;
    --accent-color: #fde047 !important;
    --accent-gradient: linear-gradient(135deg, #ff6ec4 0%, #c873f4 100%) !important;
    
    /* Text Colors - Dark Mode */
    --text-primary: #f9fafb !important;
    --text-secondary: #d1d5db !important;
    --text-accent: #a5b4fc !important;
    
    /* Backgrounds - Dark Mode */
    --bg-primary: #1a1a2e !important;
    --bg-secondary: #0f0f23 !important;
    --bg-tertiary: #16213e !important;
    --bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    
    /* Borders - Dark Mode */
    --border-color: rgba(255, 255, 255, 0.1) !important;
    
    /* Shadows - Dark Mode */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6) !important;
    --shadow-glow: 0 0 40px rgba(129, 140, 248, 0.25) !important;
}

/* Forcer tous les éléments en dark mode */
* {
    color-scheme: dark !important;
}

/* Backgrounds spécifiques dark mode */
.main-header,
.nav-container {
    background: rgba(26, 26, 46, 0.85) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
}

.card,
.feature-card,
.stat-card,
.type-card {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.mobile-sidebar {
    background: rgba(15, 15, 35, 0.98) !important;
    backdrop-filter: blur(30px) !important;
}

/* Sections et conteneurs */
section {
    background-color: transparent !important;
}

.hero-section {
    background: rgba(22, 33, 62, 0.3) !important;
}

.features-section,
.how-it-works {
    background: rgba(26, 26, 46, 0.5) !important;
}

/* Inputs et formulaires */
input,
textarea,
select {
    background-color: rgba(26, 26, 46, 0.8) !important;
    color: #f9fafb !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

input::placeholder,
textarea::placeholder {
    color: #9ca3af !important;
}

/* Boutons */
button,
.btn,
.btn-primary,
.btn-secondary {
    background: var(--primary-gradient) !important;
    color: white !important;
    border: none !important;
}

button:hover,
.btn:hover {
    background: linear-gradient(135deg, #9ca3ff 0%, #a855f7 100%) !important;
}

/* Liens */
a {
    color: var(--text-accent) !important;
}

a:hover {
    color: var(--primary-light) !important;
}

/* Tables */
table {
    background-color: rgba(26, 26, 46, 0.8) !important;
}

th {
    background-color: rgba(22, 33, 62, 0.8) !important;
    color: #f9fafb !important;
}

td {
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #d1d5db !important;
}

/* Code blocks */
pre,
code {
    background-color: rgba(15, 15, 35, 0.8) !important;
    color: #a5b4fc !important;
}

/* Scrollbar dark mode */
::-webkit-scrollbar {
    background-color: #0f0f23 !important;
}

::-webkit-scrollbar-track {
    background-color: #0f0f23 !important;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gradient) !important;
    border: 2px solid #0f0f23 !important;
}

/* Supprimer TOUS les toggles dark mode */
.dark-mode-toggle,
.theme-toggle,
.theme-switcher,
[data-action="toggleDarkMode"],
#darkModeToggle {
    display: none !important;
}

/* Empêcher tout changement de thème */
[data-theme="light"] {
    /* Forcer dark mode même si light est défini */
    filter: invert(1) hue-rotate(180deg) !important;
}

/* S'assurer que les images ne sont pas inversées */
img,
video,
iframe,
.logo,
.emoji {
    filter: none !important;
}

/* Force dark mode sur TOUT */
@media (prefers-color-scheme: light) {
    /* Même si l'utilisateur préfère light, forcer dark */
    html, body {
        background-color: #0f0f23 !important;
        color: #f9fafb !important;
    }
}

/* Fin du dark mode permanent */