/* ===================================
   CONFIGURATION TAILWIND
   (À inclure dans le script Tailwind dans index.html)
   ===================================

   tailwind.config = {
       theme: {
           extend: {
               fontFamily: {
                   sans: ['Outfit', 'sans-serif'],
                   display: ['Space Grotesk', 'sans-serif'],
               },
               colors: {
                   brand: {
                       50: '#f0f9ff',
                       100: '#e0f2fe',
                       500: '#0ea5e9',
                       600: '#0284c7',
                       900: '#0c4a6e',
                   },
                   dark: {
                       bg: '#0f172a',
                       card: '#1e293b',
                       border: '#334155',
                   }
               },
               animation: {
                   'float': 'float 6s ease-in-out infinite',
                   'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
               },
               keyframes: {
                   float: {
                       '0%, 100%': { transform: 'translateY(0)' },
                       '50%': { transform: 'translateY(-20px)' },
                   },
                   fadeInUp: {
                       '0%': { opacity: '0', transform: 'translateY(20px)' },
                       '100%': { opacity: '1', transform: 'translateY(0)' },
                   }
               }
           }
       }
   }
   =================================== */

/* ===================================
   CUSTOM SCROLLBAR
   =================================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* ===================================
   GLASSMORPHISM UTILITIES
   Optimisé pour compatibilité universelle avec polyfill
   =================================== */

:root {
    --blur-amount: 12px;
    --blur-navbar: 12px;
    --blur-card: 8px;
}

/* Réduction du blur sur mobile pour meilleures performances */
@media (max-width: 768px) {
    :root {
        --blur-amount: 8px;
        --blur-navbar: 8px;
        --blur-card: 6px;
    }
}

/* Classe glass principale */
.glass {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(var(--blur-amount)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-amount)) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}

/* Classe glass-navbar - navbar transparente */
.glass-navbar {
    background: rgba(30, 41, 59, 0.75);
    backdrop-filter: blur(var(--blur-navbar)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-navbar)) saturate(180%);
    border: none;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Classe glass-card - cartes avec effet glass */
.glass-card {
    background: rgba(30, 41, 59, 0.4);
    backdrop-filter: blur(var(--blur-card)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-card)) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-card:hover {
    background: rgba(30, 41, 59, 0.6);
    transform: translateY(-5px);
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--blur-card)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-card)) saturate(180%);
}

/* ===================================
   TEXT GRADIENT
   =================================== */
.text-gradient {
    background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===================================
   BLOBS FOR BACKGROUND
   =================================== */
.blob {
    position: absolute;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.4;
    animation: float 10s infinite ease-in-out;
}

.blob-1 {
    top: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: #0c4a6e;
    animation-delay: 0s;
}

.blob-2 {
    bottom: 10%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: #4f46e5;
    animation-delay: 2s;
}

.blob-3 {
    top: 40%;
    left: 30%;
    width: 300px;
    height: 300px;
    background: #0ea5e9;
    opacity: 0.2;
    animation-delay: 4s;
}

/* ===================================
   REVEAL ON SCROLL
   =================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}