:root{
  --bordeaux:#8B0000; --accent:#CC0000; --fond:#F0EDE8; --barre:#E8E4DE;
  --gris:#D8D8D8; --texte:#222; --discret:#666;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);font:15px/1.45 "Helvetica Neue",Helvetica,Arial,sans-serif}
a{color:var(--bordeaux)}
header.top{background:var(--bordeaux);color:#fff;text-align:center;padding:10px 12px}
header.top h1{margin:0;font-size:1.4rem}
header.top p{margin:2px 0 0;font-size:.85rem;color:#FFCCCC}
header.top p.auto{color:#FFD700;font-size:.8rem}
.bar{background:var(--barre);padding:8px 12px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.bar .spacer{flex:1}
.btn,button.btn{display:inline-block;background:var(--bordeaux);color:#fff;border:0;border-radius:3px;
  padding:7px 12px;font-weight:600;font-size:.85rem;font-family:inherit;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent)}
.btn.sec{background:#666}.btn.sec:hover{background:#444}
.btn.danger{background:#AA2222}
.btn.ok{background:#226622}
.btn.link{background:none;color:var(--bordeaux);padding:2px 4px;font-weight:500;text-decoration:underline}
.btn.link:hover{background:none;color:var(--accent)}
form.inline{display:inline;margin:0}
.filtre{display:flex;gap:10px;align-items:center;font-size:.9rem}
.filtre a{text-decoration:none;padding:3px 8px;border-radius:3px;color:var(--texte)}
.filtre a.on{background:var(--bordeaux);color:#fff}
.msgs{padding:8px 12px 0}
.msg{padding:8px 12px;border-radius:3px;margin-bottom:6px}
.msg.ok{background:#DDEFD9;color:#1D4D17}.msg.error{background:#F6D5D5;color:#7A1111}
main{padding:10px 12px 40px}
.tablewrap{overflow-x:auto}
table.dossiers{width:100%;border-collapse:collapse;background:#fff;min-width:860px}
table.dossiers th{background:var(--bordeaux);color:#fff;padding:7px 8px;text-align:left;font-size:.85rem}
table.dossiers td{padding:6px 8px;vertical-align:top;border-bottom:1px solid #eee}
table.dossiers tr.closed td{background:var(--gris);color:#444}
table.dossiers tr.first td{border-top:2px solid #AAA}
table.dossiers td.c,th.c{text-align:center}
/* colonnes ajustées au contenu : numéro et dates (l'en-tête passe à la ligne si besoin) */
table.dossiers .fit{width:1%}
table.dossiers td.fit{white-space:nowrap}
/* responsable : 25 caractères, retour à la ligne au-delà */
table.dossiers .resp{width:25ch;min-width:25ch;max-width:25ch;overflow-wrap:anywhere}
td.nom{font-weight:700}
td.av{white-space:pre-wrap}
td.act{white-space:nowrap;text-align:right;width:1%}
.dossier-actions{font-weight:400;font-size:.8rem;margin-top:4px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.statut{padding:8px 12px;background:#D8D4CE;font-size:.85rem}
.vide{padding:30px;text-align:center;color:var(--discret);background:#fff}
.card{max-width:640px;margin:20px auto;background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.card h2{margin:0;background:var(--bordeaux);color:#fff;padding:10px 16px;font-size:1.05rem;border-radius:4px 4px 0 0}
.card .body{padding:16px}
label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 4px}
label.check{font-weight:400;display:flex;gap:8px;align-items:center}
select,input[type=text],input[type=password],input[type=date],input[type=number],textarea{
  width:100%;padding:8px;border:1px solid #bbb;border-radius:3px;font:inherit}
select:focus,input:focus,textarea:focus,.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
textarea{min-height:110px;resize:vertical}
.hint{font-size:.8rem;color:var(--discret);margin-top:3px}
.actions{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
table.simple{width:100%;border-collapse:collapse}
table.simple td,table.simple th{padding:6px;border-bottom:1px solid #eee;text-align:left}
@media (max-width:700px){.bar .spacer{display:none}}
.dossier-actions .btn.link{padding-left:0}