.fond-demande-elephant {
  background-image: url("/assets/images/fonds/fond-coeurs.gif");
  background-blend-mode: multiply;
}
.fond-reponse-elephant {
  background-image: url("/assets/images/fonds/fond-coeurs.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;}
.magenta {color: magenta;}
.dore {color: gold;}
.kaki {color: khaki;}