@font-face{font-family:Plex;src:url(IBMPlexSans-Variable.ttf);font-display:swap}
@font-face{font-family:PlexMono;src:url(IBMPlexMono-Medium.ttf);font-display:swap}
:root{--encre:#14213D;--papier:#F7F5F0;--graphite:#4A4E57;--trait:#E4E0D7;--vert:#2BA84A;--rouge:#D7263D}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--graphite);font:17px/1.6 Plex,system-ui,Arial,sans-serif}
main{max-width:560px;margin:0 auto;padding:40px 16px 56px}
.logo{display:block;width:230px;max-width:70%;margin:0 0 22px}
.carte{background:#fff;border:1px solid var(--trait);border-top:5px solid var(--encre);border-radius:6px;padding:28px 26px}
.kicker{margin:0 0 8px;font:12px PlexMono,monospace;letter-spacing:3px;text-transform:uppercase}
h1{margin:0 0 10px;color:var(--encre);font-size:26px;line-height:1.25}
.lead{margin:0 0 18px}
label{display:block;margin:16px 0 6px;font-weight:600;color:var(--encre);font-size:15px}
label small{font-weight:400;color:var(--graphite)}
input[type=text],input[type=email],select,textarea{width:100%;font:16px Plex,Arial,sans-serif;color:var(--encre);padding:11px 12px;border:1px solid #c9c4ba;border-radius:4px;background:#fff}
input:focus,select:focus,textarea:focus{outline:3px solid #9fb0d6;outline-offset:1px;border-color:var(--encre)}
textarea{min-height:90px;resize:vertical}
.case{display:flex;gap:12px;align-items:flex-start;margin:20px 0 0;font-size:15px;color:var(--encre)}
.case input{width:20px;height:20px;margin-top:3px;flex:0 0 20px;accent-color:var(--encre)}
button{margin:22px 0 0;width:100%;padding:14px;border:0;border-radius:4px;background:var(--encre);color:#fff;font:600 17px Plex,Arial,sans-serif;cursor:pointer}
button[disabled]{opacity:.6;cursor:wait}
.mention{margin:16px 0 0;font-size:13px;line-height:1.5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.resultat{display:none;margin:20px 0 0;padding:14px 16px;border-radius:4px;font-size:15px}
.resultat.ok{display:block;background:#eef8f0;border-left:4px solid var(--vert);color:var(--encre)}
.resultat.ko{display:block;background:#fdeef0;border-left:4px solid var(--rouge);color:var(--encre)}
footer{margin:22px 0 0;font:12px PlexMono,monospace;letter-spacing:.5px;text-align:center}
.requis{color:var(--rouge)}