/* Extrait de base.html — Audit 12/06/2026 (pipeline statique).
   Contenu identique au bloc <style> inline d'origine. */

/* ═══ Theme variables ═══ */
:root {
    --bg-body: #f8fafc;
    --text-body: #18181b;
    --bg-card: rgba(255, 255, 255, 0.7);
    --border-card: rgba(0, 0, 0, 0.08);
    --bg-nav: rgba(255, 255, 255, 0.15);
    --border-nav: rgba(0, 0, 0, 0.08);
    --text-nav: rgba(0, 0, 0, 0.6);
    --text-nav-hover: #000;
    --bg-surface: #ffffff;
}

.dark {
    --bg-body: #000000;
    --text-body: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.05);
    --border-card: rgba(255, 255, 255, 0.1);
    --bg-nav: rgba(0, 0, 0, 0.12);
    --border-nav: rgba(255, 255, 255, 0.05);
    --text-nav: rgba(255, 255, 255, 0.6);
    --text-nav-hover: #fff;
    --bg-surface: #18181b;
}

/* ═══ Light mode overrides for landing page ═══ */
:root:not(.dark) .text-white {
    color: #18181b !important;
}

:root:not(.dark) .text-white\/60 {
    color: rgba(24, 24, 27, 0.6) !important;
}

:root:not(.dark) .text-white\/50 {
    color: rgba(24, 24, 27, 0.5) !important;
}

:root:not(.dark) .text-white\/40 {
    color: rgba(24, 24, 27, 0.45) !important;
}

:root:not(.dark) .text-white\/80 {
    color: rgba(24, 24, 27, 0.8) !important;
}

:root:not(.dark) .text-white\/10 {
    color: rgba(24, 24, 27, 0.1) !important;
}

:root:not(.dark) .bg-zinc-950 {
    background-color: #f8fafc !important;
}

:root:not(.dark) .bg-zinc-900 {
    background-color: #f1f5f9 !important;
}

:root:not(.dark) .bg-zinc-900\/80 {
    background-color: rgba(241, 245, 249, 0.8) !important;
}

:root:not(.dark) .bg-black {
    background-color: #f8fafc !important;
}

:root:not(.dark) .bg-black\/60 {
    background-color: rgba(255, 255, 255, 0.7) !important;
}

:root:not(.dark) .border-white\/5 {
    border-color: rgba(0, 0, 0, 0.06) !important;
}

:root:not(.dark) .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

:root:not(.dark) .border-white\/20 {
    border-color: rgba(0, 0, 0, 0.12) !important;
}

:root:not(.dark) .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

:root:not(.dark) .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Light mode orbs: softer pastel */
:root:not(.dark) .orb {
    opacity: 0.15 !important;
}

/* Light mode hero: softer grid */
:root:not(.dark) .opacity-\[0\.02\] {
    opacity: 0.04 !important;
}

/* Light mode info-bubble invert */
:root:not(.dark) [style*="background: rgba(24,24,27,0.95)"] {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Le sélecteur universel * { transition } forçait un recalcul de style
   sur tout le document à chaque interaction (jank). Les transitions de
   thème sont portées par body et par les composants eux-mêmes. */
body {
    background: var(--bg-body);
    color: var(--text-body);
    font-family: 'Inter', system-ui, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ═══ Animated gradient CTA button ═══ */
.cta-gradient-animated {
    background: linear-gradient(135deg, #A855F7 0%, #3B82F6 25%, #14B8A6 50%, #3B82F6 75%, #A855F7 100%);
    background-size: 300% 300%;
    animation: gradient-shift 4s ease infinite;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4), 0 0 60px rgba(59, 130, 246, 0.2);
}

.cta-gradient-animated:hover {
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.6), 0 0 80px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ═══ Spin slow for rotating effects ═══ */
.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

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

    to {
        transform: rotate(360deg);
    }
}

/* ═══ Bubble glow ═══ */
.bubble-glow {
    animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 8px currentColor);
    }

    50% {
        filter: drop-shadow(0 0 20px currentColor);
    }
}

/* ═══ Floating avatar animation ═══ */
.float-avatar {
    animation: float-move 6s ease-in-out infinite;
}

@keyframes float-move {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }
}

/* ═══ Glass card hover glow ═══ */
.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-card);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.dark .glass-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ═══ Colored glow effects for cards ═══ */
.glow-purple {
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.02);
}

.glow-blue {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.02);
}

.glow-teal {
    box-shadow: 0 0 25px rgba(20, 184, 166, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.02);
}

.glow-yellow {
    box-shadow: 0 0 25px rgba(250, 204, 21, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.02);
}

.glow-orange {
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.02);
}

.glow-pink {
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.02);
}

.glow-green {
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.15), inset 0 0 25px rgba(255, 255, 255, 0.02);
}

/* Hover glow amplification */
.glow-purple:hover {
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.25), inset 0 0 25px rgba(255, 255, 255, 0.03);
}

.glow-blue:hover {
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.25), inset 0 0 25px rgba(255, 255, 255, 0.03);
}

.glow-teal:hover {
    box-shadow: 0 0 40px rgba(20, 184, 166, 0.25), inset 0 0 25px rgba(255, 255, 255, 0.03);
}

.glow-yellow:hover {
    box-shadow: 0 0 40px rgba(250, 204, 21, 0.25), inset 0 0 25px rgba(255, 255, 255, 0.03);
}

.glow-orange:hover {
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.25), inset 0 0 25px rgba(255, 255, 255, 0.03);
}

.glow-pink:hover {
    box-shadow: 0 0 40px rgba(236, 72, 153, 0.25), inset 0 0 25px rgba(255, 255, 255, 0.03);
}

.glow-green:hover {
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.25), inset 0 0 25px rgba(255, 255, 255, 0.03);
}

/* ═══ Colored border glows ═══ */
.border-glow-purple {
    border-color: rgba(168, 85, 247, 0.3) !important;
}

.border-glow-blue {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.border-glow-teal {
    border-color: rgba(20, 184, 166, 0.3) !important;
}

.border-glow-yellow {
    border-color: rgba(250, 204, 21, 0.3) !important;
}

.border-glow-orange {
    border-color: rgba(249, 115, 22, 0.3) !important;
}

.border-glow-pink {
    border-color: rgba(236, 72, 153, 0.3) !important;
}

.border-glow-green {
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* ═══ Gradient orbs for hero background ═══ */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: orb-float 8s ease-in-out infinite;
}

.orb-purple {
    background: radial-gradient(circle, #A855F7, transparent 70%);
}

.orb-blue {
    background: radial-gradient(circle, #3B82F6, transparent 70%);
    animation-delay: 2s;
}

.orb-teal {
    background: radial-gradient(circle, #14B8A6, transparent 70%);
    animation-delay: 4s;
}

@keyframes orb-float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -20px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 15px) scale(0.95);
    }
}

/* ═══ Custom scrollbar ═══ */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #18181b;
}

::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #52525b;
}

/* ═══ Smooth scroll ═══ */
html {
    scroll-behavior: smooth;
}