:root { color-scheme: dark; --fond:#14110f; --texte:#f3ece4; --cuivre:#f0913e; --patine:#47c9b0; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:1.5rem;
       background:var(--fond); color:var(--texte);
       font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.carte { width:min(30rem,100%); background:#1e1a17; border:1px solid #3a322b;
         border-radius:14px; padding:2rem; }
h1 { margin:0 0 .25rem; font-size:1.4rem; }
.sous { margin:0 0 1.5rem; color:#a89887; font-size:.95rem; }
label { display:block; font-size:.9rem; margin:1rem 0 .4rem; color:#c9b8a6; }
input { width:100%; padding:.75rem .9rem; font-size:1rem; font-family:ui-monospace,monospace;
        border-radius:8px; border:1px solid #4a4038; background:#12100e; color:var(--texte); }
input:focus { outline:2px solid var(--cuivre); outline-offset:1px; }
input:disabled { background:#2a2420; color:#7d6f62; border-style:dashed; cursor:not-allowed; }
button { margin-top:1.5rem; width:100%; padding:.8rem; font-size:1rem; font-weight:600;
         border:0; border-radius:8px; background:var(--cuivre); color:#1a1410; cursor:pointer; }
button:hover { filter:brightness(1.1); }
button:focus-visible { outline:2px solid var(--texte); outline-offset:2px; }
.resultat { margin:1.25rem 0 0; padding:.9rem 1rem; border-radius:8px; border:1px solid #4a4038; }
.resultat.ok { border-color:var(--patine); color:var(--patine); }
.resultat.non { border-color:#e4735f; color:#e4735f; }
.resultat code { background:#12100e; padding:.15rem .4rem; border-radius:5px;
                 font-family:ui-monospace,monospace; color:var(--texte); word-break:break-all; }
.retour { display:inline-block; margin-top:1.25rem; color:var(--cuivre); }
.note { margin-top:1.75rem; padding-top:1rem; border-top:1px solid #3a322b;
        color:#8c7d6e; font-size:.85rem; }