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


.centre { display: flex;  align-items: center;  justify-content: center;}
.centrage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
 a {text-decoration: none}
a, a:link, a:visited, a:hover{text-decoration: none;color:#e74c3c;} 

.margintopun{margin-top: 160px;}
.next-step{width:100px}
.prev-step{width:100px}
.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;}




.title_form{font-size: 4vh;background:black;margin-bottom: 5vh;}
.scene{width:50%;height:76vh;}
.card{width:100%;height:100%;transition:transform 2s;transform-style:preserve-3d;cursor:pointer;position:relative;}
.card.is-flipped{transform:rotateY(180deg);}
.card__face{position:absolute;width:100%;height:100%;color:white;text-align:center;font-weight:bold;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;}
.card__face--front{background-image: url("../images/mon_coeur.png");;background-repeat: no-repeat;background-position: center ;background-size: 100%;}
.card__face--back{background-image: url("../images/mon_coeur.png");;background-repeat: no-repeat;background-position: center ;background-size: 100%;;transform:rotateY(180deg);}
.card-depth{transform:translateZ(100px) scale(0.98);perspective:inherit;width:100%;height:100%;}




/* .card-container{perspective:1200px;}
.card{margin:0 auto;height:535px;width:95%;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;}

.ft15{font-size:15px;}

.margin-top1{margin-top: 1vh;}
.margin-top3{margin-top: 3vh;}
.margin-top5{margin-top: 5vh;}
.margin-top7{margin-top: 7vh;}

.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;}

.bouton_login{margin-top: 1vh;}
.form_step.active{opacity:1;transform:scale(1) translateY(0);}
.step-header{width:100px;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: 1px 10px;}

#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:0vh;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;}

.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:0vh;left:0vw;right: 0vw;background-color: #e2e2e2;color: black;font-size: 1rem;text-align: center;z-index: 1000;}
.syntaxe_mdp_cache{transform:translateY(-50vh);transition:transform .5s ease-in;}
.syntaxe_mdp_visible{transform:translateY(0vh);transition:transform .5s ease-in;}
.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)

{
.next-step{width:100px}
.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;
}


.div_img_couple{padding: 5px;height:8vh}
.img_couple{height:40px}
  .container{height:90vh}
  .footer{height:5vh}
.margintopun{margin-top: 80px;}


.coeur{width:100%;height: 85vh;}
/* .card-container{perspective:1200px;height:100%}
.card{width:50%;height:65vh;border-radius:25px;transition:all 1s ease;transform-style:preserve-3d;}
.rotated{transform:rotateY(-180deg);}
.card-contents{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;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:50vw;height:64vh;background-image: url("../images/mon_coeur.png");background-repeat: no-repeat;background-position: center ;background-size: cover;;transform-style:preserve-3d;}
.card-back{ width:50vw;height:64vh; 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;}

.height1{height: 1vh;}
.height2{height: 2vh;}
.height3{height: 3vh;}
.height4{height: 4vh;}
.height5{height: 5vh;}
.height6{height: 6vh;}
.height7{height: 7vh;}

.margin-top1{margin-top: 1vh;}
.margin-top3{margin-top: 3vh;}
.margin-top5{margin-top: 5vh;}
.margin-top7{margin-top: 7vh;}

.form_step.active{opacity:1;transform:scale(1) translateY(0);}
.step-header{width:50px;height: 10px;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: 1px 10px;}

.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;color: white;margin-top: 6vh;}
.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:-49vh;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}
}
.cache{display:none}
.cache.activee{display:block;}