/*  COLOR:
    JAUNE   pale    ffffcc  rgba(255, 255, 204, 1.0)
    JAUNE   clair   f9d66c  rgba(249, 214, 108, 1.0)
    JAUNE   base    f8ba57  rgba(248, 186, 87, 1.0)
    ORANGE  claire  e6854d  rgba(230, 133, 77, 1.0)
    ORANGE          e06d29  rgba(224, 109, 41, 1.0)
    MARRON  défault 4d2111  rgba(77, 33, 17, 1.0)
    MARRON  sombre  290000  rgba(41, 0, 0, 1.0)
    MARRON  claire  964f3d  rgba(150, 79, 61, 1.0)
    MARRON  texte   4d2110  rgba(77, 33, 16, 1.0)
*/
/*.shadow{  box-shadow: 0px 0px 20px rgba(249, 214, 108, 0.5); }*/

.fade-in {
    animation-name: anim-fade-in;
    animation-duration: 0.4s;
    animation-fill-mode: both;
}
@keyframes anim-fade-in {
    from {opacity: 0;}
    to {opacity: 1.0;}
}
.fade-out {
    animation-name: anim-fade-out;
    animation-duration: 0.4s;
    animation-fill-mode: both;
}
@keyframes anim-fade-out {
    from {opacity: 1.0;}
    to {opacity: 0;}
}



.small-slide-x {
    animation: slideIn 0.5s ease-in-out;
    opacity: 1;
}
@keyframes slideIn {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.small-slide-x-r {
    animation: slideOut 0.5s ease-in-out;
    opacity: 1;
}
@keyframes slideOut {
    from {
        transform: translateX(0%);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}


/** BTN GO ON THE ROOF*/
.fade-in-btn-top {
    animation-name: anim-fade-in-btn-top;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}
@keyframes anim-fade-in-btn-top {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(0px);
    }
    to {
        opacity: 0.8;
        transform: scale(1.0) translateY(-20px);
    }
}
.fade-out-btn-top {
    animation-name: anim-fade-out-btn-top;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}
@keyframes anim-fade-out-btn-top {
    from {
        opacity: 0.8;
        transform: scale(1.0) translateY(-20px);
    }
    to {
        opacity: 0;
        transform: scale(0.8) translateY(0px);
    }
}




.anim-pop-scroll {
    transition: transform 0.3s ease;
    opacity: 0;
    transform: translateY(130px);
}

.anim-pop-scroll.visible {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.6s ease;
}

.anim-pop-scroll:hover {
    transform: translateY(-10px);
}