@font-face {
  font-family: "poppins-light";
  src: url(../../fonts/Poppins-Light.ttf);
}
@font-face {
  font-family: "poppins-bold";
  src: url(../../fonts/Poppins-Bold.ttf);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "poppins-light", serif;
}

li {
  list-style: none;
}

.section-form .illustration {
  margin: 0 0 50px 0;

  @media screen and (max-width: 420px) {
    margin: 0 0 20px 0;
  }
}
.section-form .illustration .logo-container {
  background: url(../../images/LOGO2.png) center/cover;
  height: 364px;
  aspect-ratio: 1/1;

  @media screen and (max-width: 420px) {
    height: 300px;
  }
}
.section-form form .email-container,
.section-form form .password-container {
  position: relative;
  margin: 0 0 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;

  @media screen and (max-width: 420px) {
    margin: 0 0 20px 0;
  }
}
.section-form form .email-container input:-webkit-autofill,
.section-form form .email-container input:-webkit-autofill:hover,
.section-form form .email-container input:-webkit-autofill:focus,
.section-form form .email-container input:-webkit-autofill:active,
.section-form form .email-container input:-webkit-autofill:valid,
.section-form form .password-container input:-webkit-autofill,
.section-form form .password-container input:-webkit-autofill:hover,
.section-form form .password-container input:-webkit-autofill:focus,
.section-form form .password-container input:-webkit-autofill:active,
.section-form form .password-container input:-webkit-autofill:valid {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}
.section-form form .email-container input,
.section-form form .password-container input {
  width: 99%;
  height: 50px;
  border-radius: 6px;
  border: 1.2px solid #ad9977;
  padding: 0 10px;
  font-size: 14px;
}
.section-form form .email-container input:focus,
.section-form form .password-container input:focus {
  outline: none;
}
.section-form form .email-container label,
.section-form form .password-container label {
  position: absolute;
  font-size: 14px;
  color: #ad9977;
  background: #ffffff;
  padding: 0 5px;
  transition: 1s
    linear(
      0 0%,
      0.22 2.1%,
      0.86 6.5%,
      1.11 8.6%,
      1.3 10.7%,
      1.35 11.8%,
      1.37 12.9%,
      1.37 13.7%,
      1.36 14.5%,
      1.32 16.2%,
      1.03 21.8%,
      0.94 24%,
      0.89 25.9%,
      0.88 26.85%,
      0.87 27.8%,
      0.87 29.25%,
      0.88 30.7%,
      0.91 32.4%,
      0.98 36.4%,
      1.01 38.3%,
      1.04 40.5%,
      1.05 42.7%,
      1.05 44.1%,
      1.04 45.7%,
      1 53.3%,
      0.99 55.4%,
      0.98 57.5%,
      0.99 60.7%,
      1 68.1%,
      1.01 72.2%,
      1 86.7%,
      1 100%
    );
  cursor: text;
  border-radius: 6px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.section-form form .email-container input:focus ~ label,
.section-form form .email-container input:active ~ label,
.section-form form .email-container input:hover ~ label,
.section-form form .email-container input:valid ~ label,
.section-form form .password-container input:focus ~ label,
.section-form form .password-container input:active ~ label,
.section-form form .password-container input:hover ~ label,
.section-form form .password-container input:valid ~ label {
  transform: translateY(-24.6px);
  cursor: default;
}
.section-form form .email-container input:-webkit-autofill ~ label,
.section-form form .email-container input:-webkit-autofill:hover ~ label,
.section-form form .email-container input:-webkit-autofill:focus ~ label,
.section-form form .email-container input:-webkit-autofill:active ~ label,
.section-form form .email-container input:-webkit-autofill:valid ~ label,
.section-form form .password-container input:-webkit-autofill ~ label,
.section-form form .password-container input:-webkit-autofill:hover ~ label,
.section-form form .password-container input:-webkit-autofill:focus ~ label,
.section-form form .password-container input:-webkit-autofill:active ~ label,
.section-form form .password-container input:-webkit-autofill:valid ~ label {
  transform: translateY(-24.6px);
  cursor: default;
}
.section-form form .password-container span {
  position: absolute;
  right: 10px;
  height: 19px;
  aspect-ratio: 1/1;
  cursor: pointer;
}
.section-form form .password-container .eye-hidden {
  background: url(../../images/oeil_ferme.webp) center/cover;
}
.section-form form .password-container .eye-reveal {
  background: url(../../images/oeil_ouvert.webp) center/cover;
}
.section-form form .submit-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.section-form form .submit-container > * {
  width: 49%;
  height: 50px;
  cursor: pointer;
  font-size: 14px;
}
.section-form form .submit-container input {
  background: #ad9977;
  color: #ffffff;
  border-radius: 6px;
  border: 1px solid #ad9977;
  transition: 0.3s ease-in-out;

  @media screen and (max-width: 420px) {
    font-size: 0.9rem;
  }
}
.section-form form .submit-container input:hover {
  color: #ad9977;
  background: #ffffff;
}
.section-form form .submit-container a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #ad9977;
  background: #ffffff;
  border: 1px solid #ad9977;
  border-radius: 6px;
  transition: 0.3s ease-in-out;
  text-align: center;
  padding: 0 5px;

  @media screen and (max-width: 420px) {
    font-size: 0.9rem;
  }
}
.section-form form .submit-container a:hover {
  color: #ffffff;
  background: #ad9977;
} /*# sourceMappingURL=index.css.map */