/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: Arial, sans-serif; background: #f4f6fa; color: #111827; }

/* Layout global responsive */
.page{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px); /* padding qui s'adapte */
}

/* Card responsive */
.login-container{
  width: min(92vw, 460px);         /* prend 92% de l'écran max 460px */
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,.12);
}

/* Header */
.login-header{
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  text-align: center;
  padding: clamp(22px, 4vw, 34px);
}
.login-header h1{
  font-size: clamp(22px, 3.6vw, 30px);
  margin-bottom: 8px;
}
.login-header p{
  font-size: clamp(14px, 2.5vw, 16px);
  opacity: .95;
}
.login-header strong{ color: #ff6a00; }

/* Form */
.login-form{
  padding: clamp(18px, 4vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Accessibilité */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Inputs responsive (plus grands) */
.login-form input{
  width: 100%;
  height: clamp(48px, 6vw, 56px);
  padding: 0 16px;
  font-size: clamp(15px, 2.5vw, 16px);
  border: 1px solid #d7dbe3;
  border-radius: 12px;
  outline: none;
  transition: .25s;
}

.login-form input:focus{
  border-color: #ff6a00;
  box-shadow: 0 0 0 3px rgba(255,106,0,.18);
}

/* Bouton responsive */
.login-form button{
  width: 100%;
  height: clamp(50px, 6vw, 58px);
  margin-top: 6px;
  border: none;
  border-radius: 14px;
  background: #ff6a00;
  color: #fff;
  font-size: clamp(16px, 2.8vw, 18px);
  font-weight: 700;
  cursor: pointer;
  transition: .25s;
}

.login-form button:hover{
  background: #e55d00;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(255,106,0,.25);
}

.login-form button:active{
  transform: translateY(0px);
  box-shadow: none;
}

/* Messages */
.error, .success, .info {
  text-align: center;
  font-size: 14px;
  margin-top: 6px;
}
.error{ color: #e11d48; }
.success{ color: #16a34a; }
.info{ color: #222222; }

/* Petits écrans: un peu plus compact */
@media (max-width: 360px){
  .login-form{ gap: 12px; }
  .login-container{ border-radius: 14px; }
}