:root{
  --bg:#f5f6f8; --card:#fff; --ink:#1f2430; --muted:#6b7280; --line:#e5e7eb;
  --ok:#16a34a; --soon:#d97706; --late:#dc2626; --none:#9ca3af;
  --accent:#2563eb; --accent-d:#1d4ed8; --rouge:#e30613;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.5;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent)}
header{background:#fff;border-bottom:1px solid var(--line);padding:12px 18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:40}
header h1{font-size:17px;margin:0;font-weight:700;white-space:nowrap}
.grow{flex:1}
.qui{font-size:12.5px;color:var(--muted)}

/* Marque : logo + titre, la version sous le titre */
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  flex-shrink:0}
.marque .logo{height:38px;width:auto;display:block}
.marque .titres{display:flex;flex-direction:column;line-height:1.15}
.marque .t1{font-size:17px;font-weight:800;letter-spacing:.01em;white-space:nowrap}
.marque .t2{font-size:11px;color:var(--muted);font-weight:500}

/* Onglets. La barre occupe la place restante pour que « Administration »,
   poussé par margin-left:auto, se retrouve isolé à droite. */
.tabs{display:flex;gap:4px;flex-wrap:wrap;flex:1;min-width:0}
.tab{font-size:13.5px;padding:6px 11px;border-radius:8px;text-decoration:none;color:var(--ink)}
.tab:hover{background:#f3f4f6}
.tab.on{background:var(--accent);color:#fff;font-weight:600}
.tab.admin{margin-left:auto;border:1px solid var(--line);color:var(--muted)}
.tab.admin:hover{background:#f3f4f6;color:var(--ink)}
.tab.admin.on{background:var(--ink);border-color:var(--ink);color:#fff}
.wrap{max-width:1120px;margin:0 auto;padding:18px 16px 90px}
.btn{display:inline-block;font:inherit;font-size:14px;cursor:pointer;text-decoration:none;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;padding:8px 13px}
.btn:hover{background:#f3f4f6}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--accent-d)}
.btn.mini{padding:5px 10px;font-size:13px}
.btn.danger{color:var(--late);border-color:#fecaca}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
select,input,textarea{font:inherit;font-size:14px;border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;background:#fff;color:var(--ink);max-width:100%}
input[type=checkbox]{width:auto}
textarea{width:100%}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.grp{background:var(--card);border:1px solid var(--line);border-radius:12px;
  margin-bottom:16px;overflow:hidden}
.grp h2{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  background:#fafbfc;border-bottom:1px solid var(--line);padding:9px 14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grp h2 .mini{margin-left:auto;text-transform:none;letter-spacing:0;font-size:12px;font-weight:400}
.pad{padding:14px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:8px 12px;
  border-bottom:1px solid var(--line)}
td{padding:9px 12px;border-bottom:1px solid #f1f2f4;vertical-align:middle}
tr:last-child td{border-bottom:none}
tr.clk{cursor:pointer}
tr.clk:hover{background:#f8fafc}
.sub2{font-size:12px;color:var(--muted)}
.vide{padding:26px;text-align:center;color:var(--muted);font-size:14px}
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:20px;border:1px solid}
.b-ok{color:var(--ok);border-color:#bbf7d0;background:#f0fdf4}
.b-soon{color:var(--soon);border-color:#fde68a;background:#fffbeb}
.b-late{color:var(--late);border-color:#fecaca;background:#fff5f5}
.b-none{color:var(--none);border-color:var(--line);background:#f9fafb}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:9px 12px;text-decoration:none;color:var(--ink);display:block}
.kpi.sel{outline:2px solid var(--accent)}
.kpi b{font-size:21px;display:block;line-height:1.15}
.kpi span{font-size:12px;color:var(--muted)}
.n-late{color:var(--late)}.n-soon{color:var(--soon)}.n-ok{color:var(--ok)}.n-none{color:var(--none)}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frm label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.frm label.full{grid-column:1/-1}
.frm label.ligne{flex-direction:row;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.sfoot{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);
  background:#fafbfc;flex-wrap:wrap}
.msg{border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:14px;border:1px solid}
.msg.ok{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.msg.err{background:#fff5f5;border-color:#fecaca;color:var(--late)}
.msg.soon{background:#fffbeb;border-color:#fde68a;color:#b45309}
.msg.info{background:#f0f9ff;border-color:#bae6fd;color:#0369a1}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:13px;border:1px solid var(--line);border-radius:20px;padding:5px 11px;
  cursor:pointer;background:#fff;user-select:none;display:inline-flex;align-items:center;gap:6px}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chip input{display:none}
.tag{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid}
.r-admin{color:#7c3aed;border-color:#ddd6fe;background:#f5f3ff}
.r-directeur{color:#0369a1;border-color:#bae6fd;background:#f0f9ff}
.r-responsable{color:#0f766e;border-color:#99f6e4;background:#f0fdfa}
.r-comptable{color:#b45309;border-color:#fde68a;background:#fffbeb}
.r-technicien{color:#4d7c0f;border-color:#d9f99d;background:#f7fee7}
.r-demandeur{color:#6b7280;border-color:#e5e7eb;background:#f9fafb}
.off{opacity:.45}
.gal{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.gal a{display:block;width:92px;height:92px;border-radius:9px;overflow:hidden;border:1px solid var(--line)}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.docs a{display:inline-block;font-size:13px;padding:4px 9px;border:1px solid var(--line);
  border-radius:8px;margin:3px 4px 0 0;text-decoration:none;color:var(--ink);background:#fff}
.mx{width:100%;border-collapse:collapse;font-size:13px}
.mx th{padding:7px 8px;text-align:center;border-bottom:1px solid var(--line)}
.mx th:first-child{text-align:left}
.mx td{padding:6px 8px;text-align:center;border-bottom:1px solid #f1f2f4}
.mx td:first-child{text-align:left;font-weight:600}
.mx select{font-size:12.5px;padding:3px 6px;border-radius:7px}
.grpbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;background:var(--card);
  border:2px solid var(--accent);border-radius:11px;padding:10px 12px;
  display:none;align-items:center;gap:8px;flex-wrap:wrap;box-shadow:0 4px 18px rgba(0,0,0,.22)}
.grpbar.on{display:flex}
.connexion{max-width:400px;margin:8vh auto;padding:0 16px}
.connexion .grp{margin-bottom:0}
/* Page de connexion et écrans hors session */
body.centre{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:20px}
.carte-connexion{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;width:100%;max-width:400px;box-shadow:0 2px 14px rgba(0,0,0,.05);
  display:flex;flex-direction:column;gap:12px}
.carte-connexion h1{font-size:19px;margin:0;text-align:center}
.carte-connexion .sub{margin:0 0 4px;text-align:center;font-size:13px;color:var(--muted)}
.carte-connexion label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.carte-connexion .sub2{text-align:center;margin:0}
.btn.large{padding:11px 16px;font-size:15px;width:100%;text-align:center;margin-top:4px}
.msg.late{background:#fff5f5;border-color:#fecaca;color:var(--late);border-width:1px;border-style:solid}
footer.mini{font-size:12px;color:var(--muted);margin-top:16px;text-align:center}
footer{max-width:1120px;margin:0 auto;padding:16px;font-size:12px;color:var(--muted);text-align:center}
@media(max-width:760px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .frm{grid-template-columns:1fr}
  header{padding:10px 12px}
  .qui{display:none}
  .marque .logo{height:30px}
  .marque .t1{font-size:15px}
  /* Sur mobile la barre passe à la ligne : margin-left:auto n'a plus de
     sens, l'onglet reprend sa place dans le flux. */
  .tabs{flex:1 0 100%}
  .tab.admin{margin-left:0}
}
@media print{header,.bar,.btn,.grpbar,footer{display:none!important}}