:root { color-scheme: light dark; --fond: #f6f7f9; --carte: #fff; --texte: #1d2430; --discret: #5b6576; --accent: #2554c7; --erreur: #b3261e; --bord: #d9dde4; }
@media (prefers-color-scheme: dark) { :root { --fond: #12161d; --carte: #1b212b; --texte: #e8ecf2; --discret: #a3adbd; --accent: #8fb0ff; --erreur: #ff8a80; --bord: #2c3442; } }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; background: var(--fond); color: var(--texte); }
header, footer { max-width: 44rem; margin: 0 auto; padding: 1rem; }
footer { color: var(--discret); font-size: 0.9rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brand { font-weight: 700; text-decoration: none; color: var(--texte); }
main { max-width: 44rem; margin: 0 auto; padding: 0 1rem; display: grid; gap: 1.5rem; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.75rem; }
h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.panneau { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 1.25rem; display: grid; gap: 0.9rem; }
.champ { display: grid; gap: 0.3rem; }
.champ > span:first-child { font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"] { width: 100%; padding: 0.6rem; font: inherit; border: 1px solid var(--bord); border-radius: 7px; background: var(--fond); color: var(--texte); }
.adresse { display: flex; align-items: center; gap: 0.3rem; }
.adresse input { flex: 1; min-width: 0; }
.adresse span { color: var(--discret); white-space: nowrap; }
.invalide small, .erreur { color: var(--erreur); }
.libre { color: var(--accent); }
.case { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.case small { flex-basis: 100%; }
.bouton { padding: 0.7rem 1rem; font: inherit; font-weight: 600; border: 0; border-radius: 7px; background: var(--accent); color: var(--carte); cursor: pointer; }
.lien { justify-self: start; padding: 0.4rem 0.8rem; font: inherit; font-size: 0.9rem; font-weight: 600; border: 1px solid var(--bord); border-radius: 7px; background: var(--carte); color: var(--accent); cursor: pointer; }
.lien:hover { border-color: var(--accent); }
.bouton:hover { filter: brightness(1.08); }
.discret { color: var(--discret); font-size: 0.9rem; margin: 0; }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }