/* Animation du titre de l'intro*/
/* ========================================================================== */
@keyframes monter-mot {
  from {
    transform: translateY(-600px) rotateX(30deg) scale(6.5);
    transform-origin: 50% 200%;
    opacity: 0;
  }
  to {
    transform: translateY(0) rotateX(0) scale(1);
    transform-origin: 50% -500px;
    opacity: 1;
  }
}


@keyframes ombre-titre{
	from {
    transform: translateY(0);
    transform-origin: 50% 50%;
    text-shadow: none;
	}
	30% {
		transform: scale(1.25, 0.75);
	}
	to {
		transform: translateY(-50px);
    transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
	}
}

/* Animation du choix de réponse */
/* ========================================================================== */
@keyframes animer-reponse-succes {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    transform: scale3d(0.95, 1.05, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}


@keyframes animer-reponse-echec {
  from,
  to {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateX(-30px) rotate(6deg);
  }
  30% {
    transform: translateX(15px) rotate(-6deg);
  }
  45% {
    transform: translateX(-15px) rotate(3.6deg);
  }
  60% {
    transform: translateX(9px) rotate(-2.4deg);
  }
  75% {
    transform: translateX(-6px) rotate(1.2deg);
  }
}

/* Animation du resultat */
/* ========================================================================== */
@keyframes animer-resultat {
  from{
    transform: translateX(-800px) rotate(-540deg);
  }
  to{
    transform: translateX(0) rotate(0deg);
  }
}

/********************************
      INTRODUCTION
********************************/
.anim-titre-intro {
  /*POLICE*/
  font-family: 'Koulen', cursive;
  font-size: 8rem;
  /*TEXTE*/
  text-align: center;
  /*ANIMATION*/
  animation: monter-mot 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both, ombre-titre  1s 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}

/********************************
      PAGE QUESTIONS DU QUIZ
********************************/
main.quiz {
  /*AFFICHAGE*/
  flex-direction: column;
  display: none;
}

main.quiz > header {
  /*POLICE*/
  font-family: 'Koulen', cursive;
  font-size: 4rem;
  /*ESPACEMENT*/
  padding-bottom: 3rem;
  /*POSITION*/
  position: relative;
}

/* La barre qui illustre l'avancement du quiz */
.avancement {
  /*TAILLE*/
  width: 0vw;
  height: 3vh;
  /*COULEUR*/
  background-color: var(--couleur2);
  /*POSITION*/
  position: absolute;
  left: 0;
  bottom: 0;
}

section .question{
  /*POLICE*/
  font-size: 2rem;
  /*TAILLE*/
  width: 90%;
  /*ESPACEMENT*/
  margin-top: 1rem;
}

section .les-choix-de-reponse {
  /*TAILLE*/
  width: 90vw;
  /*AFFICHAGE*/
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

section .les-choix-de-reponse.desactiver {
  pointer-events: none;
}

div.choix {
  /*POLICE*/
  font-size: 1.5rem;
  font-weight: bold;
  /*TAILLE*/
  width: 100vw;
  height: 15vh;
  /*COULEUR*/
  color: var(--couleur4);
  background-color: var(--couleur5);
  /*POSITION*/
  position:relative;/*Pour le pseudo-élément*/
  /*AFFICHAGE*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*TRANSITION*/
  transition: transform 0.5s, box-shadow 0.5s;
}

div.choix:hover,
div.choix:active {
  /*TRANSFORMER LA TAILLE*/
  transform: scale(1.1);
  box-shadow: inset 0 0 14px 0px rgba(0, 112, 116, 0.5);
  /*CURSEUR PERSONNALISER*/
  cursor: url(../images/choix.png) 32 32, grabbing;
}

div.choix.reponse-succes {
  /*ANIMATION*/
  animation: animer-reponse-succes 2s;
  /*COULEUR*/
  color: rgba(253, 253, 253, 0.8);
  background-color: rgb(0, 225, 0);
  box-shadow: inset 0 0 14px 0px rgba(0, 116, 10, 0.5);
  /*TRANSITION*/
  transition: color 0.5s, background-color 0.5s, box-shadow 0.6s;
}
div.choix.reponse-succes::before {
  /*CONTENUE*/
  content: "\1F44D";
  /*POSITION*/
  position: absolute;
  left: 10%;
  /*POLICE*/
  font-size: 3rem;
}

div.choix.reponse-echec {
  /*ANIMATION*/
  animation: animer-reponse-echec 2s;
  /*COULEUR*/
  color: rgba(255, 255, 255, 0.8);
  background-color: rgb(212, 5, 36);
  box-shadow: inset 0 0 14px 0px rgba(116, 0, 0, 0.5);
  /*TRANSITION*/
  transition: color 0.5s, background-color 0.5s, box-shadow 0.6s;
}
div.choix.reponse-echec::before {
  /*CONTENUE*/
  content: "\1F44E";
  /*POSITION*/
  position: absolute;
  left: 10%;
  /*POLICE*/
  font-size: 3rem;
}

/********************************
            FIN DU QUIZZ
********************************/
main.fin {
  /*POLICE*/
  font-size: 5rem;
  /*AFFICHAGE*/
  flex-direction: column;
  display: none;
  /*filtre pour rendre la fin du quiz flou*/
  filter: blur(5px);
  /*TRANSITION*/
  transition: background-color 5s, filter 2s;
  
}

main.fin .resultat {
  /*AFFICHAGE*/
  display: flex;
  flex-direction: row;
  align-items: center;
  /*TAILLE*/
  width: 100vw;
  height: 10rem;
  /*POLICE*/
  font-size: 1.5rem;
  /*COULEUR*/
  background-color: var(--couleur5);
  color: var(--couleur1);
  /*ANIMATION*/
  animation: animer-resultat 0.7s ease-out forwards;
  /*TRANSITION*/
  transition: color 0.5s, background-color 0.5s, box-shadow 0.6s;
}

main.fin.btn-recommencer {
  /*CURSEUR*/
  cursor: pointer;
  /*POLICE*/  
  font-size: 6rem;
  /*ESPACEMENT*/
  margin-top: 2rem;
  /*OPACITE*/
  opacity: 0;
  /*TRANSITION*/
  transition: opacity 0.5s;
}
main.fin span{ 
  font-size: 6rem;
}
/* Ajustement pour les écrans de taille moyenne et plus grande
=============================================================== */
@media screen and (min-width: 768px) {

  section .les-choix-de-reponse {
    flex-direction: row;
  }
  
  div.choix {
    margin: 0.5rem;
  }
  main.fin .resultat {
    /*TAILLE*/
    height: 12rem;
    /*POLICE*/
    font-size: 2.5rem;
  }
}

@media screen and (min-width: 992px) {

  main.quiz > header {
    font-size: 6rem;
  }

  section .titre-question {
    font-size: 4rem;
  }

  div.choix {
    font-size: 2rem;
    width: 50vmin;
    height: 15vmin;
    margin: 2rem;
  }

  main.fin .resultat {
    /*TAILLE*/
    height: 17rem; 
    /*POLICE*/
    font-size: 3rem;
  }  
}