/* ===== MIS Atelier ===== */
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url(../fonts/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-display: swap; src: url(../fonts/figtree-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url(../fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700 900; font-display: swap; src: url(../fonts/figtree-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage"; font-weight: 700; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage"; font-weight: 800; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); }

:root {
  --bg: #eef0f4; --surface: #ffffff; --surface-2: #f7f8fa; --line: #dde2ea; --line-2: #eef0f4;
  --text: #111827; --muted: #5b6475; --faint: #8a93a3;
  --navy: #0f172a; --accent: #1d4ed8; --accent-bg: #eef3ff; --accent-bd: #9db4f0;
  --brand: #c0007f; --brand-bg: #fdf0f8; --teal: #0f766e; --teal-bg: #e7f6f3;
  --ok: #15803d; --ok-bg: #e9f8ef; --warn: #b45309; --warn-bg: #fdf3e6; --danger: #b91c1c; --danger-bg: #fdecec;
  --col-afaire: #64748b; --col-encours: #2563eb; --col-attente: #d97706; --col-pret: #15803d; --col-rendu: #475569; --col-sav: #9333ea;
  --radius: 14px; --shadow: 0 1px 2px rgba(15,23,42,.05), 0 2px 10px rgba(15,23,42,.05);
  --display: "Bricolage", "Figtree", system-ui, sans-serif;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
body.theme-dark {
  --bg: #0b1120; --surface: #131c2e; --surface-2: #0f172a; --line: #243149; --line-2: #1b2539;
  --text: #e8eef8; --muted: #9fb0cb; --faint: #6f81a0; --accent-bg: #172554; --shadow: 0 2px 10px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-size: 14.5px; line-height: 1.4; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
.hidden { display: none !important; }
.spacer { flex: 1; }
h1.title { font-family: var(--display); font-weight: 800; font-size: 28px; margin: 0; letter-spacing: -.01em; }
.sub { color: var(--muted); font-size: 14px; }

/* ---------- barre du haut ---------- */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 22px; padding: 0 24px; height: 60px; background: var(--navy); color: #e2e8f0; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 18px; white-space: nowrap; }
.brand .logo { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); display: grid; place-items: center; font-family: "Figtree"; font-size: 11.5px; letter-spacing: .04em; }
.nav { display: flex; gap: 2px; }
.nav a { color: #cbd5e1; text-decoration: none; padding: 8px 13px; border-radius: 8px; font-weight: 600; }
.nav a:hover { background: #1e293b; }
.nav a.active { background: #1e293b; color: #fff; box-shadow: inset 0 -2px 0 var(--brand); }
.search { position: relative; }
.search input { width: 280px; padding: 9px 14px 9px 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.55); background: var(--surface); color: var(--text);
  font-size: 14.5px; box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: 3px solid rgba(255,255,255,.55); outline-offset: 1px; }
.search::before { content: "⌕"; position: absolute; left: 13px; top: 7px; color: var(--muted); font-size: 17px; z-index: 1; }
.search-results { position: absolute; right: 0; top: 42px; width: 460px; max-height: 65vh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.25); padding: 6px; }
.search-results .res { display: flex; gap: 10px; align-items: center; padding: 9px; border-radius: 8px; color: inherit; text-decoration: none; }
.search-results .res:hover { background: var(--surface-2); }
.search-results .m { color: var(--muted); font-size: 13px; }
.search-results .d { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.live { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #94a3b8; white-space: nowrap; }
.live .dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; }
.live.on .dot { background: #22c55e; }
.userbox { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #e2e8f0; white-space: nowrap; font-weight: 600; }
.btn-ghost-dark { background: transparent; border: 1px solid #334155; color: #cbd5e1; border-radius: 8px; padding: 5px 10px; cursor: pointer; font-weight: 500; }
.btn-ghost-dark:hover { background: #1e293b; }

/* ---------- boutons, champs ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; text-decoration: none; color: var(--text); white-space: nowrap; }
.btn:hover { border-color: #c3cad6; background: var(--surface-2); }
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn.brand { background: var(--brand); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(192,0,127,.25); }
.btn.teal { background: var(--teal); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(15,118,110,.25); }
.btn.ok { background: var(--ok); color: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(21,128,61,.25); }
.btn.danger { color: var(--danger); }
.btn.big { padding: 14px 24px; font-size: 16.5px; font-weight: 800; border-radius: 12px; }
.btn.small { padding: 6px 10px; font-size: 13px; border-radius: 8px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary:hover, .btn.brand:hover, .btn.teal:hover, .btn.ok:hover { filter: brightness(1.08); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label, .lbl { font-size: 13px; font-weight: 600; color: var(--muted); }
.input, .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.input.big { font-size: 19px; padding: 13px 15px; border: 2px solid var(--accent); border-radius: 12px; }
.hint { font-size: 12.5px; color: var(--muted); }
.suffix { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.suffix input { border: 0 !important; box-shadow: none !important; min-width: 0; }
.suffix span { padding: 0 12px; color: var(--muted); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* chips / tuiles */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; cursor: pointer; }
.chip:hover { border-color: #aab4c5; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.soft.on { background: var(--accent-bg); color: var(--accent); }
.chip.green.on { background: var(--ok-bg); border-color: var(--ok); color: #166534; }
.chip.teal.on { background: var(--teal-bg); border-color: var(--teal); color: #115e59; }
.chip.square { border-radius: 10px; padding: 11px 16px; font-size: 15px; }
.chip.mini { padding: 6px 11px; font-size: 13px; font-weight: 500; background: var(--surface-2); border-width: 1px; }
.chip svg { flex-shrink: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.tile { height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 15px; }
.tile:hover { border-color: #aab4c5; }
.tile.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.teal-mode .tile.on { border-color: var(--teal); background: var(--teal-bg); color: var(--teal); }
.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; color: #fff; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--col-afaire); }
.tag { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: var(--teal); color: #fff; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 12px; background: #dfe3ea; }
.seg button, .seg a { border: 0; background: transparent; padding: 9px 16px; border-radius: 9px; font-weight: 700; font-size: 14.5px; cursor: pointer; color: var(--text); text-decoration: none; }
.seg .on { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.seg .on.teal { color: var(--teal); }

/* ---------- cartes ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; }
.panel h2 { margin: 0 0 12px; font-size: 16px; }

/* ---------- accueil : étapes ---------- */
.intake { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; padding: 20px 28px 40px; max-width: 1500px; margin: 0 auto; }
.intake-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.progress { width: 220px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress > div { height: 6px; background: var(--accent); border-radius: 99px; transition: width .25s; }
.teal-mode .progress > div { background: var(--teal); }
.steps { display: flex; flex-direction: column; gap: 10px; }
.step { background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); transition: box-shadow .15s, border-color .15s; }
.step.open { border-color: var(--accent-bd); box-shadow: 0 6px 22px rgba(29,78,216,.10); }
.teal-mode .step.open { border-color: #8fd0c4; box-shadow: 0 6px 22px rgba(15,118,110,.10); }
.step-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 20px; background: none; border: 0; cursor: pointer; text-align: left; }
.step-num { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--line-2); color: var(--faint); }
.step.open .step-num { background: var(--accent); color: #fff; }
.teal-mode .step.open .step-num { background: var(--teal); }
.step.done .step-num { background: #dcfce7; color: var(--ok); }
.step-title { font-weight: 700; font-size: 17px; }
.step.future .step-title { color: var(--faint); }
.step-sum { margin-left: auto; color: var(--text); font-weight: 500; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-body { padding: 0 20px 20px 64px; display: flex; flex-direction: column; gap: 14px; }
.step:not(.open) .step-body { display: none; }
.step-actions { display: flex; justify-content: flex-end; gap: 10px; }
.results { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.result { display: flex; align-items: center; gap: 14px; padding: 11px 16px; background: var(--surface); border: 0; border-bottom: 1px solid var(--line-2); cursor: pointer; text-align: left; }
.result:hover, .result.kb { background: var(--accent-bg); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #e8edfb; color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.result .who { display: flex; flex-direction: column; gap: 1px; }
.result .who b { font-size: 16px; }
.result .who span, .muted { color: var(--muted); font-size: 13px; }
.result .hist { margin-left: auto; font-size: 12.5px; color: var(--text); background: var(--surface-2); padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.client-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: #f5f8ff; border: 1px solid #c9d6f6; }
.teal-mode .client-card { background: #f1faf8; border-color: #b8e2da; }
.new-client { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 10px; border: 1.5px dashed var(--accent); background: #f5f8ff; color: var(--accent); font-weight: 700; font-size: 15px; cursor: pointer; }
.teal-mode .new-client { border-color: var(--teal); color: var(--teal); background: #f1faf8; }

/* bande des jours */
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.day-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; }
.day-btn .dn { font-size: 13px; color: var(--muted); font-weight: 600; }
.day-btn .dd { font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1; }
.day-btn .dm { font-size: 12px; color: var(--muted); }
.day-btn .st { font-size: 12px; font-weight: 700; margin-top: 3px; }
.day-btn.libre .st { color: var(--ok); } .day-btn.reserve .st { color: var(--warn); } .day-btn.complet .st { color: var(--danger); }
.day-btn.urgence .st { color: var(--muted); }
.day-btn.complet, .day-btn.urgence { background: var(--surface-2); }
.day-btn.on { border-color: var(--brand); background: var(--brand-bg); }
.teal-mode .day-btn.on { border-color: var(--teal); background: var(--teal-bg); }
.day-btn .badge { position: absolute; top: -10px; padding: 2px 8px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; }
.teal-mode .day-btn .badge { background: var(--teal); }
.segs { display: flex; gap: 3px; margin-top: 6px; }
.segs span { width: 12px; height: 9px; border-radius: 3px; background: #22c55e; }          /* place libre */
.segs span.full { background: #dc2626; }                                                  /* place prise */
.segs span.res { background: #fcd34d; }                                                   /* réserve urgences */
.segs span.urg { outline: 2px solid #dc2626; outline-offset: 1px; margin: 0 2px; }        /* place d'urgence : cerclée de rouge */
.day.today .segs span.urg { box-shadow: 0 0 0 4px #fff; }                                  /* lisible sur le bandeau magenta du jour */
.legend i.urg-leg { background: #fcd34d; outline: 2px solid #dc2626; outline-offset: 1px; margin-left: 3px; }
.legend { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--text); flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 7px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; }

/* récap */
.recap { position: sticky; top: calc(80px + var(--mb, 0px)); display: flex; flex-direction: column; gap: 14px; align-self: start; }
.ticket { background: var(--surface); border-radius: 16px; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); }
.ticket-head { padding: 15px 20px; background: var(--navy); color: #fff; display: flex; align-items: baseline; gap: 10px; }
.teal-mode .ticket-head { background: var(--teal); }
.ticket-head small { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.teal-mode .ticket-head small { color: #ccefe9; }
.ticket-head b { font-family: var(--display); font-size: 22px; }
.ticket-rows { padding: 6px 20px 12px; }
.ticket-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.ticket-row span:first-child { width: 104px; flex-shrink: 0; color: var(--muted); font-weight: 600; }
.ticket-row span:last-child { font-weight: 600; word-break: break-word; }
.ticket-row.empty span:last-child { color: #9aa3b2; }

/* ---------- overlay de confirmation ---------- */
.overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: grid; place-items: center; z-index: 60; padding: 16px; }
.overlay .box { width: min(580px, 100%); background: var(--surface); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.overlay .ok-ic { width: 56px; height: 56px; border-radius: 50%; background: #dcfce7; color: var(--ok); display: grid; place-items: center; }
.overlay h3 { margin: 0; font-family: var(--display); font-size: 25px; }
.overlay .lines { display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; color: var(--text); }
.overlay .sms-pret { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px;
  background: rgba(29,78,216,.08); border: 1px solid rgba(29,78,216,.3); }
.overlay .sms-pret > span { flex: 1; display: flex; flex-direction: column; }
.overlay .sms-pret small { color: var(--muted); }

/* ---------- planning ---------- */
.toolbar { display: flex; align-items: center; gap: 12px; padding: 16px 24px 8px; flex-wrap: wrap; }
.toolbar h1 { font-size: 20px; margin: 0 6px; }
.plegend { display: flex; gap: 14px; margin-left: auto; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.plegend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; background: var(--c); vertical-align: -1px; }
.playout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 8px 24px 40px; align-items: start; }
@media (max-width: 1250px) { .playout { grid-template-columns: 1fr; } }
.week-title { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 10px; font-size: 17px; position: sticky; top: calc(60px + var(--mb, 0px)); z-index: 5; background: var(--bg); padding: 8px 0; }
.week-title .wt { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 6px; background: var(--brand); color: #fff; }
.week-title .wt.next { background: var(--accent); } .week-title .wt.past { background: #94a3b8; }
.week-title .sub { font-weight: 500; }
.week-block { margin-bottom: 22px; }
.past-sep { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin: 26px 0 12px; }
.past-sep::before, .past-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.day { display: grid; grid-template-columns: 110px minmax(0, 1fr) 190px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
.day-label { padding: 12px 12px; display: flex; flex-direction: column; gap: 2px; background: #fbf1f8; color: #86198f; }
.day-label .dn { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.day-label .dd { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; }
.day-label .dm { font-size: 12px; }
.day-label .reste { margin-top: 8px; font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.day-label .reste small { font-weight: 600; opacity: .8; }
.day-label .segs span { flex: 1; width: auto; }
.day-label .note { font-size: 11px; margin-top: 2px; }
.day.today { border-color: var(--brand); }
.day.today .day-label { background: var(--brand); color: #fff; }
.day.past .day-label { background: var(--surface-2); color: var(--muted); }
.day-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.row-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.row-title::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.slots { display: grid; grid-template-columns: repeat(var(--slots, 5), minmax(0, 1fr)); gap: 8px; }
.card { --c: #64748b; position: relative; min-height: 84px; padding: 9px 10px; border-radius: 10px; cursor: pointer; background: color-mix(in srgb, var(--c) 8%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--c) 32%, var(--line)); display: flex; flex-direction: column; gap: 3px; min-width: 0; text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.12); }
.card .client { font-weight: 800; text-transform: uppercase; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .foot { margin-top: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.card .numf { font-size: 11px; color: var(--muted); margin-left: auto; }
.card .badge { position: absolute; top: -9px; right: 8px; padding: 1px 8px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 800; }
.card.rdv { box-shadow: 0 0 0 2px var(--brand); }
.card.late { border-color: var(--danger); background: #fdf6f6; }
.card.rendu { opacity: .6; }
.card.flash, .tcard.flash { animation: flash 1.8s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 4px #facc15; } 100% { box-shadow: 0 0 0 0 transparent; } }
.card.dragging { opacity: .4; }
.slot-empty { min-height: 84px; border: 1.5px dashed var(--line); border-radius: 10px; display: grid; place-items: center; color: #b6c1d1; font-size: 20px; cursor: pointer; background: transparent; }
.slot-empty:hover { border-color: var(--accent); color: var(--accent); }
.drop-over { outline: 3px solid #facc15; outline-offset: 1px; }
.site-list { display: flex; flex-direction: column; gap: 6px; }
.site-line { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; background: #f0f9ff; border: 1px solid #bae6fd; cursor: pointer; text-decoration: none; color: inherit; }
.site-line .h { font-weight: 800; color: #0369a1; min-width: 60px; }
.site-line .n { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-line { align-self: flex-start; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.add-line:hover { color: var(--accent); border-color: var(--accent); }
.neuf-col { padding: 10px 12px; border-left: 1px solid var(--line-2); background: #f7fbfa; display: flex; flex-direction: column; gap: 5px; }
.neuf-col .row-title { color: var(--teal); }
.neuf-col .row-title::after { background: #d3ece7; }
.nitem { --c: #0f766e; display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); cursor: pointer; text-decoration: none; color: inherit; }
.nitem b { font-size: 12.5px; text-transform: uppercase; }
.nitem span { font-size: 11.5px; color: var(--text); }
.nitem.done { background: var(--ok-bg); }
.nfree { font-size: 12px; color: var(--muted); }
.aside { position: sticky; top: calc(72px + var(--mb, 0px)); display: flex; flex-direction: column; gap: 12px; }
.abox { background: var(--surface); border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.abox h2 { margin: 0; padding: 10px 14px; font-size: 13.5px; color: #fff; display: flex; justify-content: space-between; }
.abox.green h2 { background: var(--ok); } .abox.red h2 { background: var(--danger); } .abox.orange h2 { background: var(--warn); }
.abox .list { max-height: 34vh; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.aitem { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); text-decoration: none; color: inherit; }
.aitem:hover { background: var(--line-2); }
.aitem b { font-size: 13.5px; }
.aitem span { font-size: 12px; color: var(--muted); }
.aitem .late { color: var(--danger); font-weight: 700; }
.abox .empty { color: var(--muted); padding: 12px; text-align: center; font-size: 13px; }
.load-more { display: block; margin: 8px auto 30px; }

/* ---------- fiche ---------- */
.page { max-width: 1280px; margin: 0 auto; padding: 20px 28px 40px; display: flex; flex-direction: column; gap: 16px; }
.fiche-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; font-size: 14.5px; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; font-weight: 500; }
.hist { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.hist b { color: var(--text); font-weight: 600; }
.etat-grid { display: flex; flex-direction: column; gap: 8px; }
.etat-grid .grp { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.opt { --c: #64748b; border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, var(--surface)); border-radius: 9px; padding: 7px 10px; cursor: pointer; font-size: 12.5px; font-weight: 700; }
.opt.cur { background: var(--c); color: #fff; }

/* ---------- rapport ---------- */
.rapport { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.counter { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid #c6e9d3; background: #f3fbf6; }
.counter.bad { border-color: #f5caca; background: #fdf6f6; }
.counter b { flex: 1; }
.counter button { width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); font-size: 18px; font-weight: 700; cursor: pointer; }
.counter .v { min-width: 28px; text-align: center; font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ok); }
.counter.bad .v { color: var(--danger); }
.forfaits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.forfait { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; text-align: left; }
.forfait.on { border-color: var(--ok); background: #f3fbf6; }
.forfait .box { width: 18px; height: 18px; border-radius: 5px; border: 2px solid #aab4c5; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.forfait.on .box { border-color: var(--ok); background: var(--ok); }
.forfait .lib { flex: 1; font-weight: 600; }
.total { font-family: var(--display); font-size: 30px; font-weight: 800; }
.actionbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 28px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
.segbtns { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.segbtns button { padding: 9px 16px; border: 0; background: var(--surface); font-weight: 700; cursor: pointer; }
.segbtns button + button { border-left: 1px solid var(--line); }

/* ---------- atelier (kanban) ---------- */
body.kanban { overflow: hidden; }
.board-head { display: flex; align-items: center; gap: 14px; padding: 12px 20px; }
.clock { font-family: var(--display); font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.date-long { font-size: 16px; color: var(--muted); text-transform: capitalize; }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0 16px 16px; height: calc(100vh - 60px - 70px); }
.col { display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; min-height: 0; }
.col-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 3px solid var(--cc); }
.col-head h2 { margin: 0; font-size: 19px; text-transform: uppercase; letter-spacing: .05em; }
.col-head .n { margin-left: auto; min-width: 34px; text-align: center; background: var(--cc); color: #fff; font-weight: 800; font-size: 17px; border-radius: 99px; padding: 2px 10px; }
.col-body { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.col.drop-over { outline: 3px dashed #facc15; outline-offset: -3px; }
.tcard { --c: #64748b; position: relative; background: var(--surface); border: 1px solid var(--line); border-top: 5px solid var(--c); border-radius: 12px; padding: 12px 14px; cursor: grab; box-shadow: var(--shadow); }
.tcard .client { font-size: 21px; font-weight: 800; text-transform: uppercase; line-height: 1.15; word-break: break-word; }
.tcard .meta { font-size: 15px; color: var(--muted); margin-top: 3px; }
.tcard .row { margin-top: 8px; }
.tcard .pill { font-size: 12.5px; padding: 3px 10px; }
.tcard .age { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.tcard .age.old { color: #f87171; }
.tcard .badge { position: absolute; top: -10px; right: 10px; padding: 2px 9px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; }
.tcard.late { box-shadow: 0 0 0 2px var(--danger), var(--shadow); }
.tcard.rendu { opacity: .55; padding: 8px 12px; }
.tcard.rendu .client { font-size: 15px; }
body.dense .tcard .client { font-size: 16px; } body.dense .tcard { padding: 8px 10px; } body.dense .tcard .meta { font-size: 13px; }
.readonly .tcard { cursor: default; }
.popover { position: fixed; z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.45); padding: 12px; width: 370px; max-height: 80vh; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.popover h4 { margin: 0; font-size: 16px; text-transform: uppercase; }
.popover .opts { display: flex; flex-wrap: wrap; gap: 5px; }

/* ---------- admin ---------- */
.admin { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.admin-menu { background: var(--surface); border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: calc(60px + var(--mb, 0px)); height: calc(100vh - 60px - var(--mb, 0px)); overflow-y: auto; }
.am-head { display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 6px; }
.am-t { font-family: var(--display); font-size: 19px; font-weight: 800; }
.am-filtre { width: 100%; padding: 8px 11px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface-2); font-size: 13.5px; }
.am-filtre:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.am-grp { border-radius: 12px; }
.am-gh { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: transparent; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 13.5px; color: var(--text); text-align: left; }
.am-gh:hover { background: var(--surface-2); }
.am-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent); flex-shrink: 0; }
.am-gt { flex: 1; }
.am-chev { color: var(--faint); transition: transform .15s; }
.am-grp:not(.open) .am-chev { transform: rotate(-90deg); }
.am-grp:not(.open) .am-items { display: none; }
.am-items { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 6px 22px; margin-left: 13px; border-left: 2px solid color-mix(in srgb, var(--gc) 20%, var(--line-2)); }
.am-it { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; }
.am-it:hover { background: var(--surface-2); }
.am-it small { font-size: 11px; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 99px; padding: 1px 7px; }
.am-it.on { background: color-mix(in srgb, var(--gc) 12%, transparent); color: var(--gc); box-shadow: inset 3px 0 0 var(--gc); }
.am-it.on small { background: var(--gc); color: #fff; }
.ordre { display: inline-flex; gap: 2px; }
.admin-main { padding: 22px 30px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.trow { display: grid; gap: 10px; align-items: center; padding: 7px 2px; border-top: 1px solid var(--line-2); }
.thead { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: 0; }
.trow input[type=text], .trow input:not([type]), .trow select { padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 9px; width: 100%; background: var(--surface); }
.switch { width: 50px; height: 28px; border-radius: 99px; border: 0; background: #cfd6e1; cursor: pointer; position: relative; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.switch.on { background: var(--ok); }
.switch.on::after { left: 25px; }
.iconbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--text); }
.iconbtn.del { color: var(--danger); border-color: #f0c4c4; font-weight: 700; }
.poids { display: flex; gap: 4px; }
.poids button { width: 36px; height: 34px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; cursor: pointer; }
.poids button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tech { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tech.off { opacity: .55; }
.tech .av { width: 46px; height: 46px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; box-shadow: 0 0 0 1px #cfd6e1; }
.swatch.on { box-shadow: 0 0 0 2px #111827; }
.setting { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.setting .v { min-width: 64px; text-align: center; font-family: var(--display); font-size: 22px; font-weight: 800; }

/* ---------- stats ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.kpi .k { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kpi .v { font-family: var(--display); font-size: 28px; font-weight: 800; margin-top: 2px; }
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 190px; padding-top: 10px; }
.bar { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; font-size: 11.5px; color: var(--muted); }
.bar .b { width: 100%; max-width: 38px; background: var(--accent); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.bar .n { font-weight: 700; color: var(--text); }
.hbar { display: grid; grid-template-columns: 220px 1fr 50px; gap: 10px; align-items: center; font-size: 13.5px; padding: 4px 0; }
.hbar .track { height: 10px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.hbar .track div { height: 10px; background: var(--brand); border-radius: 99px; }

/* ---------- divers ---------- */
.toasts { position: fixed; bottom: 18px; right: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: #0f172a; color: #f1f5f9; padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 13.5px; max-width: 400px; }
.toast.err { background: #b91c1c; }
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 20% 0%, #1e3a8a 0%, transparent 60%), radial-gradient(900px 500px at 100% 100%, #86198f 0%, transparent 55%), #0b1120; padding: 16px; }
.login-card { width: min(380px, 100%); background: var(--surface); border-radius: 18px; padding: 28px; box-shadow: 0 30px 80px rgba(0,0,0,.4); display: flex; flex-direction: column; gap: 12px; }
.login-card .brand { color: var(--text); margin-bottom: 6px; }
.login-card .brand .logo { color: #fff; }
.login-card .check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.login-card .err { color: var(--danger); font-size: 13px; min-height: 18px; }
.login-card .btn { justify-content: center; }
dialog.overlay-dlg { border: 0; padding: 0; background: transparent; }
dialog.overlay-dlg::backdrop { background: rgba(15,23,42,.55); }
dialog .box { background: var(--surface); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }

/* ---------- À facturer ---------- */
.bell { position: relative; display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid #334155; color: #cbd5e1; border-radius: 9px; padding: 6px 11px; cursor: pointer; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.bell:hover { background: #1e293b; }
.bell.has { border-color: #f59e0b; color: #fde68a; }
.bell b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #f59e0b; color: #1f1300; font-size: 12px; display: grid; place-items: center; }
.drawer { position: fixed; top: 60px; right: 0; bottom: 0; width: min(480px, 100vw); z-index: 50; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -18px 0 50px rgba(15,23,42,.18); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line-2); }
.drawer-head h2 { margin: 0 0 4px; font-family: var(--display); font-size: 21px; display: flex; align-items: center; gap: 8px; }
.drawer-head .cnt { font-family: "Figtree"; font-size: 13px; padding: 2px 9px; border-radius: 99px; background: var(--warn-bg); color: var(--warn); }
.drawer-head p { margin: 0; }
.drawer-body { flex: 1; overflow: auto; padding: 14px 16px 30px; display: flex; flex-direction: column; gap: 10px; }
.bill { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.bill.open { border-color: #f5c77e; box-shadow: 0 6px 20px rgba(180,83,9,.10); }
.bill-sum { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: none; border: 0; cursor: pointer; text-align: left; color: inherit; }
.bill-sum .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bill-sum .who b { font-size: 15.5px; }
.bill-sum .who span { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-sum .amt { font-family: var(--display); font-weight: 800; font-size: 17px; }
.bill-sum .chev { color: var(--faint); }
.bill-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.bill-client { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.bill-travaux { font-size: 13px; color: var(--text); }
.bill-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.bill-lines td { padding: 7px 4px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.bill-lines .num { text-align: right; white-space: nowrap; font-weight: 700; }
.bill-lines .tot td { font-weight: 800; font-size: 15px; border-bottom: 0; }
.cp { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 4px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; vertical-align: middle; }
.cp:hover { color: var(--accent); border-color: var(--accent-bd); background: var(--accent-bg); }
.bill-actions { gap: 8px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 50px 10px; color: var(--muted); text-align: center; }
.empty-state svg { color: var(--ok); }
.bill-notice { display: flex; align-items: center; gap: 12px; width: 360px; padding: 12px 12px 12px 14px; border-radius: 12px; background: #fff7ea; color: #3b2400; border: 1px solid #f5c77e; box-shadow: 0 12px 30px rgba(0,0,0,.22); cursor: pointer; animation: bn-in .3s ease-out; }
.bill-notice .ic { width: 38px; height: 38px; border-radius: 10px; background: #f59e0b; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.bill-notice .tx { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13px; }
.bill-notice .tx b { font-size: 14px; }
.bill-notice .x { border: 0; background: transparent; color: #8a5a12; cursor: pointer; font-size: 14px; padding: 4px; }
@keyframes bn-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.tag.bill-tag { background: #f59e0b; color: #1f1300; }
.tag.sms-ok { background: var(--ok-bg); color: var(--ok); }
.tag.sms-non { background: var(--warn-bg); color: var(--warn); }

/* ---------- archives gestinterv ---------- */
.archives { display: flex; flex-direction: column; gap: 6px; }
.arch { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.arch summary { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: 14px; }
.arch summary::-webkit-details-marker { display: none; }
.arch summary::before { content: "▸"; color: var(--faint); }
.arch[open] summary::before { content: "▾"; }
.arch summary .d { width: 64px; color: var(--muted); font-variant-numeric: tabular-nums; }
.arch summary .amt { width: 80px; text-align: right; font-weight: 700; }
.arch-body { padding: 0 14px 12px 34px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.arch-body .pre { white-space: pre-wrap; color: var(--text); }
.arch-body .obs { padding: 8px 10px; background: var(--surface); border-radius: 8px; border: 1px solid var(--line-2); }

.results:empty { display: none; }

/* ---------- rapport : analyses −/+ et usure batterie ---------- */
.analyses { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.an { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); }
.an b { flex: 1; font-size: 15px; }
.an button { width: 38px; height: 34px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface-2); font-size: 20px; font-weight: 800; cursor: pointer; color: var(--muted); }
.an button.on[data-r="-"] { background: var(--ok); border-color: var(--ok); color: #fff; }
.an button.on[data-r="+"] { background: var(--danger); border-color: var(--danger); color: #fff; }
.an button.nrb { width: auto; padding: 0 8px; font-size: 12.5px; }
.an button.on.nrb { background: #64748b; border-color: #64748b; color: #fff; }
.an.nr b { color: var(--muted); }
.an .an-n { width: 46px; height: 34px; border-radius: 9px; border: 1.5px solid var(--line); text-align: center; font-weight: 800; font-size: 15px; }
.an.bad .an-n { border-color: var(--danger); }
.an.ok { border-color: #9fd9b4; background: var(--ok-bg); }
.an.bad { border-color: #f1a9a9; background: var(--danger-bg); }
.usure { font-size: 13px; font-weight: 700; padding: 4px 10px; border: 1.5px solid; border-radius: 99px; }

.aitem-wrap { position: relative; }
.aitem-wrap .aitem { padding-right: 140px; }
.pret-btns { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; width: 124px; }
.pret-btns > * { text-align: center; justify-content: center; }
.sms-btn { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--accent-bd); background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: 12px; cursor: pointer; }
.sms-btn:hover { background: var(--accent); color: #fff; }
.rendu-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 8px;
  border: 1px solid #9fd9b4; background: var(--ok-bg); color: #166534; font-weight: 700; font-size: 12px; cursor: pointer; }
.rendu-btn:hover { background: var(--ok); color: #fff; }
.rendu-btn.non { width: 124px; justify-content: center; border-color: #f3c58f; background: var(--warn-bg); color: var(--warn); }
.rendu-btn.non .r-oui { display: none; }
.rendu-btn.non:hover, .rendu-btn.non:focus-visible { border-color: #9fd9b4; background: var(--ok); color: #fff; }
.rendu-btn.non:hover .r-non, .rendu-btn.non:focus-visible .r-non { display: none; }
.rendu-btn.non:hover .r-oui, .rendu-btn.non:focus-visible .r-oui { display: inline-flex; align-items: center; gap: 4px; }

/* mot de passe client : champ texte masqué (un vrai champ « mot de passe » ferait croire au navigateur à un formulaire
   de connexion, et il pré-remplirait le nom du client avec l'identifiant de l'utilisateur connecté) */
input.masque { -webkit-text-security: disc; text-security: disc; }

.chips.villes { gap: 6px; align-items: center; margin-top: -4px; }
.chips.villes:empty { display: none; }

.panel.modeles { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface-2); }
.ctx-menu { position: fixed; z-index: 80; min-width: 230px; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.25); padding: 6px; }
.ctx-menu .grp { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); padding: 8px 8px 4px; }
.ctx-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 8px;
  border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); }
.ctx-menu button:hover { background: var(--surface-2); }
.ctx-menu button i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ctx-menu button.cur { color: var(--accent); }
.ctx-menu hr { border: 0; border-top: 1px solid var(--line-2); margin: 4px 0; }

.panel.arrivee { border: 2px solid var(--brand); background: var(--brand-bg); margin-bottom: 16px; }

.sms-list { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin-top: 14px; }
.sms-card { display: flex; flex-direction: column; gap: 10px; }
.sms-apercu { font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--line); color: var(--text); }

/* ---------- accueil : les deux grands choix ---------- */
.modecards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.modecard { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 2px solid var(--mc); background: var(--mc-bg); color: var(--mc); transition: transform .12s, box-shadow .12s, background .12s; }
.modecard.rep { --mc: var(--brand); --mc-bg: var(--brand-bg); }
.modecard.neuf { --mc: var(--teal); --mc-bg: var(--teal-bg); }
.modecard.rdvc { --mc: #6d28d9; --mc-bg: #f3eefe; }
.modecard.sitec { --mc: #0369a1; --mc-bg: #e0f2fe; }
.choix-neuf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.choix-neuf button { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 18px; border-radius: 14px; cursor: pointer;
  border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); color: var(--text); font: inherit; transition: transform .12s, box-shadow .12s; }
.choix-neuf button:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15,23,42,.10); }
.choix-neuf button.on { background: var(--c); color: #fff; }
.choix-neuf .ic { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; background: var(--surface); color: var(--c); }
.choix-neuf b { display: block; font-family: var(--display); font-size: 18px; font-weight: 800; margin-bottom: 4px; color: var(--c); }
.choix-neuf button.on b { color: #fff; }
.choix-neuf span.t { font-size: 13.5px; line-height: 1.45; opacity: .9; }
@media (max-width: 800px) { .choix-neuf { grid-template-columns: 1fr; } }
.btn.devis { background: #c2410c; border-color: #c2410c; color: #fff; }
.btn.devis:hover { background: #9a3412; border-color: #9a3412; color: #fff; }
.modecard:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(15,23,42,.10); }
.modecard .mc-ic { width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: var(--surface); color: var(--mc); }
.modecard .mc-tx { display: flex; flex-direction: column; gap: 3px; }
.modecard .mc-tx b { font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1.15; }
.modecard .mc-tx span { font-size: 13.5px; opacity: .85; font-weight: 500; }
.modecard.on { background: var(--mc); color: #fff; box-shadow: 0 10px 26px color-mix(in srgb, var(--mc) 35%, transparent); }
.modecard.on .mc-ic { color: var(--mc); }
.modecard:not(.on) { opacity: .92; }
@media (max-width: 800px) { .modecards { grid-template-columns: 1fr; } }

.panel.jour { display: flex; flex-direction: column; gap: 10px; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.tuile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none; cursor: pointer; text-align: left;
  border: 1.5px solid var(--tc); background: var(--tb); color: var(--tc); font: inherit; }
.tuile b { font-family: var(--display); font-size: 26px; font-weight: 800; line-height: 1; }
.tuile span { font-size: 12px; font-weight: 600; }
.tuile.ok { --tc: var(--ok); --tb: var(--ok-bg); } .tuile.warn { --tc: var(--warn); --tb: var(--warn-bg); } .tuile.teal { --tc: var(--teal); --tb: var(--teal-bg); }
.tuile:hover { filter: brightness(.97); }
.rdv-l { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--brand-bg); color: inherit; text-decoration: none; font-size: 14px; }
.rdv-l .h { font-weight: 800; color: var(--brand); width: 48px; }
.rdv-l b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdv-l .st { font-size: 12px; color: var(--muted); }

.card .meta svg { vertical-align: -2px; opacity: .8; }
.card .numf { display: inline-flex; align-items: center; gap: 5px; }
.tech-av { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0; }

/* ---------- fiche : frise du parcours ---------- */
.frise { display: flex; align-items: center; gap: 8px; margin: 16px 0; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.fr-step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--faint); }
.fr-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--line-2); color: var(--faint); }
.fr-lib { font-weight: 700; font-size: 14px; }
.fr-d { font-size: 12px; color: var(--muted); }
.fr-step.fait { color: var(--text); }
.fr-step.fait .fr-dot { background: var(--ok); color: #fff; }
.fr-step.cur .fr-dot { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-bg); }
.fr-step.cur.att .fr-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.fr-bar { flex: 1; min-width: 24px; height: 2px; background: var(--line); }

/* mode « rendez-vous » (violet) */
.rdv-mode .progress > div { background: #6d28d9; }
.rdv-mode .step.open { border-color: #c4b1f3; box-shadow: 0 6px 22px rgba(109,40,217,.10); }
.rdv-mode .step.open .step-num { background: #6d28d9; }
.rdv-mode .client-card { background: #f7f3ff; border-color: #d9cbf7; }
.rdv-mode .new-client { border-color: #6d28d9; color: #6d28d9; background: #f7f3ff; }
.rdv-mode .day-btn.on { border-color: #6d28d9; background: #f3eefe; }
.rdv-mode .day-btn .badge { background: #6d28d9; }
.rdv-mode .ticket-head { background: #6d28d9; }
.rdv-mode .ticket-head small { color: #e4d9fd; }
.rdv-mode .tile.on { border-color: #6d28d9; background: #f3eefe; color: #6d28d9; }
.rdv-mode .btn.brand { background: #6d28d9; box-shadow: 0 6px 18px rgba(109,40,217,.25); }
@media (max-width: 1300px) { .modecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- accueil : prestations par familles (couleur par famille, lecture rapide) ---------- */
.fam-0 { --fc: #2563eb; --fb: #eef3ff; }   /* nettoyage · formatage */
.fam-1 { --fc: #7c3aed; --fb: #f4efff; }   /* Windows 11 · SSD */
.fam-2 { --fc: #c2410c; --fb: #fff3eb; }   /* réparation matériel */
.fam-3 { --fc: #475569; --fb: #f3f5f8; }   /* autres */
.familles { display: flex; flex-direction: column; gap: 10px; }
.famille { display: flex; flex-direction: column; gap: 5px; }
.famille.top { padding: 10px 12px; border-radius: 14px; background: #fffbea; border: 1px solid #f5dfa0; }
.famille.top .lbl { color: #92400e; }
.fam-t { display: flex; align-items: center; gap: 6px; color: var(--fc) !important; font-weight: 800; }
.fam-t::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--fc); }
.presta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 7px; }
.presta { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 7px 10px 7px 13px; border-radius: 11px;
  border: 1.5px solid color-mix(in srgb, var(--fc) 28%, var(--line)); border-left: 5px solid var(--fc); background: var(--fb);
  cursor: pointer; text-align: left; font: inherit; color: inherit; transition: transform .08s, box-shadow .12s; }
.presta:hover { box-shadow: 0 3px 10px rgba(15,23,42,.10); transform: translateY(-1px); }
.presta .nom { flex: 1; font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.presta .px { flex-shrink: 0; font-weight: 800; font-size: 13.5px; color: var(--fc); background: var(--surface); padding: 3px 8px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--fc) 30%, transparent); }
.presta .ch { position: absolute; top: -6px; right: 10px; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.25); }
.presta .ch.ch-1 { background: #16a34a; } .presta .ch.ch-2 { background: #ea580c; } .presta .ch.ch-3 { background: #dc2626; }
.presta.on { background: var(--fc); color: #fff; border-color: var(--fc); box-shadow: 0 6px 16px color-mix(in srgb, var(--fc) 35%, transparent); }
.presta.on .px { color: var(--fc); }
.presta.on .ch { box-shadow: 0 0 0 2px #fff; }
/* « ce que dit le client » : une ligne par thème, titre coloré à gauche */
#pb-chips { display: flex; flex-direction: column; gap: 6px; }
.pb-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px; align-items: start; }
.pb-row .chips { gap: 6px; }
.pb-t { font-size: 12.5px; font-weight: 800; padding-top: 6px; color: var(--tc, var(--muted)); }
.pb-row.freq { padding: 6px 8px; border-radius: 10px; background: #fffbea; border: 1px solid #f5dfa0; }
.pb-row.freq .pb-t { color: #92400e; }
#pb-chips .chip { padding: 5px 10px; font-size: 13px; border-color: color-mix(in srgb, var(--tc, #94a3b8) 35%, var(--line)); background: color-mix(in srgb, var(--tc, #94a3b8) 6%, #fff); }
#pb-chips .chip .mk { color: var(--tc, var(--muted)); font-weight: 800; }
#pb-chips .chip.on { background: var(--tc, var(--accent)); border-color: var(--tc, var(--accent)); color: #fff; }
#pb-chips .chip.on .mk { color: #fff; }
.th-0 { --tc: #0f766e; } .th-1 { --tc: #c2410c; } .th-2 { --tc: #b91c1c; } .th-3 { --tc: #a16207; } .th-4 { --tc: #1d4ed8; } .th-5 { --tc: #475569; }
@media (max-width: 900px) { .pb-row { grid-template-columns: 1fr; } }

/* planning saturé / jours supplémentaires */
.sature{background:#fff7ed;border:1px solid #fdba74;color:#9a3412;border-radius:10px;padding:10px 14px;margin:0 0 10px;font-size:14px}
.day-btn.plus{border-style:dashed;color:#6d28d9;font-size:22px;font-weight:700;justify-content:center}
.day-btn.plus .st{font-size:11px;font-weight:600;line-height:1.2}

/* glisser-déposer (admin) */
.poignee { cursor: grab; color: #94a3b8; font-size: 18px; line-height: 1; padding: 4px 2px; user-select: none; }
.poignee:hover { color: var(--accent); }
.dragging { opacity: .45; }
.drop-avant { box-shadow: inset 0 3px 0 var(--accent); }
.drop-apres { box-shadow: inset 0 -3px 0 var(--accent); }
.sms-card.drop-avant { box-shadow: 0 -3px 0 var(--accent); } .sms-card.drop-apres { box-shadow: 0 3px 0 var(--accent); }

/* 4 cartes de départ : un peu plus compactes */
.modecard { padding: 13px 14px; gap: 11px; }
.modecard .mc-ic { width: 46px; height: 46px; }
.modecard .mc-tx b { font-size: 16.5px; }
.modecard .mc-tx span { font-size: 12.5px; }

/* RDV sur site (accueil + planning) */
.site-mode .progress > div { background: #0369a1; }
.site-mode .step.open { border-color: #9fd3f0; box-shadow: 0 6px 22px rgba(3,105,161,.10); }
.site-mode .step.open .step-num { background: #0369a1; }
.site-mode .client-card { background: #f0f9ff; border-color: #bae6fd; }
.site-mode .new-client { border-color: #0369a1; color: #0369a1; background: #f0f9ff; }
.site-mode .day-btn.on { border-color: #0369a1; background: #e0f2fe; }
.site-mode .ticket-head { background: #0369a1; }
.site-mode .ticket-head small { color: #cfeafd; }
.site-mode .btn.brand { background: #0369a1; box-shadow: 0 6px 18px rgba(3,105,161,.25); }
.site-mode .chip.on { background: #0369a1; border-color: #0369a1; color: #fff; }
.segs span.abs { background: #7dd3fc; background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(3,105,161,.45) 3px 5px); }
.impact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f0f9ff; border: 1px solid #bae6fd; color: #075985;
  border-radius: 12px; padding: 12px 16px; }
.impact .n { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; min-width: 34px; text-align: center; }
.impact .txt { flex: 1; min-width: 220px; font-size: 14px; }
.impact .auto { font-size: 12px; text-decoration: underline; background: none; border: 0; color: inherit; cursor: pointer; }
.horaires { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.horaires select { width: auto; }
.site-line { --sc: #0369a1; border-left: 4px solid var(--sc); background: #f0f9ff; }
.site-line .imp { margin-left: auto; font-size: 11.5px; font-weight: 800; color: #0369a1; white-space: nowrap; }
.site-ban { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: #075985; background: #e0f2fe;
  border-radius: 8px; padding: 4px 8px; margin-top: 4px; }
.day-btn .badge.abs, .rdv-mode .day-btn .badge.abs { background: #0369a1; top: auto; bottom: -9px; padding: 1px 6px; }
.rdv-l.site { background: #e0f2fe; } .rdv-l.site .h { color: #0369a1; width: auto; }
.pret-ban { display: flex; align-items: center; gap: 10px; background: #fff7ed; border-color: #fdba74; color: #9a3412; text-decoration: none; padding: 12px 16px; }

/* portables de prêt */
.pcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin: 14px 0; align-items: start; }
.pc { display: flex; flex-direction: column; gap: 8px; border-top: 5px solid var(--ok); }
.pc.pris { border-top-color: #ea580c; } .pc.late { border-top-color: var(--danger); }
.pc.open { grid-column: span 2; border-top-color: var(--accent); }
.pc-h { display: flex; align-items: center; gap: 12px; }
.pc-ic { font-size: 26px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #fff7ed; }
.pc-ic.libre { background: #ecfdf5; }
.pc-t { flex: 1; display: flex; flex-direction: column; min-width: 0; } .pc-t b { font-size: 17px; } .pc-t span { font-size: 12.5px; color: var(--muted); }
.pc-qui { font-size: 16px; } .pc-qui a { color: inherit; }
.pc-l { font-size: 13.5px; }
.pc .btn { align-self: flex-start; }
.pc-form { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); }
@media (max-width: 700px) { .pc.open { grid-column: auto; } }

/* graphiques des statistiques */
.chart { width: 100%; height: auto; display: block; }
.chart .g { stroke: var(--line-2); stroke-width: 1; }
.chart .ax { font-size: 11px; fill: var(--muted); }
.chart .val { font-size: 11.5px; font-weight: 700; fill: #b45309; }
.chart .b1 { fill: var(--accent); opacity: .85; }
.chart .b1:hover { opacity: 1; }
.chart .l2 { fill: none; stroke: var(--ok); stroke-width: 2.5; }
.chart .p2 { fill: #fff; stroke: var(--ok); stroke-width: 2; }
.chart .l3 { fill: none; stroke: #d97706; stroke-width: 3; stroke-linejoin: round; }
.chart .p3 { fill: #fff; stroke: #d97706; stroke-width: 2.5; }
.hbar.ca { grid-template-columns: minmax(0, 200px) 1fr 90px 80px; }
.hbar.ca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar.ca .track div { background: var(--ok); }
.hbar.ca b { text-align: right; } .hbar.ca small { color: var(--muted); }

/* ===== écran TV de l'atelier ===== */
body.tv { background: #0b1220; color: #e2e8f0; min-height: 100vh; }
body.tv .topbar { display: none; }
.tv-wrap { padding: 1.6vw 2vw; display: flex; flex-direction: column; gap: 1.2vw; cursor: default; }
.tv-top { display: flex; align-items: center; gap: 1.6vw; }
.tv-clock { font-family: var(--display); font-size: 5.2vw; font-weight: 800; line-height: 1; color: #fff; }
.tv-date { font-size: 1.9vw; font-weight: 600; text-transform: capitalize; color: #94a3b8; }
.tv-k { display: flex; flex-direction: column; align-items: center; background: #111b2e; border: 1px solid #1e293b; border-radius: 1vw; padding: .7vw 1.4vw; min-width: 8vw; }
.tv-k b { font-family: var(--display); font-size: 3.2vw; line-height: 1; color: #fff; }
.tv-k span { font-size: .95vw; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; }
.tv-k.ok b { color: #4ade80; } .tv-k.warn b { color: #fbbf24; } .tv-k.bad { border-color: #dc2626; } .tv-k.bad b { color: #f87171; }
.tv-site { display: flex; align-items: center; gap: 1vw; flex-wrap: wrap; font-size: 1.6vw; background: #0c4a6e; border: 1px solid #0369a1; border-radius: 1vw; padding: .8vw 1.4vw; color: #e0f2fe; }
.tv-site span { color: #bae6fd; } .tv-site em { margin-left: auto; font-style: normal; font-weight: 800; color: #7dd3fc; }
.tv-main { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 1.6vw; align-items: start; }
.tv-h { font-family: var(--display); font-size: 1.6vw; margin: .4vw 0 .8vw; color: #cbd5e1; }
.tv-h small { font-family: var(--sans, inherit); font-size: 1vw; color: #7dd3fc; font-weight: 600; }
.tv-h.bad { color: #f87171; } .tv-h.ok { color: #4ade80; } .tv-h.teal { color: #5eead4; }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21vw, 1fr)); gap: 1vw; margin-bottom: 1vw; }
.tv-card { background: #111b2e; border: 1px solid #1e293b; border-left: .55vw solid var(--c); border-radius: 1vw; padding: 1vw 1.2vw; display: flex; flex-direction: column; gap: .5vw; }
.tv-card.late { border-color: #dc2626; box-shadow: 0 0 0 2px #dc262655; }
.tv-card.fait { opacity: .45; }
.tv-cl { font-size: 1.75vw; font-weight: 800; color: #fff; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-meta { font-size: 1.15vw; color: #94a3b8; display: flex; align-items: center; gap: .4vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tv-foot { display: flex; align-items: center; gap: .6vw; } .tv-foot .pill { font-size: .95vw; padding: .25vw .7vw; }
.tv-num { margin-left: auto; color: var(--muted); font-size: .95vw; font-weight: 700; }
.tv-urg, .tv-rdv { font-size: .85vw; font-weight: 800; padding: .15vw .5vw; border-radius: 99px; margin-right: .5vw; vertical-align: middle; }
.tv-urg { background: #dc2626; color: #fff; } .tv-rdv { background: #6d28d9; color: #fff; }
.tv-vide { font-size: 2vw; color: var(--muted); padding: 2vw; text-align: center; background: #111b2e; border-radius: 1vw; }
.tv-line { display: flex; flex-direction: column; background: #111b2e; border-radius: .7vw; padding: .6vw .9vw; margin-bottom: .45vw; font-size: 1.1vw; }
.tv-line b { color: #fff; } .tv-line span { color: #94a3b8; font-size: .95vw; }
.tv-line.fait { opacity: .45; } .tv-line.site { background: #0c4a6e; }
.tv .tech-av { width: 1.9vw; height: 1.9vw; font-size: .8vw; }
.overlay .box { position: relative; }
.close-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.close-x:hover { background: #fee2e2; color: var(--danger); border-color: #fecaca; }
.horaires .seg small { font-weight: 500; opacity: .75; margin-left: 4px; }
.modecard .mc-tx span { font-weight: 700; opacity: .9; }

/* remise à zéro des stats */
.raz { position: relative; } .raz summary { list-style: none; cursor: pointer; } .raz summary::-webkit-details-marker { display: none; }
.raz-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15,23,42,.18); padding: 6px; display: flex; flex-direction: column; min-width: 300px; }
.raz-menu button { border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 14px; }
.raz-menu button:hover { background: #fee2e2; color: var(--danger); }
.raz-menu button[data-raz="annuler"]:hover { background: #dcfce7; color: var(--ok); }
.raz-menu hr { border: 0; border-top: 1px solid var(--line-2); margin: 4px 0; }
.menu-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 2px 0 12px 4px; border-bottom: 1px solid var(--line-2); }
.menu-row .lbl { margin-right: 6px; font-size: 12.5px; }
/* badge « Sur site » du technicien */
.site-bell.has { border-color: #38bdf8; color: #bae6fd; } .site-bell b { background: #0ea5e9; color: #fff; }
.site-rdv { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: #f0f9ff; border: 1px solid #e0f2fe;
  text-decoration: none; color: inherit; margin-bottom: 6px; }
.site-rdv.neuf { border-color: #38bdf8; background: #e0f2fe; }
.site-rdv .h { font-weight: 800; color: #0369a1; min-width: 92px; }
.site-rdv .tx { flex: 1; display: flex; flex-direction: column; min-width: 0; } .site-rdv .tx span { color: var(--muted); font-size: 13px; }
.site-rdv .tag { background: #0ea5e9; color: #fff; }
.bill-notice.site .ic { background: #e0f2fe; font-size: 18px; }
.menu-row .chip { padding: 5px 11px; font-size: 13px; }
/* bande des dates : places toujours indiquées ; « avant délai » en petit */
.day-btn .st { line-height: 1.2; text-align: center; }
.creneaux { display: grid; grid-template-columns: auto auto auto auto; gap: 6px 8px; align-items: center; }
.creneaux select { width: auto; padding: 6px 8px; }
.disque { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); }
.disque .dn { min-width: 70px; }
.segbtns button.on { background: var(--accent); color: #fff; }
.cfg { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.cfg .input { flex: 1; min-width: 0; }
.rendus-pli { align-self: flex-start; margin-top: 6px; border: 1px dashed currentColor; background: transparent; color: inherit; opacity: .8; border-radius: 8px;
  padding: 3px 8px; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rendus-pli:hover { color: var(--ok); border-color: var(--ok); }
/* réajustement : PC avancé + suggestion */
.card .avance { position: absolute; top: -9px; left: 10px; background: #0ea5e9; color: #fff; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; }
.sugg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #ecfeff; border: 1px solid #a5f3fc; color: #155e75;
  border-radius: 10px; padding: 7px 10px; margin-bottom: 8px; font-size: 13.5px; }
.sugg .muted { color: #0e7490; opacity: .85; }
.card .avancer-st { position: absolute; top: -9px; left: 10px; white-space: nowrap; z-index: 2; background: #0891b2; color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 99px; cursor: pointer; letter-spacing: .02em; text-transform: uppercase; }
.card .avancer-st:hover { background: #0e7490; box-shadow: 0 0 0 3px rgba(8,145,178,.25); }
.card:has(.avancer-st) .avance { display: none; }
.slot-empty.cible { border-color: #0891b2; background: #ecfeff; color: #0891b2; box-shadow: 0 0 0 3px rgba(8,145,178,.2); }
@keyframes pulse-av { 50% { box-shadow: 0 0 0 4px rgba(8,145,178,.18); } }

/* historique client */
.hgrid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .hgrid { grid-template-columns: 1fr; } }
.htl { display: flex; flex-direction: column; gap: 8px; }
.hit { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; }
.hit.gestinterv { border-left-color: #94a3b8; }
.hit summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.hit summary::-webkit-details-marker { display: none; }
.hit summary .d { font-weight: 800; min-width: 62px; }
.hit summary .src { font-size: 11.5px; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 2px 8px; border-radius: 99px; }
.hit summary .amt { font-weight: 800; min-width: 70px; text-align: right; }
.hit .arch-body { padding: 0 14px 12px 86px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
/* modules du PGI MIS (Atelier / Compta) — même présentation que dans MIS Compta */
.topbar .modules { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #1e293b; margin-right: 6px; }
.topbar .modules a, .topbar .modules span { padding: 5px 11px; border-radius: 7px; font-size: 13px; font-weight: 600; color: #e2e8f0; text-decoration: none; }
.topbar .modules a:hover { background: #334155; }
.topbar .modules .on { background: var(--brand); color: #fff; font-weight: 700; }
@media (max-width: 900px) { .topbar .modules { display: none; } }

/* sélecteur de modules du PGI MIS : une couleur par module (Atelier magenta, Facturation orange, Compta sarcelle) */
.topbar .modules a[data-m], .topbar .modules span[data-m] { display: inline-flex; align-items: center; gap: 7px; }
.topbar .modules [data-m]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mc); flex-shrink: 0; }
.topbar .modules .on[data-m]::before { background: var(--surface); }
.topbar .modules [data-m=atelier] { --mc: #e0119d; }
.topbar .modules [data-m=facture] { --mc: #f97316; }
.topbar .modules [data-m=compta] { --mc: #14b8a6; }

/* Admin › Messages SMS : jauge du nombre de SMS */
.sms-jauge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.sms-jauge .pill { color: #fff; }
.sms-jauge .bar { width: 120px; height: 8px; border-radius: 99px; background: var(--line, #e5e7eb); overflow: hidden; }
.sms-jauge .bar i { display: block; height: 100%; border-radius: 99px; }

/* Planning › panneau de droite : sections repliables, attente par thème, ancienneté, boutons d'action */
.abox h2[role=button] { cursor: pointer; user-select: none; }
.abox h2 > span:first-child::before { content: "▾ "; opacity: .8; }
.abox.replie h2 > span:first-child::before { content: "▸ "; }
.abox.replie .list { display: none; }
.abox .list.long { max-height: 62vh; }
.att-grp { display: flex; justify-content: space-between; align-items: center; margin: 6px 2px 0; padding: 4px 6px; border-radius: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); cursor: pointer; user-select: none; }
.att-grp:hover { background: var(--surface-2); }
.att-grp::before { content: "▾"; margin-right: 6px; }
.att-grp.replie::before { content: "▸"; }
.att-grp .n { margin-left: auto; background: var(--line); color: var(--text); border-radius: 99px; padding: 0 7px; font-size: 11px; }
.att-grp.replie + .att-items { display: none; }
.att-items { display: flex; flex-direction: column; gap: 6px; }
.att-card { border-radius: 10px; background: var(--surface-2); }
.att-card .aitem { background: transparent; }
.aitem .etat-pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }
.aitem .age-orange { color: var(--warn); font-weight: 700; }
.aitem .age-rouge { color: var(--danger); font-weight: 800; }
.act-btns { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 10px 8px; }
.act-btns button, .act-btns a { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 700;
  font-size: 12px; cursor: pointer; color: inherit; text-decoration: none; }
.act-btns button:hover, .act-btns a:hover { filter: brightness(.95); }
.act-btns .ok { border-color: #9fd9b4; background: var(--ok-bg); color: #166534; }
.act-btns .ko { border-color: #f1a9a9; background: var(--danger-bg); color: #991b1b; }
.act-btns .go { border-color: #f5b3d3; background: #fdf2f8; color: #9d174d; }
.act-btns .sav { border-color: #d8b4fe; background: #faf5ff; color: #6b21a8; }

/* États présentés en processus : un bloc par thème, étapes numérotées et flèches */
.processus { display: flex; flex-direction: column; gap: 10px; }
.theme-bloc { --tc: #64748b; border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--line)); border-left: 5px solid var(--tc);
  border-radius: 12px; padding: 9px 12px 11px; background: color-mix(in srgb, var(--tc) 5%, var(--surface)); }
.theme-titre { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tc); margin-bottom: 7px; }
.etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.etape { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.etape-n { width: 20px; height: 20px; border-radius: 50%; background: var(--tc); color: #fff; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fleche { color: var(--tc); font-weight: 800; font-size: 15px; }
.ou { font-size: 11.5px; font-style: italic; color: var(--muted); }
.popover .processus { gap: 7px; }
.popover .theme-bloc { padding: 7px 9px 9px; }

/* Planning : jours passés réduits, repère du jour, ligne « sur site » discrète, colonne neuf étroite si vide */
.day.mini { display: block; box-shadow: none; margin-bottom: 6px; }
.mini-ligne { width: 100%; display: flex; align-items: center; gap: 14px; padding: 7px 14px; border: 0; background: var(--surface-2);
  color: var(--muted); font-size: 12.5px; cursor: pointer; text-align: left; }
.mini-ligne b { color: var(--text); min-width: 120px; }
.mini-ligne:hover { background: var(--line-2); }
.mini-ligne .spacer { flex: 1; }
.day.repere { border: 2px solid var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent), var(--shadow); }
.day.repere .day-label { background: var(--brand); color: #fff; }
.repere-tag { align-self: flex-start; font-size: 9.5px; font-weight: 800; letter-spacing: .08em; padding: 2px 6px; border-radius: 5px;
  background: var(--surface); color: var(--brand); margin-bottom: 4px; }
.day.repere .segs { filter: drop-shadow(0 0 1px rgba(0,0,0,.3)); }
.add-site { margin-top: 6px; align-self: flex-start; border: 1px dashed currentColor; background: transparent; color: inherit; opacity: .75;
  border-radius: 7px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.add-site:hover { opacity: 1; }
.site-list.vide { min-height: 0; }
body.drag-site .site-list.vide { min-height: 34px; border: 1.5px dashed var(--line); border-radius: 8px; }
.day.neuf-vide { grid-template-columns: 110px minmax(0, 1fr) 76px; }
.day.neuf-vide .neuf-col { align-items: center; padding: 10px 6px; }
.day.neuf-vide .neuf-col .row-title::after { display: none; }
.week-title { z-index: 20; }

/* Planning : « + » de la colonne matériel neuf */
.neuf-add { align-self: stretch; min-height: 34px; border: 1.5px dashed #b7dcd4; border-radius: 8px; background: transparent; color: #5aa494;
  font-size: 16px; cursor: pointer; }
.neuf-add:hover { border-color: var(--teal, #0f766e); color: var(--teal, #0f766e); background: var(--surface); }
.day.neuf-vide .neuf-add { min-height: 60px; width: 100%; }

/* Barre du haut : se resserre quand la fenêtre est étroite ou le zoom du navigateur élevé (plus de débordement à gauche) */
.topbar { min-width: 0; }
.topbar > * { flex-shrink: 0; }
.topbar .search { flex: 0 1 460px; min-width: 160px; }
.topbar .search input { width: 100%; max-width: none; }
@media (max-width: 1950px) {
  .topbar { gap: 12px; padding: 0 16px; }
  .nav a { padding: 8px 9px; }
}
@media (max-width: 1780px) {
  .brand .brand-nom, .live .lbl, .userbox .user-nom, .bell span { display: none; }
  .topbar .modules a[data-m], .topbar .modules span[data-m] { font-size: 12.5px; padding: 6px 9px; }
  .nav a { padding: 8px 7px; font-size: 14px; }
}
/* très petit écran seulement : modules réduits à leur pastille de couleur */
@media (max-width: 1100px) {
  .topbar .modules a[data-m], .topbar .modules span[data-m] { font-size: 0; gap: 0; padding: 7px 9px; }
  .topbar .modules [data-m]::before { width: 10px; height: 10px; }
}
@media (max-width: 1250px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 8px 12px; row-gap: 6px; }
  .topbar .spacer { display: none; }
  .topbar .search { order: 9; flex: 1 1 100%; }
  .topbar .search input { max-width: none; }
}
.add-btns { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.add-btns .add-site { margin-top: 0; }

/* Planning : barre d'outils figée sous le menu, bandeau de semaine collé dessous */
.sticky-bar { position: sticky; top: calc(var(--haut, 60px) + var(--mb, 0px)); z-index: 25; background: var(--bg); padding-bottom: 10px; }
.week-title { top: calc(var(--haut, 60px) + var(--haut2, 64px) + var(--mb, 0px)); }
/* « + Inter » / « + Site » : boutons pleins, lisibles aussi sur le jour repéré */
.add-btns { flex-direction: column; gap: 5px; }
.add-site { width: 100%; text-align: center; background: var(--surface); color: var(--brand); opacity: 1; border: 1.5px solid color-mix(in srgb, var(--brand) 40%, #fff);
  border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 800; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.add-site:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.day.repere .add-site { border-color: #fff; }

/* Barre du haut : outils (messages, RDV sur site, jerrican) juste après le menu */
.topbar .outils { display: flex; align-items: center; gap: 6px; }
.msg-bell.has { border-color: #f87171; color: #fecaca; } .msg-bell b { background: #ef4444; color: #fff; }
.fuel { padding: 6px 9px; }
.fuel.alerte { background: #dc2626; border-color: #dc2626; color: #fff; animation: fuel-pulse 1.1s ease-in-out infinite; }
@keyframes fuel-pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.75); transform: scale(1); } 50% { transform: scale(1.08); }
  100% { box-shadow: 0 0 0 12px rgba(239,68,68,0); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fuel.alerte { animation: halo-rouge 1.4s ease-in-out infinite; } }

/* Messagerie */
.conv { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; color: inherit; }
.conv:hover { background: var(--surface-2); }
.conv .av { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-bg, #eef2ff); color: var(--accent, #1d4ed8); font-weight: 800; font-size: 13px;
  display: grid; place-items: center; flex: none; }
.conv .av.tous { background: #fef3c7; font-size: 18px; }
.conv .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conv .tx span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv.nl .tx span { color: var(--text); font-weight: 700; }
.conv .h { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.conv .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 12px; display: grid; place-items: center; }
.drawer-body.fil { display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.bulle { max-width: 82%; align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: 8px 11px;
  display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.bulle.moi { align-self: flex-end; background: var(--accent, #1d4ed8); color: #fff; border-color: transparent; border-radius: 14px 14px 4px 14px; }
.bulle b { font-size: 12px; color: var(--accent, #1d4ed8); }
.bulle .t { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.bulle .h { font-size: 10.5px; opacity: .7; align-self: flex-end; }
.msg-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-2); align-items: flex-end; background: var(--surface); }
.msg-form textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.bill-notice.msg { border-left-color: #ef4444; }
/* notifications à gauche du panneau ouvert (messages, RDV sur site) */
body:has(.drawer:not(.hidden)) .toasts { right: min(500px, 100vw); }

/* Messagerie : lisibilité */
.msg-head { align-items: center; }
.msg-head .av, .conv .av { width: 42px; height: 42px; border-radius: 50%; background: #e0e7ff; color: #3730a3; font-weight: 800; font-size: 14px;
  display: grid; place-items: center; flex: none; }
.msg-head .av.tous, .conv .av.tous { background: #fef3c7; font-size: 19px; }
.msg-head h2 { margin: 0; }
.msg-head .hint { margin: 0; }
.conv { padding: 12px 10px; border-bottom: 1px solid var(--line-2); border-radius: 0; }
.conv .tx b { font-size: 15.5px; }
.conv .tx span { font-size: 13.5px; }
.drawer-body.fil { gap: 4px; padding: 14px 16px 20px; background: #eef1f6; }
.fil-jour { display: flex; justify-content: center; margin: 12px 0 6px; }
.fil-jour span { background: #dfe4ec; color: var(--muted); font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 99px; }
.fil-jour:first-child { margin-top: 0; }
.bulle { max-width: 80%; margin-top: 8px; padding: 9px 13px 7px; border: 1px solid #d9dee7; border-radius: 16px 16px 16px 5px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06); background: var(--surface); color: var(--text); }
.bulle.suite { margin-top: 2px; }
.bulle.moi { background: #1d4ed8; color: #fff; border-color: #1d4ed8; border-radius: 16px 16px 5px 16px; }
.bulle .qui { font-size: 12.5px; color: #1d4ed8; margin-bottom: 1px; }
.bulle .t { font-size: 15.5px; line-height: 1.4; }
.bulle .h { font-size: 11.5px; opacity: .75; margin-top: 2px; }
.msg-form textarea { font-size: 15px; min-height: 46px; }
.msg-form .btn { height: 46px; }

/* Pulsation : messages non lus (rouge) et interventions à facturer (orange), tant que le compteur n'est pas à zéro */
.msg-bell.has { animation: pulse-msg 1.3s ease-in-out infinite; }
#bell.has { animation: pulse-fact 1.3s ease-in-out infinite; }
.msg-bell.has b, #bell.has b { animation: pulse-pastille 1.3s ease-in-out infinite; }
@keyframes pulse-msg { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } }
@keyframes pulse-fact { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.75); } 70%, 100% { box-shadow: 0 0 0 10px rgba(245,158,11,0); } }
@keyframes pulse-pastille { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.25); } }
/* Windows « animations désactivées » (prefers-reduced-motion) : pas de mouvement, mais un halo qui s'allume et s'éteint */
@media (prefers-reduced-motion: reduce) {
  .msg-bell.has b, #bell.has b { animation: none; }
  .msg-bell.has { animation: halo-rouge 1.4s ease-in-out infinite; }
  #bell.has { animation: halo-orange 1.4s ease-in-out infinite; }
}
@keyframes halo-rouge { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,.75); } }
@keyframes halo-orange { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } 50% { box-shadow: 0 0 0 4px rgba(245,158,11,.8); } }

/* Rapport : phrase d'observation ajoutée (puce cochée) */
.chip.mini.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* ---------- lisibilité (04/10/2026) : trame du module, cadres délimités, zones de saisie marquées (thème clair) ---------- */
@media screen {
  body:not(.theme-dark):not(.kanban) { --bg: color-mix(in srgb, var(--brand) 6%, #eef0f4); }
  body:not(.theme-dark) .panel { border-color: #cbd3de; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 18px rgba(15,23,42,.06); }
  body:not(.theme-dark) .panel > h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-bottom: 10px; margin-bottom: 14px;
    border-bottom: 1px solid var(--line); font-size: 17px; }
  body:not(.theme-dark) .panel > h2::before { content: ""; width: 5px; height: 20px; border-radius: 3px; background: var(--brand); flex-shrink: 0; }
  body:not(.theme-dark) .field > label, body:not(.theme-dark) .lbl { color: #334155; }
  body:not(.theme-dark) :is(.input, .field input, .field select, .field textarea) { background: var(--surface-2); border-color: #b6c0ce; }
  body:not(.theme-dark) :is(.input, .field input, .field select, .field textarea):hover { border-color: #8f9bad; }
  body:not(.theme-dark) :is(.input, .field input, .field select, .field textarea):focus { background: var(--surface); }
  body:not(.theme-dark) :is(.input, .field input, .field select, .field textarea):disabled { background: var(--surface-2); border-color: var(--line); border-style: dashed; color: var(--muted); }
  body:not(.theme-dark) .input.big { border-color: var(--accent); background: var(--surface); }
  body:not(.theme-dark) .btn { border: 1.5px solid #c3cbd7; box-shadow: 0 1px 2px rgba(15,23,42,.07); }
  body:not(.theme-dark) .btn:hover { border-color: #8f9bad; }
  body:not(.theme-dark) :is(.btn.primary, .btn.brand, .btn.ok, .btn.teal) { border-color: transparent; }
  /* actions d'en-tête de fiche : un peu plus grandes, icône à la couleur du module */
  body:not(.theme-dark) :is(.head, .fiche-head) .btn:not(.primary):not(.brand):not(.ok):not(.teal):not(.small) { min-height: 44px; font-weight: 700; border-color: color-mix(in srgb, var(--brand) 40%, #c3cbd7); }
  body:not(.theme-dark) :is(.head, .fiche-head) .btn:not(.primary):not(.brand):not(.ok):not(.teal):not(.small) svg { color: var(--brand); }
  body:not(.theme-dark) :is(.head, .fiche-head) .btn:not(.primary):not(.brand):not(.ok):not(.teal):not(.small):not(.histo):hover { background: var(--brand-bg); border-color: var(--brand); }
  body:not(.theme-dark) :is(.head, .fiche-head) .btn.danger:hover { background: #fdecec; border-color: #b91c1c; }
}

/* ---------- particulier / professionnel ---------- */
.badge-pro { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; background: #0369a1; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .06em; vertical-align: middle; }
.type-client { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.type-client .tc { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); text-align: left; cursor: pointer; color: var(--text); }
.type-client .tc b { display: block; font-size: 17px; }
.type-client .tc small { display: block; color: var(--muted); font-size: 12.5px; }
.type-client .tc-ic { font-size: 26px; line-height: 1; }
.type-client .tc:hover { border-color: #94a3b8; }
.type-client .tc.on { border-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.type-client .tc.pro.on { border-color: #0369a1; background: #e0f2fe; box-shadow: 0 0 0 3px rgba(3,105,161,.15); }
.type-client .tc.on small { color: #334155; }
.pro-sugg { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 10px; background: #e0f2fe; color: #0c4a6e; font-weight: 600; font-size: 13.5px; }
body.theme-dark .type-client .tc.on, body.theme-dark .type-client .tc.pro.on { background: #1e293b; }
@media (max-width: 640px) { .type-client { grid-template-columns: 1fr; } }
.cp-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.cp-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.cp-item:hover { background: var(--surface-2); }
.cp-item input { width: 18px; height: 18px; }
span.badge-pro, .who span.badge-pro, .result span.badge-pro { display: inline-flex; color: #fff !important; background: #0369a1 !important; font-size: 11px !important; font-weight: 800 !important; padding: 1px 7px !important; margin-left: 4px; }
.alert { padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.alert.warn { background: #fdf3e6; color: #92400e; border: 1px solid #f3d3a5; }

/* Planning compact (05/10) : colonne du jour plus large, date sur une ligne, boutons côte à côte ; place de réserve visible */
.day { grid-template-columns: 150px minmax(0, 1fr) 190px; }
.day.neuf-vide { grid-template-columns: 150px minmax(0, 1fr) 76px; }
.day-label { padding: 10px 12px; }
.day-label .dd-l { display: flex; align-items: baseline; gap: 6px; }
.day-label .dd { font-size: 26px; }
.day-label .reste { margin-top: 4px; }
.add-btns { flex-direction: row; gap: 5px; margin-top: 8px; }
.add-btns .add-site { flex: 1; width: auto; padding: 4px 4px; }
.slot-empty.slot-res { position: relative; border: 2px dashed #dc2626; color: #dc2626; background: #fef2f2; }
.slot-empty.slot-res:hover { border-style: solid; background: #fee2e2; color: #b91c1c; }
.slot-res .res-badge { position: absolute; top: -9px; left: 8px; right: 8px; text-align: center; background: #dc2626; color: #fff; font-size: 10px;
  font-weight: 800; letter-spacing: .02em; border-radius: 99px; padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slots { padding-top: 6px; }

/* 06/10 : titre du planning, statut de la fiche */
.planning-titre { margin: 0 0 0 auto; font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--brand); line-height: 1; }
.statut-lbl { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: -4px; }

/* 06/10 : pages Clients et Historique */
.page-head { display: flex; align-items: flex-end; gap: 16px; }
.page-head .kicker { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.page-head .title { margin: 2px 0 0; }
.page-head .sub { margin: 6px 0 0; max-width: 900px; }
.cl-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0 12px; }
.cl-search { flex: 1 1 380px; }
.cl-search .input { width: 100%; }
.seg button small { font-size: 11.5px; font-weight: 800; margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: rgba(15,23,42,.08); }
.seg .on small { background: var(--brand); color: #fff; }
.cl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cl-grid { grid-template-columns: 1fr; } }
.cl-list { padding: 8px; position: sticky; top: calc(76px + var(--mb, 0px)); max-height: calc(100vh - 96px - var(--mb, 0px)); overflow: auto; }
.cl-list-titre { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 6px; }
.cl-groupe { display: flex; align-items: center; gap: 8px; margin: 8px 6px 4px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2);
  font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.cl-groupe span { margin-left: auto; color: var(--muted); }
.cl-item { border-radius: 10px; border-bottom: 0; margin: 2px 0; }
.cl-item .der { font-size: 12px; color: var(--faint); }
.avatar.pro { background: #e0f2fe; font-size: 18px; }
.avatar.big { width: 64px; height: 64px; font-size: 22px; }
.avatar.big.pro { font-size: 30px; }
.cl-vide { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 50px 30px; color: var(--muted); }
.cl-vide > div { font-size: 40px; }
.cl-vide b { color: var(--text); font-size: 17px; }
.cl-vide span { max-width: 420px; }
.cl-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 4px 0 14px; border-bottom: 1px solid var(--line-2); }
.cl-id { flex: 1 1 260px; min-width: 0; }
.cl-id h2 { margin: 0; font-family: var(--display); font-size: 26px; font-weight: 800; }
.cl-contact { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 14px; }
.cl-contact a { color: var(--accent); text-decoration: none; font-weight: 600; }
.cl-contact a:hover { text-decoration: underline; }
.cl-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0 4px; }
.cl-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--brand-bg, #fdf2f8);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, #fff); }
.cl-stats b { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--brand); }
.cl-stats span { font-size: 12px; color: #4b5563; }
.cl-sec { margin: 20px 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand);
  display: flex; align-items: center; gap: 10px; }
.cl-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.h-recherche { position: sticky; top: calc(76px + var(--mb, 0px)); max-height: calc(100vh - 96px - var(--mb, 0px)); overflow: auto; }
.h-carte .kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand); }
.h-annee { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--brand); margin: 10px 0 0; padding-left: 4px; }
.hit { border-left-color: var(--brand); }
.hit summary { padding: 11px 14px; }
.hit[open] { box-shadow: var(--shadow); }
.aitem .pill { color: #fff; font-size: 11px; }
.result .hist.nouveau { background: var(--brand-bg); color: var(--brand); font-weight: 700; }
.board-head a.chip { text-decoration: none; color: inherit; }
.planning-titre { font-size: 34px; }
.btn.histo { border-color: color-mix(in srgb, var(--brand) 45%, #fff); color: var(--brand); background: var(--brand-bg); font-weight: 800; }
.btn.histo:hover, body:not(.theme-dark) :is(.head, .fiche-head) .btn.histo:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.histo .nb { min-width: 22px; padding: 0 6px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 12px; text-align: center; }
.btn.histo:hover .nb { background: var(--surface); color: var(--brand); }
/* compte rendu du RDV sur site : corps défilant, pied (total + boutons) toujours visible */
.cr-box { width: min(660px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.cr-corps { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 14px; overflow: auto; }
.cr-pied { display: flex; flex-direction: column; gap: 10px; padding: 12px 24px 18px; border-top: 1px solid var(--line); background: var(--surface); }
.cr-grille { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: end; }
.cr-duree { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.cr-h { padding: 10px 12px; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.cr-lignes { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.cr-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; gap: 6px; }
.cr-total { padding: 12px 14px; border-radius: 12px; background: var(--navy); color: #e2e8f0; font-size: 15px; }
.cr-total b { color: #fff; font-family: var(--display); font-size: 20px; }

/* « Factures prêtes » (avec MIS Devis / Facture) : information verte pour l'accueil, pas une alerte */
.bell.pret.has { border-color: #22c55e; color: #bbf7d0; }
.bell.pret b { background: #16a34a; color: #fff; }
#bell.pret.has { animation: pulse-pret 1.3s ease-in-out infinite; }
@keyframes pulse-pret { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.75); } 70%, 100% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
.fact-tous { padding: 0 18px 10px; display: flex; justify-content: flex-end; }
.bill.pret { border-left: 4px solid #16a34a; }
.bill.pret .bill-sum { text-decoration: none; }
.bill.pret .bill-sum:hover { background: #f0fdf4; border-radius: 10px; }
.bill.pret .go { color: #16a34a; font-weight: 800; font-size: 16px; }
.bill.pret .chip-cpl { align-self: flex-start; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.bill-mini { display: flex; gap: 16px; flex-wrap: wrap; padding: 0 14px 10px; font-size: 12.5px; }
.bill-mini a, .bill-mini .lnk { color: var(--muted); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bill-mini a:hover, .bill-mini .lnk:hover { color: var(--text, #0f172a); }
.bill-notice.pret { background: #f0fdf4; color: #052e16; border-color: #86efac; }
.bill-notice.pret .ic { background: #16a34a; }
@media (prefers-reduced-motion: reduce) { #bell.pret.has { animation: none; box-shadow: 0 0 0 3px rgba(34,197,94,.45); } }

/* ---------- accessibilité et harmonisation (audit du 06/10/2026) ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar :focus-visible { outline-color: #fff; }
.tbl th.num { text-align: right; }
a.sms-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* accueil › Demande : « forfait… » propose les prestations */
.prob-wrap { position: relative; }
.presta-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15,23,42,.16); padding: 6px; max-height: 320px; overflow: auto; }
.presta-sugg .ps { display: flex; width: 100%; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.presta-sugg .ps.on, .presta-sugg .ps:hover { background: var(--accent-bg); color: var(--accent); }
.presta-sugg .ps b { white-space: nowrap; }
.presta-sugg .ps small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.presta-sugg .ps-titre { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 12px 2px; }
.presta-sugg { max-height: 360px; overflow: auto; }
/* adresse : suggestions de la Base Adresse Nationale */
.adr-wrap { position: relative; }
.adr-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15,23,42,.16); padding: 6px; max-height: 300px; overflow: auto; }
.adr-sugg button { display: block; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.adr-sugg button.on, .adr-sugg button:hover { background: var(--accent-bg); color: var(--accent); }
.adr-sugg small { color: var(--muted); margin-left: 6px; }

/* ---------- en-tête commun du PGI MIS (option A) : bande blanche d'identité + menu teinté + pied de page ---------- */
.modbar { position: sticky; top: 0; z-index: 31; display: flex; align-items: center; gap: 14px; padding: 8px 20px; background: var(--surface);
  border-bottom: 1px solid var(--line); font-family: "Figtree", Arial, sans-serif; }
.modbar + .topbar { top: var(--mb, 0px); }
.modbar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mb-ident { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.mb-logo { width: 38px; height: 38px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 12.5px; letter-spacing: .04em; flex: none; }
.mb-txt { display: flex; flex-direction: column; }
.mb-t { font-family: var(--display, "Bricolage"), "Figtree", sans-serif; font-weight: 800; font-size: 21px; line-height: 1.05; white-space: nowrap; }
.mb-t b { color: var(--brand); }
.mb-s { font-size: 11.5px; color: #8a93a3; font-weight: 700; margin-top: 3px; letter-spacing: .02em; white-space: nowrap; }
.mb-sep { width: 1px; height: 30px; background: #e5e7eb; margin: 0 2px; }
.mb-aller { font-size: 11px; font-weight: 800; color: #8a93a3; letter-spacing: .1em; text-transform: uppercase; }
.mb-mods { display: flex; gap: 8px; }
.mb-mod[data-m=atelier] { --m: #c0007f; } .mb-mod[data-m=facture] { --m: #c2410c; } .mb-mod[data-m=compta] { --m: #0f766e; }
.mb-mod { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 9px; font-weight: 800; font-size: 13.5px; color: var(--m);
  text-decoration: none; border: 1.5px solid color-mix(in srgb, var(--m) 35%, #fff); background: var(--surface); white-space: nowrap; }
.mb-mod:hover { background: color-mix(in srgb, var(--m) 8%, #fff); border-color: var(--m); }
.mb-sp { flex: 1; }
.modbar .rp-zone { margin-left: 0; }
.mb-user { display: flex; align-items: center; gap: 9px; padding: 3px 4px 3px 4px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: #334155; white-space: nowrap; }
.mb-av { width: 30px; height: 30px; border-radius: 50%; background: #334155; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.mb-logout { border: 0; background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.mb-logout:hover { background: #e2e8f0; color: var(--text); }
/* menu du module : à la couleur du module, pour tous les comptes */
body.barre-teinte .topbar { background: var(--brand); }
body.barre-teinte .topbar .nav a { color: rgba(255,255,255,.9); display: inline-flex; align-items: center; gap: 7px; }
body.barre-teinte .topbar .nav a svg.mi { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
body.barre-teinte .topbar .nav a:hover { background: rgba(0,0,0,.14); }
body.barre-teinte .topbar .nav a.active { background: rgba(0,0,0,.22); color: #fff; box-shadow: inset 0 -3px 0 #fff; }
body.barre-teinte .topbar .btn-ghost-dark { border-color: rgba(255,255,255,.5); color: #fff; }
body.barre-teinte .topbar .btn-ghost-dark:hover { background: rgba(0,0,0,.14); }
/* pied de page : version et auteur */
.mis-pied { display: flex; gap: 14px; align-items: center; padding: 10px 24px 12px; margin-top: 24px; font-size: 11.5px; color: #8a93a3; border-top: 1px solid rgba(15,23,42,.07); }
.mis-pied b { color: var(--muted); }
.mis-pied .sp { flex: 1; }
@media (max-width: 1100px) { .mb-s, .mb-aller, .mb-nom { display: none; } .mb-t { font-size: 18px; } }
@media (max-width: 760px) { .mb-sep, .mb-mods .mb-mod { font-size: 0; gap: 0; } .mb-mod svg { width: 18px; height: 18px; } }
@media print { .modbar, .mis-pied { display: none !important; } }
body.tv .modbar, body.tv .mis-pied { display: none !important; }

/* ---------- finitions de l'en-tête (08/10/2026) : menu plus lisible, Déconnexion bien visible ---------- */
.mb-logout { border: 1.5px solid #dc2626; background: var(--surface); color: #b91c1c; padding: 5px 13px; font-weight: 800; }
.mb-logout:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
html[data-theme=dark] .mb-logout { color: #fca5a5; border-color: #ef4444; }
html[data-theme=dark] .mb-logout:hover { background: #dc2626; color: #fff; }
body.barre-teinte .topbar { box-shadow: 0 2px 6px rgba(15,23,42,.12); }
body.barre-teinte .topbar .nav a { font-size: 15px; font-weight: 700; color: #fff; padding: 9px 13px; }
body.barre-teinte .topbar .nav a svg.mi { width: 17px; height: 17px; opacity: 1; }
body.barre-teinte .topbar .nav a.active { font-weight: 800; }
/* boutons du menu (atelier : Messages, RDV sur site, gazole) et « En direct » : lisibles sur la couleur du module */
body.barre-teinte .topbar .bell { border: 1.5px solid rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.12); font-weight: 700; font-size: 14px; }
body.barre-teinte .topbar .bell:hover { background: rgba(255,255,255,.24); }
body.barre-teinte .topbar .bell.has { border-color: #fff; background: rgba(255,255,255,.22); color: #fff; }
body.barre-teinte .topbar .fuel.alerte { background: #dc2626; border-color: #fff; }
body.barre-teinte .topbar .live { color: #fff; font-weight: 700; }
@media (max-width: 1200px) { body.barre-teinte .topbar .nav a { font-size: 14px; padding: 8px 9px; } }

/* ---------- mot de passe masqué + œil ; bouton rouge (suppression) ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 92px; }
.pw-oeil { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pw-oeil:hover, .pw-oeil.on { color: var(--accent, #1d4ed8); border-color: currentColor; }
.btn.rouge { background: #dc2626; border-color: #dc2626; color: #fff; font-weight: 700; }
.btn.rouge:hover { background: #b91c1c; border-color: #b91c1c; }

/* ---------- « À voir avec moi » (bande blanche) ---------- */
.av-zone { position: relative; display: flex; align-items: center; }
.av-zone.hidden, .av-panneau.hidden { display: none !important; }
.av-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 10px; font: inherit; font-weight: 800; font-size: 13.5px;
  cursor: pointer; border: 2px solid #ea580c; background: #fff7ed; color: #c2410c; white-space: nowrap; animation: av-halo 1.6s ease-in-out 3; }
.av-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.av-btn .av-n { background: #ea580c; color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 7px; }
.av-btn:hover { background: #ffedd5; }
@keyframes av-halo { 50% { box-shadow: 0 0 0 5px rgba(234,88,12,.25); } }
@media (prefers-reduced-motion: reduce) { .av-btn { animation: none; } }
.av-panneau { position: absolute; right: 0; top: calc(100% + 8px); width: min(480px, 92vw); background: var(--surface); color: var(--text); border-radius: 14px; z-index: 60;
  box-shadow: 0 18px 40px rgba(15,23,42,.28); border: 1px solid var(--line); padding: 12px 14px; }
.av-panneau h3 { margin: 4px 4px 4px; font-size: 16px; }
.av-sub { margin: 0 4px 8px; font-size: 12.5px; color: var(--muted); }
.av-it { display: flex; gap: 12px; align-items: center; padding: 10px 6px; border-radius: 10px; color: inherit; text-decoration: none; }
.av-it + .av-it { border-top: 1px solid var(--line); }
.av-it:hover { background: var(--surface-2); }
.av-ic { width: 30px; height: 30px; border-radius: 50%; background: #ffedd5; color: #c2410c; display: grid; place-items: center; font-weight: 900; flex: none; }
.av-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.av-tx span, .av-tx small { color: var(--muted); font-size: 12.5px; }
.av-go { font-weight: 800; font-size: 12.5px; color: #c2410c; white-space: nowrap; }
html[data-theme=dark] .av-btn { background: #3a2010; color: #fdba74; }
html[data-theme=dark] .av-ic { background: #3a2010; color: #fdba74; }
@media (max-width: 1100px) { .av-btn { font-size: 0; gap: 4px; } .av-btn .av-n { font-size: 12px; } }

/* ---------- rappels et fin de journée (bande « Modules ») ---------- */
.rp-zone { position: relative; margin-left: auto; display: flex; gap: 8px; align-items: center; align-self: center; }
.modbar.onglets .rp-zone { margin-bottom: 7px; }
.rp-zone.hidden, .rp-zone .hidden { display: none !important; }
.rp-btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 10px; font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer;
  border: 2px solid var(--line); background: var(--surface); color: var(--muted); white-space: nowrap; }
.rp-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-btn.rp-on { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.rp-btn .rp-n { background: #dc2626; color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 7px; }
.rp-fin { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.rp-fin.fini { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.rp-panneau { position: absolute; right: 0; top: calc(100% + 8px); width: min(500px, 92vw); background: var(--surface); color: var(--text); border-radius: 14px; z-index: 60;
  box-shadow: 0 18px 40px rgba(15,23,42,.28); border: 1px solid var(--line); padding: 12px 14px; text-align: left; font-weight: 400; }
.rp-panneau h3 { margin: 4px 4px 8px; font-size: 16px; }
.rp-panneau .rp-h-fin { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rp-sub { margin: -4px 4px 6px; font-size: 12.5px; color: var(--muted); }
.rp-vide { margin: 4px; color: #15803d; font-weight: 700; }
.rp-it { display: flex; gap: 12px; align-items: center; padding: 9px 6px; border-radius: 10px; --fg: #b45309; }
.rp-it.err { --fg: #b91c1c; }
.rp-it + .rp-it { border-top: 1px solid var(--line); }
.rp-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--fg); font-weight: 900; flex: none; }
.rp-it b { display: block; font-size: 14.5px; }
.rp-it div span { display: block; font-size: 12.5px; color: #5b6475; }
.rp-go { margin-left: auto; border: 1.5px solid var(--fg); color: var(--fg); background: var(--surface); border-radius: 8px; padding: 6px 10px; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; }
.rp-ck { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); font-size: 14px; }
.rp-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); background: var(--surface); display: grid; place-items: center; flex: none; padding: 0; font-weight: 900; color: #fff; cursor: pointer; }
.rp-box[disabled] { cursor: default; }
.rp-ck.fait .rp-box { background: #15803d; border-color: #15803d; }
.rp-ck.fait .rp-lib { color: var(--muted); text-decoration: line-through; }
.rp-act { margin-left: auto; border: 0; background: none; color: #1d4ed8; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; white-space: nowrap; }
@media print { .rp-zone { display: none !important; } }

/* ---------- mode nuit (bouton ☀ / 🌙 de la bande blanche ; html[data-theme=dark]) ---------- */
html[data-theme=dark] {
  --bg: #0e1320; --surface: #171d2b; --surface-2: #1d2434; --line: #2b3446; --line-2: #222a3a;
  --text: #e6e9ef; --muted: #a7b0c0; --faint: #7f899c; --navy: #0b1020;
  --accent: #7aa2ff; --accent-bg: #1a2546; --accent-bd: #3a5bb0;
  --brand-bg: color-mix(in srgb, var(--brand) 22%, #171d2b); --teal-bg: #10302c;
  --ok: #4ade80; --ok-bg: #12301f; --warn: #fbbf24; --warn-bg: #33270f; --danger: #f87171; --danger-bg: #3a1719;
  --debit-bg: #1a2546; --credit-bg: #3a2214;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 2px 12px rgba(0,0,0,.35);
  color-scheme: dark;
}
html[data-theme=dark] body { background: var(--bg); color: var(--text); }
html[data-theme=dark] input:not([type=checkbox]):not([type=radio]):not([type=range]), html[data-theme=dark] select, html[data-theme=dark] textarea {
  background-color: var(--surface-2); color: var(--text); border-color: var(--line); }
html[data-theme=dark] input::placeholder, html[data-theme=dark] textarea::placeholder { color: #6f7a8f; }
html[data-theme=dark] dialog { background: var(--surface); color: var(--text); }
html[data-theme=dark] [style*="background:#fff"], html[data-theme=dark] [style*="background: #fff"] { background: var(--surface) !important; }
html[data-theme=dark] [style*="color:#0f172a"], html[data-theme=dark] [style*="color: #0f172a"], html[data-theme=dark] [style*="color:#111827"] { color: var(--text) !important; }
html[data-theme=dark] .mb-mod { border-color: color-mix(in srgb, var(--m) 55%, #171d2b); color: color-mix(in srgb, var(--m) 55%, #fff); }
html[data-theme=dark] .mb-av { background: #475569; }
html[data-theme=dark] .mb-logout { background: var(--surface-2); color: var(--muted); }
html[data-theme=dark] .rp-btn { background: var(--surface-2); }
html[data-theme=dark] .rp-btn.rp-on { background: #33270f; color: #fcd34d; }
html[data-theme=dark] .rp-fin { background: #1a2546; color: #93c5fd; }
html[data-theme=dark] .rp-fin.fini { background: #12301f; color: #86efac; }
html[data-theme=dark] .rp-panneau, html[data-theme=dark] .rp-go { background: var(--surface); color: var(--text); }
html[data-theme=dark] .rp-it b { color: var(--text); }
html[data-theme=dark] .switch::after { background: #e6e9ef; }
html[data-theme=dark] .modecard.rdvc { --mc: #a78bfa; --mc-bg: #241a3d; }
html[data-theme=dark] .modecard.sitec { --mc: #7dd3fc; --mc-bg: #0f2a3a; }
html[data-theme=dark] .modecard.neuf { --mc: #2dd4bf; }
html[data-theme=dark] .modecard.rep:not(.on) { --mc: #f472b6; }
/* impressions : toujours en clair */
@media print { html[data-theme=dark] {
  --bg: #eef0f4; --surface: #ffffff; --surface-2: #f7f8fa; --line: #dde2ea; --line-2: #eef0f4;
  --text: #111827; --muted: #5b6475; --faint: #8a93a3;
  --navy: #0f172a; --accent: #1d4ed8; --accent-bg: #eef3ff; --accent-bd: #9db4f0;
  --brand: #c0007f; --brand-bg: #fdf0f8; --teal: #0f766e; --teal-bg: #e7f6f3;
  --ok: #15803d; --ok-bg: #e9f8ef; --warn: #b45309; --warn-bg: #fdf3e6; --danger: #b91c1c; --danger-bg: #fdecec;
  --col-afaire: #64748b; --col-encours: #2563eb; --col-attente: #d97706; --col-pret: #15803d; --col-rendu: #475569; --col-sav: #9333ea;
  --radius: 14px; --shadow: 0 1px 2px rgba(15,23,42,.05), 0 2px 10px rgba(15,23,42,.05);
  --display: "Bricolage", "Figtree", system-ui, sans-serif;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
  color-scheme: light; } html[data-theme=dark] body { background: #fff; color: #111827; } }
/* bouton jour / nuit */
.mb-theme { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; padding: 0; }
.mb-theme:hover { color: var(--text); border-color: var(--muted); }
.mb-theme svg { width: 18px; height: 18px; }

/* ---------- mode nuit : équivalents sombres générés (darkgen.py) ---------- */
@media screen {
:where(html[data-theme=dark]) .chip.green.on { color: #9ae9b8; }
:where(html[data-theme=dark]) .chip.teal.on { color: #97ece7; }
:where(html[data-theme=dark]) .seg { background: #24272e; }
:where(html[data-theme=dark]) .step.done .step-num { background: #143d22; }
:where(html[data-theme=dark]) .avatar { background: #18213a; }
:where(html[data-theme=dark]) .client-card { background: #12203f; border-color: #2b3446; }
:where(html[data-theme=dark]) .teal-mode .client-card { background: #1d342f; }
:where(html[data-theme=dark]) .new-client { background: #12203f; }
:where(html[data-theme=dark]) .teal-mode .new-client { background: #1d342f; }
:where(html[data-theme=dark]) .overlay .ok-ic { background: #143d22; }
:where(html[data-theme=dark]) .day-label { background: #361b2e; color: #e697ed; }
:where(html[data-theme=dark]) .card.late { background: #381919; }
:where(html[data-theme=dark]) .site-line { background: #122d3f; border-color: #2b3446; }
:where(html[data-theme=dark]) .site-line .h { color: #8ed1f6; }
:where(html[data-theme=dark]) .neuf-col { background: #21312d; }
:where(html[data-theme=dark]) .neuf-col .row-title::after { background: #1f332f; }
:where(html[data-theme=dark]) .counter { background: #1d3526; border-color: #2b3446; }
:where(html[data-theme=dark]) .counter.bad { background: #381919; }
:where(html[data-theme=dark]) .forfait.on { background: #1d3526; }
:where(html[data-theme=dark]) .switch { background: #23282e; }
:where(html[data-theme=dark]) .swatch { border-color: #2b3446; }
:where(html[data-theme=dark]) .bell b { color: #f6ce8e; }
:where(html[data-theme=dark]) .bill-notice { background: #3f2e12; color: #f6cd8e; }
:where(html[data-theme=dark]) .bill-notice .x { color: #f1cb93; }
:where(html[data-theme=dark]) .tag.bill-tag { color: #f6ce8e; }
:where(html[data-theme=dark]) .rendu-btn { color: #9ae9b8; }
:where(html[data-theme=dark]) .choix-neuf button { background: color-mix(in srgb, var(--c) 7%, #1d2434); }
:where(html[data-theme=dark]) .rdv-mode .client-card { background: #21123f; }
:where(html[data-theme=dark]) .rdv-mode .new-client { background: #21123f; }
:where(html[data-theme=dark]) .rdv-mode .day-btn.on { background: #21133f; }
:where(html[data-theme=dark]) .rdv-mode .tile.on { background: #21133f; }
:where(html[data-theme=dark]) .famille.top { background: #3f3712; }
:where(html[data-theme=dark]) .famille.top .lbl { color: #f4b68f; }
:where(html[data-theme=dark]) .pb-row.freq { background: #3f3712; }
:where(html[data-theme=dark]) .pb-row.freq .pb-t { color: #f4b68f; }
:where(html[data-theme=dark]) #pb-chips .chip { background: color-mix(in srgb, var(--tc, #94a3b8) 6%, #1d2434); }
:where(html[data-theme=dark]) .sature { background: #3f2b12; color: #f2aa91; }
:where(html[data-theme=dark]) .site-mode .client-card { background: #122d3f; }
:where(html[data-theme=dark]) .site-mode .new-client { background: #122d3f; color: #8ed1f6; }
:where(html[data-theme=dark]) .site-mode .day-btn.on { background: #122d3f; }
:where(html[data-theme=dark]) .impact { background: #122d3f; color: #8ed1f6; border-color: #2b3446; }
:where(html[data-theme=dark]) .site-line { background: #122d3f; }
:where(html[data-theme=dark]) .site-line .imp { color: #8ed1f6; }
:where(html[data-theme=dark]) .site-ban { background: #122d3f; color: #8ed1f6; }
:where(html[data-theme=dark]) .rdv-l.site { background: #122d3f; }
:where(html[data-theme=dark]) .rdv-l.site .h { color: #8ed1f6; }
:where(html[data-theme=dark]) .pret-ban { background: #3f2b12; color: #f2aa91; }
:where(html[data-theme=dark]) .pc-ic { background: #3f2b12; }
:where(html[data-theme=dark]) .pc-ic.libre { background: #153d2a; }
:where(html[data-theme=dark]) .close-x:hover { background: #3f1212; }
:where(html[data-theme=dark]) .raz-menu button:hover { background: #3f1212; }
:where(html[data-theme=dark]) .raz-menu button[data-raz="annuler"]:hover { background: #143d22; }
:where(html[data-theme=dark]) .site-rdv { background: #122d3f; border-color: #2b3446; }
:where(html[data-theme=dark]) .site-rdv.neuf { background: #122d3f; }
:where(html[data-theme=dark]) .site-rdv .h { color: #8ed1f6; }
:where(html[data-theme=dark]) .bill-notice.site .ic { background: #122d3f; }
:where(html[data-theme=dark]) .sugg { background: #123d3f; color: #97d8ec; border-color: #2b3446; }
:where(html[data-theme=dark]) .sugg .muted { color: #8fdef4; }
:where(html[data-theme=dark]) .slot-empty.cible { background: #123d3f; color: #8ee2f6; }
:where(html[data-theme=dark]) .act-btns .ok { color: #9ae9b8; }
:where(html[data-theme=dark]) .act-btns .ko { color: #ed9797; }
:where(html[data-theme=dark]) .act-btns .go { background: #3b172a; color: #ef94b9; }
:where(html[data-theme=dark]) .act-btns .sav { background: #29123f; color: #c699eb; }
:where(html[data-theme=dark]) .conv .av.tous { background: #3f3612; }
:where(html[data-theme=dark]) .msg-head .av, :where(html[data-theme=dark]) .conv .av { background: #121c3f; color: #a5a0e3; }
:where(html[data-theme=dark]) .msg-head .av.tous, :where(html[data-theme=dark]) .conv .av.tous { background: #3f3612; }
:where(html[data-theme=dark]) .drawer-body.fil { background: #212730; }
:where(html[data-theme=dark]) .fil-jour span { background: #23272f; }
:where(html[data-theme=dark]) .bulle { border-color: #2b3446; }
:where(html[data-theme=dark]) .type-client .tc.pro.on { background: #122d3f; }
:where(html[data-theme=dark]) .type-client .tc.on small { color: #b2bfd1; }
:where(html[data-theme=dark]) .pro-sugg { background: #122d3f; color: #91cff3; }
:where(html[data-theme=dark]) .alert.warn { background: #3e2c14; color: #f4b68f; }
:where(html[data-theme=dark]) .slot-empty.slot-res { background: #3e1414; }
:where(html[data-theme=dark]) .slot-empty.slot-res:hover { background: #3f1212; color: #ef9595; }
:where(html[data-theme=dark]) .avatar.pro { background: #122d3f; }
:where(html[data-theme=dark]) .cl-stats span { color: #b9c0ca; }
:where(html[data-theme=dark]) .cr-h { background: #153d2a; border-color: #2b3446; }
:where(html[data-theme=dark]) .bill.pret .bill-sum:hover { background: #163c22; }
:where(html[data-theme=dark]) .bill.pret .go { color: #93f0b6; }
:where(html[data-theme=dark]) .bill.pret .chip-cpl { background: #3f3612; color: #f4b68f; }
:where(html[data-theme=dark]) .bill-notice.pret { background: #163c22; color: #91f3b9; }
}
/* ---------- fin des équivalents sombres générés ---------- */

/* ---------- rapport : produits du catalogue à la douchette ---------- */
.art-scan { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface-2); }
.art-picker { position: relative; }
.art-picker .art-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; pointer-events: none; }
.art-picker .input { padding-left: 40px; background: var(--surface); }
.art-res { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16); padding: 6px; max-height: 340px; overflow: auto; }
.art-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.art-opt span:first-child { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.art-opt small, .art-lib small { color: var(--muted); font-size: 12px; }
.art-opt:hover, .art-opt.on { background: color-mix(in srgb, var(--brand, #c0007f) 9%, var(--surface)); }
.art-opt .art-p { font-weight: 700; white-space: nowrap; }
.art-vide { padding: 10px; color: var(--muted); }
.art-lignes { display: flex; flex-direction: column; gap: 6px; }
.art-l { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.art-lib { flex: 1 1 260px; display: flex; flex-direction: column; min-width: 0; }
.art-qte { display: flex; align-items: center; gap: 5px; }
.art-qte input { width: 46px; padding: 7px 6px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; }
.art-pu { color: var(--muted); white-space: nowrap; }
.art-mt { min-width: 76px; text-align: right; white-space: nowrap; }

/* ---------- mode TEST ---------- */
#pgi-test { position: sticky; top: 0; z-index: 1000; background: repeating-linear-gradient(135deg, #b91c1c 0 18px, #991b1b 18px 36px); color: #fff;
  font: 800 13px/1.2 "Figtree", system-ui, sans-serif; letter-spacing: .04em; text-align: center; padding: 7px 12px; }
@media print { #pgi-test { display: none; } }