body{min-height:100vh;display:flex;flex-direction:column}
main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.carte{background:var(--blanc);border:1px solid var(--bord);border-radius:16px;padding:32px;width:100%;max-width:420px}
h1{font-size:22px;font-weight:600;margin-bottom:6px}
.intro{color:var(--gris);font-size:14px;margin-bottom:24px}
label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.champ{margin-bottom:16px}
input[type=text],input[type=email],input[type=password]{width:100%;border:1px solid var(--bord);border-radius:8px;
padding:11px 13px;font-size:15px;color:var(--encre);background:var(--blanc)}
input:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 3px rgba(24,119,210,.15)}
input.erreur{border-color:var(--rouge)}
.msg-erreur{color:var(--rouge);font-size:13px;margin-top:5px}
.case{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gris);margin-bottom:20px}
.carte .btn{width:100%;padding:12px;font-size:15px;background:var(--bleu);color:#fff}
.carte .btn:hover{filter:brightness(1.05)}
.liens{margin-top:20px;text-align:center;font-size:14px;color:var(--gris)}
.liens a{color:var(--bleu);text-decoration:none}
.liens a:hover{text-decoration:underline}
.succes{background:#E3F4EC;border-left:3px solid var(--emeraude);border-radius:0 8px 8px 0;
padding:10px 12px;font-size:14px;margin-bottom:20px}

input[type=text],input[type=email],input[type=password]{font-size:16px}

@media (max-width:480px){
  main{padding:20px 12px;align-items:flex-start}
  .carte{padding:22px 18px;border-radius:12px}
  h1{font-size:20px}
}
.intro-lien{margin:-6px 0 18px;font-size:14px;color:var(--gris)}
.intro-lien a{color:var(--bleu)}