*{box-sizing:border-box}html{background:#f5f4f7}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:#f5f4f7;color:#27323a;line-height:1.48}.topbar{background:#fff;display:flex;align-items:center;justify-content:space-between;padding:13px max(18px,env(safe-area-inset-left));border-bottom:1px solid #eae8ee}.brand{font-weight:800;font-size:27px;color:#633e98;letter-spacing:-1px}.branddot{color:#d79f5a}.connectivity{display:flex;align-items:center;gap:7px;font-size:12px;color:#475667}.dot{width:8px;height:8px;background:#abaeba;border-radius:50%}.connectivity.online .dot{background:#2e8a65}.connectivity.offline .dot{background:#c07a2d}.wrap{max-width:600px;margin:auto;padding:20px 16px 40px}.intro{padding:5px 3px 20px}.overline{font-size:10px;letter-spacing:2px;color:#825dac;font-weight:700}.intro h1{font-size:29px;line-height:1.2;margin:4px 0 9px}.intro p:not(.overline){margin:0;color:#6e7580;font-size:14px}.panel{background:#fff;border:1px solid #e9e6ed;border-radius:17px;padding:21px;box-shadow:0 10px 28px rgba(56,38,78,.045);margin-bottom:18px}.panelhead{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.panel h2{font-size:17px;margin:0 0 6px}.pill{font-size:11px;color:#684695;background:#efe8f8;border-radius:20px;padding:5px 10px}.counter{font-weight:800;font-size:18px;color:#633e98}label:not(.filelabel){display:block;margin:17px 0 7px;font-weight:650;font-size:14px}.required{color:#9e417a}input:not([type=file]),select,textarea{width:100%;background:white;border:1px solid #cfd1d9;border-radius:9px;color:#1f2937;font-size:16px;padding:13px 12px;min-height:46px}input:focus,select:focus,textarea:focus{outline:2px solid #a58bc7;outline-offset:1px;border-color:#77549e}textarea{resize:vertical;min-height:92px}.actions-two{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin-top:11px}button,.filelabel{display:inline-flex;align-items:center;justify-content:center;padding:12px;border-radius:9px;border:0;font-size:14px;font-weight:680;cursor:pointer;text-align:center;min-height:46px}.primary{background:#643d91;color:white}.secondary,.filelabel{background:#f2eef7;color:#5f4188;border:1px solid #dad2e5}.big{width:100%;margin-top:16px}.scannerbox{padding:10px;border-radius:12px;background:#f3f0f6;margin-top:12px;text-align:center}.scannerbox button{margin:8px auto 0}.scannerbox video{width:100%!important;border-radius:9px}#camera-qr{max-width:100%;overflow:hidden}.helper{font-size:12px;color:#69727e;margin:9px 0 0}.feedback{font-size:13px;min-height:16px;margin:10px 0 0;font-weight:650}.recent{margin-top:12px}.recent .obs{padding:11px 0;border-top:1px solid #edf0f2;font-size:13px}.obs-head{display:flex;justify-content:space-between;gap:8px;font-weight:700}.obs-head span{color:#7b8391;font-weight:500;font-size:11px}.obs-detail{margin-top:4px;color:#64707c}.footnote{font-size:12px;text-align:center;color:#717b88;padding:1px 12px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(max-width:390px){.actions-two{grid-template-columns:1fr}.panel{padding:17px}.connectivity{font-size:11px}}
/* Identité visuelle PLIS - version 1.1 */
:root { --plis-violet:#4B2A6B; --plis-vert:#2E7D32; --plis-vert-clair:#8BC34A; --plis-fond:#f5f7f3; }
html,body { background:var(--plis-fond); }
.topbar { border-bottom:3px solid var(--plis-vert-clair); gap:14px; padding-top:8px; padding-bottom:8px; }
.brand-logo { display:flex; align-items:center; min-width:0; flex:0 1 238px; }
.brand-logo img { display:block; width:100%; height:auto; max-height:118px; object-fit:contain; }
.connectivity { flex-shrink:0; }
.connectivity.online .dot { background:var(--plis-vert); }
.intro .overline { color:var(--plis-vert); }
.intro h1, .panel h2 { color:var(--plis-violet); }
.panel { border-color:#e2e9dd; box-shadow:0 8px 30px rgba(33,77,38,.055); }
.pill { color:var(--plis-violet); background:#f0eaf6; }
.counter { color:var(--plis-violet); }
.required { color:var(--plis-violet); }
input:focus, select:focus, textarea:focus { outline-color:#8f75a6; border-color:var(--plis-violet); }
.primary { background:var(--plis-violet); }
.primary:hover { background:#392050; }
.secondary,.filelabel { background:#edf5e8; color:var(--plis-vert); border:1px solid #c6dfb7; }
.scannerbox { background:#edf5e8; }
#scan-message { color:var(--plis-vert); }
@media(max-width:390px) {
  .brand-logo { flex-basis:180px; }
  .brand-logo img { max-height:95px; }
  .topbar { padding-left:10px; padding-right:10px; }
  .connectivity { font-size:10px; }
}