@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Inter', sans-serif; 
            background-color: #0f172a;
            color: #f8fafc;
            scroll-behavior: smooth;
        }
        
        /* Animations améliorées */
        @keyframes bounce-slow {
            0%, 100% { transform: translateY(0);}
            50% { transform: translateY(-16px);}
        }
        .animate-bounce-slow { animation: bounce-slow 3s infinite; }
        
        @keyframes float {
            0%, 100% { transform: translateY(0);}
            50% { transform: translateY(-10px);}
        }
        .animate-float { animation: float 4s ease-in-out infinite; }
        
        /* Nouvelles animations fluides */
        @keyframes fade-in-up {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
        
        @keyframes slide-in-left {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .animate-slide-in-left { animation: slide-in-left 0.6s ease-out 0.2s both; }
        
        @keyframes slide-in-right {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        .animate-slide-in-right { animation: slide-in-right 0.6s ease-out 0.4s both; }
        
        @keyframes gradient-x {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }
        .animate-gradient-x {
            background-size: 200% 200%;
            animation: gradient-x 3s ease infinite;
        }
        
        .animation-delay-300 { animation-delay: 0.3s; }
        
        /* Bloque le scroll horizontal sur toute la page */
        html, body {
            overflow-x: hidden !important;
        }
        
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .spline-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.3;
        }
        
        .hero-section {
            position: relative;
            overflow: hidden;
        }
        
        .feature-card {
            background: rgba(30, 41, 59, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .testimonial-card {
            background: rgba(30, 41, 59, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .team-card {
            transition: all 0.3s ease;
        }
        
        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        
        
        @media (max-width: 768px) {
            .process-step:not(:last-child):after {
                display: none;
            }
        }
        
        .nav-link {
            position: relative;
        }
        
        .nav-link:after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover:after {
            width: 100%;
        }
        
        .btn-primary {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
        }
        
        .btn-secondary {
            border: 1px solid #3b82f6;
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: rgba(59, 130, 246, 0.1);
            transform: translateY(-2px);
        }

        
 
        /* Carrousel responsive styles */
        @media (max-width: 768px) {
            /* Cache les icônes et le bloc d'illustration dans le carrousel */
            #features-carousel h3 > i,
            #features-carousel .relative.flex.items-center.justify-center {
                display: none !important;
            }
            /* Centre les titres, sous-titres et contenu du carrousel */
            #features-carousel h3,
            #features-carousel p,
            #features-carousel ul,
            #features-carousel a {
                text-align: center !important;
                justify-content: center !important;
            }
            #features-carousel ul {
                align-items: center !important;
            }
            /* Force la grille à une colonne */
            #features-carousel .grid {
                grid-template-columns: 1fr !important;
                box-shadow: none !important;
                border: none !important;
            }
            /* Permet le scroll horizontal du carrousel uniquement sur mobile */
            #features-carousel {
                overflow-x: auto !important;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
            }
            #features-carousel > div {
                scroll-snap-align: start;
            }
            #features-carousel > div {
                min-height: 520px !important;
                max-height: 520px !important;
                display: flex;
                align-items: stretch;
            }
            #features-carousel .grid {
                min-height: 520px !important;
                max-height: 520px !important;
                height: 100% !important;
                align-items: stretch;
            }
        }
        html, body {
            overflow-x: hidden !important;
        }
        /* Footer mobile ultra-compact */
        @media (max-width: 767px) {
            footer .grid,
            footer .border-t + div.flex { display: none !important; }
            footer { padding-top: 0 !important; padding-bottom: 0 !important; }
            footer .flex.flex-col.items-center.justify-center.text-center { padding-top: 12px !important; padding-bottom: 12px !important; }
        }



        #contact {
            margin-top: 50px; /* Ajout d'une marge supplémentaire pour éloigner davantage les sections */
        }

        #process {
            margin-bottom: 100px; /* Ajout d'une marge plus grande pour éloigner la section Processus de la section Contact */
        }

        /* Styles pour le carrousel */
        .carousel-dot {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .carousel-dot:hover {
            transform: scale(1.1);
        }
        
        /* Animation pour les éléments du carrousel */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fadeIn {
            animation: fadeIn 0.6s ease-out;
        }
        
        /* Style pour les cartes avec effet hover */
        .feature-card, .testimonial-card {
            background: rgba(15, 23, 42, 0.8);
            border: 1px solid rgba(71, 85, 105, 0.3);
            transition: all 0.3s ease;
        }
        
        .feature-card:hover, .testimonial-card:hover {
            transform: translateY(-4px);
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        /* Styles pour les boutons */
        .btn-primary {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
        }
        
        .btn-secondary {
            background: transparent;
            border: 2px solid #3b82f6;
            color: #3b82f6;
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: #3b82f6;
            color: white;
            transform: translateY(-2px);
        }