body
  {
  min-height: 100vh;
  background: url('../img/panorama-cite-carcassonne.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #020106;
  } 
.copyright-element
  {
  position: static;
  float: right;
  margin: -50px 10px 0 0;
  }
.copyright-element span
  {
  font-size: 9pt;
  color: #FFFFFF;
  }
#footer
  {
  color: #FFFFFF;
  }
#footer a
  {
  color: #FFFFFF;
  } 
.bloc-conteneur
  {
  position: relative;
  width: 440px; 
  height: 400px; 
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  margin: 55px auto 350px auto;
  display: flex;
  justify-content : center;
  align-items: center;
  overflow: hidden;
  transition: height .2s ease;  
  }
.bloc-conteneur.active
  {
  height: 700px;
  margin: 30px auto;
  }
.bloc-conteneur.activeerror
  {
  height: 790px;
  margin: 30px auto;
  }
.bloc-conteneur .bloc-form
  {
  width: 100%;
  padding: 40px;
  }
.bloc-conteneur .bloc-form.login
  {
  transition: transform .18s ease;
  transform: translateX(0);
  }
.bloc-conteneur.active .bloc-form.login
  {
  transition: none;
  transform: translateX(-400px);
  }  
.bloc-conteneur .bloc-form.register
  {
  position: absolute;
  transition: none;
  transform: translateX(400px);
  }
.bloc-conteneur.active .bloc-form.register
  {
  transition: transform .18s ease;
  transform: translateX(0);  
  }
.bloc-conteneur h2
  {
  font-size: 26pt;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  }
.input-box
  {
  position: relative;
  width: 100%;
  height: 50px;
  border-bottom: 2px solid #FFFFFF;
  margin: 30px 0;
  }
.input-box label
  {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  font-size: 12pt;
  color: #FFFFFF;
  font-weight: 500;
  pointer-events: none;
  transition: .5s;
  }
.input-box input:focus~label,
.input-box input:valid~label
  {
  top: -5px;
  }
.input-box input
  {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12pt;
  color: #FFFFFF;
  font-weight: bold;
  padding: 0 35px 0 5px;
  }
.input-box .icon
  {
  position: absolute;
  right: 8px;
  font-size: 14pt;
  color: #FFFFFF;
  }
.input-box .icon .fa-solid
  {
  line-height: 55px;
  }
  
.remember-forget
  {
  font-size: 11pt;
  color: #FFFFFF;
  font-weight: bold;
  margin: -15px 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 20px;
  }
.remember-forget label
  {
  cursor: pointer;
  }
.remember-forget label input
  {
  accent-color: #373736;
  margin-right: 3px;
  }
.remember-forget a
  {
  color: #FFFFFF;
  text-decoration: none;
  }
.remember-forget a:hover
  {
  text-decoration: underline;
  }
.btn-go-login
  {
  width: 100%;
  height: 45px;
  background: #3F417A;
  border: none;
  outline: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14pt;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all .4s ease-in-out;
  } 
.btn-go-login:hover
  {
  background: #373736;
  } 
.login-register
  {
  font-size: 11pt;
  color: #FFFFFF;
  text-align: center;
  font-weight: bold;
  margin: 25px 0 10px;
  }  
.login-register p a
  {
  color: #FFFFFF;
  text-decoration: underline;
  font-weight: bold;
  }
.login-register p a:hover
  {
  text-decoration: none;
  }
#msg-error
  {
  margin: 15px auto 0 auto;
  width: 100%;
  height: auto;
  line-height: 25px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #FFECEC;
  border: solid 1px #FFA8A8;  
  padding: 0 10px;
  font-size: 11pt;
  font-weight: bold;
  }
#msg-error span
  {
  font-size: 11pt;
  font-weight: bold;
  }
#msg-error-form
  {
  margin: 15px auto 0 auto;
  width: 100%;
  height: auto;
  line-height: 25px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #FFECEC;
  border: solid 1px #FFA8A8;  
  padding: 0 10px;
  font-size: 11pt;
  font-weight: bold;
  }
#msg-error-form span
  {
  font-size: 11pt;
  font-weight: bold;
  }

#msg-success-form
  {
  margin: 15px auto 0 auto;
  width: 100%;
  height: auto;
  line-height: 25px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #F2FFF2;
  border: solid 1px #9DFF9D;  
  padding: 0 10px;
  font-size: 11pt;
  font-weight: bold;
  }
#msg-success-form span
  {
  font-size: 11pt;
  font-weight: bold;
  }
  
#msg-error-form-connect
  {
  margin: 15px auto 0 auto;
  width: 100%;
  height: auto;
  line-height: 25px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #FFECEC;
  border: solid 1px #FFA8A8;  
  padding: 0 10px;
  font-size: 11pt;
  font-weight: bold;
  }
#msg-error-form-connect span
  {
  font-size: 11pt;
  font-weight: bold;
  }
@media screen and (max-width: 640px) {
  .copyright-element
    {
    margin: -89px 10px 0 0;
    }
  }
@media screen and (max-width: 475px) {
.bloc-conteneur
  {
  width: 100%;
  border: none; 
  }
.bloc-conteneur .bloc-form
  {
  padding: 40px 60px;
  }
}
@media screen and (max-width: 435px) {
.bloc-conteneur
  {
  width: 100%;
  background: none;
  border: none;
  box-shadow: none;
  }
.bloc-conteneur .bloc-form
  {
  padding: 40px 20px;
  }
body
  {
  background: none;
  }   
.bloc-conteneur h2
  {
  color: #373736;
  } 
.input-box
  {
  border-bottom: 2px solid #373736;
  }
.input-box label
  {
  color: #373736;
  }
.input-box .icon
  {
  color: #373736;
  }
.remember-forget
  {
  color: #373736;
  }
.remember-forget a
  {
  color: #373736;
  }
.login-register
  {
  color: #373736;
  } 
.login-register p a
  {
  color: #373736;
  }
.input-box input
  {
  color: #373736;
  }
#footer
  {
  color: #373736;
  }
#footer a
  {
  color: #373736;
  }
.copyright-element
  {
  display: none;
  }
}