/* ==========================================================================
   INTECSYS — couche interactive de la démo
   Modales, menus, toasts, palette de commandes, états vides.
   N'utilise que les tokens déjà déclarés dans chaque page (--brand-700, etc.)
   ========================================================================== */

/* ---------------------------------------------------------------- Toasts */
.ix-toasts{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;
  flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.ix-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:11px;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ok-500);
  border-radius:var(--r);box-shadow:var(--sh-3);padding:12px 15px;min-width:280px;max-width:390px;
  animation:ix-slide .3s var(--ease-out)}
.ix-toast.out{animation:ix-slide-out .25s var(--ease-out) forwards}
.ix-toast .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;
  background:var(--ok-50);color:var(--ok-700)}
.ix-toast b{display:block;font-size:13px;color:var(--ink-900);font-weight:700;font-family:var(--fs-h)}
.ix-toast span{display:block;font-size:12.5px;color:var(--ink-500);margin-top:2px;line-height:1.45}
.ix-toast .go{margin-left:auto;font-size:12px;font-weight:700;color:var(--steel-600);
  cursor:pointer;white-space:nowrap;align-self:center}
.ix-toast.brand{border-left-color:var(--brand-700)}
.ix-toast.brand .ic{background:var(--brand-50);color:var(--brand-700)}
.ix-toast.warn{border-left-color:var(--warn-500)}
.ix-toast.warn .ic{background:var(--warn-50);color:var(--warn-700)}
@keyframes ix-slide{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ix-slide-out{to{opacity:0;transform:translateX(18px)}}

/* ------------------------------------------------------- Fond + fenêtres */
.ix-back{position:fixed;inset:0;z-index:200;background:rgba(20,23,28,.5);
  backdrop-filter:blur(4px);display:grid;place-items:center;padding:28px;
  animation:ix-fade .18s var(--ease-out);overflow-y:auto}
@keyframes ix-fade{from{opacity:0}to{opacity:1}}
.ix-back.out{animation:ix-fade .16s var(--ease-out) reverse forwards}

.ix-modal{width:100%;max-width:560px;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:0 34px 90px rgba(0,0,0,.42);overflow:hidden;animation:ix-pop .24s var(--ease-out);
  margin:auto}
.ix-modal.wide{max-width:720px}
@keyframes ix-pop{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}

.ix-mh{display:flex;align-items:center;gap:13px;padding:19px 22px;border-bottom:1px solid var(--line-2)}
.ix-mh .ic{width:38px;height:38px;border-radius:10px;background:var(--brand-50);color:var(--brand-700);
  display:grid;place-items:center;flex:none}
.ix-mh h3{font-size:16px;line-height:1.25}
.ix-mh p{font-size:12.5px;color:var(--ink-400);margin-top:2px}
.ix-mh .x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  color:var(--ink-400);cursor:pointer;flex:none;border:0;background:transparent}
.ix-mh .x:hover{background:var(--surface-2);color:var(--ink-700)}

.ix-mb{padding:20px 22px;max-height:min(62vh,560px);overflow-y:auto}
.ix-mf{display:flex;align-items:center;gap:10px;padding:15px 22px;border-top:1px solid var(--line-2);
  background:var(--surface-2)}
.ix-mf .hint{font-size:11.5px;color:var(--ink-400);margin-right:auto}
.ix-mf kbd{font-family:var(--fs-b);font-size:10.5px;font-weight:700;background:var(--surface);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--ink-500)}

/* ----------------------------------------------------------- Formulaires */
.ix-row{display:grid;gap:15px;margin-bottom:15px}
.ix-row.c2{grid-template-columns:1fr 1fr}
.ix-row.c3{grid-template-columns:1fr 1fr 1fr}
.ix-row:last-child{margin-bottom:0}
.ix-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.ix-f>label{font-size:12px;font-weight:700;color:var(--ink-600);letter-spacing:.01em}
.ix-f>label .opt{font-weight:500;color:var(--ink-400)}
.ix-in,.ix-sel,.ix-ta{width:100%;font-family:var(--fs-b);font-size:13.5px;color:var(--ink-800);
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.ix-ta{resize:vertical;min-height:74px;line-height:1.5}
.ix-sel{appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b747f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.ix-in:focus,.ix-sel:focus,.ix-ta:focus{border-color:var(--brand-600);box-shadow:var(--focus-ring)}
.ix-in::placeholder,.ix-ta::placeholder{color:var(--ink-300)}
.ix-in.bad,.ix-sel.bad,.ix-ta.bad{border-color:var(--danger-500);box-shadow:0 0 0 3px rgba(204,51,51,.13)}
.ix-err{font-size:11.5px;color:var(--danger-700);font-weight:600;display:none}
.ix-f.bad .ix-err{display:block}
.ix-help{font-size:11.5px;color:var(--ink-400)}
.ix-pre{position:relative}
.ix-pre .u{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12.5px;
  color:var(--ink-400);font-weight:600;pointer-events:none}
.ix-pre .ix-in{padding-right:44px}

/* Chips de choix (radio visuel) */
.ix-chips{display:flex;flex-wrap:wrap;gap:7px}
.ix-chips label{cursor:pointer}
.ix-chips input{position:absolute;opacity:0;width:0;height:0}
.ix-chips span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-pill);padding:7px 13px;font-size:12.5px;
  font-weight:600;color:var(--ink-600);transition:.15s}
.ix-chips span i{width:8px;height:8px;border-radius:50%;background:var(--ink-300)}
.ix-chips label:hover span{border-color:var(--ink-300)}
.ix-chips input:checked+span{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
.ix-chips input:checked+span i{background:currentColor}
.ix-chips input:focus-visible+span{box-shadow:var(--focus-ring)}

/* Sélecteur d'équipe */
.ix-team{display:flex;flex-wrap:wrap;gap:8px}
.ix-team label{cursor:pointer;position:relative}
.ix-team input{position:absolute;opacity:0;width:0;height:0}
.ix-team .p{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-pill);padding:4px 12px 4px 4px;transition:.15s}
.ix-team .p .av{width:26px;height:26px;font-size:10.5px;border-width:0}
.ix-team .p b{font-size:12.5px;font-weight:600;color:var(--ink-600)}
.ix-team label:hover .p{border-color:var(--ink-300)}
.ix-team input:checked+.p{border-color:var(--brand-600);background:var(--brand-50)}
.ix-team input:checked+.p b{color:var(--brand-700)}
.ix-team input:focus-visible+.p{box-shadow:var(--focus-ring)}

/* Récap de montant (devis / facture) */
.ix-total{display:flex;align-items:center;gap:10px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 15px;margin-top:2px}
.ix-total .l{font-size:12.5px;color:var(--ink-500);font-weight:600}
.ix-total .v{margin-left:auto;font-family:var(--fs-h);font-weight:800;font-size:18px;color:var(--ink-900)}
.ix-total .sub{font-size:11.5px;color:var(--ink-400);font-weight:600}

/* ------------------------------------------------------- Menu « Nouveau » */
.ix-anchor{position:relative}
/* Rendu dans <body>, jamais dans .topbar : le backdrop-filter de celle-ci
   rendrait le menu translucide. Position calculée en JS. */
.ix-menu{position:fixed;z-index:220;min-width:262px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:6px;animation:ix-pop .16s var(--ease-out)}
.ix-menu .sec{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-400);
  font-weight:700;padding:10px 10px 5px}
.ix-mi{display:flex;align-items:center;gap:11px;width:100%;padding:8px 10px;border-radius:8px;
  border:0;background:transparent;cursor:pointer;text-align:left;font-family:var(--fs-b);
  color:var(--ink-700);font-size:13.5px;font-weight:500}
.ix-mi:hover,.ix-mi.sel{background:var(--surface-2)}
.ix-mi .ic{width:30px;height:30px;border-radius:8px;background:var(--brand-50);color:var(--brand-700);
  display:grid;place-items:center;flex:none}
.ix-mi .tx b{display:block;font-weight:600;font-size:13.5px;color:var(--ink-800)}
.ix-mi .tx span{display:block;font-size:11.5px;color:var(--ink-400)}
.ix-mi kbd{margin-left:auto;font-family:var(--fs-b);font-size:10.5px;font-weight:700;
  background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--ink-400)}
.ix-menu hr{border:0;border-top:1px solid var(--line-2);margin:6px 4px}

/* -------------------------------------------------- Palette de commandes */
.ix-pal{width:100%;max-width:590px;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:0 34px 90px rgba(0,0,0,.45);overflow:hidden;animation:ix-pop .2s var(--ease-out);
  align-self:start;margin-top:9vh}
.ix-pal .top{display:flex;align-items:center;gap:11px;padding:15px 18px;border-bottom:1px solid var(--line-2)}
.ix-pal .top svg{color:var(--ink-400);flex:none}
.ix-pal input{flex:1;border:0;outline:0;background:transparent;font-family:var(--fs-b);
  font-size:15px;color:var(--ink-900)}
.ix-pal input::placeholder{color:var(--ink-300)}
.ix-pal .list{max-height:min(52vh,430px);overflow-y:auto;padding:6px}
.ix-pal .empty{padding:28px 18px;text-align:center;color:var(--ink-400);font-size:13px}
.ix-pal .foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line-2);
  background:var(--surface-2);font-size:11.5px;color:var(--ink-400);font-weight:600}
.ix-pal .foot kbd{font-family:var(--fs-b);font-size:10.5px;background:var(--surface);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;margin-right:5px}

/* ------------------------------------------------- Nouveautés / feedback */
@keyframes ix-flash{0%{background:var(--brand-50);box-shadow:0 0 0 3px var(--brand-100)}
  100%{background:transparent;box-shadow:none}}
.ix-fresh{animation:ix-flash 1.9s var(--ease-out)}
.kcard.ix-fresh,.ix-fresh.card{animation:ix-flash 1.9s var(--ease-out),ix-pop .3s var(--ease-out)}
.ix-tag{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;background:var(--brand-700);color:#fff;
  border-radius:var(--r-pill);padding:2px 8px}

/* Bandeau démo (pied de sidebar) */
.ix-demo{margin-top:12px;border-top:1px solid rgba(255,255,255,.07);padding-top:11px;
  display:flex;align-items:center;gap:8px;font-size:10.5px;color:var(--ink-500)}
.ix-demo b{color:#e6e9ee;font-weight:700}
.ix-demo button{margin-left:auto;border:0;background:rgba(255,255,255,.08);color:#cdd3db;
  font-family:var(--fs-b);font-size:10.5px;font-weight:600;border-radius:6px;padding:4px 8px;cursor:pointer}
.ix-demo button:hover{background:rgba(255,255,255,.16);color:#fff}

/* État vide de liste filtrée */
.ix-none{padding:34px 16px;text-align:center;color:var(--ink-400);font-size:13px}
.ix-none b{display:block;color:var(--ink-600);font-family:var(--fs-h);font-size:14px;margin-bottom:4px}

/* Onglets (page Devis & Factures) */
.ix-tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px;margin-bottom:18px;width:max-content}
.ix-tab{border:0;background:transparent;font-family:var(--fs-b);font-size:13px;font-weight:600;
  color:var(--ink-500);padding:7px 17px;border-radius:var(--r-pill);cursor:pointer;
  display:inline-flex;align-items:center;gap:8px}
.ix-tab .n{background:var(--line);color:var(--ink-600);border-radius:var(--r-pill);
  font-size:11px;font-weight:700;padding:0 7px}
.ix-tab:hover{color:var(--ink-800)}
.ix-tab.on{background:var(--surface);color:var(--ink-900);box-shadow:var(--sh-1)}
.ix-tab.on .n{background:var(--brand-700);color:#fff}

/* Composer réel de la messagerie */
.composer .inp[contenteditable]{color:var(--ink-800);outline:none;min-height:22px}
.composer .inp[contenteditable]:empty:before{content:attr(data-ph);color:var(--ink-300)}
.composer .send{border:0}
.ch-item{-webkit-user-select:none;user-select:none}

/* Cellules de planning cliquables */
.pgrid .cell{cursor:cell;position:relative}
.pgrid .cell:empty:hover:after{content:"+";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--ink-300);font-size:22px;font-weight:300}

/* Divers */
.kanban .kcol .kcard{transition:box-shadow var(--dur-fast),transform var(--dur-fast)}
[hidden]{display:none!important}
.ix-clickable{cursor:pointer}