.login-page{
  position:relative;
  height:100vh;
  background:#0c7c59;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* pattern animé */

.login-pattern{
  position:absolute;
  width:200%;
  height:200%;
  background-image:url('/img/pattern.svg');
  background-size:250px;
  opacity:0.06;

  animation:rotatePattern 80s linear infinite;
}

@keyframes rotatePattern{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* container */

.login-container{
  position:relative;
  text-align:center;
  z-index:2;
}

/* logo */

.logo{
  width:160px;
  margin-bottom:20px;
}

/* card */

.login-card{
  background:white;
  padding:30px;
  border-radius:14px;
  width:340px;

  box-shadow:0 20px 50px rgba(0,0,0,0.25);
}

.login-card h2{
  margin-bottom:20px;
  font-size:20px;
}

/* inputs */

.input-group{
  text-align:left;
  margin-bottom:12px;
}

.input-group label{
  font-size:13px;
  font-weight:500;
}

.input-group input{
  width:100%;
  padding:10px;
  margin-top:4px;

  border-radius:6px;
  border:1px solid #cfd8dc;
}

/* bouton */

.btn-login{
  width:100%;
  padding:12px;
  margin-top:10px;

  border:none;
  border-radius:8px;

  background:#0c7c59;
  color:white;

  font-weight:600;
  cursor:pointer;
}

.btn-login:hover{
  background:#0a6b4c;
}

/* erreur */

.login-error{
  margin-top:10px;
  font-size:13px;
  color:#e53935;
  min-height:18px;
}