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

/* Fonts Google */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

/* Variables CSS personnalisées */
:root {
    --asu-gradient: linear-gradient(135deg, #0284c7 0%, #0ea5e9 50%, #38bdf8 100%);
    --congo-gradient: linear-gradient(135deg, #15803d 0%, #22c55e 50%, #4ade80 100%);
    --shadow-soft: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-strong: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@layer base {
    html {
        scroll-behavior: smooth;
    }
    
    body {
        font-family: 'Inter', sans-serif;
        line-height: 1.6;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        line-height: 1.2;
    }
}

@layer components {
    /* Navigation */
    .nav-glass {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(2, 132, 199, 0.1);
    }

    .nav-link {
        @apply text-gray-700 hover:text-asu-600 px-4 py-2 rounded-lg font-medium transition-all duration-300 relative;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        left: 50%;
        background: linear-gradient(90deg, #0284c7, #38bdf8);
        transition: all 0.3s ease;
        transform: translateX(-50%);
    }

    .nav-link:hover::after {
        width: 80%;
    }

    /* Boutons personnalisés ASU */
    .btn-asu-primary {
        @apply bg-gradient-to-r from-asu-600 to-asu-500 text-white px-8 py-4 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 ease-in-out;
        box-shadow: 0 10px 25px rgba(2, 132, 199, 0.3);
    }

    .btn-asu-primary:hover {
        box-shadow: 0 15px 35px rgba(2, 132, 199, 0.4);
    }

    .btn-asu-secondary {
        @apply border-2 border-white text-white px-8 py-4 rounded-xl font-semibold text-lg hover:bg-white hover:text-asu-600 transform hover:-translate-y-1 transition-all duration-300 ease-in-out;
    }

    /* Cards */
    .card-asu {
        @apply bg-white rounded-2xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 ease-in-out overflow-hidden;
        box-shadow: var(--shadow-soft);
    }

    .card-asu:hover {
        box-shadow: var(--shadow-strong);
    }

    .testimonial-card {
        @apply bg-gradient-to-br from-gray-50 to-white p-8 rounded-2xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 text-center border border-gray-100;
    }

    /* Stats Section */
    .stats-section {
        background: var(--asu-gradient);
        position: relative;
    }

    .stats-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="0,100 100,0 100,100" fill="%23ffffff" opacity="0.05"/></svg>');
    }

    /* Hero Section */
    .hero-gradient {
        background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 25%, #38bdf8 50%, #7dd3fc 75%, #bae6fd 100%);
        position: relative;
        overflow: hidden;
    }

    .hero-gradient::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
        opacity: 0.3;
    }

    /* Section Backgrounds */
    .section-alt {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    /* Text Effects */
    .text-gradient {
        background: var(--asu-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

@layer utilities {
    /* Animations */
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
    }

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

    @keyframes fadeInLeft {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes scaleIn {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    .animate-float {
        animation: float 6s ease-in-out infinite;
    }

    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out;
    }

    .animate-fade-in-left {
        animation: fadeInLeft 0.8s ease-out;
    }

    .animate-fade-in-right {
        animation: fadeInRight 0.8s ease-out;
    }

    .animate-scale-in {
        animation: scaleIn 0.6s ease-out;
    }

    /* Decorative Elements */
    .decorative-blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(40px);
        opacity: 0.1;
        animation: float 8s ease-in-out infinite;
    }

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

    .blob-2 {
        width: 200px;
        height: 200px;
        background: #38bdf8;
        top: 60%;
        right: 10%;
        animation-delay: 2s;
    }

    .blob-3 {
        width: 250px;
        height: 250px;
        background: #22c55e;
        bottom: 20%;
        left: 20%;
        animation-delay: 4s;
    }
}

/* Responsive Improvements */
@media (max-width: 768px) {
    .btn-asu-primary,
    .btn-asu-secondary {
        @apply px-6 py-3 text-base;
    }
    
    .card-asu {
        @apply hover:transform-none;
    }
    
    .hero-gradient h1 {
        font-size: 2.5rem;
    }
}