.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

:root { --yeba-green: #004001; }
        body { font-family: 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; }
        .bg-yeba { background-color: var(--yeba-green); }
        .text-yeba { color: var(--yeba-green); }
        .border-yeba { border-color: var(--yeba-green); 
    }
        
.glass { 
        background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); 
    }
        

.testi-container { 
        display: flex; transition: transform 0.5s ease-in-out; 
    }
.testi-slide {
        min-width: 100%; padding: 20px; 
    }

        /* Animation Slider Logos */
@keyframes scroll { 
        0% { transform: translateX(0); } 100% { transform: translateX(-50%); } 
    }
.logo-track {
        display: flex; width: calc(250px * 14); 
        animation: scroll 30s linear infinite; 
    }

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

@keyframes float {
        0% { 
            transform: translateY(0px) rotate(-5deg); 
        }
        50% 
        { 
            transform: translateY(-15px) rotate(-2deg); 
        }
        100% { 
            transform: translateY(0px) rotate(-5deg); 
        }

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

        /* Animations d'entrée (à déclencher avec GSAP ou CSS) */
        .animate-fade-in-left {
            animation: fadeInLeft 1s ease-out;
        }
        .animate-fade-in-right {
            animation: fadeInRight 1s ease-out;
        }

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

        /* Animation d'apparition au scroll (nécessite le JS ci-dessous) */
        .reveal-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

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

        /* Petit effet de pulsation sur les numéros */
        .animate-pulse {
            animation: soft-pulse 2s infinite;
        }

        @keyframes float-phone {
        0%, 100% { transform: translateY(0) rotate(-5deg); }
        50% { transform: translateY(-20px) rotate(-3deg); }
    }
    @keyframes scroll-list {
        0% { transform: translateY(0); }
        100% { transform: translateY(-50%); }
    }
    .animate-float-phone { animation: float-phone 6s ease-in-out infinite; }
    .bg-grid-slate { background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px); background-size: 30px 30px; }
    
            @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Animation de pulsation pour le badge "En ligne" */
    @keyframes pulse-green {
        0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
        70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
        100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    }

    .animate-reveal { animation: fadeInUp 0.8s ease-out forwards; }
    .status-pulse { animation: pulse-green 2s infinite; }
    
    /* Effet de flottement pour l'image */
    .float-slow { animation: float-slow 5s ease-in-out infinite; }
    @keyframes float-slow {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-15px); }
    }



.site-hidden {
        visibility: hidden !important;
        opacity: 0;
        height: 0;
        overflow: hidden;
    }

    /* Style du compteur géant transparent */
    .giant-counter {
        font-family: sans-serif;
        font-weight: 900;
        font-size: 12rem;
        line-height: 1;
        color: transparent;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        user-select: none;
    }

    /* Flocons de neige */
    .snowflake {
        position: absolute;
        background-color: white;
        border-radius: 50%;
        pointer-events: none;
    }

    @media (min-width: 768px) {
        .giant-counter { font-size: 20rem; }
    }

    
    


    /* Animation pour rendre l'apparition du texte plus fluide */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn {
        animation: fadeIn 0.4s ease-out forwards;
    }
    
    /* Supprimer la flèche par défaut sur Safari */
    summary::-webkit-details-marker {
        display: none;
    }