:root { color-scheme: light dark; --encre: #1b1f24; --fond: #f6f7f9; --carte: #ffffff; --accent: #0b5cad; --bord: #d5d9e0; }
@media (prefers-color-scheme: dark) { :root { --encre: #e8eaed; --fond: #14171a; --carte: #1d2125; --accent: #7ab7ff; --bord: #353b43; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; color: var(--encre); background: var(--fond); }
main { max-width: 34rem; margin: 12vh auto; padding: 2rem; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; }
h1 { margin-top: 0; font-size: 1.5rem; }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
a.bouton, button { display: inline-block; padding: .65rem 1.1rem; border-radius: 6px; border: 1px solid var(--accent); font: inherit; text-decoration: none; cursor: pointer; }
a.bouton.principal, button.principal { background: var(--accent); color: var(--carte); }
a.bouton.secondaire, button.secondaire { background: transparent; color: var(--accent); }
label { display: block; font-weight: 600; margin-bottom: .35rem; }
input[type=text] { width: 100%; padding: .6rem; font: inherit; border: 1px solid var(--bord); border-radius: 6px; background: transparent; color: inherit; }
.erreur { padding: .75rem 1rem; border-left: 4px solid #c0392b; background: color-mix(in srgb, #c0392b 12%, transparent); margin-bottom: 1rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
dt { font-weight: 600; } dd { margin: 0; }
.discret { font-size: .85rem; opacity: .75; word-break: break-all; }