@keyframes transition {
        0% {
            margin-left: -70px;
            opacity: 1;
        }
        100% {
            margin-left: 0;
            opacity: 0;
        }
    }
    
    .tourne!important {
        opacity: 0;
        animation: transition 1s ease-in-out 2s forwards;
    }
    /* position de la div .animated-box*/
    
    .animated-box {
        position: relative;
        padding: 7px;
        font-size: 25px;
    }
    
    h2 {
        font-size: 30px;
    }
    /* details sur les linear-gradient + animation*/
    
    .animated-box:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 4px;
        background: linear-gradient(120deg, #FFFF00, #FF8C00, #f6c12c);
        background-size: 300% 300%;
        clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
        animation: Animation 5s ease infinite;
        animation: rotate color 2.5s infinite linear;
    }
    /*
    .animated-box.in:after {
     animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
 }
*/
    /*sur basé sur le background*/
    
    @keyframes Animation {
        0% {
            background-position: 10% 0%
        }
        50% {
            background-position: 91% 100%
        }
        100% {
            background-position: 10% 0%
        }
        /*
                    scrollbar {
                        width: 10px;
                    }
                    scrollbar-track {
                        background: #f7931a;
                        border-radius: 50px;
                    }
                    scrollbar-thumb {
                        background: black;
                        border-radius: 50px;
                    }*/