:root { --fond:#f5f6f8; --carte:#fff; --texte:#1d2430; --doux:#5b6576; --bord:#d9dde4;
        --accent:#1f4e79; --accent-clair:#e7eef6; --alerte:#9a3412; --alerte-fond:#fff4ec;
        --attente:#854d0e; --attente-fond:#fff9e6; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 "Segoe UI", system-ui, sans-serif; background:var(--fond); color:var(--texte); }
header { background:var(--accent); color:#fff; padding:12px 24px; display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; }
header h1 { font-size:20px; margin:0; font-weight:600; }
main { max-width:1080px; margin:0 auto; padding:20px 16px 48px; }
main.connexion { max-width:420px; }
h2 { font-size:22px; margin:8px 0 16px; }
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:8px; padding:16px 20px; margin-bottom:16px; }
.doux { color:var(--doux); font-size:14px; }
label { display:block; font-weight:600; margin:12px 0 4px; }
.aide { font-weight:400; color:var(--doux); font-size:14px; }
input[type=text], input[type=password] { width:100%; font:inherit; padding:8px 10px; border:1px solid var(--bord); border-radius:6px; background:#fff; }
button { font:inherit; padding:9px 18px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; margin-top:14px; }
button:hover { filter:brightness(1.1); }
.erreur { background:var(--alerte-fond); color:var(--alerte); border:1px solid #f3c7a6; border-radius:6px; padding:10px 14px; margin-bottom:16px; }
.etat { border-radius:6px; padding:10px 14px; margin-bottom:16px; }
.etat.en_attente { background:var(--attente-fond); color:var(--attente); }
code { background:#eef1f5; padding:1px 4px; border-radius:4px; font-size:14px; }
details summary { cursor:pointer; font-weight:600; }
header form.compte { margin-left:auto; display:flex; gap:12px; align-items:baseline; }
header form.compte button { margin:0; padding:4px 12px; background:#fff; color:var(--accent); border-color:#fff; }
.qr svg { display:block; margin:8px auto 12px; max-width:100%; height:auto; }
.cle { font-family:Consolas, "Courier New", monospace; font-size:15px; letter-spacing:1px; word-break:break-all; }
.pied { text-align:center; margin-top:24px; }