/*Dans ce fichier est mis le css gouvernant le comportement des diverse décorations dans les pages de mon site.*/
/*******************************/
/*Bibittes animées*/
/*******************************/

/*Admet que la création est initialement située à droite*/
@keyframes course-uniforme-droite-gauche {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100vw);
  }

}
@keyframes esquive-sumo {
  0% {
    transform: translate(0, 0) rotate(0) ;
  }
  84% {
    transform: translate(-10vw, 0) rotate(0) ;
  }
  92% {
    transform: translate(-5vw, -20px) rotate(180deg) ;
  }
  100% {
    transform: translate(0, 0) rotate(360deg) ;
  }
}
@keyframes shake-deliberately {
  0%, 100% {transform: translate(0,0) rotate(0);}
  5% {transform: translate(3px, -3px) rotate(-2deg);}
  10% {transform: translate(4px, 3px) rotate(-3deg);}
  15% {transform: translate(2px, 5px) rotate(0deg);}
  20% {transform: translate(-3px, -3px) rotate(2deg);}
  25% {transform: translate(5px, 3px) rotate(-1deg);}
  30% {transform: translate(0px, -4px) rotate(-1deg);}
  35% {transform: translate(-5px, -3px) rotate(2deg);}
  40% {transform: translate(-3px, -4px) rotate(-1deg);}
  45% {transform: translate(4px, -5px) rotate(1deg);}
  50% {transform: translate(0px, -5px) rotate(-1deg);}
  55% {transform: translate(-2px, -5px) rotate(-2deg);}
  60% {transform: translate(5px, 5px) rotate(-1deg);}
  65% {transform: translate(-2px, 5px) rotate(1deg);}
  70% {transform: translate(-5px, -2px) rotate(-3deg);}
  75% {transform: translate(-5px, 5px) rotate(-1deg);}
  80% {transform: translate(-5px, 5px) rotate(1deg);}
  85% {transform: translate(3px, -2px) rotate(1deg);}
  90% {transform: translate(3px, 2px) rotate(0deg);}
  95% {transform: translate(-1px, 3px) rotate(2deg);}
}
.course-uniforme-droite-gauche {
  animation-name: course-uniforme-droite-gauche;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}
.esquive-sumo {
  animation-name: esquive-sumo;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}
.shake-deliberately {
  animation-name: shake-deliberately;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}

.image-wtf-force {
  float: left;
  height: 84.4px;
  position: absolute;
  z-index: 3;
}

.image-wtf-angry-sumo {
  right: 0;
  height: 84.4px;
  position: absolute;
  z-index: 3;
}

.image-wtf-non-bob-attac {
  width: 800/1090*100px;
  height: 100px;
}

/*******************************/
/*Tiroir archives*/
/*******************************/
@keyframes ouverture-tiroir-archives {
  0% {content: url("/assets/images/boutons/tiroir-archives-animation-ouverture.gif");}
  100% {content: url("/assets/images/boutons/tiroir-archives-ouvert.png");}
}
@keyframes fermeture-tiroir-archives {
  0% {content: url("/assets/images/boutons/tiroir-archives-animation-fermeture.gif");}
  100% {content: url("/assets/images/boutons/tiroir-archives-ferme.png");}
}

.tiroir-archives {
  content: url("/assets/images/boutons/tiroir-archives-ferme.png");
  width: 90px;
  height: 66px;
}

.tiroir-archives:hover {
  animation-name: ouverture-tiroir-archives;
  animation-duration: 480ms;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}
.tiroir-archives:not(hover) {
  animation-name: fermeture-tiroir-archives;
  animation-duration: 480ms;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}

.tiroir-archives-communautaires { /*Couleur du tiroir communautaire.*/
  filter: sepia(1) hue-rotate(270deg) contrast(25)
}

/*******************************/
/*Panneaux gauche et droite*/
/*******************************/
@keyframes sautiller-en-se-retournant {
  0% {transform: translate(0, 0) rotateY(0)}
  25% {transform: translate(0, -20px) rotateY(0)}
  49% {transform: translate(0, 0) rotateY(0)}
  50% {transform: translate(0, 0) rotateY(180deg)}
  75% {transform: translate(0, -20px) rotateY(180deg)}
  100% {transform: translate(0, 0) rotateY(180deg)}
}
.sautiller-en-se-retournant {
  animation-name: sautiller-en-se-retournant;
  animation-duration: 1.25s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}
.image-angry-gargamel {
  content: url("/assets/images/gargamel/angry-gargamel.gif")
}


@keyframes marche-va-vient {
  0% {transform: translate(0,0) rotateY(180deg)}
  49% {transform: translate(45px, 0) rotateY(180deg)}
  51% {transform: translate(45px, 0) rotateY(0)}
  100% {transform: translate(0,0) rotateY(0)}
}
.marche-va-vient {
  animation-name: marche-va-vient;
  animation-duration: 1.75s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}











.image-goomba-realiste {width: 100px; height: 135px;}
.image-malicious-walking-gargamel {width: 100px; height: 146px;}



@keyframes freak-rotation {
    0%, 36%, 100% {transform: translate(0px, 0px) rotate(0deg);}
    43%, 93% {transform: translate(40px, -10px) rotate(15deg);}
    50%, 86% {transform: translate(80px, 0px) rotate(30deg);}
}

.freak-rotation {
  animation-name: freak-rotation;
  animation-duration: 11s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}