@tailwind base;
@tailwind components;
@tailwind utilities;

/* Configuration globale */
body { 
    background-color: #000; 
    color: #f5f5f7; 
    overflow: hidden; 
    font-family: 'Inter', sans-serif; 
}

canvas { 
    width: 100% !important; 
    outline: none;
}

/* Glassmorphism Premium */
.glass-panel {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
}

.glass-nav {
    background: rgba(22, 22, 23, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Nav Tabs Animation */
.nav-item { 
    position: relative; 
    color: #86868b; 
    transition: color 0.3s ease; 
}
.nav-item.active { 
    color: #fff; 
}
.nav-indicator {
    position: absolute; 
    bottom: -1px; 
    left: 0; 
    right: 0; 
    height: 1px; 
    background: #fff;
    box-shadow: 0 -2px 10px rgba(255,255,255,0.5);
}

/* Scroller custom */
.view-scroller {
    overflow-y: auto; 
    height: 100vh; 
    padding-top: 80px; 
    padding-bottom: 120px; /* Espace pour la nav du bas */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.view-scroller::-webkit-scrollbar { 
    display: none; 
}

.text-glow { 
    text-shadow: 0 0 30px rgba(41, 151, 255, 0.3); 
}

.text-shadow-black {
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* Grid Background */
.bg-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.poisson {
    box-shadow: #000 0 -7px 14px;
    overflow: unset;
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.animate-fade-in { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-up { animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }