/* La durée des animations */
.zoom img, .rotation, .rotation a, .translation-h, .translation-v, .picto, .zoom { transition: all var(--duree-animation); }

/* Translation horizontale */
a:hover .translation-h, a:active .translation-h, a:focus .translation-h { transform: translate3d(0.7rem,0,0); }
a:hover .translation-h.inverse, a:active .translation-h.inverse, a:focus .translation-h.inverse { transform: translate3d(-0.8rem,0,0); }

/* Translation verticale */
a:hover .translation-v, a:active .translation-v, a:focus .translation-v { transform: translate3d(0,-.5rem,0); }

/* Animation au chargement de la page d'accueil */
@keyframes animaccueil {
    from { opacity: 1;}
    92% { opacity: 1;}
    99.99% { opacity: 0;}
    to { opacity: 0; visibility: hidden; }
}

#animaccueil { position: fixed; z-index: 100000; top: 0; left: 0;  width: 100%;  height: 100%; background: var(--coul-fond);
    animation: 6s 1; animation-name: animaccueil; animation-fill-mode: forwards;}
#animaccueil div { display: grid; place-content: center; width: 100%;  height: 100%; }

@media (prefers-reduced-motion: no-preference) {
    /* Zoom */
    .zoom { overflow: hidden;  }
    a:hover .zoom img, a:active .zoom img, a:focus .zoom img { transform: scale3d(1.05,1.05,1); }
    a:hover .zoom.large, a:active .zoom.large, a:focus .zoom.large { transform: scale3d(1.1,1.1,1) rotate3d(0,0,1,45deg); }

    /* Rotation */
    a:hover .rotation, a:active .rotation, a:focus .rotation { transform: rotate3d(0,0,1,5deg); }

    /* Rotation inverse*/
    a:hover .rotation.inverse, a:active .rotation.inverse, a:focus .rotation.inverse { transform: rotate3d(0,0,1,-5deg); }


    /* tremblement */
    @keyframes tremble {
        from { transform: rotate(0);}
        50% {transform: rotate(-10deg);}
        to {transform: rotate(0);}
    }

    a:hover svg.tremble, a:active svg.tremble, a:focus svg.tremble { animation: .25s infinite; animation-name: tremble;}
}