:root{color-scheme:light dark;--fond:#f7f8fa;--surface:#fff;--texte:#0b0f19;--doux:#59606e;--trait:#e6e8ec;--trait-champ:#7d8798;--primaire:#457f25;--primaire-appui:#38661e;--focus:#9a4a97;--danger-fond:#fef2f2;--danger-trait:#b91c1c;--danger-texte:#991b1b;--info-fond:#f4ebf3;--info-trait:#9a4a97;--info-texte:#6a3268}
@media (prefers-color-scheme:dark){:root{--fond:#0b0f19;--surface:#131826;--texte:#f7f8fa;--doux:#9aa3b2;--trait:#262f42;--trait-champ:#6a7488;--primaire:#8cc63f;--primaire-appui:#a3ce83;--focus:#c890c6;--danger-fond:#2b1414;--danger-trait:#f87171;--danger-texte:#fca5a5;--info-fond:#241a29;--info-trait:#b674b3;--info-texte:#e8d7e7}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;letter-spacing:-.006em;color:var(--texte);background:var(--fond)}
.barre{display:flex;align-items:center;padding:.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--trait)}
.lockup{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
.lockup .signe{display:block;width:30px;height:30px}
.lockup .nom{font-size:1.0625rem;font-weight:800;letter-spacing:-.03em}
.lockup .filet{width:1px;height:1.05rem;margin:0 .5rem;background:var(--trait-champ)}
.lockup .produit{font-size:1.0625rem;font-weight:500;color:var(--doux)}
main{max-width:27rem;margin:0 auto;padding:2.5rem 1.5rem}
.pied{max-width:27rem;margin:0 auto;padding:1.5rem;border-top:1px solid var(--trait);color:var(--doux);font-size:.8125rem}
h1{font-size:1.75rem;line-height:1.2;margin:0 0 .5rem;letter-spacing:-.02em}
.lede{color:var(--doux);margin:0 0 1.5rem}
.carte{background:var(--surface);border:1px solid var(--trait);border-radius:16px;padding:1.5rem;margin:0 0 1.5rem}
.ligne-champ{display:grid;gap:.5rem;margin:0 0 1.25rem;font-weight:600;font-size:.9375rem}
.champ{font:inherit;font-size:1rem;font-weight:400;width:100%;min-height:2.75rem;padding:.625rem .75rem;color:var(--texte);background:var(--surface);border:1px solid var(--trait-champ);border-radius:8px}
.bouton{font:inherit;font-size:1rem;font-weight:600;width:100%;min-height:2.75rem;padding:.75rem 1.25rem;color:#fff;background:var(--primaire);border:1px solid transparent;border-radius:12px;cursor:pointer}
.bouton:hover{background:var(--primaire-appui)}
.message{border:1px solid;border-left-width:4px;border-radius:12px;padding:1rem 1.25rem;margin:0 0 1.5rem;font-size:.9375rem}
.message.erreur{background:var(--danger-fond);border-color:var(--danger-trait);color:var(--danger-texte)}
.message.info{background:var(--info-fond);border-color:var(--info-trait);color:var(--info-texte);border-left-width:1px}
.message.info ul{margin:.5rem 0 0;padding-left:1.25rem}
.message ul+p{margin-top:.75rem}
.aide{font-weight:400;font-size:.8125rem;color:var(--doux)}
a{color:var(--primaire-appui)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}