.login-page {
  display: grid;
  grid-template-columns: 45% 55%;
  background: #091D37;
}

#main .page-content, #main .page-header {
  margin-bottom: 0;
}

/* LEFT */
.login-page__left {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-box {
  width: 100%;
  max-width: 420px;
  color: #fff;
}

.login-title {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 13px;
  margin-bottom: 24px;
  color: rgba(255,255,255,.6);
}

/* FORM */
.login-box input {
  width: 100%;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  padding: 0 18px;
  color: #fff;
  margin-bottom: 10px;
}

.login-box input::placeholder {
  color: rgba(255,255,255,.4);
}

.login-box button {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #29bfcb;
  color: #fff;
  font-weight: 700;
  margin-top: 10px;
}

/* FORGOT */
.login-forgot {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: #fff;
  text-decoration: underline;
}

/* RIGHT */
.login-page__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.login-page {
  height: 850px;
}

/* LOGIN FORM */
#login-form {
  width: 100%;
  margin: 0 auto;
}

#login-form section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* reset Presta rows */
#login-form .form-group.row {
  margin: 0;
  display: block;
}

#login-form .form-control-label,
#login-form .form-control-comment {
  display: none;
}

#login-form .col-md-6 {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* inputs */
#login-form .form-control {
  width: 100%;
  height: 66px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: transparent;
  color: #ffffff;
  padding: 0 24px 0 54px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: none;
  outline: none;
}

#login-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

#login-form .form-control:focus {
  border-color: rgba(38, 196, 212, 0.7);
  box-shadow: 0 0 0 3px rgba(38, 196, 212, 0.12);
}

/* placeholders via labels hidden */
#login-form input[name="email"]::placeholder {
  content: "nom d’utilisateur";
}

#login-form input[name="email"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.667 13.8334C12.8438 13.8334 13.0134 13.7631 13.1384 13.6381C13.2634 13.5131 13.3337 13.3435 13.3337 13.1667V12.336C13.3363 10.4654 10.6843 9.00002 8.00033 9.00002C5.31633 9.00002 2.66699 10.4654 2.66699 12.336V13.1667C2.66699 13.3435 2.73723 13.5131 2.86225 13.6381C2.98728 13.7631 3.15685 13.8334 3.33366 13.8334H12.667ZM10.403 4.56935C10.403 4.88488 10.3408 5.19731 10.2201 5.48881C10.0994 5.78032 9.92238 6.04519 9.69927 6.2683C9.47616 6.4914 9.21129 6.66838 8.91979 6.78913C8.62828 6.90987 8.31585 6.97202 8.00033 6.97202C7.6848 6.97202 7.37237 6.90987 7.08086 6.78913C6.78936 6.66838 6.52449 6.4914 6.30138 6.2683C6.07827 6.04519 5.9013 5.78032 5.78055 5.48881C5.65981 5.19731 5.59766 4.88488 5.59766 4.56935C5.59766 3.93213 5.8508 3.321 6.30138 2.87041C6.75197 2.41982 7.3631 2.16669 8.00033 2.16669C8.63755 2.16669 9.24868 2.41982 9.69927 2.87041C10.1499 3.321 10.403 3.93213 10.403 4.56935Z' stroke='white' stroke-opacity='0.4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 28px center;
  background-size: 16px 16px;
}

#login-form input[name="password"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg opacity='0.4'%3E%3Cpath d='M13.1928 9.95356C11.8194 11.3202 9.85278 11.7402 8.12611 11.2002L4.98611 14.3336C4.75945 14.5669 4.31278 14.7069 3.99278 14.6602L2.53945 14.4602C2.05945 14.3936 1.61278 13.9402 1.53945 13.4602L1.33945 12.0069C1.29278 11.6869 1.44611 11.2402 1.66611 11.0136L4.79945 7.88023C4.26611 6.1469 4.67945 4.18023 6.05278 2.81356C8.01945 0.846895 11.2128 0.846895 13.1861 2.81356C15.1594 4.78023 15.1594 7.9869 13.1928 9.95356Z' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.59277 11.6602L6.12611 13.1935' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.66699 7.33331C10.2193 7.33331 10.667 6.8856 10.667 6.33331C10.667 5.78103 10.2193 5.33331 9.66699 5.33331C9.11471 5.33331 8.66699 5.78103 8.66699 6.33331C8.66699 6.8856 9.11471 7.33331 9.66699 7.33331Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 28px center;
  background-size: 16px 16px;
}

#login-form .form-control {
  padding-left: 58px;
}

/* password group */
#login-form .input-group {
  position: relative;
  display: block;
  width: 100%;
}

#login-form .input-group .form-control {
  border-radius: 999px;
}

#login-form .input-group-btn {
  display: none;
}

/* forgot */
#login-form .forgot-password {
  order: 3;
  text-align: center;
  margin-top: 14px;
}

#login-form .forgot-password a {
  color: #ffffff;
  font-size: 16px;
  font-style: italic;
  text-decoration: underline;
}

/* footer / button */
#login-form .form-footer {
  margin-top: 34px;
  padding: 0;
  text-align: center;
}

#login-form #submit-login,
#login-form button[type="submit"] {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 999px;
  background: #28bac5;
  color: #ffffff;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

#login-form #submit-login:hover,
#login-form button[type="submit"]:hover {
  background: #22aeb9;
  transform: translateY(-1px);
}

/* remettre le forgot sous le bouton comme la maquette */
#login-form {
  display: flex;
  flex-direction: column;
}

#login-form section {
  display: contents;
}

#login-form .forgot-password {
  order: 3;
}

#login-form .form-footer {
  order: 2;
}

/* responsive */
@media (max-width: 640px) {
  #login-form {
    max-width: 100%;
  }

  #login-form .form-control {
    height: 58px;
    font-size: 17px;
  }

  #login-form #submit-login,
  #login-form button[type="submit"] {
    height: 52px;
    font-size: 17px;
  }

  #login-form .forgot-password a {
    font-size: 14px;
  }
}
/* Responsive */
@media (max-width: 900px) {
  .login-page {
    grid-template-columns: 1fr;
  }

  .login-page__right {
    display: none;
  }
}


#content {
  background: #091D37 !important;
}