@keyframes mltShdSpin {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em,
            0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%,
    95% {
        box-shadow: 0 -0.83em 0 -0.4em,
            0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
            0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%,
    59% {
        box-shadow: 0 -0.83em 0 -0.4em,
            -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em,
            -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
            -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
            -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
            -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
            -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em,
            0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes round {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;

    }

    to {
        opacity: 1;

    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes tabWidth {
    from {
        width: 30%;
    }

    to {
        width: 100%;
    }
}


html {
    scroll-behavior: smooth;
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.slide-up {
    animation: slideUp 0.6s ease-out forwards;
}


.animated-button {
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
    background-color: var(--secondary-color) !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px var(--shadow-color);
}

.card,
.card-doc {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover,
.card-doc:hover {
    box-shadow: 0 10px 20px var(--shadow-color);
}





.tab button:hover::after {
    animation: tabWidth 0.3s ease-out forwards;
}



/* Animation pour les catégories */
.categories button {
    transition: background-color 0.3s ease, color 0.3s ease;
}