:root { --ok: #1b7f3b; --warn: #b26a00; --err: #b3261e; --fg: #1b1b1b; --bg: #f6f6f4; --muted: #666; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
.bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .6rem 1rem; background: #7a1010; color: #fff; }
.bar .who { margin-left: auto; }
.bar-link { color: #fff; }
main { max-width: 760px; margin: 0 auto; padding: 1rem; }
.card { background: #fff; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
label { display: block; margin: .5rem 0; }
input, select, button { font: inherit; padding: .5rem; }
input, select { width: 100%; }
button { cursor: pointer; border-radius: 6px; border: 1px solid #999; background: #fff; }
button[type=submit], #confirm-yes { background: #7a1010; color: #fff; border-color: #7a1010; }
.error { color: var(--err); }
.muted { color: var(--muted); }
.context { position: sticky; top: 0; background: #fff; padding: .6rem 1rem; border-left: 6px solid #7a1010; display: grid; gap: .2rem; z-index: 2; }
#scan-input { font-size: 1.3rem; margin-top: .3rem; }
.counters { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; margin: .8rem 0; text-align: center; }
.counters span { display: block; font-size: 1.6rem; font-weight: 700; }
.bubble { padding: .8rem 1rem; border-radius: 8px; color: #fff; margin: .5rem 0; }
.bubble-ok { background: var(--ok); }
.bubble-warn { background: var(--warn); }
.bubble-error { background: var(--err); }
.bubble-title { font-weight: 700; font-size: 1.2rem; }
.confirm { background: #fff3cd; border: 2px solid var(--warn); padding: 1rem; border-radius: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.list { padding-left: 1rem; }
video { width: 100%; max-height: 40vh; background: #000; margin-top: .5rem; }
@media (max-width: 520px) { .counters { grid-template-columns: repeat(3, 1fr); } }
.expected li { margin: .2rem 0; }
.expected li[data-result=PRESENTE] { color: var(--ok); }
.expected li[data-result=PRESENTE]::before { content: "✔ "; }
.expected li[data-result=NON_PRESENTE] { color: var(--err); }
.expected li[data-mandatory=true]::after { content: " (obligatoire)"; color: var(--muted); }
.shared { position: sticky; bottom: 0; }
.receipt .stamp { border: 3px solid var(--err); color: var(--err); font-weight: 700; padding: .4rem; text-align: center; letter-spacing: .05em; }
@media print { header, .actions, form, .context, .shared { display: none !important; } .receipt { display: block !important; } }