:root { --bleu:#1f3864; --fond:#f4f6fa; --texte:#1c2433; --rouge:#ff7c80; --orange:#ffc000; --vert:#c6efce; --bord:#d3d9e6; }
@media (prefers-color-scheme: dark) { :root { --fond:#12161f; --texte:#e6e9f0; --bord:#2c3447; --bleu:#8fb0f0; } .carte { background:#1a2030 !important; } .bouton { background:#232b3f !important; color:var(--texte) !important; } .bouton.principal { background:#2f4f9a !important; color:#fff !important; } }
* { box-sizing:border-box; }
body { margin:0; background:var(--fond); color:var(--texte); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
header, main, footer { max-width:1100px; margin:0 auto; padding:0 16px; }
header { padding-top:28px; } h1 { margin:0; font-size:1.6rem; color:var(--bleu); } .sous-titre { margin:.2rem 0 1rem; opacity:.75; }
.confidentialite { background:var(--vert); color:#12361a; padding:.7rem 1rem; border-radius:8px; }
.colonnes { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:20px 0; }
@media (max-width:820px) { .colonnes { grid-template-columns:1fr; } }
.carte { background:#fff; border:1px solid var(--bord); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.carte.survol { outline:3px dashed var(--bleu); }
h2 { margin:0 0 4px; font-size:1.15rem; color:var(--bleu); }
.bouton { display:block; width:100%; text-align:center; padding:.75rem 1rem; border:1px solid var(--bleu); border-radius:8px; background:#fff; color:var(--bleu); font:inherit; font-weight:600; cursor:pointer; }
.bouton.principal { background:var(--bleu); color:#fff; }
.bouton:hover:not(:disabled) { filter:brightness(1.1); } .bouton:focus-visible { outline:3px solid #6aa0ff; outline-offset:2px; }
.bouton:disabled { opacity:.4; cursor:not-allowed; }
.fichier { margin:0; font-size:.9rem; opacity:.75; word-break:break-all; }
.resultat { min-height:3.5rem; }
.pastilles { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.pastille { padding:.2rem .7rem; border-radius:99px; font-weight:700; color:#1c2433; }
.pastille.rouge { background:var(--rouge); } .pastille.orange { background:var(--orange); } .pastille.vert { background:var(--vert); } .pastille.neutre { background:var(--bord); }
.liste { margin:.3rem 0 0; padding-left:1.2rem; font-size:.9rem; } .liste li { margin:.15rem 0; }
.erreur-fichier { background:var(--rouge); color:#1c2433; padding:.6rem .8rem; border-radius:8px; }
.aide { background:#fff; border:1px solid var(--bord); border-radius:12px; padding:12px 18px; } .aide summary { cursor:pointer; font-weight:600; }
@media (prefers-color-scheme: dark) { .aide { background:#1a2030; } .confidentialite { background:#1f4a2a; color:#d8f5dd; } }
footer { padding-block:20px 40px; font-size:.85rem; opacity:.7; }