:root {
            --color-primary: #f39200; /* Orange */
            --color-secondary: #172641; /* Dark Blue */
            --color-light-gray: #f5f7fa;
        }
 body {
        font-family: 'Inter', sans-serif;
        color: #172641;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'Montserrat', sans-serif;
        font-weight: 800;
    }

    .gradient-text {
        background: linear-gradient(135deg, #f39200 0%, #ff6b35 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero-pattern {
        background-image:
            radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.3) 0%, transparent 50%),
            radial-gradient(circle at 40% 80%, rgba(243, 146, 0, 0.3) 0%, transparent 50%);
    }

    .card-hover {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .card-hover:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    .carousel-container {
        overflow: hidden;
        width: 100%;
        position: relative;
    }

    .carousel-track {
        display: flex;
        animation: scroll 60s linear infinite;
        width: calc(250px * 40);
        /* Double pour l'effet de boucle */
    }

    .carousel-track:hover {
        animation-play-state: paused;
    }

    .logo-item {
        flex: 0 0 auto;
        width: 180px;
        height: 80px;
        margin-right: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        /* opacity: 0.7; */
        transition: opacity 0.3s ease;
        /* filter: grayscale(100%); */
    }

    .logo-item:hover {
        opacity: 1;
        filter: grayscale(0%);
    }

    .timeline-dot {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 16px;
        background: #f39200;
        border: 4px solid white;
        border-radius: 50%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .process-card {
        transition: all 0.3s ease;
    }

    .process-card:hover {
        transform: translateY(-4px);
    }

    .video-controls {
        position: absolute;
        bottom: 20px;
        right: 20px;
        z-index: 20;
        display: flex;
        gap: 10px;
    }

    .video-controls button {
        background: rgba(0, 0, 0, 0.7);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }

    .video-controls button:hover {
        background: rgba(243, 146, 0, 0.8);
        transform: scale(1.1);
    }

    .dark .dark\:text-light-gray {
        color: #f5f7fa;
    }

    .dark .dark\:bg-gray-900 {
        background-color: #111827;
    }

    .dark .dark\:bg-gray-800 {
        background-color: #1F2937;
    }

    /* Alternance des étapes du processus */
    .step-left {
        flex: 1;
        padding-right: 8rem;
        text-align: right;
    }

    .step-right {
        flex: 1;
        padding-left: 8rem;
        text-align: left;
    }

    .process-image {
        width: 100%;
        max-width: 300px;
        height: 200px;
        object-fit: cover;
        border-radius: 12px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    /* Pour les petits écrans */
    @media (max-width: 768px) {

        .step-left,
        .step-right {
            padding: 0;
            text-align: center;
        }

        .timeline-dot {
            display: none;
        }

        .timeline-line {
            display: none;
        }

        .process-image {
            max-width: 100%;
            height: 150px;
        }
    }