/* Jetons et composants communs à crm.html et à index.html (cockpit).
   Chaque page charge ce fichier avant son propre <style>, qui reste
   prioritaire : la mise en page et les jetons propres à un écran
   (--top, --list, --job, --job-bg, --drawer) restent dans la page ;
   l'harmonisation complète des composants du cockpit est la Task 10. */
:root{
  color-scheme:light;
  --ground:#eef1f5; --surface:#fff; --s2:#f5f8fb; --s3:#e9eef4;
  --ink:#15212f; --ink2:#51637a; --ink3:#8496a8;
  --line:#dae1ea; --line2:#e9eef4;
  --accent:#2f6bd6; --accent-ink:#1d4fa6; --accent-bg:#e8f0fc;
  --crit:#cb4034; --crit-bg:#fbe9e7; --crit-ink:#96291f;
  --warn:#b3781a; --warn-bg:#fbf1de; --warn-ink:#7d520d;
  --good:#2b8865; --good-bg:#e3f4ec; --good-ink:#1b5f45;
  --sh:0 1px 2px rgba(20,33,47,.06),0 8px 22px rgba(20,33,47,.07);
  --sh2:0 4px 12px rgba(20,33,47,.12),0 24px 48px rgba(20,33,47,.16);
  --r:10px; --r2:7px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --sans:"IBM Plex Sans",system-ui,sans-serif; --disp:"Archivo",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}

/* ---------- contrôles ---------- */
input,select,textarea{font:inherit;color:var(--ink);background:var(--s2);border:1px solid var(--line);border-radius:var(--r2);padding:6px 8px;transition:border-color 120ms ease,background 120ms ease}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-bg)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:6px 11px;border-radius:var(--r2);font-weight:500;cursor:pointer;text-decoration:none;transition:transform 160ms var(--ease-out),background 120ms ease,border-color 120ms ease}
.btn:hover{background:var(--s2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink)}
.btn.danger{color:var(--crit-ink);border-color:#f0c9c4;background:var(--crit-bg)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--s2)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--ink2);padding:3px 10px;border-radius:99px;font-size:12px;font-weight:500;cursor:pointer;transition:background 120ms ease,color 120ms ease,transform 120ms var(--ease-out)}
.tag{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--s3);color:var(--ink2);font-weight:500;white-space:nowrap;vertical-align:middle}
.tag.good{background:var(--good-bg);color:var(--good-ink)} .tag.warn{background:var(--warn-bg);color:var(--warn-ink)} .tag.crit{background:var(--crit-bg);color:var(--crit-ink)} .tag.acc{background:var(--accent-bg);color:var(--accent-ink)}
.mono{font-family:var(--mono);font-size:12px}
.muted{color:var(--ink3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;margin-bottom:14px}

/* Fenêtre d'action : avant → après, fiches, note, ajout */
.act-ov{position:fixed;inset:0;z-index:300;background:rgba(21,33,47,.38);display:flex;align-items:center;justify-content:center;padding:20px}
.act-md{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh2);width:min(620px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:20px 22px;display:flex;flex-direction:column;gap:14px;opacity:1;transform:scale(1);transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)}
@starting-style{.act-md{opacity:0;transform:scale(.98)}}
.act-md h3{margin:0;font-family:var(--disp);font-size:17px}
.act-diff{width:100%;border-collapse:collapse;font-size:13px}
.act-diff td{padding:6px 8px;border-bottom:1px solid var(--line2);vertical-align:top}
.act-diff td:first-child{color:var(--ink2);width:32%}
.act-diff .old{color:var(--ink3);text-decoration:line-through}
.act-diff .new{color:var(--good-ink);font-weight:500}
.act-where{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--ink2)}
.act-note{margin:0;white-space:pre-wrap;font:12.5px/1.5 var(--mono);background:var(--s2);border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;color:var(--ink)}
.act-add label{display:block;font-weight:600;margin-bottom:6px}
.act-add textarea{width:100%;min-height:72px;resize:vertical}
.act-foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.act-warn{background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--r2);padding:8px 10px;font-size:12.5px}
@media (prefers-reduced-motion:reduce){.act-md{transition:none}}

/* Menu « Plus » : actions secondaires repliées, un seul composant partagé
   (crm.html et index.html). Clavier : Entrée/Espace ouvre (natif sur un
   bouton), flèches déplacent dans la liste, Échap ferme et rend le focus
   au bouton, clic ou Tab en dehors ferme aussi. */
.mp-wrap{position:relative;display:inline-block}
.mp-list{position:absolute;right:0;top:calc(100% + 4px);z-index:80;min-width:190px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:var(--sh2);padding:4px;display:flex;flex-direction:column;gap:1px}
/* display:flex l'emporterait sur l'attribut hidden : le menu reste fermé par défaut. */
.mp-list[hidden]{display:none}
.mp-item{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);
  font:inherit;font-size:13px;padding:7px 10px;border-radius:5px;cursor:pointer;
  text-decoration:none;transition:background 120ms ease}
.mp-item:hover{background:var(--s2)}
.mp-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-bg)}
.mp-wrap>button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mp-item{transition:none}}