:root{--chaux:#EEF1E6;--ink:#14231C;--betterave:#A3243B;--chaume:#C9A227;--sauge:#6B7A6E;--blanc:#FBFBF7;--ligne:#CFD6C6;--r:14px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--chaux);color:var(--ink);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:16px;line-height:1.45}
header{padding:18px 20px 8px;display:flex;align-items:baseline;justify-content:space-between;gap:12px;max-width:760px;margin:0 auto}
.brand{font-family:Archivo,sans-serif;font-weight:900;font-size:22px;letter-spacing:-.02em}
.brand span{color:var(--betterave)}
.who{font:12px "IBM Plex Mono",monospace;color:var(--sauge)}
main{max-width:760px;margin:0 auto;padding:0 16px 60px}
h1{font:900 30px/1.1 Archivo;margin:0 0 8px;letter-spacing:-.02em}
.lead{color:var(--sauge);margin:0 0 20px}
.small{font-size:13px;color:var(--sauge)}
.card{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:20px;display:grid;gap:14px}
.card label{display:grid;gap:6px;font:500 12px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em;color:var(--sauge)}
.card label input{border:1px solid var(--ligne);border-radius:10px;padding:12px;font:16px "IBM Plex Sans";background:#fff}
.tabs{display:flex;gap:6px;margin:10px 0 18px;background:var(--blanc);padding:6px;border-radius:999px;border:1px solid var(--ligne)}
.tabs button{flex:1;border:0;background:transparent;padding:10px 6px;border-radius:999px;font:600 13px "IBM Plex Sans";color:var(--sauge);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--ink);color:var(--blanc)}
.dictee h2{margin:0;font:700 15px Archivo;text-transform:uppercase;letter-spacing:.08em;color:var(--sauge)}
.mic{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.micbtn{width:96px;height:96px;border-radius:50%;border:0;background:var(--betterave);color:#fff;font:900 13px Archivo;letter-spacing:.06em;cursor:pointer;box-shadow:0 8px 0 #6E1727;transition:transform .08s}
.micbtn:active{transform:translateY(6px);box-shadow:0 2px 0 #6E1727}
.micbtn.on{background:var(--chaume);box-shadow:0 8px 0 #8A6E14;animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.micbtn.on{animation:none}}
.hint{font-size:14px;color:var(--sauge)}.hint b{color:var(--ink)}
textarea{width:100%;min-height:84px;border:1px solid var(--ligne);border-radius:10px;padding:12px;font:16px "IBM Plex Sans";background:#fff;resize:vertical}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn{border:0;border-radius:10px;padding:12px 16px;font:600 15px "IBM Plex Sans";cursor:pointer;background:var(--ink);color:var(--blanc)}
.btn.sec{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.small{padding:8px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.btn:focus-visible,.micbtn:focus-visible{outline:3px solid var(--chaume);outline-offset:2px}
.ticket{margin-top:18px;background:var(--blanc);border-radius:var(--r);border:1px solid var(--ligne);overflow:hidden}
.ticket .top{background:var(--ink);color:var(--blanc);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font:700 13px Archivo;text-transform:uppercase;letter-spacing:.08em}
.ticket .top .st{font:500 12px "IBM Plex Mono";color:var(--chaume)}
.fields{display:grid;grid-template-columns:1fr 1fr}
.f{padding:10px 14px;border-bottom:1px solid var(--ligne);border-right:1px solid var(--ligne)}
.f:nth-child(2n){border-right:0}
.f label{display:block;font:500 11px "IBM Plex Mono";color:var(--sauge);text-transform:uppercase;letter-spacing:.06em}
.f input{width:100%;border:0;background:transparent;font:500 16px "IBM Plex Sans";color:var(--ink);padding:2px 0}
.f.miss input{color:var(--betterave)}
.f.miss label::after{content:" · à préciser";color:var(--betterave)}
.q{padding:12px 14px;background:#FBF3E1;border-top:1px solid var(--ligne);font-size:14px}.q b{color:var(--betterave)}
.actions{padding:12px 14px;display:flex;gap:8px;justify-content:flex-end}
.journal{margin-top:28px}
.jhead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px}
.journal h2{font:900 20px Archivo;letter-spacing:-.01em;margin:0 0 4px}
.journal p{margin:0;color:var(--sauge);font-size:14px}
select{border:1px solid var(--ligne);border-radius:10px;padding:8px;font:600 14px "IBM Plex Sans";background:#fff}
table{width:100%;border-collapse:collapse;background:var(--blanc);border:1px solid var(--ligne);font-size:13px}
th{font:500 11px "IBM Plex Mono";text-transform:uppercase;letter-spacing:.06em;color:var(--sauge);text-align:left;padding:8px 10px;background:#F2F5EC;border-bottom:1px solid var(--ligne)}
td{padding:8px 10px;border-bottom:1px solid var(--ligne);vertical-align:top}
td.num{font-family:"IBM Plex Mono";white-space:nowrap}
td .del{border:0;background:none;color:var(--sauge);cursor:pointer;font-size:16px}
.twrap{overflow-x:auto}
.empty{padding:26px;text-align:center;color:var(--sauge);border:1px dashed var(--ligne);border-radius:10px;font-size:14px}
.err{color:var(--betterave);font-size:14px;min-height:1em}
footer{margin-top:40px;font:12px "IBM Plex Mono";color:var(--sauge)}
@media(max-width:480px){.fields{grid-template-columns:1fr}.f{border-right:0}}
@media print{
  header,.tabs,.dictee,.ticket,.row,footer,.noprint,select,td .del{display:none!important}
  body{background:#fff}.journal h2{font-size:16pt}table{font-size:9.5pt}
  .journal::after{content:"Signature de l'exploitant : ______________________   Date : ____________";display:block;margin-top:24pt;font-size:10pt}
}