*{
	margin: 0px;
	padding:0px;
	border:0px;
}


.centre { display: flex;  align-items: center;  justify-content: center;}

 a {text-decoration: none}
a, a:link, a:visited, a:hover{text-decoration: none;color:#e74c3c;} 

.margintopun{margin-top: 160px;}

.hidden{
    visibility:hidden;
    opacity: 0;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}
.shown{
    visibility:visible;
    opacity: 1;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}


#titre_coeur{color: black;font-size: 4vh;padding-top: 3vh;}
.card-container{perspective:1200px;}
.card{margin:0 auto;height:535px;width:95%;position:relative;border-radius:25px;transition:all 1s ease;transform-style:preserve-3d;}
.rotated{transform:rotateY(-180deg);}
.card-contents{height:90%;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;position:absolute;top:0;left:0;backface-visibility:hidden;h2,p{text-shadow:1px 2px 2px rgba(0,0,0,0.2);}
}
.card-depth{transform:translateZ(100px) scale(0.98);perspective:inherit;width: 100%;height: 100%;}
.card-front{ background-image: url("../images/mon_coeur.png");;background-repeat: no-repeat;background-position: center ;background-size: 100%;transform-style:preserve-3d;}
.card-back{transform:rotateY(180deg);background-image: url("../images/mon_coeur.png");;background-repeat: no-repeat;background-position: center ;background-size: 100%;transform-style:preserve-3d;}
.input_group_login{width: 100%;;height: 6vh;}
/* .input_group_login input[type=text],input[type=email],input[type=password]{width: 70%;border-radius:10px;font-size:1em;outline:none;height: 5vh;padding: 10px;} */
.reg_link{display:flex;justify-content:space-around;font-size:12px;text-align:center;margin-top:1vh;color: white;}
.reg_link a{text-decoration:none;color:orange;font-weight:bold;}
.reg_link a:hover{text-decoration:underline;}
#login_form{display: flex;color:white;width: 100%;height: 100%;background-color:transparent;overflow:hidden; flex-direction: column;}

.btn{height: 3vh;width: 30vw;background-color: white;border-radius: 10px;}
.bouton_login{margin-top: 1vh;}
.hauteur_login_form{position: relative;height: 16vh;}
.hauteur_step1{position: relative;height: 13vh;}
.heightun{height: 2vh;}
.heightdeux{height: 2vh;}
.heighttrois{height: 0vh;}
.heightquatre{height: 0vh;}
.heightcinq{height: 2vh;}
.heightsix{height: 0vh;}
.heightsept{height: 1vh;}


.trois{height: 3vh;}
.cinq{height: 5vh;}


.hauteur{position: relative;height: 12vh;}
.hauteur_sept{position: relative;height: 7vh;}
.hauteur_huit{position: relative;height: 8vh;}
.hauteur_onze{position: relative;height: 11vh;}
.hauteur_dixhuit{position: relative;height: 18vh;}
#titre_coeur{color: black;font-size: 4vh;padding-top: 2vh;}
.bouton_login{margin-top: 1vh;}
.form_step.active{opacity:1;transform:scale(1) translateY(0);}
.step-header{margin-top:120px;height: 25px;background:green;color:white;padding:0.5em 1em;border-radius:30px;font-weight:bold;animation:slideIn 0.5s forwards;}
.bouton{border:none;border-radius:10px;cursor:pointer;font-size:1em;width:auto;background-color: green;padding: 5px 15px;margin-top: 1vh;}

#step{position: absolute;width: 100%;height: 100%;}
#step1{position: absolute;width: 100%;height: 100%;}
#step2{position: absolute;width: 100%;height: 100%;}
#step3{position: absolute;width: 100%;height: 100%;color:white}
#step4{position: absolute;width: 100%;height: 100%;}
#step5{position: absolute;width: 100%;height: 100%;}
#syntaxe_mdp{position: absolute;width: 100%;height: 16vh;top:-50vh;left:0vw;right: 0vw;background-color: #e2e2e2;color: black;font-size: 1rem;text-align: center;z-index: 1000;}

.password-strength{margin-bottom:5px;}
.strength-meter{height:5px;background-color:white;border-radius:3px;margin-bottom:6px;}
.strength-bar{height:100%;width:0;border-radius:3px;transition:width 0.3s ease,background-color 0.3s ease;}
.strength-text{font-size:13px;color:black;}

.password-requirements{background-color:white;padding:5px 10px;color:black;font-size: 11px;}
.password-requirements p{font-size:13px;}
.password-requirements ul{list-style-type:none;margin:0;padding:0;}
.password-requirements li{font-size:13px;margin-bottom:4px;color:black;display:flex;align-items:center;}
.password-requirements li i{margin-right:8px;color:red;}
.password-requirements li i.fa-check-circle{color:green;justify-content: space-around;}

.password-requirements div i{margin-right:8px;color:red;}
.password-requirements div i.fa-check-circle{color:green;}

.container__radio{width: 15vw;}
.box_sexe{width:80%;margin:0 auto}
.sexe{display: flex;width:100%;justify-content: space-around;}

.age{display: flex;width:100%;justify-content: space-around;}
.cachecache{transform: scale(0);}
@keyframes affiche {
	0% {
		transform: scale(0);
	}
	
	100% {
		transform: scale(1);
	}
}
.affiche{
  animation: affiche ease-in-out 0.5s forwards;
}

#syntaxe_mdp{position: absolute;width: 100%;height: 16vh;top:-50vh;left:0vw;right: 0vw;background-color: #e2e2e2;color: black;font-size: 1rem;text-align: center;z-index: 1000;}
.erreur_cache{transform:translateY(-50vh);transition:transform .5s ease-in;}
.erreur_visible{transform:translateY(50vh);transition:transform .5s ease-in;}
/* .buttons{display:flex;justify-content:space-around;animation:fadeInUp 0.5s ease-in-out;margin:0 auto;color:white;font-weight:bold} */
#erreurs{position: absolute;width: 100%;height: 80px;top:-50vh;background-color: red;color: white;font-size: 3vh;text-align: center;z-index: 1000;}
.partie_gauche{padding-left: 10px;}
.partie_gauche, .partie_droite{width:49vw;text-align:left}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ DESKTOP -------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media(min-width: 801px)

{
.margintopun{margin-top: 120px;}

#titre_coeur{color: black;font-size: 4vh;padding-top: 0vh;}
.card-container{perspective:1200px;}
.card{margin-top:3vh;width:512px;height:550px;position:relative;border-radius:25px;transition:all 1s ease;transform-style:preserve-3d;}
.rotated{transform:rotateY(-180deg);}
.card-contents{height:90%;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;position:absolute;top:0;left:0;backface-visibility:hidden;h2,p{text-shadow:1px 2px 2px rgba(0,0,0,0.2);}
}
.card-depth{transform:translateZ(100px) scale(0.98);perspective:inherit;width: 100%;height: 100%;}
.card-front{ width:512px;height:471px;background-image: url("../images/mon_coeur.png");background-repeat: no-repeat;background-position: center ;background-size: cover;;transform-style:preserve-3d;}
.card-back{ width:512px;height:471px; transform:rotateY(180deg);background-image: url("../images/mon_coeur.png");;background-repeat: no-repeat;background-position: center ;background-size: 100%;transform-style:preserve-3d;}
.input_group_login{width: 100%;;height: 6vh;}
.input_group_login input{width: 250px;}
/* .input_group_login input[type=text],input[type=email],input[type=password]{width: 70%;border-radius:10px;font-size:1em;outline:none;height: 5vh;padding: 10px;} */
.reg_link{display:flex;justify-content:space-around;font-size:12px;text-align:center;margin-top:1vh;color: white;}
.reg_link a{text-decoration:none;color:orange;font-weight:bold;}
.reg_link a:hover{text-decoration:underline;}
#login_form{display: flex;color:white;width: 100%;height: 100%;background-color:transparent;overflow:hidden; flex-direction: column;}

.btn{height: 3vh;width: 30vw;background-color: white;border-radius: 10px;}
.bouton_login{margin-top: 1vh;}

#step{position: absolute;width: 100%;height: 100%;}
#step1{position: absolute;width: 100%;height: 510px;}
#step2{position: absolute;width: 100%;height: 510px;}
#step3{position: absolute;width: 100%;height: 510px;}
#step4{position: absolute;width: 100%;height: 510px;}
#step5{position: absolute;width: 100%;height: 510px;}

.heightun{height: 6vh;}
.heightdeux{height: 6vh;}
.heighttrois{height: 2vh;}
.heightquatre{height: 5vh;}
.heightcinq{height: 2vh;}
.heightsix{height: 5vh;}
.heightsept{height: 3vh;}


.form_step.active{opacity:1;transform:scale(1) translateY(0);}
.step-header{margin-top:50px;height: 25px;background:green;color:white;padding:0.5em 1em;border-radius:30px;font-weight:bold;animation:slideIn 0.5s forwards;}
.bouton{border:none;border-radius:10px;cursor:pointer;font-size:1em;width:auto;background-color: green;padding: 5px 15px;margin-top: 1vh;}

.hauteur_login_form{position: relative;height: 14vh;}
.input_group_login{width: 100%;;height: 6vh;margin-bottom: 2vh;}
.reg_link{display:flex;justify-content:space-around;font-size:15px;text-align:center;margin-top: 6vh;color: white;}
.box_age{width:100%;margin-bottom: 4vh;}
.btn{height: 4vh;width: 13vw;background-color: white;border-radius: 10px;}
#erreurs{position: absolute;width: 40vw;height: 80px;top:-48vh;left:30vw;right: 30vw;background-color: red;color: white;border-radius: 30px;font-size: 1.5rem;text-align: center;z-index: 1000;}
.partie_gauche, .partie_droite{width:25vw;text-align:left}
}