:root { --fond: #14110f; --panneau: #1f1a16; --texte: #e8e0d4; --terne: #9c9284; --accent: #d4a24c; --rouge: #e06a5a; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.5 Georgia, "Times New Roman", serif; }
main { max-width: 26rem; margin: 0 auto; padding: 3rem 1rem; }
h1 { color: var(--accent); font-size: 2.2rem; margin: 0; letter-spacing: .04em; }
h2 { font-size: 1.2rem; }
.sous-titre, .note { color: var(--terne); }
.note { font-size: .9rem; }
section { background: var(--panneau); border: 1px solid #3a3129; padding: 1rem 1.25rem; margin-top: 1.5rem; }
label { display: block; margin: .6rem 0; }
input { display: block; width: 100%; margin-top: .25rem; padding: .5rem; background: var(--fond); color: var(--texte); border: 1px solid #4a3f35; font: inherit; }
button, .bouton { display: inline-block; margin-top: .6rem; padding: .5rem 1rem; background: var(--accent); color: #1a140e; border: 0; font: inherit; font-weight: bold; text-decoration: none; cursor: pointer; }
#deconnexion { background: transparent; color: var(--terne); border: 1px solid #4a3f35; font-weight: normal; }
#message { color: var(--rouge); min-height: 1.5em; }
code { color: var(--accent); }
[hidden] { display: none !important; }