/****************************************** animation illustration **********************************/

body{
height: 60%;
width: 80%;
justify-content: center;
position: absolute;
}

g #socle_ordi{
    position: absolute;
    left:0 ;
    transition: left 1s, transform 1s;
    white-space: space nowrap;
}

/* animation loupe */
#loupe{
    position: relative;
    animation-name: loupe;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}
@keyframes loupe{
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(0, -150px); } 
    100% { transform: translate(0, 0); }
}

/* animation feuilles test 2 */

#feuille_orange_droite {
    position: relative;
    animation-name: oscilation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
  }
  
  @keyframes oscilation {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(0,-15px) rotate(-0.3deg); }
    100% { transform: translate(0, 2px) rotate(0.3deg); }
  }

  /* animation feuilles ROSE */
  #feuille_rose {
    position: relative;
    animation-name: oscilationrose;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
  }
  
  @keyframes oscilationrose {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px)rotate(-0.3deg); }
    100%  { transform: translateY(5px) rotate(0.3deg); }
  }

   /* animation feuilles orange gauche */
   #feuille_orange_gauche {
    position: relative;
    animation-name: oscilationorange;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
  }
  
  @keyframes oscilationorange {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px)rotate(-0.3deg); }
    100%  { transform: translateY(5px) rotate(0.3deg); }
  }

  #pen{
    position: relative;
    animation-name: stylo;
    animation-duration: 6s;
}
    @keyframes stylo{
        0%   { transform: translate(150px, 150px); }
        100% { transform: translate(0, 0); }
}

circle.st2{
    fill: white;
    stroke-width: 3.5;
    animation-name: preloader;
    animation-duration: 5.5s;
    animation-timing-function: ease-in-out;
    transform-origin: 5px 5px;
    will-change: transform;
}
@keyframes preloader {
    0% {opacity: 0;}
    80%{opacity: 0;}
    100%{opacity: 1;}
}