:root{color-scheme:dark;--page:#0e0e11;--surface:#18181c;--haute:#222227;--bordure:#2e2e34;--discret:#222227;--texte:#f4f4f6;--texte2:#a3a3ad;--texte3:#82828c;--accent:#d2b6ee;--accent-survol:#dcc6f2;--accent-appuye:#bfa0e0;--sur-accent:#1c1324;--erreur:#f09a9a;--ok:#7fd69b}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--page);color:var(--texte);font:400 16px/26px "Figtree","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;display:grid;place-items:center;min-height:100vh;padding:24px 16px}
.cadre{width:100%;max-width:420px;display:grid;gap:24px}
.logo{width:118px;height:auto}
.carte{background:var(--surface);border:1px solid var(--discret);border-radius:28px 4px 28px 4px;padding:32px;display:grid;gap:18px}
h1{font:700 28px/36px "Outfit","Segoe UI",system-ui,sans-serif;letter-spacing:-.02em;margin:0}
p{margin:0;color:var(--texte2);font-size:14px;line-height:20px}
label{display:grid;gap:8px;font-size:14px;font-weight:500;color:var(--texte2)}
input{font:inherit;color:var(--texte);background:var(--page);border:1px solid var(--bordure);border-radius:14px 3px 14px 3px;padding:12px 16px;width:100%}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
button{font:600 17px/20px "Outfit","Segoe UI",system-ui,sans-serif;color:var(--sur-accent);background:var(--accent);border:0;border-radius:14px 3px 14px 3px;padding:16px 32px;cursor:pointer;transition:background-color .12s}
button:hover{background:var(--accent-survol)}
button:active{background:var(--accent-appuye)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.alerte{border-radius:14px 3px 14px 3px;padding:12px 16px;font-size:14px;line-height:20px}
.alerte.erreur{background:#2a1d1f;border:1px solid #f09a9a55;color:var(--erreur)}
.alerte.ok{background:#17251c;border:1px solid #7fd69b55;color:var(--ok)}
.mention{font-size:12px;line-height:18px;color:var(--texte3)}
@media (prefers-reduced-motion:reduce){button{transition:none}}