/*--- Begin form ---*/

.formulaire{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:2em;
  margin-bottom:2em;
}

.herro{
background:transparent;
display:flex;
align-items:center;
justify-content:center;
}
.card{
 width:200px;
 background:#fff;
 padding:4px;
 border-radius:15px;
 text-align:center;
 color:#333;
 margin-bottom:1em;
}

.card h1{
 font-weight:500;
 color:#000;
}
.card img{
 width:180px;
 height:180px;
 border-radius:50%;
 margin-top:40px;
 margin-bottom:30px;
}
.label{
 display:block;
 width:150px;
 background:red;
 color:#fff;
 padding:12px;
 margin:10px auto;
 border-radius:5px;
 cursor:pointer;
}

.card img{
 width:180px;
 height:180px;
 border-radius:50%;
 margin-top:40px;
 margin-bottom:30px;
}

#input-file{
 display:none;
}

.perso{
  margin-bottom:2em;
  padding:0.50em;
  background:#0D6EFD;
  color:white;
  font-size:20px;
  text-align:center;
}

.wrapper{
 width:720px;
 background:#e7e5e5;
 border-radius:5px;
 color:white;
}

.wrapper header{
 font-size:22px;
 font-weight:600;
 padding:20px 30px;
 background-color:#0205d6;
 border-bottom:1px solid #bfbfbf;
}

.wrapper form{
 margin:35px 30px;
}

form .dbl-field{
 display:flex;
 align-items:center;
 margin-bottom:25px;
 justify-content:space-between;
}

.dbl-field .field{
 height:50px;
 position:relative;
 width:calc(100% / 2 - 13px);
}

form .field input,
form .message textarea{
 height:100%;
 width:100%;
 font-size:16px;
 outline:none;
 padding:0 18px 0 48px;
 border-radius:5px;
 border:1px solid #bfbfbf;
}

form .field input::placeholder,
form .message textarea::placeholder{
 color: #bfbfbf;
}

form .field input:focus,
form .message textarea:focus{
 border:2px solid #0D6EFD;
}


.wrapper form i{
 position:absolute;
 left:18px;
 top:50%;
 color: #bfbfbf;;
 font-size:17px;
 pointer-events:none;
 transform:translateY(-50%);
}

form .field input:focus ~ i{
 color:#0D6EFD;
}

form .message{
 position:relative;
}

form .message i{
 top:30px;
 font-size:20px;
}

form .button-area{
 margin:25px 0;
 display:flex;
 align-items:center;
}

.button-area button{
 font-size:18px;
 border:none;
 color:#fff;
 cursor:pointer;
 border-radius:5px;
 background:#0D6EFD;
 padding:13px 15px;
 margin-left:10px;
 width:400px;
}

.button-area span{
 color:#0D6EFD;
 margin-left:30px;
}

/* Media Query */
@media(max-width:600px){
 .wrapper header{
  text-align:center;
 }
 form .dbl-field{
  margin-bottom:0px;
  flex-direction:column;
 }
 .dbl-field .field{
  width:100%;
  margin-bottom:20px;
 }
 form .message textarea{
  resize:none;
 }
 .button-area button{
  width:100%;
 }
 form .button-area{
  flex-direction:column;
 }
 .button-area span{
  text-align:center;
  margin:20px 0;
 }
}

/*--- End inscription ---*/