/* Une petite animation d'entrée pour faire "quali" */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ajustement smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Animation douce pour les formes du background */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

html {
    scroll-behavior: smooth;
}

/* Fond global sombre */
body {
    background-color: #0f172a; /* Slate 900 */
    color: #f8fafc;
}

/* Animation des symboles de code flottants */
.code-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.code-symbol {
    position: absolute;
    color: rgba(59, 130, 246, 0.15); /* Bleu très transparent */
    font-family: 'Courier New', monospace;
    font-weight: bold;
    user-select: none;
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh) rotate(360deg);
        opacity: 0;
    }
}

/* Effet Glow sur les cartes */
.glow-card:hover {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
}