/* ============================================================
 * HASKARI ACADEMY — Design System CSS Premium
 * African AI Premium Futurism
 * ============================================================ */

/* ============================================================
 * VARIABLES CSS — Design Tokens
 * ============================================================ */
:root {
    /* Palette Primaire (Mode Sombre par défaut) */
    --color-bg-deep:       #050508;
    --color-bg-dark:       #0a0a0f;
    --color-bg-card:       #12121f;
    --color-bg-elevated:   #1a1a2e;
    --color-bg-glass:      rgba(18, 18, 31, 0.85);

    /* Couleurs de texte par défaut (Mode Sombre) */
    --color-text-main:     #e0e0f0;
    --color-text-sub:      #9090b0;
    --color-text-muted:    #7070a0;
    --color-heading:       #ffffff;

    /* Formulaires Premium (Mode Sombre) */
    --form-input-bg:       rgba(255, 255, 255, 0.04);
    --form-input-border:   rgba(255, 255, 255, 0.1);
    --form-input-text:     #ffffff;
    --form-input-placeholder: #404060;
    --form-input-focus-bg: rgba(0, 212, 255, 0.04);
    --form-select-option-bg: #12121f;

    /* Boutons Ghost (Mode Sombre) */
    --btn-ghost-bg:        rgba(255, 255, 255, 0.05);
    --btn-ghost-hover:     rgba(255, 255, 255, 0.1);

    /* Couleurs Signature HASKARI */
    --color-cyan:          #00d4ff;
    --color-cyan-dim:      rgba(0, 212, 255, 0.15);
    --color-violet:        #ffb800; /* Remplace le violet par le Gold Electrique */
    --color-violet-dim:    rgba(255, 184, 0, 0.15);
    --color-indigo:        #f59e0b; /* Remplace l'indigo par l'Ambre */
    --color-gold:          #ffb800;
    --color-neon-green:    #10b981;
    --color-neon-pink:     #ec4899;

    /* Gradients Signature */
    --gradient-primary:    linear-gradient(135deg, #ffb800 0%, #d97706 100%);
    --gradient-hero:       linear-gradient(135deg, #0a0a0f 0%, #151005 50%, #050508 100%);
    --gradient-card:       linear-gradient(145deg, rgba(255,184,0,0.05) 0%, rgba(217,119,6,0.05) 100%);
    --gradient-glow-cyan:  radial-gradient(ellipse at center, rgba(0,212,255,0.1) 0%, transparent 70%);
    --gradient-glow-violet:radial-gradient(ellipse at center, rgba(255,184,0,0.1) 0%, transparent 70%);
    --gradient-hero-blend: linear-gradient(135deg, rgba(5, 5, 8, 0.96) 0%, rgba(10, 10, 15, 0.92) 100%);

    /* Mega Menu Variables (Mode Sombre) */
    --mega-menu-bg:        linear-gradient(135deg, rgba(8, 8, 13, 0.99) 0%, rgba(12, 12, 20, 0.99) 100%);
    --mega-menu-card-bg:   rgba(12, 12, 20, 0.4);
    --mega-menu-card-border: rgba(255, 255, 255, 0.04);
    --mega-menu-card-hover-bg: rgba(12, 12, 20, 0.65);
    --mega-menu-shadow:    0 30px 70px rgba(0, 0, 0, 0.95), 0 0 50px rgba(255, 184, 0, 0.04);

    /* Typographie */
    --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display:   'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Tailles de police fluides (clamp = mobile-first) */
    --text-xs:     clamp(0.65rem, 1.5vw, 0.75rem);
    --text-sm:     clamp(0.8rem,  1.8vw, 0.875rem);
    --text-base:   clamp(0.9rem,  2vw,   1rem);
    --text-lg:     clamp(1rem,    2.2vw, 1.125rem);
    --text-xl:     clamp(1.1rem,  2.5vw, 1.25rem);
    --text-2xl:    clamp(1.2rem,  3vw,   1.5rem);
    --text-3xl:    clamp(1.4rem,  4vw,   1.875rem);
    --text-4xl:    clamp(1.75rem, 5vw,   2.25rem);
    --text-5xl:    clamp(2rem,    6vw,   3rem);
    --text-6xl:    clamp(2.5rem,  7vw,   3.75rem);
    --text-7xl:    clamp(3rem,    8vw,   4.5rem);
    --text-hero:   clamp(1.8rem,  8vw,   6rem);

    /* Espacement */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* Bordures */
    --border-color:        rgba(255, 255, 255, 0.06);
    --border-color-accent: rgba(0, 212, 255, 0.2);
    --border-radius-sm:    0.375rem;
    --border-radius:       0.75rem;
    --border-radius-lg:    1rem;
    --border-radius-xl:    1.5rem;
    --border-radius-2xl:   2rem;
    --border-radius-full:  9999px;

    /* Ombres */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow:  0 0 30px rgba(0, 212, 255, 0.15);
    --shadow-glow-violet: 0 0 30px rgba(124, 58, 237, 0.2);

    /* Transitions */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.25s ease;
    --transition-slow:   all 0.4s ease;
    --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Z-index */
    --z-nav:     100;
    --z-overlay: 200;
    --z-modal:   300;
    --z-toast:   400;
}

/* ============================================================
 * OVERRIDES MODE CLAIR — Ultra-Premium Light Theme
 * MISSION ANTIGRAVITY — Refonte chirurgicale complète
 * ============================================================ */
html.light {
    /* === FONDS & SURFACES === */
    --color-bg-deep:       #f4f6fa;         /* Fond page global — ivoire-bleuté, doux et reposant */
    --color-bg-dark:       #fafbfc;         /* Fond secondaire ultra-lumineux */
    --color-bg-card:       #ffffff;         /* Cartes, surfaces blanches de base */
    --color-bg-elevated:   #edf1f6;         /* Sub-cards, éléments surélevés */
    --color-bg-glass:      rgba(255, 255, 255, 0.88); /* Glassmorphism clair */

    /* === TYPOGRAPHIE HAUTE LISIBILITÉ === */
    --color-text-main:     #0f172a;         /* Corps de texte principal (Slate 900) */
    --color-text-sub:      #334155;         /* Texte secondaire (Slate 700) */
    --color-text-muted:    #475569;         /* Texte atténué (Slate 600) — Haute visibilité */
    --color-heading:       #030712;         /* Titres — Navy/Slate profond et puissant */

    /* === COULEURS MARQUE MODE CLAIR === */
    --color-cyan:          #0284c7;         /* Sky 700 — bleu-cyan technologique vibrant et très lisible */
    --color-cyan-dim:      rgba(2, 132, 199, 0.12);
    --color-violet:        #b45309;         /* Amber 700 — Ambre/Bronze cuivré précieux pour le gold en clair */
    --color-violet-dim:    rgba(180, 83, 9, 0.12);
    --color-gold:          #b45309;         /* Même bronze doré pour la lisibilité sur fond clair */
    --color-neon-green:    #059669;         /* Vert émeraude */
    --color-neon-pink:     #be185d;         /* Rose profond */

    /* === GRADIENTS ULTRA-PREMIUM === */
    --gradient-primary:    linear-gradient(135deg, #d97706 0%, #b45309 100%); /* Ambre/Or cuivré luxueux */
    --gradient-hero:       linear-gradient(160deg, #f4f6fb 0%, #fefcf3 50%, #f8fafc 100%); /* Dégradé de fond hero éclatant */
    --gradient-card:       linear-gradient(145deg, rgba(180, 83, 9, 0.015) 0%, rgba(2, 132, 199, 0.01) 100%);
    --gradient-hero-blend: linear-gradient(160deg, rgba(244, 246, 251, 0.96) 0%, rgba(254, 252, 243, 0.92) 50%, rgba(248, 250, 252, 0.94) 100%);
    --gradient-glow-cyan:  radial-gradient(ellipse at center, rgba(2, 132, 199, 0.08) 0%, transparent 70%);
    --gradient-glow-violet:radial-gradient(ellipse at center, rgba(180, 83, 9, 0.08) 0%, transparent 70%);

    /* === MEGA MENU === */
    --mega-menu-bg:        linear-gradient(135deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.99) 100%);
    --mega-menu-card-bg:   #f8fafc;
    --mega-menu-card-border: rgba(15,23,42,0.05);
    --mega-menu-card-hover-bg: #ffffff;
    --mega-menu-shadow:    0 20px 60px rgba(15,23,42,0.10), 0 4px 20px rgba(15,23,42,0.04), 0 0 0 1px rgba(15,23,42,0.03);

    /* === FORMULAIRES CLAIRS === */
    --form-input-bg:          #ffffff;
    --form-input-border:      rgba(15, 23, 42, 0.12); /* Bordure douce */
    --form-input-text:        #0f172a;
    --form-input-placeholder: #94a3b8;
    --form-input-focus-bg:    rgba(2, 132, 199, 0.01);
    --form-select-option-bg:  #ffffff;

    /* === BOUTONS GHOST === */
    --btn-ghost-bg:    rgba(15,23,42,0.03);
    --btn-ghost-hover: rgba(15,23,42,0.06);

    /* === BORDURES === */
    --border-color:        rgba(15, 23, 42, 0.06);
    --border-color-accent: rgba(2, 132, 199, 0.15);

    /* === OMBRES COMPOSÉES 3D PRECISE === */
    --shadow-sm:    0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md:    0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02);
    --shadow-lg:    0 20px 40px -10px rgba(15, 23, 42, 0.07), 0 1px 5px rgba(15, 23, 42, 0.03);
    --shadow-glow:  0 0 0 1px rgba(2, 132, 199, 0.12), 0 12px 30px rgba(2, 132, 199, 0.08);
    --shadow-glow-violet: 0 0 0 1px rgba(180, 83, 9, 0.15), 0 12px 30px rgba(180, 83, 9, 0.10);

    /* === OMBRES SPÉCIFIQUES MODE CLAIR === */
    --shadow-card:        0 10px 30px -5px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02), 0 0 0 1px rgba(15, 23, 42, 0.03);
    --shadow-card-hover:  0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 1px 5px rgba(15, 23, 42, 0.03), 0 0 0 1px rgba(180, 83, 9, 0.15), 0 0 25px rgba(180, 83, 9, 0.06);
    --shadow-btn-primary: 0 6px 20px rgba(180, 83, 9, 0.25), 0 2px 4px rgba(180, 83, 9, 0.15);
    --shadow-btn-hover:   0 10px 25px rgba(180, 83, 9, 0.35), 0 3px 8px rgba(180, 83, 9, 0.20);
    --shadow-navbar:      0 4px 20px -2px rgba(15, 23, 42, 0.03), 0 1px 0 rgba(15, 23, 42, 0.05);

    /* === ACCENTS SURFACE === */
    --accent-blue-soft: rgba(219, 234, 254, 0.7);
    --accent-gold-soft: rgba(254, 243, 199, 0.7);
}

/* ============================================================
 * LIGHT MODE GLOBAL UTILITY MAPPINGS (PHASE 2 ENHANCEMENTS)
 * ============================================================ */
html.light .text-white {
    color: var(--color-text-main) !important;
}
html.light .hover\:text-white:hover {
    color: var(--color-heading) !important;
}
html.light .text-white\/90 {
    color: var(--color-text-main) !important;
}
html.light .text-white\/80 {
    color: var(--color-text-main) !important;
}
html.light .text-white\/70 {
    color: var(--color-text-sub) !important;
}
html.light .text-white\/60 {
    color: var(--color-text-sub) !important;
}
html.light .text-white\/50 {
    color: var(--color-text-sub) !important;
}
html.light .text-white\/40 {
    color: var(--color-text-muted) !important;
}
html.light .text-white\/30 {
    color: var(--color-text-muted) !important;
}
html.light .text-white\/10 {
    color: rgba(15, 23, 42, 0.1) !important;
}
html.light .text-white\/5 {
    color: rgba(15, 23, 42, 0.05) !important;
}

/* Don't force dark text on primary buttons */
html.light .btn-primary,
html.light .btn-primary * {
    color: #ffffff !important;
}

/* Tailwind Grays overrides for legible light contrast */
html.light .text-gray-300 {
    color: var(--color-text-main) !important;
}
html.light .text-gray-400 {
    color: var(--color-text-sub) !important;
}
html.light .text-gray-500 {
    color: var(--color-text-muted) !important;
}
html.light .text-gray-600 {
    color: var(--color-text-muted) !important;
}
html.light .text-gray-700 {
    color: var(--color-text-muted) !important;
}

/* Hardcoded section backgrounds mapped dynamically */
html.light .bg-\[\#080810\] {
    background-color: var(--color-bg-deep) !important;
}
html.light .bg-\[\#080810\]\/60 {
    background-color: var(--color-bg-glass) !important;
}
html.light .bg-\[\#06060b\] {
    background-color: var(--color-bg-deep) !important;
}
html.light .bg-\[\#06060b\]\/80 {
    background-color: var(--color-bg-glass) !important;
}
html.light .bg-\[\#0a0a0f\] {
    background-color: var(--color-bg-card) !important;
}
html.light .bg-\[\#12121f\] {
    background-color: var(--color-bg-card) !important;
}
html.light .bg-\[\#111120\] {
    background-color: var(--color-bg-card) !important;
}
html.light .bg-\[\#1a1a2e\] {
    background-color: var(--color-bg-elevated) !important;
}
html.light .bg-\[\#050508\] {
    background-color: var(--color-bg-deep) !important;
}
html.light .bg-\[\#07070c\] {
    background-color: var(--form-input-bg) !important;
    border-color: var(--form-input-border) !important;
    color: var(--form-input-text) !important;
}
html.light .bg-\[\#07070c\]:focus {
    background-color: var(--form-input-focus-bg) !important;
    border-color: var(--color-cyan) !important;
}
html.light .bg-\[\#040406\]\/60 {
    background-color: rgba(15, 23, 42, 0.02) !important;
}
html.light .bg-black\/40 {
    background-color: rgba(15, 23, 42, 0.04) !important;
}
html.light .bg-black\/30 {
    background-color: rgba(15, 23, 42, 0.03) !important;
}
html.light .bg-black\/20 {
    background-color: rgba(15, 23, 42, 0.02) !important;
}
html.light .navbar__logo-suffix {
    color: #1E3A8A !important;
    -webkit-text-fill-color: #1E3A8A !important;
}
html.light .mobile-menu span.text-\[\#00d4ff\] {
    color: #1E3A8A !important;
}

/* --- Drawer Mobile & Hamburger Adaptation in Light Mode --- */
html.light .mobile-menu {
    background: rgba(255, 255, 255, 0.98) !important;
    border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: -15px 0 45px rgba(15, 23, 42, 0.08) !important;
}

html.light .mobile-menu .nav-link {
    color: var(--color-text-sub) !important;
}

html.light .mobile-menu .nav-link:hover {
    color: #1E3A8A !important;
    background-color: rgba(15, 23, 42, 0.04) !important;
}

html.light .mobile-menu .text-white {
    color: var(--color-text-main) !important;
}

html.light .mobile-menu .border-white\/10 {
    border-color: rgba(15, 23, 42, 0.06) !important;
}

html.light .mobile-menu .btn-ghost {
    color: var(--color-text-main) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
}

html.light .mobile-menu .btn-ghost:hover {
    background-color: rgba(15, 23, 42, 0.04) !important;
}

html.light .hamburger span {
    background-color: var(--color-text-main) !important;
}

html.light .hamburger:hover {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

html.light .bg-\[\#07070c\]::placeholder {
    color: var(--form-input-placeholder) !important;
}

/* Sub-cards styling with soft light blue (Haskari Food Pizza style) */
html.light .bg-\[\#0b0a14\]\/65 {
    background-color: #ebf2fc !important;
    border-color: rgba(0, 212, 255, 0.12) !important;
}
html.light .bg-\[\#0b0a14\] {
    background-color: #ebf2fc !important;
    border-color: rgba(0, 212, 255, 0.12) !important;
}

/* Borders mappings */
html.light .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.06) !important;
}
html.light .border-white\/10 {
    border-color: rgba(15, 23, 42, 0.1) !important;
}
html.light .border-white\/8 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .border-white\/12 {
    border-color: rgba(15, 23, 42, 0.12) !important;
}
html.light .border-white\/20 {
    border-color: rgba(15, 23, 42, 0.16) !important;
}

/* Background backdrops mappings */
html.light .bg-white\/5 {
    background-color: rgba(15, 23, 42, 0.04) !important;
}
html.light .bg-white\/10 {
    background-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .hover\:bg-white\/10:hover {
    background-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .hover\:bg-white\/5:hover {
    background-color: rgba(15, 23, 42, 0.04) !important;
}

/* Gold card styling (Haskari Food style) */
html.light .card {
    border-top: 3px solid var(--color-gold) !important;
}
/* Preserve original rounded corner aesthetics */
html.light .card-glass,
html.light .premium-animated-border,
html.light .premium-animated-border-inner {
    border-top: none !important;
}

/* Featured Gold card glow mapping */
html.light .border-haskari-gold\/20 {
    border-color: rgba(255, 184, 0, 0.35) !important;
}
html.light .shadow-\[0_0_40px_rgba\(255\,184\,0\,0\.06\)\] {
    box-shadow: 0 10px 40px -10px rgba(255, 184, 0, 0.22), 0 0 20px -5px rgba(255, 184, 0, 0.12) !important;
}
html.light .border-\[\#ffb800\]\/25 {
    border-color: rgba(255, 184, 0, 0.35) !important;
}
html.light .shadow-\[0_0_30px_rgba\(255\,184\,0\,0\.05\)\] {
    box-shadow: 0 10px 40px -10px rgba(255, 184, 0, 0.22), 0 0 20px -5px rgba(255, 184, 0, 0.12) !important;
}

/* ============================================================
 * RESET & BASE
 * ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

@media (min-width: 768px) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-main);
    background-color: var(--color-bg-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* --- COMPENSATION DE LA NAVBAR FIXED POUR LES CONTENUS --- */
#main-content {
    padding-top: 4.5rem;
}
#main-content .hero {
    margin-top: -4.5rem;
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-cyan);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover { opacity: 0.85; }

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
}

/* Focus visible pour l'accessibilité */
:focus-visible {
    outline: 2px solid var(--color-cyan);
    outline-offset: 3px;
    border-radius: var(--border-radius-sm);
}

/* ============================================================
 * TYPOGRAPHIE PREMIUM
 * ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-heading);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p { color: var(--color-text-sub); }

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-hero {
    font-size: var(--text-hero);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.0;
}

/* ============================================================
 * LAYOUT — Containers Fluides
 * ============================================================ */
.container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.container-sm  { max-width: 768px; }
.container-lg  { max-width: 1440px; }

.section {
    padding-block: clamp(4rem, 8vw, 6rem);
}

.section-sm {
    padding-block: clamp(2rem, 4vw, 3rem);
}

/* ============================================================
 * GRILLES RESPONSIVE (CSS Grid + Flexbox)
 * ============================================================ */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.25rem);
}

/* ============================================================
 * COMPOSANTS PREMIUM — Navigation
 * ============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    height: 4.5rem;
    display: flex;
    align-items: center;
    transition: var(--transition-slow);
}

.navbar--scrolled {
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

.navbar__logo {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.navbar__logo span {
    -webkit-text-fill-color: rgba(0,212,255,0.6);
    font-weight: 400;
}

.nav-link {
    font-size: var(--text-sm);
    font-weight: 500;
    color: #9090b0;
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.nav-link:hover, .nav-link.active {
    color: #fff;
    background: rgba(0,212,255,0.08);
    opacity: 1;
}

/* ============================================================
 * BOUTONS — Système Complet
 * ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.75rem 1.75rem;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--border-radius-full);
    transition: var(--transition-base);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    transition: var(--transition-fast);
}

.btn:hover::before { background: rgba(255,255,255,0.08); }

.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,212,255,0.25);
}

.btn-primary:hover {
    box-shadow: 0 6px 30px rgba(0,212,255,0.4);
    transform: translateY(-1px);
    opacity: 1;
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--color-cyan);
    border: 1px solid rgba(0,212,255,0.4);
}

.btn-outline:hover {
    background: rgba(0,212,255,0.08);
    border-color: var(--color-cyan);
    opacity: 1;
    color: var(--color-cyan);
}

.btn-ghost {
    background: var(--btn-ghost-bg);
    color: var(--color-text-main);
    border: 1px solid var(--border-color);
}

.btn-ghost:hover {
    background: var(--btn-ghost-hover);
    color: var(--color-heading);
    opacity: 1;
}

.btn-sm {
    min-height: 36px;
    padding: 0.5rem 1.25rem;
    font-size: var(--text-xs);
}

.btn-lg {
    min-height: 56px;
    padding: 1rem 2.5rem;
    font-size: var(--text-base);
}

/* ============================================================
 * CARDS — Glassmorphism Premium
 * ============================================================ */
.card {
    background: var(--color-bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-card);
    opacity: 0;
    transition: var(--transition-base);
    pointer-events: none;
}

.card:hover {
    border-color: rgba(0,212,255,0.2);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.card:hover::before { opacity: 1; }

.card-glass {
    background: var(--color-bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-color-accent);
}

/* ============================================================
 * BADGES & TAGS
 * ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.75rem;
    font-size: var(--text-xs);
    font-weight: 600;
    border-radius: var(--border-radius-full);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.badge-cyan   { background: var(--color-cyan-dim);   color: var(--color-cyan);   border: 1px solid rgba(0,212,255,0.2); }
.badge-violet { background: var(--color-violet-dim); color: #a78bfa; border: 1px solid rgba(124,58,237,0.2); }
.badge-green  { background: rgba(16,185,129,0.1);    color: #34d399; border: 1px solid rgba(16,185,129,0.2); }
.badge-gold   { background: rgba(245,158,11,0.1);    color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.badge-red    { background: rgba(239,68,68,0.1);     color: #f87171; border: 1px solid rgba(239,68,68,0.2); }

/* ============================================================
 * FORMULAIRES — Premium Dark
 * ============================================================ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: #c0c0d0;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    min-height: 44px;
    padding: 0.75rem 1rem;
    background: var(--form-input-bg);
    border: 1px solid var(--form-input-border);
    border-radius: var(--border-radius);
    color: var(--form-input-text);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: var(--transition-fast);
    outline: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--color-cyan);
    background: var(--form-input-focus-bg);
    box-shadow: 0 0 0 3px rgba(0,212,255,0.1);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--form-input-placeholder);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239090b0' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

.form-select option {
    background: var(--form-select-option-bg);
    color: var(--form-input-text);
}

/* ============================================================
 * SECTION TITLES — Patterns Récurrents
 * ============================================================ */
.section-eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-cyan);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-eyebrow::before,
.section-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gradient-primary);
    opacity: 0.3;
    max-width: 40px;
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--color-heading);
}

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 55ch;
    line-height: 1.7;
}

/* ============================================================
 * EFFETS DÉCORATIFS — Orbes & Glows
 * ============================================================ */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.orb-cyan {
    background: radial-gradient(circle, rgba(0,212,255,0.12) 0%, transparent 70%);
    width: clamp(300px, 50vw, 600px);
    height: clamp(300px, 50vw, 600px);
}

.orb-violet {
    background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
    width: clamp(250px, 40vw, 500px);
    height: clamp(250px, 40vw, 500px);
}

/* Ligne décorative néon */
.neon-line {
    height: 1px;
    background: var(--gradient-primary);
    opacity: 0.3;
    width: 100%;
}

/* Grille de fond */
.bg-grid {
    background-image:
        linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
    background-size: clamp(40px, 5vw, 60px) clamp(40px, 5vw, 60px);
}

/* ============================================================
 * ANIMATIONS & KEYFRAMES
 * ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.2); }
    50%       { box-shadow: 0 0 40px rgba(0,212,255,0.4), 0 0 80px rgba(0,212,255,0.1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes scanline {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.animate-fade-in-up  { animation: fadeInUp 0.6s ease forwards; }
.animate-fade-in     { animation: fadeIn 0.4s ease forwards; }
.animate-fade-in-down { animation: fadeInDown 0.4s ease forwards; }
.animate-float       { animation: float 4s ease-in-out infinite; }
.animate-pulse-glow  { animation: pulse-glow 3s ease-in-out infinite; }

/* ============================================================
 * NAVIGATION MOBILE — Hamburger Menu
 * ============================================================ */
.hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.hamburger:hover { background: rgba(255,255,255,0.06); }

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--transition-base);
    transform-origin: center;
}

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* La visibilité de la navigation et du hamburger est gérée dynamiquement par Tailwind CSS (hidden, md:flex, md:hidden) */

/* Mobile Menu Drawer Latéral Premium */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: 85%;
    background: rgba(8, 8, 14, 0.97);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    padding: 2.5rem 1.5rem;
    border-left: 1px solid rgba(255, 184, 0, 0.12);
    box-shadow: -15px 0 45px rgba(0, 0, 0, 0.7);
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu .nav-link {
    display: flex;
    font-size: var(--text-base);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 0.25rem;
    color: #a0a0c0;
    transition: var(--transition-fast);
}

.mobile-menu .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

#mobile-menu-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
 * HERO SECTION
 * ============================================================ */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--gradient-hero);
}

.hero-content {
    position: relative;
    z-index: 1;
    padding-top: 6rem;
    padding-bottom: 4rem;
}

@media (max-width: 768px) {
    .hero-content {
        padding-top: 4.5rem !important;
        padding-bottom: 2rem !important;
    }
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    background: rgba(0,212,255,0.08);
    border: 1px solid rgba(0,212,255,0.2);
    border-radius: var(--border-radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-cyan);
    margin-bottom: 1.5rem;
}

.hero-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-cyan);
    border-radius: 50%;
    animation: pulse-glow 2s infinite;
}

/* ============================================================
 * STATS COUNTER
 * ============================================================ */
.stat-card {
    text-align: center;
    padding: 1.5rem;
    transition: var(--transition-base);
}

@media (max-width: 768px) {
    .stat-card {
        padding: 0.75rem 0.5rem !important;
    }
}

.stat-number {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-label {
    font-size: var(--text-sm);
    color: #7070a0;
    margin-top: 0.5rem;
}

/* ============================================================
 * PILIERS / FEATURES CARDS
 * ============================================================ */
.pillar-card {
    position: relative;
    background: var(--color-bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-xl);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    overflow: hidden;
    transition: var(--transition-base);
    group: true;
}

.pillar-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-base);
}

.pillar-card:hover {
    border-color: rgba(0,212,255,0.2);
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}

.pillar-card:hover::after { transform: scaleX(1); }

.pillar-icon {
    width: clamp(48px, 8vw, 64px);
    height: clamp(48px, 8vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-lg);
    margin-bottom: 1.25rem;
    background: var(--gradient-primary);
    box-shadow: 0 4px 20px rgba(0,212,255,0.2);
}

/* ============================================================
 * ADMIN DASHBOARD
 * ============================================================ */
.admin-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--color-bg-card);
    border-right: 1px solid var(--border-color);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    transition: transform 0.3s ease;
    z-index: 50;
}

.admin-content {
    margin-left: 260px;
    min-height: 100vh;
    background: var(--color-bg-dark);
}

.admin-stat-card {
    background: var(--color-bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.admin-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    opacity: 0.08;
}

/* Tables Admin */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #606080;
    border-bottom: 1px solid var(--border-color);
}

.data-table tbody td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: var(--text-sm);
    color: #c0c0d0;
}

.data-table tbody tr:hover {
    background: rgba(255,255,255,0.02);
}

/* Responsive Admin : Table → Cards sur mobile */
@media (max-width: 768px) {
    .admin-sidebar  { transform: translateX(-100%); }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-content  { margin-left: 0; }

    .data-table-responsive thead { display: none; }
    .data-table-responsive tbody tr {
        display: block;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 1rem;
        padding: 1rem;
    }
    .data-table-responsive tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
    }
    .data-table-responsive tbody td::before {
        content: attr(data-label);
        font-size: var(--text-xs);
        font-weight: 600;
        text-transform: uppercase;
        color: #606080;
        letter-spacing: 0.05em;
    }
}

/* ============================================================
 * SCROLL BAR CUSTOM
 * ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-dark); }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.4); }

/* ============================================================
 * FOOTER
 * ============================================================ */
.footer {
    background: var(--color-bg-deep);
    border-top: 1px solid var(--border-color);
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2rem);
}

/* ============================================================
 * RESPONSIVE BREAKPOINTS
 * ============================================================ */
/* Tailwind gère la visibilité responsive native */

@media (max-width: 640px) {
    .btn-lg {
        width: 100%;
        justify-content: center;
    }
}

/* Pliable (Samsung Fold, etc.) */
@media (max-width: 280px) {
    :root {
        --text-hero: 2rem;
    }

    .container { padding-inline: 0.75rem; }
    .card { padding: 1rem; }
}

/* ============================================================
 * UTILITIES
 * ============================================================ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-full { width: 100%; }
.text-center { text-align: center; }

/* ============================================================
 * FINAL POLISH & ICON LAYER SOLUTIONS (RESTORE NATURAL SCALES)
 * ============================================================ */
i[data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

i[data-lucide] svg {
    width: 100%;
    height: 100%;
}

/* Navbar transitions & Hidden State for Smart mobile scroll */
.navbar {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border 0.25s ease;
}
.navbar--hidden {
    transform: translateY(-100%);
}

/* Enhancements for micro-tilt dynamic containers */
[data-tilt] {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Blueprint Architecture layer details */
#infrastructure .card {
    transition: var(--transition-base);
}
#infrastructure .card:hover {
    border-color: rgba(255, 184, 0, 0.25) !important;
    box-shadow: 0 10px 30px rgba(255, 184, 0, 0.04);
}

/* ============================================================
 * NAVBAR & MEGA MENU HOVER BRIDGE SOLUTIONS
 * ============================================================ */
.navbar__logo-premium {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    text-fill-color: initial !important;
}

.navbar__logo-brand {
    color: #ffb800 !important;
    -webkit-text-fill-color: #ffb800 !important;
}

.navbar__logo-suffix {
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
    font-weight: 300 !important;
    text-transform: none !important;
}



/* ============================================================
 * AMBIENT COSMIC MOTION SYSTEM (GPU-FRIENDLY CSS STARFIELD)
 * ============================================================ */
.ambient-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    will-change: opacity, transform;
    opacity: 0;
}

/* Star glow styling */
.star::after {
    content: '';
    position: absolute;
    inset: -3px;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 80%);
    border-radius: 50%;
    opacity: 0.5;
}

/* Base keyframes for twinkling and slight floating drift */
@keyframes twinkle-drift {
    0%, 100% {
        opacity: 0.15;
        transform: translateY(0) scale(0.9);
    }
    50% {
        opacity: 0.85;
        transform: translateY(-12px) scale(1.1);
    }
}

@keyframes twinkle-drift-alt {
    0%, 100% {
        opacity: 0.08;
        transform: translateY(-8px) scale(1.1);
    }
    50% {
        opacity: 0.75;
        transform: translateY(8px) scale(0.9);
    }
}

/* Individual star coordinates and timings */
.star-1 { width: 1.5px; height: 1.5px; top: 15%; left: 10%; animation: twinkle-drift 7s ease-in-out infinite; }
.star-2 { width: 2px; height: 2px; top: 25%; left: 80%; animation: twinkle-drift-alt 9s ease-in-out infinite; }
.star-3 { width: 1px; height: 1px; top: 45%; left: 20%; animation: twinkle-drift 6s ease-in-out infinite 1s; }
.star-4 { width: 2.5px; height: 2.5px; top: 55%; left: 85%; animation: twinkle-drift-alt 12s ease-in-out infinite 0.5s; background: #00d4ff; }
.star-4::after { background: radial-gradient(circle, rgba(0,212,255,0.8) 0%, transparent 80%); }
.star-5 { width: 1.5px; height: 1.5px; top: 75%; left: 15%; animation: twinkle-drift 8s ease-in-out infinite 2s; }
.star-6 { width: 2px; height: 2px; top: 85%; left: 75%; animation: twinkle-drift-alt 10s ease-in-out infinite 1.5s; }
.star-7 { width: 1px; height: 1px; top: 35%; left: 60%; animation: twinkle-drift 5s ease-in-out infinite 0.7s; }
.star-8 { width: 1.5px; height: 1.5px; top: 65%; left: 40%; animation: twinkle-drift-alt 8s ease-in-out infinite 2.2s; }
.star-9 { width: 2.5px; height: 2.5px; top: 12%; left: 70%; animation: twinkle-drift 11s ease-in-out infinite 1.2s; background: #ffb800; }
.star-9::after { background: radial-gradient(circle, rgba(255,184,0,0.8) 0%, transparent 80%); }
.star-10 { width: 1px; height: 1px; top: 92%; left: 30%; animation: twinkle-drift-alt 7s ease-in-out infinite 0.3s; }
.star-11 { width: 2px; height: 2px; top: 5%; left: 45%; animation: twinkle-drift 9s ease-in-out infinite 2.5s; }
.star-12 { width: 1.5px; height: 1.5px; top: 80%; left: 92%; animation: twinkle-drift-alt 6.5s ease-in-out infinite 1.8s; }

/* Footer specific coordinates and timings (more subtle) */
.star-f1 { width: 1.5px; height: 1.5px; top: 20%; left: 15%; animation: twinkle-drift 9s ease-in-out infinite; }
.star-f2 { width: 2px; height: 2px; top: 60%; left: 80%; animation: twinkle-drift-alt 11s ease-in-out infinite 1s; background: #ffb800; }
.star-f2::after { background: radial-gradient(circle, rgba(255,184,0,0.8) 0%, transparent 80%); }
.star-f3 { width: 1px; height: 1px; top: 40%; left: 35%; animation: twinkle-drift 7s ease-in-out infinite 0.5s; }
.star-f4 { width: 1.5px; height: 1.5px; top: 85%; left: 25%; animation: twinkle-drift-alt 10s ease-in-out infinite 2s; }
.star-f5 { width: 2px; height: 2px; top: 15%; left: 75%; animation: twinkle-drift 8s ease-in-out infinite 1.5s; background: #00d4ff; }
.star-f5::after { background: radial-gradient(circle, rgba(0,212,255,0.8) 0%, transparent 80%); }
.star-f6 { width: 1px; height: 1px; top: 75%; left: 55%; animation: twinkle-drift-alt 9s ease-in-out infinite 0.8s; }



/* ============================================================
 * THE FOUNDATION LAYER — FOOTER SYSTEM REWORK
 * ============================================================ */
.footer-abyssal-wrapper {
    background: linear-gradient(to bottom, #0a0a0f 0%, #050508 30%, #010102 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
}

.footer-abyssal-glow {
    position: absolute;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.03) 0%, rgba(255, 184, 0, 0.015) 50%, transparent 80%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(45px);
}

/* Monolithe de logo HASKARI */
.footer-logo-monolith {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none !important;
}

.footer-logo-img {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255, 184, 0, 0.12));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-logo-monolith:hover .footer-logo-img {
    transform: scale(1.06) rotate(3deg);
    filter: drop-shadow(0 0 20px rgba(255, 184, 0, 0.2));
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 0.95;
}

.footer-logo-text .brand-first {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2rem;
    letter-spacing: -0.04em;
    color: #ffb800; /* Gold */
    text-transform: uppercase;
}

.footer-logo-text .brand-second {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    color: #00d4ff; /* Cyan */
}

/* Responsive Monolith logo on mobile */
@media (max-width: 767px) {
    .footer-logo-monolith {
        flex-direction: row;
        width: 100%;
        justify-content: flex-start;
        gap: 1.25rem;
    }
    .footer-logo-img {
        width: 78px;
        height: 78px;
    }
    .footer-logo-text .brand-first {
        font-size: 2.3rem;
    }
    .footer-logo-text .brand-second {
        font-size: 1.55rem;
    }
}

/* Newsletter Hero Section Styles */
.footer-newsletter-hero h3 {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.05);
}

#newsletter-form input {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
}

#newsletter-form input:focus {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 0 15px rgba(255, 184, 0, 0.1);
}

/* ============================================================
   reCAPTCHA Badge  Masquage visuel conforme Google Policy
   IMPORTANT : conforme UNIQUEMENT si une mention legale recaptcha
   est affichee dans les formulaires concernes (OTP modal).
   Ref : https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed
   ============================================================ */
.grecaptcha-badge {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================
 * LIGHT MODE DESIGN ADJUSTMENTS (PHASE 3 ENHANCEMENTS)
 * ============================================================ */

/* Navbar scrolled translucent light background */
html.light .navbar--scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Blue & Cyan text color readability overrides */
html.light .text-haskari-cyan,
html.light .text-cyan-400,
html.light .text-blue-400,
html.light .text-\[\#00d4ff\] {
    color: #1E3A8A !important;
}

/* AI Panel assistant elements overrides */
html.light .haskari-ai-dock__wrapper {
    background: #ffffff !important;
    border: 2px solid #1E3A8A !important;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.2), 0 0 20px rgba(30, 58, 138, 0.12) !important;
}
html.light .haskari-ai-dock__text {
    color: #1E3A8A !important;
}
html.light .haskari-ai-dock__nucleus-core {
    background: #1E3A8A !important;
    box-shadow: 0 0 6px #1E3A8A !important;
}
html.light .haskari-ai-dock__nucleus-pulse {
    background: rgba(30, 58, 138, 0.4) !important;
}
html.light .haskari-ai-dock__aura {
    background: radial-gradient(circle, rgba(30, 58, 138, 0.15) 0%, rgba(30, 58, 138, 0.05) 55%, transparent 75%) !important;
}
html.light #haskari-ai-panel {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-left: 1px solid var(--border-color) !important;
}
/* Empêche l'ombre de déborder sur la droite de l'écran lorsque le panel est masqué */
#haskari-ai-panel.translate-x-full {
    box-shadow: none !important;
}
html.light #haskari-ai-panel h2,
html.light #haskari-ai-panel h3,
html.light #haskari-ai-panel h4 {
    color: var(--color-heading) !important;
}
html.light #haskari-ai-panel p {
    color: var(--color-text-sub) !important;
}
html.light .ai-suggestion-chip {
    background-color: #ebf2fc !important; /* Soft light blue */
    border-color: rgba(30, 58, 138, 0.12) !important;
    color: #1E3A8A !important;
}
html.light .ai-suggestion-chip:hover {
    background-color: #ffffff !important;
    border-color: var(--color-gold) !important;
    color: var(--color-heading) !important;
}
html.light #haskari-ai-panel .bg-gradient-to-br {
    background: #ebf2fc !important; /* Soft light blue */
    border-color: rgba(30, 58, 138, 0.12) !important;
}
html.light #haskari-ai-panel .bg-gradient-to-br * {
    color: var(--color-text-main) !important;
}
html.light #haskari-ai-panel .border-t {
    border-color: var(--border-color) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
}
html.light #ai-chat-input {
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.15) !important;
    color: var(--color-text-main) !important;
}
html.light #ai-mic-btn,
html.light #ai-upload-btn,
html.light #haskari-ai-panel-close {
    background-color: rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: var(--color-text-main) !important;
}
html.light #ai-mic-btn:hover,
html.light #ai-upload-btn:hover,
html.light #haskari-ai-panel-close:hover {
    background-color: rgba(15, 23, 42, 0.1) !important;
    color: var(--color-heading) !important;
}

/* Scroll-to-top button overrides */
html.light .origin-engine__core {
    background: #ffffff !important;
    border: 2px solid #1E3A8A !important;
    box-shadow: 0 10px 25px rgba(30, 58, 138, 0.15) !important;
}
html.light .origin-engine__icon,
html.light .origin-engine i {
    color: #1E3A8A !important;
}
html.light .origin-engine__dot {
    background: #1E3A8A !important;
    box-shadow: 0 0 10px #1E3A8A !important;
}
html.light .origin-engine.is-active .origin-engine__dot {
    background: #1E3A8A !important;
    box-shadow: 0 0 8px #1E3A8A !important;
}
html.light .origin-engine__breathing {
    background: radial-gradient(circle, rgba(30, 58, 138, 0.15) 0%, transparent 70%) !important;
}
html.light .origin-engine.is-near .origin-engine__core {
    border-color: #1E3A8A !important;
    box-shadow: 0 15px 35px rgba(30, 58, 138, 0.25), 0 0 20px rgba(30, 58, 138, 0.15) !important;
}
html.light .origin-engine:hover .origin-engine__core {
    border-color: #1E3A8A !important;
    box-shadow: 0 20px 45px rgba(30, 58, 138, 0.35), 0 0 25px rgba(30, 58, 138, 0.25) !important;
}

/* Testimonials index and show pages overrides */
html.light .testimonial-card-grid {
    background: var(--color-bg-card) !important;
    border-color: var(--border-color) !important;
}
html.light .testimonial-card-grid:hover {
    background: var(--color-bg-card) !important;
    border-color: var(--border-color-accent) !important;
    box-shadow: var(--shadow-glow) !important;
}
html.light .testimonial-card-grid blockquote {
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: var(--color-text-main) !important;
}
html.light .testimonial-card-grid .bg-black\/30 {
    background-color: #ebf2fc !important; /* Soft light blue */
    border-color: rgba(0, 212, 255, 0.12) !important;
}
html.light .testimonial-card-grid .bg-black\/30 * {
    color: var(--color-text-main) !important;
}
html.light .storytelling-block h2 {
    color: var(--color-heading) !important;
}
html.light .storytelling-block p {
    color: var(--color-text-sub) !important;
}
html.light .project-details-box {
    background: #ebf2fc !important; /* Soft light blue */
    border-color: rgba(0, 212, 255, 0.12) !important;
}

/* ============================================================
 * LIGHT MODE PREMIUM ELEVATIONS & TEXT LEGIBILITY (PHASE 4)
 * ============================================================ */

/* Adapt premium animated border inner container */
html.light .premium-animated-border-inner {
    background: var(--color-bg-glass) !important;
}

/* Card base definition and soft shadow in light mode */
html.light .card {
    background-color: var(--color-bg-card) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}

/* Card hover strong detachment and premium gold glow */
html.light .card:hover {
    border-color: rgba(255, 184, 0, 0.35) !important;
    box-shadow: 0 20px 45px -10px rgba(255, 184, 0, 0.25), 0 0 25px -5px rgba(255, 184, 0, 0.12) !important;
}

/* Testimonial cards hover detachment and gold glow */
html.light .testimonial-card-grid:hover {
    border-color: rgba(255, 184, 0, 0.35) !important;
    box-shadow: 0 20px 45px -10px rgba(255, 184, 0, 0.25), 0 0 25px -5px rgba(255, 184, 0, 0.12) !important;
}

/* Hardcoded opacity backgrounds mapped in light mode */
html.light .bg-\[\#12121f\]\/50 {
    background-color: #ebf2fc !important; /* Soft light blue subcard */
    border-color: rgba(0, 212, 255, 0.12) !important;
}
html.light .bg-\[\#12121f\]\/95 {
    background-color: var(--color-bg-glass) !important;
}
html.light .bg-\[\#12121f\]\/90 {
    background-color: var(--color-bg-glass) !important;
}
html.light .bg-\[\#0a0a0f\]\/95 {
    background-color: var(--color-bg-glass) !important;
}

/* Dark mode hover glow overlay override */
.card:hover {
    box-shadow: var(--shadow-glow) !important;
}

/* ============================================================
 * LIGHT MODE PREMIUM ADJUSTMENTS (PHASE 5)
 * ============================================================ */

/* Rounded corners for footer logo */
.footer-logo-img {
    border-radius: var(--border-radius-lg) !important;
}

/* Scrolled navigation links contrast in light mode */
html.light .nav-link {
    color: var(--color-text-main) !important;
    opacity: 0.85;
}
html.light .nav-link:hover,
html.light .nav-link.active {
    color: #1E3A8A !important;
    background: rgba(30, 58, 138, 0.08) !important; /* Soft light blue/navy blend */
    opacity: 1;
}

/* Newsletter input field alignment in light mode */
html.light .bg-\[\#030305\]\/90 {
    background-color: var(--form-input-bg) !important;
    color: var(--form-input-text) !important;
    border-color: var(--form-input-border) !important;
}

/* Systematic replacement of Blue-Cyan colors with #1E3A8A in light mode */
html.light .text-haskari-cyan,
html.light .text-cyan-400,
html.light .text-blue-400,
html.light .text-blue-500,
html.light .text-blue-600,
html.light .text-\[\#00d4ff\],
html.light .text-\[\#00d4ff\]\/80,
html.light .text-\[\#00d4ff\]\/90 {
    color: #1E3A8A !important;
}

html.light .border-haskari-cyan,
html.light .border-cyan-400,
html.light .border-blue-400,
html.light .border-\[\#00d4ff\],
html.light .border-haskari-cyan\/20,
html.light .border-haskari-cyan\/15,
html.light .border-haskari-cyan\/12 {
    border-color: #1E3A8A !important;
}

html.light .bg-haskari-cyan,
html.light .bg-cyan-400,
html.light .bg-blue-400,
html.light .bg-\[\#00d4ff\] {
    background-color: #1E3A8A !important;
    color: #ffffff !important;
}

/* Custom indicator bullets in footer / lists to match Haskari Blue (#1E3A8A) */
html.light .bg-haskari-cyan {
    background-color: #1E3A8A !important;
}
html.light .bg-haskari-gold {
    background-color: var(--color-gold) !important;
}

/* Badges contrast levels enhancements in Light Mode */
html.light .badge-cyan {
    background-color: rgba(30, 58, 138, 0.08) !important;
    color: #1E3A8A !important;
    border-color: rgba(30, 58, 138, 0.2) !important;
}
html.light .badge-violet {
    background-color: #fffbeb !important;
    color: #b45309 !important;
    border-color: rgba(180, 83, 9, 0.2) !important;
}
html.light .badge-green {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border-color: rgba(21, 128, 61, 0.2) !important;
}
html.light .badge-gold {
    background-color: #fffbeb !important;
    color: #b45309 !important;
    border-color: rgba(180, 83, 9, 0.2) !important;
}
html.light .badge-red {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: rgba(185, 28, 28, 0.2) !important;
}

/* Red texts & sub-elements high readability overrides in Light Mode */
html.light .text-red-400,
html.light .text-red-500,
html.light .text-red-400\/90,
html.light .text-red-400\/70 {
    color: #b91c1c !important;
}
html.light .bg-red-500\/10 {
    background-color: rgba(185, 28, 28, 0.08) !important;
}
html.light .border-red-500\/20 {
    border-color: rgba(185, 28, 28, 0.2) !important;
}

/* Inline style overrides for gradient cyan elements in Light Mode */
html.light [style*="background: linear-gradient(135deg, #00d4ff, #7c3aed)"],
html.light [style*="background:linear-gradient(135deg,#00d4ff,#7c3aed)"] {
    background: linear-gradient(135deg, #1E3A8A, #7c3aed) !important;
}
html.light [style*="background: linear-gradient(135deg, #00d4ff, #0090cc)"],
html.light [style*="background:linear-gradient(135deg,#00d4ff,#0090cc)"] {
    background: linear-gradient(135deg, #1E3A8A, #153a7a) !important;
}
html.light [style*="color: #00d4ff"],
html.light [style*="color:#00d4ff"] {
    color: #1E3A8A !important;
}
html.light [style*="border-color: #00d4ff"],
html.light [style*="border-color:#00d4ff"] {
    border-color: #1E3A8A !important;
}
html.light [style*="background:rgba(0,212,255,0.08)"] {
    background-color: rgba(30, 58, 138, 0.08) !important;
}
html.light [style*="border:1px solid rgba(0,212,255,0.2)"] {
    border: 1px solid rgba(30, 58, 138, 0.2) !important;
}
html.light [style*="border:2px solid rgba(0,212,255,0.3)"] {
    border: 2px solid rgba(30, 58, 138, 0.3) !important;
}
html.light [style*="background:linear-gradient(135deg,rgba(0,212,255,0.15),rgba(124,58,237,0.15))"] {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.15), rgba(124, 58, 237, 0.15)) !important;
}

/* ============================================================
   LIGHT MODE RESIDUAL FIXES (PHASE 6)
   ============================================================ */

/* 1. Bande verticale sur le côté droit (Ombre du menu mobile fermé) */
.mobile-menu:not(.open) {
    box-shadow: none !important;
}

/* 2. Page des Témoignages (Index) */
html.light .testimonial-card-grid {
    background-color: var(--color-bg-card) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}
html.light .testimonial-card-grid:hover {
    background-color: var(--color-bg-card) !important;
    border-color: rgba(30, 58, 138, 0.25) !important;
    box-shadow: 0 15px 35px -10px rgba(30, 58, 138, 0.15) !important;
    transform: translateY(-6px) !important; /* Ajout d'une élévation légère sans tilt en hauteur */
}
html.light .testimonial-card-grid h3 {
    color: var(--color-heading) !important;
}
html.light .testimonial-card-grid blockquote {
    color: var(--color-text-main) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .testimonial-card-grid .bg-black\/30 {
    background-color: #ebf2fc !important; /* Soft light blue subcard */
    border-color: rgba(30, 58, 138, 0.12) !important;
}
html.light .testimonial-card-grid .bg-black\/30 * {
    color: var(--color-text-main) !important;
}
html.light .filter-btn {
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: var(--color-text-sub) !important;
}
html.light .filter-btn:hover {
    border-color: rgba(15, 23, 42, 0.25) !important;
    color: var(--color-heading) !important;
    background-color: rgba(15, 23, 42, 0.04) !important;
}
html.light .filter-btn.active {
    background: linear-gradient(135deg, #1E3A8A, #7c3aed) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.25) !important;
}
html.light h1.text-white,
html.light h2.text-white {
    color: var(--color-heading) !important;
}

/* 3. Page Détails d'un Témoignage (Show) */
html.light .storytelling-block h2 {
    color: var(--color-heading) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .storytelling-block h2 span {
    color: var(--color-text-muted) !important;
}
html.light .storytelling-block p {
    color: var(--color-text-sub) !important;
}
html.light .project-details-box {
    background: #ebf2fc !important; /* Soft light blue subcard */
    border-color: rgba(30, 58, 138, 0.12) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
}
html.light .project-details-box h3,
html.light .project-details-box h4 {
    color: var(--color-heading) !important;
}
html.light .project-details-box p {
    color: var(--color-text-sub) !important;
}
html.light .project-details-box .border-b,
html.light .project-details-box .border-t {
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .social-badge-link {
    background-color: rgba(15, 23, 42, 0.03) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: var(--color-text-sub) !important;
}
html.light .social-badge-link:hover {
    border-color: #1E3A8A !important;
    background-color: rgba(30, 58, 138, 0.05) !important;
    color: #1E3A8A !important;
}
html.light .storytelling-block + div.project-details-box + div.project-details-box {
    background-color: var(--color-bg-card) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .storytelling-block + div.project-details-box + div.project-details-box h3 {
    color: var(--color-heading) !important;
}
html.light .storytelling-block + div.project-details-box + div.project-details-box span.badge {
    background-color: rgba(30, 58, 138, 0.08) !important;
    color: #1E3A8A !important;
    border-color: rgba(30, 58, 138, 0.15) !important;
}
html.light .storytelling-block + div.project-details-box + div.project-details-box .bg-white\/5 {
    background-color: rgba(15, 23, 42, 0.04) !important;
    color: var(--color-text-main) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
/* Témoignage direct brut (boîte de citation en bas de page) */
html.light .storytelling-block ~ div.relative.rounded-3xl.overflow-hidden {
    background: #ebf2fc !important; /* Soft light blue */
    border-color: rgba(30, 58, 138, 0.12) !important;
}
html.light .storytelling-block ~ div.relative.rounded-3xl.overflow-hidden p {
    color: var(--color-text-main) !important;
}
html.light .storytelling-block ~ div.relative.rounded-3xl.overflow-hidden i[data-lucide="quote"] {
    color: rgba(30, 58, 138, 0.08) !important;
}
/* Boîte d'impact chiffré de droite */
html.light .premium-animated-border ~ div.rounded-2xl.border.border-\[\#ffb800\]\/20 {
    background: #fffbeb !important; /* Soft gold backdrop */
    border-color: rgba(180, 83, 9, 0.2) !important;
    box-shadow: 0 10px 25px rgba(180, 83, 9, 0.08) !important;
}
html.light .premium-animated-border ~ div.rounded-2xl.border.border-\[\#ffb800\]\/20 span.text-white {
    color: #b45309 !important;
}
html.light .premium-animated-border ~ div.rounded-2xl.border.border-\[\#ffb800\]\/20 p.text-gray-300 {
    color: #b45309 !important;
}
/* Boîte de formation associée de droite */
html.light .premium-animated-border ~ div.rounded-2xl.border.border-white\/5 {
    background-color: var(--color-bg-card) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .premium-animated-border ~ div.rounded-2xl.border.border-white\/5 h4.text-white {
    color: var(--color-heading) !important;
}
html.light .premium-animated-border ~ div.rounded-2xl.border.border-white\/5 p.text-gray-400 {
    color: var(--color-text-sub) !important;
}

/* 4. Page de Profil Alumni (Show) */
html.light .alumni-profile-hero {
    background: linear-gradient(160deg, rgba(30, 58, 138, 0.06) 0%, rgba(124, 58, 237, 0.04) 40%, transparent 70%) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}
html.light .alumni-profile-hero h1 {
    color: var(--color-heading) !important;
}
html.light .alumni-profile-hero [style*="background:linear-gradient(135deg,rgba(0,212,255,0.2)"] {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.2), rgba(124, 58, 237, 0.2)) !important;
    border-color: rgba(30, 58, 138, 0.35) !important;
    color: #1E3A8A !important;
}
html.light .profile-social-btn {
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: var(--color-text-sub) !important;
    background: rgba(15, 23, 42, 0.03) !important;
}
html.light .profile-social-btn:hover {
    border-color: rgba(30, 58, 138, 0.35) !important;
    color: #1E3A8A !important;
    background: rgba(30, 58, 138, 0.06) !important;
}
html.light .profile-section-card {
    background-color: var(--color-bg-card) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}
html.light .profile-section-card h2,
html.light .profile-section-card h3 {
    color: var(--color-heading) !important;
}
html.light .profile-section-card p,
html.light .profile-section-card dd {
    color: var(--color-text-sub) !important;
}
html.light .profile-section-card dt {
    color: var(--color-text-muted) !important;
}
html.light .related-alumni-card {
    background-color: var(--color-bg-card) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
}
html.light .related-alumni-card:hover {
    border-color: rgba(30, 58, 138, 0.2) !important;
    background-color: rgba(30, 58, 138, 0.02) !important;
}
html.light .related-avatar {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.15), rgba(124, 58, 237, 0.15)) !important;
    border-color: rgba(30, 58, 138, 0.25) !important;
    color: #1E3A8A !important;
}
html.light .related-alumni-card p.text-white {
    color: var(--color-text-main) !important;
}
html.light [style*="border-color:rgba(0,212,255,0.3)"] {
    border-color: rgba(30, 58, 138, 0.3) !important;
}
html.light .profile-star {
    color: rgba(15, 23, 42, 0.1) !important;
}
html.light .profile-star.lit {
    color: #ffb800 !important;
}

/* 5. Logo HASKARI ACADEMY en Mode Clair */
html.light #logo-link span {
    background: linear-gradient(135deg, #1E3A8A, #7c3aed) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================================
   ADMINISTRATION & SIDEBAR RÉTRACTABLE
   ============================================================ */

/* 1. Comportement de transition de la sidebar et du contenu */
.admin-sidebar {
    width: 260px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease !important;
}

.admin-content {
    margin-left: 260px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 2. État collapsed (réduit) */
.admin-sidebar-collapsed-state .admin-sidebar {
    width: 72px;
}

.admin-sidebar-collapsed-state .admin-content {
    margin-left: 72px;
}

/* 3. Masquage des textes et badges en mode réduit */
.admin-sidebar-collapsed-state .admin-sidebar:not(.admin-sidebar--expanded-hover) .admin-sidebar-text,
.admin-sidebar-collapsed-state .admin-sidebar:not(.admin-sidebar--expanded-hover) .admin-sidebar-badge,
.admin-sidebar-collapsed-state .admin-sidebar:not(.admin-sidebar--expanded-hover) .admin-theme-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    display: none !important;
}

/* Centrage des icônes et de l'avatar en mode réduit */
.admin-sidebar-collapsed-state .admin-sidebar:not(.admin-sidebar--expanded-hover) nav a {
    justify-content: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.admin-sidebar-collapsed-state .admin-sidebar:not(.admin-sidebar--expanded-hover) .admin-user-panel {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 4. Déploiement temporaire au survol */
.admin-sidebar-collapsed-state .admin-sidebar.admin-sidebar--expanded-hover {
    width: 260px !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25) !important;
    z-index: 60 !important;
}

.admin-sidebar-collapsed-state .admin-sidebar.admin-sidebar--expanded-hover .admin-sidebar-text,
.admin-sidebar-collapsed-state .admin-sidebar.admin-sidebar--expanded-hover .admin-sidebar-badge,
.admin-sidebar-collapsed-state .admin-sidebar.admin-sidebar--expanded-hover .admin-theme-btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
}

.admin-sidebar-collapsed-state .admin-sidebar.admin-sidebar--expanded-hover .admin-sidebar-text {
    display: inline !important;
}

.admin-sidebar-collapsed-state .admin-sidebar.admin-sidebar--expanded-hover .admin-sidebar-badge {
    display: inline-flex !important;
}

/* 5. AUDIT THÉMATIQUE - SURCHARGES MODE CLAIR */
html.light .admin-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.light .admin-sidebar .border-b,
html.light .admin-sidebar .border-t,
html.light .admin-sidebar .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.06) !important;
}

html.light .admin-sidebar nav a {
    color: var(--color-text-sub) !important;
}

html.light .admin-sidebar nav a:hover {
    background-color: rgba(30, 58, 138, 0.04) !important;
    color: #1E3A8A !important;
}

html.light .admin-sidebar nav a.bg-haskari-cyan\/10 {
    background-color: rgba(30, 58, 138, 0.08) !important;
    color: #1E3A8A !important;
    border-color: rgba(30, 58, 138, 0.15) !important;
}

html.light .admin-sidebar .text-white,
html.light .admin-user-panel p.text-white {
    color: var(--color-text-main) !important;
}

html.light .admin-sidebar .text-gray-500,
html.light .admin-user-panel p.text-gray-500 {
    color: var(--color-text-muted) !important;
}

html.light .admin-theme-btn {
    color: var(--color-text-muted) !important;
}

html.light .admin-theme-btn:hover {
    background-color: rgba(15, 23, 42, 0.05) !important;
    color: var(--color-heading) !important;
}

/* Contenu Admin et Cartes */
html.light .admin-content {
    background-color: #f8fafc !important;
}

html.light .admin-stat-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
}

html.light .admin-stat-card:hover {
    border-color: rgba(30, 58, 138, 0.2) !important;
    box-shadow: 0 10px 25px rgba(30, 58, 138, 0.08) !important;
}

html.light .admin-stat-card p.text-white,
html.light .admin-stat-card span.text-white,
html.light .admin-stat-card div.text-white {
    color: var(--color-text-main) !important;
}

html.light .admin-stat-card p.text-gray-500,
html.light .admin-stat-card span.text-gray-500 {
    color: var(--color-text-muted) !important;
}

/* Tableaux Admin */
html.light .data-table thead th {
    color: var(--color-text-sub) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

html.light .data-table tbody td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
    color: var(--color-text-main) !important;
}

html.light .data-table tbody tr:hover {
    background-color: rgba(30, 58, 138, 0.02) !important;
}

html.light .data-table tbody tr.bg-white\/\[0\.02\] {
    background-color: rgba(30, 58, 138, 0.04) !important;
    border-left-color: #1E3A8A !important;
}

html.light .data-table tbody td .text-white {
    color: var(--color-text-main) !important;
}

html.light .data-table tbody td .text-gray-400,
html.light .data-table tbody td .text-gray-500,
html.light .data-table tbody td .text-gray-600 {
    color: var(--color-text-muted) !important;
}

html.light .data-table tbody td .bg-white\/5 {
    background-color: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html.light .data-table tbody td .border-white\/10 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Inputs de recherche de l'administration */
html.light input#search-formations,
html.light input[name="search"],
html.light input[data-search-table] {
    background-color: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    color: var(--color-text-main) !important;
}

html.light input#search-formations:focus,
html.light input[name="search"]:focus,
html.light input[data-search-table]:focus {
    border-color: #1E3A8A !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1) !important;
}

/* Éviter que les barres de progression masquent les textes */
html.light .bg-white\/10 {
    background-color: rgba(15, 23, 42, 0.08) !important;
}

/* Adaptations additionnelles de la typographie de l'admin */
html.light .admin-content h1,
html.light .admin-content h2,
html.light .admin-content h3 {
    color: var(--color-heading) !important;
}

html.light .admin-content p {
    color: var(--color-text-sub) !important;
}

html.light .admin-content .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.06) !important;
}

html.light .admin-content .bg-white\/\[0\.02\] {
    background-color: rgba(15, 23, 42, 0.02) !important;
}

html.light .admin-content .bg-white\/5 {
    background-color: rgba(15, 23, 42, 0.04) !important;
}

html.light .admin-content .border-white\/10 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

html.light .admin-content .text-gray-600 {
    color: var(--color-text-muted) !important;
}

html.light .admin-content .card {
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}



/* ================================================================
 * MISSION ANTIGRAVITY — Phase 7 : Ultra-Premium Light Mode Overhaul
 * Refonte chirurgicale complète du thème clair HASKARI Academy
 * ================================================================ */

/* ── 1. FOND DE PAGE AVEC HALO PREMIUM ─────────────────────────── */

/* Corps de page en mode clair : fond légèrement structuré */
html.light body {
    background: #f0f4fa;
    background-image:
        radial-gradient(ellipse 80% 60% at 20% -10%, rgba(30,58,138,0.06) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 110%, rgba(255,184,0,0.05) 0%, transparent 55%);
    background-attachment: fixed;
}

/* Grille de fond adaptée en mode clair */
html.light .bg-grid {
    background-image:
        linear-gradient(rgba(30,58,138,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,58,138,0.04) 1px, transparent 1px) !important;
}

/* Orbs décoratifs atténués et recolorés en mode clair */
html.light .orb-cyan {
    background: radial-gradient(circle, rgba(30,58,138,0.06) 0%, transparent 70%) !important;
}
html.light .orb-violet {
    background: radial-gradient(circle, rgba(255,184,0,0.05) 0%, transparent 70%) !important;
}

/* Stars cosmétiques : remplacées par des points bleus/or subtils en clair */
html.light .star {
    background: rgba(30, 58, 138, 0.25) !important;
    box-shadow: 0 0 4px rgba(30, 58, 138, 0.15);
}
html.light .star::after {
    background: radial-gradient(circle, rgba(30,58,138,0.5) 0%, transparent 80%) !important;
}
html.light .star-4,
html.light .star-9,
html.light .star-f2,
html.light .star-f5 {
    background: rgba(255, 184, 0, 0.45) !important;
    box-shadow: 0 0 6px rgba(255, 184, 0, 0.2);
}
html.light .star-4::after,
html.light .star-9::after,
html.light .star-f2::after,
html.light .star-f5::after {
    background: radial-gradient(circle, rgba(255,184,0,0.7) 0%, transparent 80%) !important;
}

/* Canvas particules atténué en mode clair */
html.light #particle-canvas {
    opacity: 0.18 !important;
}

/* ── 2. NAVBAR PREMIUM CLAIR ────────────────────────────────────── */

/* Navbar scrolled : fond blanc propre translucide avec ombre 3D subtile */
html.light .navbar--scrolled {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
    box-shadow: var(--shadow-navbar) !important;
}

/* Hamburger menu icons en clair */
html.light .hamburger span {
    background-color: var(--color-text-main) !important;
}
html.light .hamburger:hover {
    background-color: rgba(15, 23, 42, 0.05) !important;
}

/* Nav links desktop clair — Sky 700 active color */
html.light .nav-link {
    color: var(--color-text-sub) !important;
    opacity: 1;
    transition: var(--transition-base);
}
html.light .nav-link:hover,
html.light .nav-link.active {
    color: var(--color-cyan) !important;
    background: rgba(2, 132, 199, 0.07) !important;
    opacity: 1;
}

/* CTA bouton "Contacter" en clair — bronze shadow */
html.light .btn-primary {
    box-shadow: var(--shadow-btn-primary) !important;
}
html.light .btn-primary:hover {
    box-shadow: var(--shadow-btn-hover) !important;
    transform: translateY(-2px);
}

/* Bouton login/compte en clair — glass accent */
html.light #nav-cta-login,
html.light .profile-dropdown-trigger {
    color: var(--color-text-main) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
html.light #nav-cta-login:hover,
html.light .profile-dropdown-trigger:hover {
    border-color: rgba(180, 83, 9, 0.35) !important;
    background: #ffffff !important;
    box-shadow: 0 8px 20px -5px rgba(180, 83, 9, 0.12) !important;
}

/* ── 3. CARDS PREMIUM CLAIR ─────────────────────────────────────── */

/* Card base — fond blanc pur, ombre 3D composé très douce */
html.light .card {
    background-color: var(--color-bg-card) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Card hover — élévation premium avec glow bronze subtil */
html.light .card:hover {
    border-color: rgba(180, 83, 9, 0.25) !important;
    box-shadow: var(--shadow-card-hover) !important;
    transform: translateY(-4px);
}

/* Pillar cards hover */
html.light .pillar-card {
    background: var(--color-bg-card) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: var(--shadow-card) !important;
    transition: var(--transition-slow);
}
html.light .pillar-card:hover {
    border-color: rgba(2, 132, 199, 0.25) !important;
    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.08), 0 1px 5px rgba(15, 23, 42, 0.03), 0 0 0 1px rgba(2, 132, 199, 0.15), 0 0 25px rgba(2, 132, 199, 0.06) !important;
    transform: translateY(-4px);
}

/* Card glass en clair */
html.light .card-glass {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    box-shadow: var(--shadow-card) !important;
}

/* ── 4. FORMULAIRES CLAIR ───────────────────────────────────────── */

/* Labels de formulaire */
html.light .form-label {
    color: var(--color-text-main) !important;
}

/* Inputs focus avec ring Sky cyan */
html.light .form-input:focus,
html.light .form-textarea:focus,
html.light .form-select:focus {
    border-color: var(--color-cyan) !important;
    background: var(--form-input-focus-bg) !important;
    box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* ── 5. SECTIONS & EYEBROWS ─────────────────────────────────────── */

/* Section eyebrow en clair — Sky 700 */
html.light .section-eyebrow {
    color: var(--color-cyan) !important;
}

/* Stat card labels */
html.light .stat-label {
    color: var(--color-text-muted) !important;
}

/* ── 6. BOUTONS OUTLINE EN CLAIR ────────────────────────────────── */
html.light .btn-outline {
    color: var(--color-cyan) !important;
    border-color: rgba(2, 132, 199, 0.30) !important;
    transition: var(--transition-base);
}
html.light .btn-outline:hover {
    background: rgba(2, 132, 199, 0.07) !important;
    border-color: var(--color-cyan) !important;
    color: var(--color-cyan) !important;
}

/* ── 7. DATA-TABLES ADMIN — REFONTE CLAIR ───────────────────────── */

html.light .data-table thead th {
    color: var(--color-text-sub) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: var(--color-bg-dark) !important;
    font-weight: 600 !important;
}
html.light .data-table tbody td {
    border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
    color: var(--color-text-main) !important;
}
html.light .data-table tbody tr:hover {
    background: rgba(2, 132, 199, 0.03) !important;
}

/* ── 8. ADMIN SIDEBAR TOPBAR MOBILE ─────────────────────────────── */

/* Topbar mobile admin en clair */
html.light .admin-content > div:first-child {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(16px) !important;
}
html.light .admin-content > div:first-child .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.07) !important;
}
html.light #sidebar-toggle {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: var(--color-text-main) !important;
}
html.light #sidebar-overlay {
    background: rgba(15, 23, 42, 0.40) !important;
}

/* Admin stat cards enrichies en clair */
html.light .admin-stat-card {
    background: linear-gradient(145deg, #ffffff 0%, var(--color-bg-dark) 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: var(--shadow-card) !important;
}
html.light .admin-stat-card:hover {
    border-color: rgba(2, 132, 199, 0.20) !important;
    box-shadow:
        0 8px 24px rgba(15, 23, 42, 0.04),
        0 16px 40px rgba(2, 132, 199, 0.08),
        0 0 0 1px rgba(2, 132, 199, 0.06) !important;
    transform: translateY(-3px);
}

/* ── 9. FOOTER REFONTE COMPLÈTE CLAIR ───────────────────────────── */

/* Wrapper footer — remplace le gradient abyssal sombre */
html.light .footer-abyssal-wrapper {
    background: linear-gradient(160deg, var(--color-bg-dark) 0%, var(--color-bg-deep) 100%) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Halo du footer adapté en clair */
html.light .footer-abyssal-glow {
    background: radial-gradient(ellipse at center, rgba(30, 58, 138, 0.06) 0%, rgba(255, 184, 0, 0.04) 50%, transparent 80%) !important;
}

/* Newsletter section footer */
html.light .footer-newsletter-hero h3 {
    color: #0a1931 !important;
    text-shadow: none !important;
}
html.light .footer-newsletter-hero .border-b {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Footer newsletter input */
html.light #newsletter-form input {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #1e293b !important;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
html.light #newsletter-form input::placeholder {
    color: #94a3b8 !important;
}
html.light #newsletter-form input:focus {
    border-color: #1E3A8A !important;
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04), 0 0 0 3px rgba(30, 58, 138, 0.10) !important;
}

/* Footer links & textes */
html.light .footer p.text-gray-500,
html.light .footer p.text-sm.text-gray-500 {
    color: #64748b !important;
}
html.light .footer p.text-\\[11px\\].text-gray-600,
html.light .footer .text-gray-600 {
    color: #64748b !important;
}
html.light .footer h3.text-white,
html.light .footer h3.text-xs.font-semibold.text-white {
    color: #0a1931 !important;
}
html.light .footer a.text-gray-500:hover {
    color: #1E3A8A !important;
}
html.light .footer a.hover\\:text-haskari-cyan:hover {
    color: #1E3A8A !important;
}
html.light .footer .text-gray-500.hover\\:text-haskari-cyan {
    color: #475569 !important;
}

/* Icônes réseaux sociaux footer */
html.light .footer .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .footer a.border-white\/5 {
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
    background: rgba(255, 255, 255, 0.8) !important;
}
html.light .footer a.border-white\/5:hover {
    color: #1E3A8A !important;
    border-color: rgba(30, 58, 138, 0.25) !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.10) !important;
}

/* Bottom footer bar */
html.light .footer .border-t.border-white\/5 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .footer .text-gray-600.font-mono,
html.light .footer div.font-mono.text-\\[11px\\].text-gray-600 {
    color: #64748b !important;
}

/* Logo footer texte */
html.light .footer-logo-text .brand-second {
    color: #1E3A8A !important;
}
html.light .footer-logo-img {
    filter: drop-shadow(0 0 12px rgba(255, 184, 0, 0.15)) !important;
}

/* ── 10. SECTIONS TEXTE FOOTER ──────────────────────────────────── */

/* Text nav footer */
html.light .footer .bg-haskari-cyan {
    background-color: #1E3A8A !important;
}
html.light .footer .hover\\:text-haskari-cyan:hover {
    color: #1E3A8A !important;
}

/* ── 11. PREMIUM ANIMATED BORDER — CLAIR ────────────────────────── */

html.light .premium-animated-border {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.10), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
}
html.light .premium-animated-border:hover {
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.14), 0 0 30px rgba(255, 184, 0, 0.10) !important;
}
html.light .premium-animated-border-inner {
    background: rgba(255, 255, 255, 0.97) !important;
}

/* ── 12. COOKIE CONSENT BANNER — CLAIR ─────────────────────────── */

html.light #haskari-cookie-consent .premium-animated-border-inner {
    background: rgba(255, 255, 255, 0.98) !important;
}
html.light #haskari-cookie-consent h2.text-white,
html.light #haskari-cookie-consent .text-white {
    color: #0a1931 !important;
}
html.light #haskari-cookie-consent p.text-gray-400,
html.light #haskari-cookie-consent .text-gray-400,
html.light #haskari-cookie-consent .text-xs.text-gray-500 {
    color: #64748b !important;
}
html.light #haskari-cookie-consent .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light #cookie-btn-necessary {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: #475569 !important;
}
html.light #cookie-btn-necessary:hover {
    background: rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(15, 23, 42, 0.20) !important;
    color: #1e293b !important;
}
html.light #haskari-cookie-consent a.hover\\:text-\\[\\#00d4ff\\] {
    color: #64748b !important;
}
html.light #haskari-cookie-consent a.hover\\:text-\\[\\#00d4ff\\]:hover {
    color: #1E3A8A !important;
}

/* ── 13. BADGES LISIBLES EN MODE CLAIR ─────────────────────────── */

html.light .badge-cyan {
    background-color: rgba(30, 58, 138, 0.08) !important;
    color: #1E3A8A !important;
    border-color: rgba(30, 58, 138, 0.20) !important;
}
html.light .badge-violet {
    background-color: #fffbeb !important;
    color: #b45309 !important;
    border-color: rgba(180, 83, 9, 0.20) !important;
}
html.light .badge-green {
    background-color: #f0fdf4 !important;
    color: #15803d !important;
    border-color: rgba(21, 128, 61, 0.20) !important;
}
html.light .badge-gold {
    background-color: #fffbeb !important;
    color: #b45309 !important;
    border-color: rgba(180, 83, 9, 0.20) !important;
}
html.light .badge-red {
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: rgba(185, 28, 28, 0.20) !important;
}

/* ── 14. SCROLLBAR EN MODE CLAIR ────────────────────────────────── */

html.light ::-webkit-scrollbar-track {
    background: #f0f4fa !important;
}
html.light ::-webkit-scrollbar-thumb {
    background: rgba(30, 58, 138, 0.18) !important;
}
html.light ::-webkit-scrollbar-thumb:hover {
    background: rgba(30, 58, 138, 0.35) !important;
}

/* ── 15. HERO EYEBROW EN CLAIR ──────────────────────────────────── */

html.light .hero-eyebrow {
    background: rgba(30, 58, 138, 0.08) !important;
    border-color: rgba(30, 58, 138, 0.20) !important;
    color: #1E3A8A !important;
}
html.light .hero-eyebrow::before {
    background: #1E3A8A !important;
    box-shadow: 0 0 8px rgba(30, 58, 138, 0.35) !important;
}

/* ── 16. NEON LINE EN CLAIR ─────────────────────────────────────── */
html.light .neon-line {
    background: linear-gradient(90deg, transparent, rgba(30, 58, 138, 0.2), rgba(255, 184, 0, 0.2), transparent) !important;
    opacity: 1 !important;
}

/* ── 17. FOCUS-VISIBLE EN CLAIR ─────────────────────────────────── */
html.light :focus-visible {
    outline-color: #1E3A8A !important;
}

/* ── 18. LIENS STANDARD EN CLAIR ────────────────────────────────── */
html.light a {
    color: #1E3A8A;
}

/* ── 19. ADMIN SIDEBAR HOVER EXPAND ────────────────────────────── */
html.light .admin-sidebar-collapsed-state .admin-sidebar.admin-sidebar--expanded-hover {
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12) !important;
}

/* ── 20. TEXTE HARDCODÉ CYANS SUPPLÉMENTAIRES ───────────────────── */

/* Correction des hardcoded cyan-400 / blue-400 en clair */
html.light .text-cyan-400,
html.light .text-blue-400,
html.light .text-blue-500,
html.light .text-blue-600,
html.light .text-haskari-cyan,
html.light .text-\\[\\#00d4ff\\],
html.light .text-\\[\\#00d4ff\\]\\/80,
html.light .text-\\[\\#00d4ff\\]\\/90 {
    color: #1E3A8A !important;
}

html.light .border-haskari-cyan,
html.light .border-cyan-400,
html.light .border-\\[\\#00d4ff\\],
html.light .border-haskari-cyan\\/20,
html.light .border-haskari-cyan\\/15 {
    border-color: rgba(30, 58, 138, 0.25) !important;
}

/* ── 21. GOOGLE ONE TAP WRAPPER EN CLAIR ────────────────────────── */
html.light #google-one-tap-wrapper {
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}
html.light #google-one-tap-wrapper .premium-animated-border-inner {
    background: #ffffff !important;
}

/* ── 22. CONFIRM MODAL EN CLAIR ─────────────────────────────────── */
html.light #haskari-confirm-backdrop {
    background: rgba(15, 23, 42, 0.35) !important;
    backdrop-filter: blur(8px) !important;
}
html.light #haskari-confirm-modal {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(15, 23, 42, 0.06) !important;
}
html.light #haskari-confirm-modal .text-white {
    color: #0a1931 !important;
}
html.light #haskari-confirm-modal .text-gray-400,
html.light #haskari-confirm-modal .text-gray-500 {
    color: #64748b !important;
}
html.light #haskari-confirm-modal .border-white\/10,
html.light #haskari-confirm-modal .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}
html.light #haskari-confirm-modal .bg-white\/5 {
    background: rgba(15, 23, 42, 0.04) !important;
}
html.light #haskari-confirm-modal .bg-white\/10 {
    background: rgba(15, 23, 42, 0.07) !important;
}

/* ── 23. SITE RATING MODAL EN CLAIR ─────────────────────────────── */
html.light #haskari-rating-modal {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.12) !important;
}
html.light #haskari-rating-modal .text-white {
    color: #0a1931 !important;
}
html.light #haskari-rating-modal .text-gray-400 {
    color: #64748b !important;
}
html.light #haskari-rating-modal .bg-white\/5,
html.light #haskari-rating-modal .bg-\\[\\#12121f\\] {
    background: #f8fafc !important;
}
html.light #haskari-rating-modal .border-white\/10,
html.light #haskari-rating-modal .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* ── 24. SECTION HERO EN CLAIR ──────────────────────────────────── */
html.light .hero {
    background: var(--gradient-hero) !important;
}

/* ── 25. INFRASTRUCTURE / CARDS SPÉCIFIQUES EN CLAIR ────────────── */
html.light #infrastructure .card:hover {
    border-color: rgba(255, 184, 0, 0.28) !important;
    box-shadow: 0 8px 24px rgba(255, 184, 0, 0.08) !important;
}

/* ── 26. ONBOARDING MODAL EN CLAIR ──────────────────────────────── */
html.light #onboarding-modal,
html.light #onboarding-overlay ~ div,
html.light .onboarding-card {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.12) !important;
}

/* ── 27. NEWSLETTER SUCCESS EN CLAIR ────────────────────────────── */
html.light #newsletter-success {
    background: rgba(30, 58, 138, 0.06) !important;
    border-color: rgba(30, 58, 138, 0.20) !important;
    color: #1E3A8A !important;
}

/* ── 28. TEXTE SECONDAIRES HARDCODÉS EN CLAIR ───────────────────── */

/* Stat card labels hardcodés */
html.light .stat-label {
    color: #64748b !important;
}

/* Data-table specific fixes */
html.light .data-table tbody td .text-white,
html.light .data-table tbody tr .text-white {
    color: #1e293b !important;
}

/* ── 29. ADMIN CONTENT FOND ─────────────────────────────────────── */
html.light .admin-content {
    background: linear-gradient(160deg, #f0f4fa 0%, #f8fafc 100%) !important;
    background-attachment: fixed !important;
}

/* ── 30. ADMIN SIDEBAR ENRICHIE EN CLAIR ────────────────────────── */
html.light .admin-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 4px 0 20px rgba(15, 23, 42, 0.05) !important;
}

html.light .admin-sidebar .border-b,
html.light .admin-sidebar .border-t,
html.light .admin-sidebar .border-white\/5 {
    border-color: rgba(15, 23, 42, 0.07) !important;
}

html.light .admin-sidebar nav a {
    color: #64748b !important;
    transition: all 0.18s ease !important;
}
html.light .admin-sidebar nav a:hover {
    background-color: rgba(30, 58, 138, 0.06) !important;
    color: #1E3A8A !important;
}
html.light .admin-sidebar nav a.bg-haskari-cyan\/10 {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.10) 0%, rgba(30, 58, 138, 0.06) 100%) !important;
    color: #1E3A8A !important;
    border: 1px solid rgba(30, 58, 138, 0.15) !important;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.06) !important;
}

html.light .admin-sidebar .text-white,
html.light .admin-user-panel p.text-white {
    color: #1e293b !important;
}
html.light .admin-sidebar .text-gray-500,
html.light .admin-user-panel p.text-gray-500 {
    color: #64748b !important;
}
html.light .admin-theme-btn {
    color: #64748b !important;
}
html.light .admin-theme-btn:hover {
    background-color: rgba(15, 23, 42, 0.06) !important;
    color: #1e293b !important;
}

/* ── 31. ERREUR OBSERVABILITÉ ADMIN EN CLAIR ────────────────────── */
html.light .bg-red-500\/10 {
    background-color: rgba(239, 68, 68, 0.08) !important;
}
html.light .border-red-500\/20 {
    border-color: rgba(239, 68, 68, 0.18) !important;
}
html.light .text-red-400 {
    color: #dc2626 !important;
}

/* ── 32. PUSH PROMPT ENRICHI EN CLAIR ───────────────────────────── */
html.light .haskari-push-premium-card {
    background: linear-gradient(145deg, #ffffff 0%, #fafbfd 100%) !important;
    border: 1px solid rgba(255, 184, 0, 0.28) !important;
    box-shadow:
        0 8px 40px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 184, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 1.0) !important;
}
html.light .haskari-push-premium-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(255, 184, 0, 0.45) !important;
    box-shadow:
        0 16px 50px rgba(15, 23, 42, 0.15),
        0 0 40px rgba(255, 184, 0, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 1.0) !important;
}
html.light .haskari-push-text h2 {
    color: #0a1931 !important;
}
html.light .haskari-push-text p {
    color: #475569 !important;
}
html.light .haskari-push-actions {
    border-top-color: rgba(15, 23, 42, 0.08) !important;
}
html.light .haskari-push-btn-secondary {
    background: rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    color: #475569 !important;
}
html.light .haskari-push-btn-secondary:hover {
    background: rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(15, 23, 42, 0.20) !important;
    color: #1e293b !important;
}
html.light .haskari-push-success-inner h3 {
    color: #b45309 !important;
    text-shadow: none !important;
}
html.light .haskari-push-success-inner p {
    color: #475569 !important;
}
html.light .haskari-push-body ol li {
    color: #475569 !important;
}
html.light .haskari-push-body ol li strong {
    color: #b45309 !important;
}

/* ── 33. FLASH MESSAGES EN CLAIR ────────────────────────────────── */
html.light #flash-message {
    background: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.10), 0 1px 4px rgba(15, 23, 42, 0.06) !important;
}
html.light #flash-message p {
    color: #1e293b !important;
}

/* ── 34. PREFERS REDUCED MOTION ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html.light .card:hover,
    html.light .pillar-card:hover,
    html.light .admin-stat-card:hover,
    html.light .btn-primary:hover {
        transform: none !important;
    }
}

/* ── 35. INPUTS DE RECHERCHE ADMIN EN CLAIR ─────────────────────── */
html.light input[type="search"],
html.light input[type="text"].border-white\/10,
html.light input.border-white\/10 {
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #1e293b !important;
}
html.light input[type="search"]:focus,
html.light input[type="text"].border-white\/10:focus,
html.light input.border-white\/10:focus {
    border-color: #1E3A8A !important;
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.10) !important;
}

/* ── 36. MEGA MENU CLAIR ────────────────────────────────────────── */
html.light .mega-menu-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 0 15px rgba(var(--accent-rgb), 0.06) !important;
}
html.light .navbar__mega-menu {
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* ── 37. SCROLL-TO-ORIGIN ENRICHI ──────────────────────────────── */
html.light .origin-engine__core {
    background: #ffffff !important;
    border: 2px solid #1E3A8A !important;
    box-shadow: 0 8px 24px rgba(30, 58, 138, 0.15), 0 2px 8px rgba(30, 58, 138, 0.08) !important;
}
html.light .origin-engine:hover .origin-engine__core {
    border-color: #ffb800 !important;
    box-shadow: 0 12px 36px rgba(255, 184, 0, 0.25), 0 4px 12px rgba(255, 184, 0, 0.15) !important;
}

/* ── 38. GLOBAL TEXT GRAYS ──────────────────────────────────────── */
html.light .text-gray-300 { color: #1e293b !important; }
html.light .text-gray-400 { color: #475569 !important; }
html.light .text-gray-500 { color: #64748b !important; }
html.light .text-gray-600 { color: #64748b !important; }
html.light .text-gray-700 { color: #475569 !important; }

/* ── 39. BACKGROUNDS HARDCODES ADDITIONNELS ─────────────────────── */
html.light .bg-\[\#080810\]  { background-color: #f0f4fa !important; }
html.light .bg-\[\#06060b\]  { background-color: #f0f4fa !important; }
html.light .bg-\[\#0a0a0f\]  { background-color: #ffffff !important; }
html.light .bg-\[\#12121f\]  { background-color: #ffffff !important; }
html.light .bg-\[\#111120\]  { background-color: #ffffff !important; }
html.light .bg-\[\#1a1a2e\]  { background-color: #edf2f8 !important; }
html.light .bg-\[\#050508\]  { background-color: #f0f4fa !important; }
html.light .bg-\[\#0b0a14\]\/65 { background-color: #edf2f8 !important; }
html.light .bg-\[\#0b0a14\]     { background-color: #edf2f8 !important; }
html.light .bg-\[\#12121f\]\/50 { background-color: #edf2f8 !important; }
html.light .bg-\[\#12121f\]\/95,
html.light .bg-\[\#12121f\]\/90,
html.light .bg-\[\#0a0a0f\]\/95 { background-color: rgba(255, 255, 255, 0.95) !important; }
html.light .bg-\[\#030305\]\/90 {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
}

/* ── 40. BORDERS HARDCODES ──────────────────────────────────────── */
html.light .border-white\/5  { border-color: rgba(15, 23, 42, 0.06) !important; }
html.light .border-white\/10 { border-color: rgba(15, 23, 42, 0.10) !important; }
html.light .border-white\/8  { border-color: rgba(15, 23, 42, 0.08) !important; }
html.light .border-white\/20 { border-color: rgba(15, 23, 42, 0.14) !important; }
html.light .bg-white\/5      { background-color: rgba(15, 23, 42, 0.04) !important; }
html.light .bg-white\/10     { background-color: rgba(15, 23, 42, 0.07) !important; }
html.light .hover\:bg-white\/10:hover { background-color: rgba(15, 23, 42, 0.07) !important; }
html.light .hover\:bg-white\/5:hover  { background-color: rgba(15, 23, 42, 0.04) !important; }
html.light .bg-black\/40 { background-color: rgba(15, 23, 42, 0.04) !important; }
html.light .bg-black\/30 { background-color: rgba(15, 23, 42, 0.03) !important; }
html.light .bg-black\/20 { background-color: rgba(15, 23, 42, 0.02) !important; }

/* ── 41. FOOTER TEXTE COMPLET ───────────────────────────────────── */
html.light .footer .text-white  { color: #0a1931 !important; }
html.light .footer .text-gray-500 { color: #64748b !important; }
html.light .footer .text-gray-600 { color: #64748b !important; }
html.light .footer .border-white\/5 { border-color: rgba(15, 23, 42, 0.07) !important; }

/* ── 42. SELECT ARROW CLAIR ─────────────────────────────────────── */
html.light .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23475569' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
}

/* ── 43. ADMIN CONTENT HEADINGS ─────────────────────────────────── */
html.light .admin-content h1,
html.light .admin-content h2,
html.light .admin-content h3,
html.light .admin-content h4 { color: #0a1931 !important; }
html.light .admin-content p { color: #475569 !important; }
html.light .admin-content .border-white\/5  { border-color: rgba(15, 23, 42, 0.06) !important; }
html.light .admin-content .bg-white\/5      { background-color: rgba(15, 23, 42, 0.04) !important; }
html.light .admin-content .border-white\/10 { border-color: rgba(15, 23, 42, 0.08) !important; }
html.light .admin-content .text-gray-600   { color: #64748b !important; }

/* ── 44. AI COPILOT DOCK ────────────────────────────────────────── */
html.light .haskari-ai-dock__wrapper {
    background: #ffffff !important;
    border: 2px solid rgba(30, 58, 138, 0.20) !important;
    box-shadow: 0 8px 32px rgba(30, 58, 138, 0.12) !important;
}
html.light .haskari-ai-dock__wrapper:hover {
    border-color: rgba(255, 184, 0, 0.35) !important;
    box-shadow: 0 12px 40px rgba(255, 184, 0, 0.18) !important;
}
html.light #haskari-ai-panel {
    background-color: rgba(255, 255, 255, 0.97) !important;
    border-left: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.10) !important;
}
html.light .ai-suggestion-chip {
    background-color: #eff6ff !important;
    border-color: rgba(30, 58, 138, 0.14) !important;
    color: #1E3A8A !important;
}
html.light #ai-chat-input {
    background-color: #ffffff !important;
    border-color: rgba(15, 23, 42, 0.14) !important;
    color: #1e293b !important;
}

/* ── 45. INLINE STYLE OVERRIDES ─────────────────────────────────── */
html.light [style*="color: #00d4ff"],
html.light [style*="color:#00d4ff"] { color: #1E3A8A !important; }
html.light [style*="border-color: #00d4ff"],
html.light [style*="border-color:#00d4ff"] { border-color: rgba(30, 58, 138, 0.25) !important; }
html.light [style*="background:rgba(0,212,255,0.08)"] { background-color: rgba(30, 58, 138, 0.08) !important; }

/* ── 46. LOGO ADMIN SIDEBAR DEGRADE ────────────────────────────── */
html.light #logo-link span {
    background: linear-gradient(135deg, #1E3A8A, #2563eb) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ── 47. COOKIE ICON CLAIR ──────────────────────────────────────── */
html.light #haskari-cookie-consent .text-\[\#00d4ff\] { color: #1E3A8A !important; }
html.light #haskari-cookie-consent .text-\[\#ffb800\] { color: #d97706 !important; }

/* -----------------------------------------------------------------
   FIN -- MISSION ANTIGRAVITY
   Ultra-Premium Light Mode -- HASKARI Academy
   "Rendre l'impossible possible."
   ----------------------------------------------------------------- */