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

/*******************************/
/*Flèches*/
/*******************************/
@keyframes fleche-droite {
  0%, 100% {transform: translateX(-100px);}
  50% {transform: translateX(0px);}
}

@keyframes fleche-gauche {
  0%, 100% {transform: translateX(100px) rotateY(180deg);}
  50% {transform: translateX(0px) rotateY(180deg);}
}
@keyframes fleche-bas {
  0%, 100% {transform: translate(0, 0) rotateZ(270deg);}
  50% {transform: translate(0, 100px) rotateZ(270deg);}
}
.fleche-droite {animation: fleche-droite 1s linear infinite normal both;}
.fleche-gauche {animation: fleche-gauche 1s linear infinite normal both;}
.fleche-bas {animation: fleche-bas 1s linear infinite normal both;}
/*******************************/
/*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);}
}
@keyframes shake-deliberately2 {
  0%, 100% {transform: translate(0,0) rotate(0);}
  5% {transform: translate(0px, -1px) rotate(1deg);}
  10% {transform: translate(3px, 1px) rotate(-1deg);}
  15% {transform: translate(2px, 0px) rotate(-1deg);}
  20% {transform: translate(-3px, -1px) rotate(-2deg);}
  25% {transform: translate(4px, -3px) rotate(0deg);}
  30% {transform: translate(4px, -5px) rotate(2deg);}
  35% {transform: translate(-2px, -3px) rotate(-3deg);}
  40% {transform: translate(2px, -3px) rotate(-3deg);}
  45% {transform: translate(5px, -1px) rotate(1deg);}
  50% {transform: translate(2px, 5px) rotate(2deg);}
  55% {transform: translate(1px, -2px) rotate(-2deg);}
  60% {transform: translate(1px, -1px) rotate(1deg);}
  65% {transform: translate(-5px, 3px) rotate(-3deg);}
  70% {transform: translate(2px, 1px) rotate(2deg);}
  75% {transform: translate(4px, -5px) rotate(-1deg);}
  80% {transform: translate(-4px, 0px) rotate(0deg);}
  85% {transform: translate(-3px, 1px) rotate(2deg);}
  90% {transform: translate(5px, -1px) rotate(-1deg);}
  95% {transform: translate(-2px, -4px) rotate(-1deg);}
}
@keyframes flashy-size {
    0%, 100% {font-size: 1em}
    50% {font-size: 1.1em}
}
.course-uniforme-droite-gauche {animation: course-uniforme-droite-gauche 5s linear infinite normal both;}
.esquive-sumo {animation: esquive-sumo 5s linear infinite normal both;}
.shake-deliberately {animation: shake-deliberately 2s linear infinite normal both;}
.shake-deliberately2 {animation: shake-deliberately2 3s linear infinite normal both;}
.flashy-size {animation: flashy-size 0.66s ease-in-out infinite normal 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:hover {animation: ouverture-tiroir-archives 480ms linear 1 normal both;}
.tiroir-archives:not(hover) {animation: fermeture-tiroir-archives 480ms linear 1 normal both;}

.tiroir-archives {
  content: url("/assets/images/boutons/tiroir-archives-ferme.png");
  width: 90px;
  height: 66px;
}
.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)}
}
@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)}
}
@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);}
}

.sautiller-en-se-retournant {animation: sautiller-en-se-retournant 1.25s linear infinite normal both;}
.marche-va-vient {animation: marche-va-vient 1.75s linear infinite normal both;}
.freak-rotation {animation: freak-rotation 11s linear infinite normal both}