@keyframes fleche-droite {
  0%, 100% {transform: translateX(-100px);}
  50% {transform: translateX(0px);}
}

.w100px {width: 100px;}

.fleche-droite {
  animation-name: fleche-droite;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}
@keyframes fleche-gauche {
  0%, 100% {transform: translateX(100px) rotateY(180deg);}
  50% {transform: translateX(0px) rotateY(180deg);}
}
.fleche-gauche {
  animation-name: fleche-gauche;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
  }

.fond-demande-elephant {
  background-image: url("/assets/images/fonds/fond-coeurs-bleus.gif");
  background-blend-mode: multiply;
}
.fond-reponse-elephant {
  background-image: url("/assets/images/fonds/fond-coeurs-bleus.gif");
  background-blend-mode: multiply;
}
.elephant-bouton {
  background-size: cover;
  background-image: url("/assets/images/boutons/bouton-pointille-rose.jpg");
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
}
a:hover .elephant-bouton {
  filter: brightness(1.1);
}
.repondre-radio:checked ~ .reponse-formulaire {
  filter: opacity(1);
}
.repondre-radio:not(checked) ~ .reponse-formulaire {
  filter: opacity(0);
}

@keyframes epilepsia {
  0%, 49%, 100% {filter: invert(0);}
  50%, 99% {filter: invert(1);}
}

.epilepsia {
  animation-name: epilepsia;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: both;
}


.elephant-demande {
    margin: 20px;
    height: 300px;
}
.elephant-reponse {
    margin: 20px;
    height: 220px;
}
.elephant-coeurs {
    height: 150px;
    z-index: 1;
}

/*******************************/
/*Maison éléphant*/
/*******************************/
@keyframes elephant-maison-ouverture {
  0% {content: url("/assets/images/boutons/elephant-maison-ouverture.gif");}
  100% {content: url("/assets/images/boutons/elephant-maison-ouvert.gif");}
}
@keyframes elephant-maison-fermeture {
  0% {content: url("/assets/images/boutons/elephant-maison-fermeture.gif");}
  100% {content: url("/assets/images/boutons/elephant-maison-ferme.gif");}
}

.elephant-maison-bouton {
  content: url("/assets/images/boutons/elephant-maison-ferme.gif");
}
.elephant-maison-bouton:hover {
  animation-name: elephant-maison-ouverture;
  animation-duration: 400ms;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}
.elephant-maison-bouton:not(hover) {
  animation-name: elephant-maison-fermeture;
  animation-duration: 400ms;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: both;
}

/*******************************/
/*Couleurs*/
/*******************************/

.gris {color: grey;}
.gris-pale {color: lightgrey;}
.gris-tres-pale {color: rgb(239, 239, 239);}
.gris-fonce {color: darkgray;}
.gris-tres-fonce {color: rgb(10, 10, 10);}
.rouge {color: red;}
.bleu {color: blue;}
.vert {color: green;}
.jaune {color: yellow;}
.orange {color: orange;}
.mauve {color: purple;}
.rose {color: pink;}
.arc-en-ciel {
    color: transparent;
    background-image: linear-gradient(to right, red, orange, yellow, green, blue, purple);
    background-clip: text;
}
.magenta {color: magenta;}
.dore {color: gold;}
.kaki {color: khaki;}