:root { --bg:#f5f7fa; --card:#fff; --line:#dde3ea; --text:#1b2530; --muted:#6b7785; --accent:#1f5fbf; --danger:#b3261e; --ok:#1e7b46; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#12171d; --card:#1a2129; --line:#2b3540; --text:#e6ebf0; --muted:#8d9aa8; --accent:#5b9bff; --danger:#ff7b72; --ok:#4cc38a; }
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
header.top { background:var(--card); border-bottom:1px solid var(--line); padding:0 20px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
header.top .brand { font-weight:700; margin-right:18px; padding:14px 0; }
header.top a { color:var(--muted); text-decoration:none; padding:14px 10px; }
header.top a:hover, header.top a.on { color:var(--text); }
header.top .sp { flex:1; }
main { max-width:1100px; margin:24px auto; padding:0 16px; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:17px; margin:24px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:18px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:12px 16px; }
label { display:block; font-size:13px; color:var(--muted); margin-bottom:3px; }
input[type=text], input[type=password], input[type=date], input[type=number], select, input[type=file], textarea {
  width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--text); font:inherit; }
input[type=checkbox] { margin-right:6px; }
.chk label { display:flex; align-items:center; color:var(--text); font-size:15px; }
button, .btn { display:inline-block; background:var(--accent); color:#fff; border:0; border-radius:7px; padding:9px 16px; font:inherit; cursor:pointer; text-decoration:none; }
button.sec, .btn.sec { background:transparent; color:var(--text); border:1px solid var(--line); }
button.danger { background:var(--danger); }
button.link { background:none; color:var(--accent); padding:0; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:13px; color:var(--muted); font-weight:600; }
.msg { padding:10px 14px; border-radius:8px; margin-bottom:14px; }
.msg.ok { background:rgba(30,123,70,.12); color:var(--ok); border:1px solid var(--ok); }
.msg.err { background:rgba(179,38,30,.1); color:var(--danger); border:1px solid var(--danger); }
.msg.info { background:rgba(31,95,191,.1); border:1px solid var(--accent); }
.muted { color:var(--muted); } .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.pill { display:inline-block; padding:1px 9px; border-radius:99px; font-size:12px; border:1px solid var(--line); }
.pill.ok { color:var(--ok); border-color:var(--ok); } .pill.warn { color:var(--danger); border-color:var(--danger); }
.login { max-width:380px; margin:8vh auto; }
.captcha { display:flex; align-items:center; gap:10px; margin:8px 0; }
.captcha img { border:1px solid var(--line); border-radius:6px; }
pre.ocr { white-space:pre-wrap; word-break:break-word; max-height:420px; overflow:auto; background:var(--bg); padding:10px; border-radius:7px; font-size:12px; }
.hidden { display:none; }
[hidden] { display:none !important; }
.dz-area { border:2px dashed var(--line); border-radius:10px; padding:14px; text-align:center; background:var(--bg); cursor:pointer; transition:border-color .15s, background .15s; }
.dz-area:hover, .dz-area:focus-visible { border-color:var(--accent); outline:none; }
.dz-area.over { border-color:var(--accent); background:rgba(31,95,191,.1); }
.dz-area.over .dz-text { color:var(--accent); }
.dz-text { color:var(--muted); font-size:14px; }
.dz-touch, .dz-actions { display:none; }
.dz-file { margin-top:8px; font-size:13px; display:flex; flex-direction:column; align-items:center; gap:6px; word-break:break-all; }
.dz-file img { max-width:100%; max-height:110px; border-radius:6px; border:1px solid var(--line); }
.dz.has-file .dz-area { border-style:solid; border-color:var(--ok); }
.dz-area .link { text-decoration:underline; }
/* Smartphone / tablette : pas de glisser-déposer, boutons larges dont l'appareil photo */
@media (pointer: coarse) {
  .dz-desktop { display:none; }
  .dz-touch { display:inline; }
  .dz-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
  .dz-actions button { padding:12px 16px; font-size:16px; }
  .dz-area { padding:16px 12px; }
}
code { background:var(--bg); padding:1px 6px; border-radius:4px; }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.stats div { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.stats b { font-size:26px; display:block; }