:root { --fond:#f6f5f2; --carte:#fff; --texte:#1c1b19; --doux:#5f5c55; --trait:#dcd9d2; --accent:#1f3a5f; --accent-texte:#fff; --erreur:#a12b2b; }
@media (prefers-color-scheme: dark) { :root { --fond:#161615; --carte:#201f1d; --texte:#ecebe7; --doux:#a8a59c; --trait:#3a3835; --accent:#9dbde6; --accent-texte:#10202f; --erreur:#f0a3a3; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--fond); color:var(--texte); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width:44rem; margin:0 auto; padding:2.5rem 1rem 4rem; }
.marque { margin:0 0 2rem; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color:var(--doux); }
h1 { font-size:1.7rem; line-height:1.2; margin:0 0 1.25rem; }
h2 { font-size:1.1rem; margin:2rem 0 .75rem; }
.carte { background:var(--carte); border:1px solid var(--trait); border-radius:.6rem; padding:1.25rem; margin-bottom:1.25rem; }
.carte h2 { margin-top:0; }
label { display:block; font-weight:600; margin:.9rem 0 .35rem; }
label:first-child { margin-top:0; }
input, select, button, .bouton { font:inherit; }
input[type=text], input[type=password], input[type=file], select { width:100%; padding:.6rem .7rem; border:1px solid var(--trait); border-radius:.4rem; background:var(--fond); color:var(--texte); }
button, .bouton { display:inline-block; margin-top:1rem; padding:.65rem 1.1rem; border:0; border-radius:.4rem; background:var(--accent); color:var(--accent-texte); font-weight:600; text-decoration:none; cursor:pointer; }
button:disabled { opacity:.55; cursor:progress; }
button.discret { background:none; color:var(--doux); padding:.3rem 0; font-weight:400; text-decoration:underline; }
button.petit { margin:0; padding:.3rem .6rem; font-size:.85rem; font-weight:400; background:none; color:var(--erreur); border:1px solid var(--trait); }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
progress { width:100%; margin-top:1rem; }
.aide { color:var(--doux); font-size:.9rem; font-weight:400; }
.erreur { color:var(--erreur); font-weight:600; margin-top:0; }
.nom { font-size:1.15rem; font-weight:600; margin:0 0 .25rem; overflow-wrap:anywhere; }
.defilement { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th, td { text-align:left; padding:.55rem .5rem; border-bottom:1px solid var(--trait); vertical-align:top; }
td:first-child { overflow-wrap:anywhere; }
td:nth-child(2), td:nth-child(3) { white-space:nowrap; }
tr.expire td { color:var(--doux); }
.invisible { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }