ul.societes li a img {
    animation-name: logo-down;
    animation-duration: 0.2s;
    animation-delay: 0;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

ul.societes li a:hover img {
    animation-name: logo-up;
    animation-duration: 0.2s;
    animation-delay: 0;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes logo-up {
    0%   { transform: translateY(0) }
    25%   { transform: translateY(-2px) }
    50%   { transform: translateY(-8px) }
    75%   { transform: translateY(-12px) }
    100% { transform: translateY(-20px) }
}

@keyframes logo-down {
    0%   { transform: translateY(-20px) }
    25%   { transform: translateY(-12px) }
    50%   { transform: translateY(-8px) }
    75%   { transform: translateY(-2px) }
    100% { transform: translateY(0) }
}

ul.societes li a figcaption {
	animation-name: baseline-out;
    animation-duration: 0.2s;
    animation-delay: 0;
    animation-fill-mode: forwards; }
    
  ul.societes li a:hover figcaption { 
	animation-name: baseline;
    animation-duration: 0.2s;
    animation-delay: 0;
    animation-fill-mode: forwards; }

@keyframes baseline {
    0%   { opacity: 0; transform: translateY(-20px) }
    25%   { opacity: 0.2; transform: translateY(2px) }
    50%   { opacity: 0.3; transform: translateY(10px) }
    75%   { opacity: 0.5; transform: translateY(15px) }
    100% { opacity: 1; transform: translateY(30px) }
}

@keyframes baseline-out {
    0%   { opacity: 1; transform: translateY(30px) }
    25%   { opacity: 0.5; transform: translateY(15px) }
    50%   { opacity: 0.3; transform: translateY(10px) }
    75%   { opacity: 0.2; transform: translateY(2px) }
    100% { opacity: 0; transform: translateY(-20px) }
}


ul.groupe_cce:hover h2 { 
	animation-name: solution_globale;
    animation-duration: 0.2s;
    animation-delay: 0;
    animation-fill-mode: forwards; }

@keyframes solution_globale {
    0%   { opacity: 0.65; }
    25%   { opacity: 0.5; }
    50%   { opacity: 0.3; }
    75%   { opacity: 0.2; }
    100% { opacity: 0;}
}

ul.groupe_cce:hover h3 { 
	animation-name: histoire_du_groupe;
    animation-duration: 0.4s;
    animation-delay: 0;
    animation-fill-mode: forwards; }

@keyframes histoire_du_groupe {
    0%   { opacity: 0; }
    25%   { opacity: 0.2; }
    50%   { opacity: 0.3; }
    75%   { opacity: 0.5; }
    100% { opacity: 0.65;}
}

@keyframes fade{
     0%   { top: 0; opacity: 0; }
    25%   { opacity: 0.2; }
    50%   { opacity: 0.45; }
    75%   { opacity: 0.75; }
    100% { top: 0; opacity: 1;}
}

@keyframes fadefooter{
     0%   { opacity: 0; }
    25%   { opacity: 0.2; }
    50%   { opacity: 0.45; }
    75%   { opacity: 0.75; }
    100% { opacity: 1;}
}