/* Styles propres aux écrans : une section par écran, introduite par un commentaire à son nom. */

/* ── Commercial ───────────────────────────────────────────── */
.filter-bar .sp { flex: 1; }
.com-actions { display: inline-flex; gap: 6px; flex-wrap: nowrap; white-space: nowrap; }
.com-check, .stk-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.com-check input[type="date"] { width: auto; }
.com-muted { color: var(--muted); }
.com-pos { color: var(--success); }
.com-neg { color: var(--danger); }
.com-sep { border-left: 1px solid var(--border); }
.com-treso td:first-child { white-space: nowrap; }
.com-treso tr.com-cur td { background: var(--accent-d); }
.com-treso tr.com-tot td { font-weight: 700; border-top: 1px solid var(--border); }
.com-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px 0 10px; }
.com-notes { color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.com-warn { margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: 12px; background: color-mix(in oklab, var(--orange) 14%, transparent); color: var(--orange); border: 1px solid color-mix(in oklab, var(--orange) 35%, transparent); }
.btn-danger-txt { color: var(--danger); }
.rep-table select { width: 100%; min-width: 180px; }
.rep-table input.rep-amt { width: 130px; text-align: right; }
.rep-table input[type="text"]:not(.rep-amt) { width: 100%; }
.rep-foot { margin-top: 10px; font-size: 12px; }
.rep-acts { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

/* ── Stock ────────────────────────────────────────────────── */
.stk-nw { white-space: nowrap; }
.stk-motif { color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-pager { justify-content: flex-end; align-items: center; padding-top: 10px; }
.stk-art, .stk-total { white-space: nowrap; min-width: 56px; }
.stk-total { border-left: 1px solid var(--border); }
.stk-hs { font-size: 11px; font-weight: 600; }
.stk-articles-col { color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-suivre-in { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.stk-vues { padding-bottom: 0; }
.stk-vue-sel { min-width: 200px; max-width: 320px; }
/* Étoile « suivre » (colonne du tableau d'articles) */
.stk-star { background: none; border: 0; padding: 0 4px; font-size: 16px; line-height: 1; cursor: pointer; color: var(--muted); }
.stk-star:hover, .stk-star:focus-visible { color: var(--accent); }
.stk-star.on { color: var(--orange, #d97706); }
/* Vue « Articles suivis » : cartes */
.stk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--s-2, 8px); margin-top: 12px; }
.stk-cards .empty-row { grid-column: 1 / -1; padding: 28px 12px; text-align: center; color: var(--muted); }
.stk-card { position: relative; cursor: pointer; }
.stk-card .sc-type { padding-right: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-card-sub { font-size: 11px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.stk-card-x { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; line-height: 1; font-size: 15px; }
.stk-card-x:hover, .stk-card-x:focus-visible { background: var(--surface2); color: var(--danger); }
/* Sélecteur d'articles (modale) */
.stk-pick input[type="text"] { width: 100%; }
.stk-pick-tools { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.stk-pick-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md, 8px); }
.stk-pick-row { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.stk-pick-row:last-child { border-bottom: 0; }
.stk-pick-row:hover { background: var(--surface2); }
.stk-pick-row .com-muted { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Saisie d'une ligne de quantités : une case par article, défilement horizontal si nombreux articles */
.qg-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.qg { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
.qg-cell { display: flex; flex-direction: column; gap: 4px; flex: 0 0 92px; font-size: 11.5px; }
.qg-h { color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qg-cell input { width: 100%; text-align: right; }

/* ═══ SAV ═══ */
.b-kpi[data-href], .chart-row[data-href], .alerte[data-href] { cursor: pointer; }
.chart-row[data-href]:hover .chart-lbl { color: var(--fg); }
.bcard .chart-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcard.b4 .chart-lbl { width: 110px; }
.jr-item .badge { margin-left: 4px; }
#tk-lst .data-table td { vertical-align: top; }

/* ═══ Projets ═══ */
/* Bandeau d'infos commun des fiches (Z.infos) : libellé discret + valeur, retour à la ligne propre, pas de séparateur */
.infos{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;margin:-4px 0 14px;font-size:12.5px;line-height:1.5}
.infos-l{color:var(--muted);font-size:11px;margin-right:2px}
.infos-note{display:inline-flex;align-items:center;color:var(--muted);cursor:help;border-radius:4px;align-self:center}
.infos-note:hover,.infos-note:focus-visible{color:var(--accent)}
.pj-statut{font-weight:600;padding:3px 8px;border-width:1px;border-radius:6px;background:transparent;border-color:var(--sc);color:var(--sc)}
.pj-statut-wrap{display:inline-flex;align-items:center;gap:8px}
.pj-statut-mode{font-size:11px}
.pj-b-retard{background:var(--danger);color:#fff;font-weight:700}
/* Badge à couleur libre : --bc = couleur choisie (le thème sombre éclaircit le texte) */
.badge-c{background:color-mix(in oklab,var(--bc) 22%,transparent);color:var(--bc)}
.pj-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pj-toolbar .sp{flex:1}
.pj-acts{display:inline-flex;gap:6px;white-space:nowrap}
/* Sous-onglets (Factures / Devis / BDC) de « Budget & factures » : pastilles, distinctes des onglets de 1er niveau */
.pj-lvl2 .tabs-bar{border-bottom:none;gap:6px;margin-bottom:12px}
.pj-lvl2 .detail-tab{border:1px solid var(--border);border-radius:999px;padding:5px 14px;font-size:12px;border-bottom-width:1px}
.pj-lvl2 .detail-tab.active{background:color-mix(in oklab,var(--accent) 14%,transparent);border-color:var(--accent);color:var(--accent)}
.pj-ins{font-family:var(--font-mono);font-size:9px;color:var(--success);line-height:1;margin-top:2px}
.panel + .panel{margin-top:14px}

/* ═══ Planning ═══ */
.gt-lbl-t{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-lbl-ref{font-family:var(--font-mono);color:var(--muted)}
.gt-bar.gt-dk .gt-bt{text-shadow:none}
.gt-bar.gt-dk .gt-hl:hover,.gt-bar.gt-dk .gt-hr:hover{background:rgba(0,0,0,.2)}
.gt-bar.gt-draft{outline:1.5px dashed var(--fg);outline-offset:1px}
.gt-bar.gt-draft.sel{outline-style:solid}
.gt-dec{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.gt-dec-g{z-index:1}.gt-dec-a{z-index:3}
.dc-row{border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin-bottom:8px;background:var(--surface2)}
.dc-d{font-family:var(--font-mono);font-size:11px;color:var(--muted);margin-top:2px}
.dc-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;align-items:center}
.dc-more{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center;flex:1}
.dc-f[hidden],.dc-more[hidden]{display:none}
.dc-more input[type=text]{flex:1;min-width:160px}
.dc-sec{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.dc-list{list-style:none;margin:6px 0 0;padding:0;font-size:12px}
.dc-list li{padding:5px 0;border-bottom:1px solid var(--border)}
.dc-list .btn{margin-left:6px;padding:0 6px}
.dc-chip{display:inline-block;padding:0 7px;border-radius:999px;border:1.5px solid var(--c);color:var(--c);font-size:11px;font-weight:600}
#tk-lst td.num { white-space: nowrap; }

/* ═══ Tableau de bord ═══ */
.bcard[data-href], .b-kpi[data-href], .dash-alerte.clk, .b-stack-item.clk, .chart-row.clk, .dash-st.clk { cursor: pointer; }
.b-stack-item.clk:hover .val, .chart-row.clk:hover .chart-lbl, .dash-st.clk:hover .dash-st-lbl { text-decoration: underline; }
.bcard-hd .crumb-link { margin-left: auto; margin-right: 12px; }
.dash-chart { width: 100%; height: auto; max-height: 300px; font-family: var(--font-mono); font-size: 10px; }
.dash-st { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 1px 0; }
.dash-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dash-st-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-st-n { font-family: var(--font-mono); font-weight: 600; }
.dash-scroll { max-height: 360px; overflow: auto; }
.dash-alerte-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.dash-alerte-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }
.dash-when { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; }
.dash-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.dash-chip { background: var(--surface2); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 11px; cursor: pointer; font-family: inherit; }
.dash-chip:hover { color: var(--fg); }
.dash-chip.on { color: var(--fg); border-color: var(--accent); }
.dash-treso { margin-bottom: 16px; }
.dash-fin-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 4px; }
.dash-fin-title { font-size: 15px; }
.dash-fin-hd .sp { flex: 1; }
.dash-fin-sel { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.dash-fin-sel select { width: auto; min-width: 110px; }
.dash-treso-tot { margin-top: 10px; }

/* ═══ Paramètres ═══ */
.pm-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-bottom: 12px; }
.pm-bar .sp { flex: 1; }
.pm-bar input[type="text"], .pm-bar select { max-width: 240px; }
.pm-acts { display: inline-flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.data-table tr.pm-sel td { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.pm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; border: 1px solid var(--border); }
.pm-tot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; }
.pm-cal { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.pm-cal label { display: inline-flex; align-items: center; gap: 6px; }
.pm-cal input[type="time"] { width: 100px; }
.pm-days { display: flex; gap: 8px; flex-wrap: wrap; }
.pm-muted { color: var(--muted); }
.form-row input[type="color"] { padding: 0; height: 32px; width: 60px; }
.gt-row{min-height:58px}

/* ═══ Planning : barre d'outils, annotations personnelles, légende, mobile (variables du thème uniquement) ═══ */
.gt-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3)}
.gt-tools > .fl{flex:1 1 360px}
.gt-sp{flex:1 1 0}
.gt-leg-wrap{position:relative}
.gt-menu{display:inline-flex}
.gt-leg-pop{position:absolute;right:0;top:calc(100% + var(--s-2));z-index:40;width:min(440px,calc(100vw - 2 * var(--s-4)));padding:var(--s-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--e-4)}
.gt-leg-pop[hidden]{display:none}
.gt-lg{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;font-size:12px;color:var(--fg)}
.gt-lg b{flex:0 0 100%;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase}
.gt-lg span{display:inline-flex;align-items:center;gap:var(--s-1)}
.gt-lg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:var(--s-1)}
.gt-lg i.dia{background:var(--muted);transform:rotate(45deg) scale(.8);border-radius:1px}
.gt-lg i.note{border:1.5px solid var(--accent);background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 4px)}
.gt-lbl-s{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gt-today-l{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);z-index:22;padding:1px var(--s-2);border-radius:999px;background:var(--danger);color:var(--bg);font-size:10px;font-weight:600;white-space:nowrap}
.gt-note{position:absolute;height:22px;z-index:2;display:flex;align-items:center;gap:var(--s-1);padding:0 var(--s-2);border:1.5px solid var(--c);border-radius:5px;background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--c) 32%,var(--surface)) 0 6px,color-mix(in oklab,var(--c) 10%,var(--surface)) 6px 12px);color:var(--fg);font-size:10.5px;font-weight:600;cursor:pointer;overflow:hidden}
.gt-note .gt-bt{padding:0;text-shadow:none}
.gt-note:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.gt-pin{flex:none;color:var(--c)}
.gt-fold-row{position:sticky;left:0;z-index:10;width:220px;padding:var(--s-1) var(--s-2);border-bottom:1px solid var(--border);background:var(--surface)}
.gt-bar .gt-bt{flex:0 1 auto;max-width:100%;position:sticky;left:calc(var(--gt-left) + var(--s-1))}
.gt-more{padding:0 var(--s-2);border:1px solid var(--border);border-radius:999px;background:var(--surface2);color:var(--fg);font:inherit;font-size:11px;cursor:pointer}
.gt-more-l{display:block;width:100%;text-align:left}
.gt-ro .gt-bar{cursor:default}
.gt-ro .gt-hl,.gt-ro .gt-hr{display:none}
.gt-mlist{display:flex;flex-direction:column;gap:var(--s-2)}
.gt-mi{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);cursor:pointer}
.gt-mf{display:block;width:100%;height:14px;margin-top:var(--s-1)}
.gt-mi-d{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.gt-ty-tete{display:flex;justify-content:flex-end;margin-bottom:var(--s-2)}
.gt-ty-row{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) 0;border-top:1px solid var(--border)}
.gt-ty-nom{font-weight:600}
.gt-ty-tag{padding:0 var(--s-2);border-radius:999px;background:var(--surface2);color:var(--muted);font-size:11px}
.gt-ty-n{margin-left:auto;color:var(--muted);font-size:12px}
.gt-co-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-1) 0}
.gt-co-row input[type="color"]{width:40px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--r-sm);background:none}
.gt-co-row .filter-check{margin-left:auto}
@media (max-width:640px){.gt-tools .gt-sp{display:none}.gt-tools > .btn-primary{margin-left:auto}}

/* ═══ Utilitaires partagés (Clients / Actifs / SAV) ═══ */
.muted-dash { color: var(--muted); }

/* ═══ Clients et Actifs ═══ (composants des fiches : fiches.css) */
.panel-head .btn { margin-left: auto; }

/* ═══ Contacts & accès (fiches client et actif) ═══ */
.ca-save { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }

/* ═══ Paramètres (liste / détail) ═══ */
.pm-list { margin-bottom: 14px; }

/* ── Corrections UX (messages, listes, mobile) ── */
.com-kpi-title { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 4px 0 6px; }

/* Barre latérale étroite (mobile) : seul l'avatar reste (le bouton ouvre le menu du compte) */
@media (max-width: 900px) {
  #sidebar .sb-foot-user { justify-content: center; }
}
/* Tableaux défilables : ombre latérale = indication qu'il reste du contenu à droite (et à gauche une fois décalé) */
.table-scroll {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) 100% 0 / 28px 100% no-repeat local,
    linear-gradient(to right, oklch(from var(--fg) l c h / .16), transparent) 0 0 / 12px 100% no-repeat scroll,
    linear-gradient(to left, oklch(from var(--fg) l c h / .16), transparent) 100% 0 / 12px 100% no-repeat scroll;
}

/* Toasts : fond opaque (jamais translucide sur le contenu), au-dessus de tout, texte lisible dans les deux thèmes */
#toast { z-index: var(--z-message); max-width: min(460px, calc(100vw - 32px)); line-height: 1.4; }
#toast.toast-ok  { background: color-mix(in oklab, var(--success) 16%, var(--surface)); color: var(--fg); border-color: var(--success); }
#toast.toast-err { background: color-mix(in oklab, var(--danger) 16%, var(--surface));  color: var(--fg); border-color: var(--danger); }
[data-theme="dark"] #toast.toast-ok  { background: color-mix(in oklab, var(--success) 22%, var(--surface2)); }
[data-theme="dark"] #toast.toast-err { background: color-mix(in oklab, var(--danger) 22%, var(--surface2)); }

/* Colonne d'actions des tableaux de Paramètres : les boutons s'empilent sous 1440 px (« Désactiver » n'est plus coupé à 1280 px) */
@media (max-width: 1440px) {
  .pm-acts { flex-wrap: wrap; max-width: 104px; }
  .pm-acts .btn { flex: 1 1 100%; }
}
.sy-projet{margin:0 0 12px;border:1px solid var(--border,#ddd);border-radius:8px;padding:8px 12px}.sy-bloc{margin:8px 0}.sy-origine{margin:6px 0;font-size:13px}.sy-bascule{border-left:3px solid var(--accent);padding-left:10px}.sy-bascule select{margin:2px 0}.sy-list{margin:4px 0 0 18px;padding:0;font-size:13px}.sy-list label{cursor:pointer}.sy-opt{display:block;margin-top:8px}

/* Sélection multiple et actions groupées (jalons, jalons-types) */
.ms-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding:8px 12px;background:var(--surface2,var(--surface));border:1px solid var(--accent);border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.ms-bar[hidden]{display:none}
.ms-bar .ms-count{font-weight:600;color:var(--accent);margin-right:4px}
.ms-chk{width:15px;height:15px;margin:0;vertical-align:middle;cursor:pointer;accent-color:var(--accent)}
td.ms-c,th.ms-c{width:30px;padding-right:0;text-align:center}
.data-table tr.ms-sel td{background:color-mix(in oklab,var(--accent) 10%,transparent)}
.ms-all-lbl{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer}
.panel-title .ms-grp{margin-right:8px}
.ms-list{margin:8px 0 0 18px;padding:0;max-height:260px;overflow-y:auto;font-size:13px;line-height:1.6}
.ms-warn{color:var(--warning,#d97706);font-size:11.5px}

/* ═══ Colonnes personnalisables (Z.table avec id) ═══ */
.table-wrap { min-width: 0; }
.table-cols-bar { position: relative; z-index: 60; display: flex; justify-content: flex-end; margin: 0 0 6px; }
.table-cols-btn { display: inline-flex; align-items: center; gap: 6px; }
.table-cols-panel {
  position: fixed; top: 0; left: 0; z-index: var(--z-menu); width: min(320px, calc(100vw - 32px));
  max-height: min(70vh, 460px); overflow: auto; padding: 10px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.28);
}
.table-cols-panel[hidden] { display: none; }
.tcp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.tcp-list { list-style: none; margin: 0; padding: 0; }
.tcp-item { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--r-sm); border-top: 2px solid transparent; border-bottom: 2px solid transparent; font-size: 12px; cursor: grab; }
.tcp-item:hover { background: var(--surface2); }
.tcp-item.dragging { opacity: 0.45; }
.tcp-item.drop-before { border-top-color: var(--accent); }
.tcp-item.drop-after { border-bottom-color: var(--accent); }
.tcp-grip { color: var(--muted); letter-spacing: -2px; user-select: none; }
.tcp-lab { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.tcp-lab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcp-mv { width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); cursor: pointer; line-height: 1; }
.tcp-mv:hover:not(:disabled) { background: var(--surface2); border-color: var(--accent); }
.tcp-mv:disabled { opacity: 0.35; cursor: default; }
.tcp-mv:focus-visible, .tcp-lab input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.proj-more { display: inline-block; padding: 0 6px; border-radius: 9px; background: var(--surface2); color: var(--muted); font-size: 10.5px; font-weight: 600; cursor: help; }

/* ═══ Affichage compact des tableaux : ellipse + infobulle (title) ═══ */
.ell { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ell-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; min-width: 150px; max-width: 280px; overflow: hidden; overflow-wrap: break-word; }
.data-table td.nw, .data-table td.num, .data-table td.r { white-space: nowrap; }

/* ═══ Import de PDF (reconnaissance locale) et visionneuse des PDF joints ═══ */
.pdf-drop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 9px 14px; border: 1.5px dashed var(--border-in, var(--border)); border-radius: var(--r-md);
  color: var(--muted); font-size: 12.5px; cursor: pointer; background: transparent; transition: border-color var(--t-fast), background var(--t-fast); }
.pdf-drop b { color: var(--fg); font-weight: 600; }
.pdf-drop:hover, .pdf-drop:focus-visible, .pdf-drop.over { border-color: var(--accent); background: var(--accent-d); outline: none; }
.pdf-drop-ico { display: inline-flex; color: var(--accent); }

.pdfi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; height: min(72vh, 820px); }
.pdfi-view { min-height: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface2); }
.pdfi-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.pdfi-side { min-height: 0; overflow-y: auto; padding-right: 4px; }
.pdfi-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pdfi-top label { font-size: 12px; color: var(--muted); }
.pdfi-top select { min-width: 190px; }
.pdfi-legend { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; line-height: 1.9; }
.pdfi-badge { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11px; font-weight: 600; color: var(--fg); border: 1px solid var(--pc, var(--border)); background: color-mix(in oklab, var(--pc, var(--muted)) 20%, var(--surface)); }
.pdfi-ok { --pc: var(--success); } .pdfi-warn { --pc: var(--orange); } .pdfi-bad { --pc: var(--danger); }
.pdfi-alertes { display: grid; gap: 6px; margin-bottom: 10px; }
.pdfi-alertes:empty { display: none; }
.pdfi-al { padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--pc); border-left-width: 4px; background: color-mix(in oklab, var(--pc) 14%, var(--surface)); color: var(--fg); font-size: 12.5px; line-height: 1.4; }
.pdfi-al b { margin-right: 6px; }
.pdfi-al-erreur { --pc: var(--danger); } .pdfi-al-attention { --pc: var(--orange); } .pdfi-al-info { --pc: var(--blue); }
.pdfi-c input:not([type=checkbox]), .pdfi-c select, .pdfi-c textarea { border-color: var(--pc); box-shadow: inset 3px 0 0 var(--pc); }
.pdfi-c > label::after { content: ' ●'; color: var(--pc); font-size: 10px; }
.pdfi-c.pdfi-edit { --pc: var(--blue); }
.pdfi-c.pdfi-edit > label::after { content: ' ✎'; }
.pdfi-ratt { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); grid-column: 1 / -1; }
.pdfi-projets { display: grid; gap: 4px; margin: 6px 0; }
.pdfi-proj { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.pdfi-rep { margin-top: 6px; }
.pdfi-rep-l { display: grid; grid-template-columns: minmax(0, 1fr) 130px; align-items: center; gap: 8px; margin: 3px 0; font-size: 12.5px; }
.pdfi-rep-l input { text-align: right; }
.pdfi-side .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdfv { display: flex; flex-direction: column; gap: 10px; height: min(74vh, 840px); }
.pdfv-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pdfv-bar .sp { flex: 1; }
.pdfv-nom { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdfv-view { flex: 1; min-height: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--surface2); }
@media (max-width: 1000px) {
  .pdfi { grid-template-columns: 1fr; height: auto; }
  .pdfi-view { height: 55vh; }
  .pdfi-side { overflow: visible; }
}

/* ── Bons de livraison (livraisons.js) : fiche = feuille A4 imprimable ── */
.bl-gestion { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-bottom: 8px; }
.bl-g-bloc { display: grid; gap: 6px; align-content: start; }
.bl-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; }
.bl-g-bloc .bl-lbl { color: var(--muted); }
.bl-doc { max-width: 820px; margin: 16px auto 28px; padding: 36px 40px; background: #fff; color: #111; border: 1px solid var(--border); border-radius: var(--r-md); font-size: 13px; line-height: 1.45; }
.bl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 14px; border-bottom: 2px solid #111; }
.bl-emetteur { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.bl-emetteur em { font-style: normal; color: var(--accent); }
.bl-emetteur-sub { color: #6b7280; font-size: 12px; }
.bl-titre { text-align: right; }
.bl-titre-lib { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.bl-numero { font-size: 22px; font-weight: 700; font-family: var(--font-mono); }
.bl-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; margin: 18px 0 6px; }
.bl-h { margin: 22px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.bl-table { width: 100%; border-collapse: collapse; }
.bl-table th, .bl-table td { padding: 6px 8px; border-bottom: 1px solid #d1d5db; text-align: left; vertical-align: top; }
.bl-table th { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #6b7280; border-bottom: 1.5px solid #111; }
.bl-table .r { text-align: right; }
.bl-table .mono { font-family: var(--font-mono); white-space: nowrap; }
.bl-table tfoot td { font-weight: 700; border-top: 1.5px solid #111; border-bottom: 0; }
.bl-table tr { break-inside: avoid; }
.bl-signature { margin-top: 34px; break-inside: avoid; }
.bl-sig-titre { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.bl-sig-grid { display: grid; grid-template-columns: 1fr 160px 1.4fr; gap: 18px; align-items: end; }
.bl-sig-ligne { min-height: 26px; border-bottom: 1px solid #111; padding-top: 4px; }
.bl-sig-cadre { grid-column: 1 / -1; min-height: 90px; border: 1px solid #9ca3af; border-radius: 4px; padding: 6px 8px; }
@media screen and (max-width: 700px) { .bl-doc { padding: 20px 16px; } .bl-parties, .bl-sig-grid { grid-template-columns: 1fr; } }
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff !important; }
  #sidebar, .topbar, .no-print, #toast, #modal-overlay { display: none !important; }
  #app { display: block !important; height: auto !important; overflow: visible !important; }
  #content, .page { overflow: visible !important; padding: 0 !important; margin: 0 !important; }
  .bl-doc { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; }
}

/* ── Synthèse SAV (sav_synthese.js) : fenêtre de choix + rapport A4 (réutilise .bl-doc / .bl-table) ── */
.syn-choix { display: grid; gap: 14px; }
.syn-lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.syn-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; max-height: 150px; overflow: auto; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-md); }
.syn-liste label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.syn-periode { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.syn-doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.syn-periode-t { font-size: 20px; font-weight: 700; }
.syn-sub { font-size: 11.5px; color: #6b7280; }
.syn-sub-t { margin: 10px 0 4px; font-weight: 600; font-size: 12px; }
.syn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.syn-kpi { border: 1px solid #d1d5db; border-radius: 6px; padding: 10px 12px; break-inside: avoid; }
.syn-kpi-v { font-size: 24px; font-weight: 700; line-height: 1.1; }
.syn-kpi-l { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #374151; margin-top: 3px; }
.syn-kpi-s { font-size: 11px; color: #6b7280; margin-top: 2px; }
.syn-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; break-inside: avoid; }
.syn-mois { display: flex; gap: 6px; align-items: flex-end; height: 130px; border-bottom: 1px solid #111; padding-top: 6px; }
.syn-mois-c { flex: 1; min-width: 0; max-width: 6rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.syn-mois-b { flex: 1; display: flex; gap: 2px; align-items: flex-end; min-height: 0; }
.syn-mb { flex: 1; max-width: 2rem; position: relative; min-height: 1px; border-radius: 2px 2px 0 0; }
.syn-mb.o { background: #2563eb; } .syn-mb.c { background: #16a34a; }
.syn-mb i { position: absolute; top: -13px; left: 0; right: 0; text-align: center; font-size: 10px; font-style: normal; color: #374151; }
.syn-mois-l { font-size: 10px; text-align: center; color: #6b7280; padding-top: 3px; white-space: normal; word-break: break-word; line-height: 1.1; min-height: 22px; overflow: hidden; }
.syn-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; margin-top: 6px; color: #374151; }
.syn-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.syn-legende i.o { background: #2563eb; } .syn-legende i.c { background: #16a34a; }
.syn-legende-v { flex-direction: column; gap: 3px; }
.syn-bar { display: grid; grid-template-columns: minmax(70px, 38%) 1fr 28px; gap: 8px; align-items: center; margin: 4px 0; font-size: 12px; }
.syn-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-bar-t { height: 12px; background: #f3f4f6; border-radius: 3px; overflow: hidden; }
.syn-bar-f { display: block; height: 100%; border-radius: 3px; }
.syn-bar-v { text-align: right; font-weight: 600; }
.syn-susp { margin: 0; line-height: 1.6; }
.syn-vide { color: #6b7280; font-style: italic; padding: 4px 0; }
.syn-compact th, .syn-compact td { padding: 4px 6px; font-size: 11.5px; }
.syn-bar-f { background: var(--blue); }
/* Écran étroit seulement : une page A4 imprimée mesure moins de 700 px de large mais garde sa mise en page (4 indicateurs sur une ligne, deux colonnes) */
@media screen and (max-width: 700px) { .syn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .syn-cols, .syn-liste { grid-template-columns: 1fr; } }

/* Synthèse SAV : feuille toujours blanche (thème clair ou sombre) -> couleurs du système, jamais de valeur en dur */
.syn-doc { color-scheme: light; --syn-texte: CanvasText; --syn-discret: GrayText; --syn-filet: color-mix(in srgb, CanvasText 18%, Canvas); --syn-fond: color-mix(in srgb, CanvasText 4%, Canvas); }
.syn-an { width: 6em; }
.syn-ref { font-family: var(--font-mono); font-size: .85em; color: var(--syn-discret); margin-top: .2em; }
.syn-pill { display: inline-block; padding: .1em .6em; border: 1px solid var(--c, var(--syn-filet)); border-radius: var(--r-md); font-size: .85em; font-weight: 600; color: var(--syn-texte); white-space: nowrap; }
.syn-tk-l td { border-bottom: 1px solid var(--syn-filet); }
.syn-tk-l.avec-cause td { border-bottom: 0; }
.syn-cause td { padding-top: 0; padding-bottom: .5em; border-bottom: 1px solid var(--syn-filet); font-size: .9em; color: var(--syn-texte); background: var(--syn-fond); }
.syn-cause td > div + div { margin-top: .15em; }
.syn-tk, .syn-tk-l, .syn-cause { break-inside: avoid; page-break-inside: avoid; }
.syn-tk-l.avec-cause { break-after: avoid; page-break-after: avoid; }
.syn-cause { break-before: avoid; page-break-before: avoid; }
.syn-sans-cause { margin: .5em 0 0; padding-left: 1.4em; max-height: 50vh; overflow: auto; line-height: 1.7; }
.syn-suppr input { width: 100%; margin-top: .6em; }
.syn-plie { border: 0; background: none; padding: 0; margin-left: .4em; font: inherit; font-size: .85em; color: var(--accent); cursor: pointer; text-decoration: underline; }
.syn-ancienne { color: var(--muted); }
.syn-ligne-ancienne td { color: var(--muted); background: var(--surface2); }
.sav-cause-t { overflow-wrap: anywhere; }
.sav-cause-s { padding: .3em 0 0; }

/* ── Projets — tâches, historique, notes, installateurs ── */
.tk-sous { padding-left: 22px; border-left: 2px solid var(--border, #334155); }
.tk-fait { text-decoration: line-through; opacity: .6; }
.tk-desc { font-size: 12px; white-space: pre-line; }
.tk-retard { color: var(--danger); font-weight: 600; }
.tk-user { display: inline-block; margin: 0 4px 2px 0; padding: 1px 7px; border-radius: 10px; font-size: 12px; background: color-mix(in srgb, var(--accent) 15%, transparent); }
.hi-saisie { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; }
.hi-saisie textarea { flex: 1; min-height: 52px; }
.hi-liste { list-style: none; margin: 0; padding: 0 14px 12px; }
.ip-alerte { padding: 8px 14px; font-size: 13px; }
.ip-tl { padding: 8px 14px 12px; }
.ip-axe, .ip-ligne { display: flex; align-items: stretch; }
.ip-lib { width: 190px; flex: none; padding: 6px 8px 6px 0; font-size: 13px; }
.ip-piste { position: relative; flex: 1; min-height: 34px; border-left: 1px solid var(--border, #334155); background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), color-mix(in srgb, var(--border, #334155) 50%, transparent) calc(100% / 12 - 1px) calc(100% / 12)); }
.ip-axe .ip-piste { min-height: 20px; background: none; }
.ip-mois { position: absolute; top: 2px; font-size: 11px; opacity: .7; }
.ip-bande { position: absolute; top: 6px; height: 22px; border-radius: 4px; padding: 0 6px; font-size: 12px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ip-reel { opacity: .75; border: 1px dashed currentColor; }
.ip-tache { position: absolute; top: 12px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: var(--accent); border: 1px solid var(--bg, #0f172a); }
.ip-tache.ip-retard { background: var(--danger); }
.panel-head select { margin-left: 12px; }

/* Tableau de bord › alertes : contexte (actif / projet / client), regroupement, tri et filtres */
.dash-alerte-ctx { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-bottom: 4px; }
.dash-ctx { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; text-decoration: none; color: var(--fg); background: var(--surface2); border: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-ctx:hover { border-color: var(--accent); text-decoration: underline; }
.dash-ctx-k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dash-ctx-actif { border-color: var(--accent); }
.dash-ctx-projet { border-color: var(--blue); }
.dash-ctx-client { font-weight: 500; color: var(--muted); background: transparent; border-color: transparent; padding-left: 2px; }
.dash-ctx-plus { cursor: help; font-weight: 500; color: var(--muted); }
.dash-al-opts { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; width: 100%; margin-top: 4px; }
.dash-al-sel { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.dash-al-sel select { width: auto; max-width: 150px; padding: 2px 6px; font-size: 11px; }
.dash-groupe { margin-bottom: 8px; }
.dash-groupe-hd { display: flex; align-items: center; gap: 8px; padding: 3px 2px; margin-bottom: 4px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.dash-groupe-titre { font-weight: 700; font-size: 12.5px; color: var(--fg); text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.dash-groupe-titre:hover { text-decoration: underline; color: var(--accent); }
.dash-groupe-titre.vide { color: var(--muted); font-weight: 500; font-style: italic; }
.dash-groupe-n { margin-left: auto; font-size: 11px; color: var(--muted); }

.stk-colrow { justify-content: space-between; align-items: center; cursor: default; }
.stk-colrow .btn { padding: 0 8px; }
.stk-colrow .stk-check { flex: 1; font-size: 13px; color: inherit; }

/* ── Tâches — assignation (taches.js) ── */
.tk-moi { background: color-mix(in srgb, var(--accent) 32%, transparent); font-weight: 600; }
.tk-nonassigne { color: var(--muted); font-size: 12px; font-style: italic; }
.tk-picker { display: flex; flex-direction: column; gap: 8px; }
.tk-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-items: center; }
.tk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 12px; font-size: 12.5px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tk-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 5px; border-radius: 50%; }
.tk-chip button:hover, .tk-chip button:focus-visible { background: color-mix(in srgb, var(--danger) 30%, transparent); }
.tk-picker-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-picker-add select { min-width: 220px; }
.tk-modal-t { margin: 0 0 10px; }
.tk-fiche { display: flex; flex-direction: column; gap: var(--s-3); }
.tk-f-t { margin: 0; }
.tk-f-d { margin: 0; color: var(--muted); white-space: pre-wrap; }
.tk-f-l { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.tk-f-k { flex: 0 0 calc(var(--s-6) * 3); color: var(--muted); }
.tk-f-v { flex: 1 1 calc(var(--s-6) * 5); min-width: 0; }
.tk-f-l select { flex: 1 1 calc(var(--s-6) * 5); min-width: 0; }
.tk-modes { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.tk-modes label { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.tk-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.tk-quick .tk-q-titre { flex: 1 1 260px; min-width: 200px; }
.tk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.tk-bar .tk-all { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; margin-right: 6px; }
.tk-bar-n { font-size: 12.5px; margin-right: auto; }
.tk-resume { font-size: 13px; }
.tk-zone { display: flex; flex-direction: column; gap: 14px; }
.tk-bar + .table-scroll, .tk-bar + .table-wrap { margin-top: -14px; }
.tk-sel { cursor: pointer; }
.nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.nav-badge[hidden] { display: none; }
.nav-badge.retard { background: var(--danger); }
#sidebar.collapsed .nav-badge { position: absolute; top: 3px; right: 3px; margin: 0; min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; padding: 0 3px; }

/* Type de projet & responsable : filtres communs (Z.projetFilter) et barre du tableau de bord */
.pf-bar { display: contents; }
/* Filtre « projets » du tableau de bord : contrôles discrets dans l'en-tête, à droite du titre (même hauteur que les autres contrôles : 30 px) */
.dash-pf { display: inline-flex; align-items: center; gap: 8px; }
.dash-seg { display: inline-flex; height: 30px; padding: 2px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); background: transparent; }
.dash-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; padding: 0 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.dash-seg button:hover { color: var(--fg); }
.dash-seg button.on { background: color-mix(in oklab, var(--fg) 12%, transparent); color: var(--fg); font-weight: 600; }
.dash-seg button:focus-visible, .dash-pf .dash-pf-sel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dash-pf .dash-pf-sel { width: auto; max-width: 170px; height: 30px; padding: 0 26px 0 12px; font-size: 12px; border-radius: 999px; color: var(--muted);
  background-color: transparent; border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); cursor: pointer; }
.dash-pf .dash-pf-sel:hover { color: var(--fg); border-color: color-mix(in oklab, var(--fg) 26%, transparent); }
.dash-pf .dash-pf-sel.on { color: var(--fg); border-color: color-mix(in oklab, var(--accent) 55%, transparent); }
@media (max-width: 640px) { .dash-pf { width: 100%; flex-wrap: wrap; } }

/* ═══ Paramètres : navigation groupée avec recherche ═══ */
.pm-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }
.pm-nav { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 24px); overflow-y: auto; }
.pm-search { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; }
.pm-search:focus { outline: none; border-color: var(--accent); }
.pm-nav-list { display: flex; flex-direction: column; gap: 14px; }
.pm-grp { display: flex; flex-direction: column; gap: 2px; }
.pm-grp[hidden], .pm-nav-item[hidden], .pm-nav-vide[hidden] { display: none; }
.pm-grp-t { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 0 10px 4px; }
.pm-nav-item { text-align: left; background: none; border: 0; border-left: 2px solid transparent; border-radius: 6px; padding: 7px 10px; color: var(--fg); font: inherit; font-size: 13.5px; cursor: pointer; }
.pm-nav-item:hover { background: var(--surface2); }
.pm-nav-item.active { background: var(--accent-d); border-left-color: var(--accent); font-weight: 600; }
.pm-main { min-width: 0; }
.pm-aide { font-size: 12.5px; margin-bottom: 14px; color: var(--muted); }
.pm-aide-g { text-transform: uppercase; font-size: 10.5px; letter-spacing: .06em; margin-right: 4px; }
.pm-aide b { color: var(--fg); font-size: 15px; }
.pm-main > .pm-tabs-hidden > .tabs-bar { display: none; }
@media (max-width: 900px) {
  .pm-layout { grid-template-columns: 1fr; }
  .pm-nav { position: static; max-height: none; }
}


/* ── Apparence : logo de la barre latérale (rendu commun : barre réelle et aperçu des Paramètres) ── */
.sb-brand { overflow: hidden; }
.sb-brand .logo .lg-wrap { display: flex; flex-direction: column; justify-content: center; max-width: 100%; }
.sb-brand .logo .lg-ligne { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-brand .logo .lg-principal { font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; }
.sb-brand .logo .lg-sous { font-size: 10px; line-height: 1.15; letter-spacing: .06em; margin-top: 3px; }
.sb-brand .logo .lg-wrap:has(.lg-sous) .lg-principal { font-size: 19px; }
.sb-brand .logo .lg-img { display: block; max-height: 36px; max-width: 200px; width: auto; height: auto; object-fit: contain; }

/* ── Apparence : écran Paramètres > Logo et couleurs ── */
.ap-panel { position: relative; }
.ap-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.ap-sb-mock { width: 248px; max-width: 100%; background: var(--navy); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ap-sb-mock .sb-brand { border-bottom: 0; }
[data-theme="light"] .ap-sb-mock { background: oklch(94% 0.012 62); }
.ap-mode { display: flex; gap: 18px; }
.ap-mode label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 13px; }
.ap-bloc { display: flex; flex-direction: column; gap: 14px; }
.ap-bloc[hidden], .ap-bloc [hidden] { display: none; }
.ap-ligne { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.ap-lib { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); max-width: 420px; }
.ap-lib input { font-size: 14px; }
.ap-lettres { display: flex; flex-wrap: wrap; gap: 4px; }
.ap-ch { min-width: 30px; height: 34px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface2); font: 700 16px var(--font-body); cursor: pointer; }
.ap-ch:hover { border-color: var(--muted); }
.ap-ch.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.ap-ligne-actions, .ap-pied-texte, .ap-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ap-sel-info { font-size: 12.5px; margin-right: 6px; }
.ap-picker { position: absolute; left: 24px; top: 150px; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.ap-img-cur { min-height: 44px; display: flex; align-items: center; padding: 8px 12px; border: 1px dashed var(--border); border-radius: 8px; width: fit-content; max-width: 100%; background: var(--surface2); }
.ap-img-prev { max-height: 64px; max-width: 260px; object-fit: contain; }
.ap-fichier { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ap-pastilles { display: flex; flex-wrap: wrap; gap: 10px; }
.ap-pastille { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.ap-pastille:hover { transform: scale(1.08); }
.ap-pastille.on { outline: 2px solid var(--fg); outline-offset: 2px; }
.ap-libre { display: inline-flex; gap: 10px; align-items: center; font-size: 13px; }
.ap-libre input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; cursor: pointer; }
.ap-apercu-ui { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); }
.ap-lien { color: var(--accent); font-weight: 600; border-bottom: 2px solid var(--accent); padding-bottom: 2px; font-size: 13px; }
.ap-puce { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-grad); }

/* Vue qui n'a pas pu se charger (403, erreur) : message visible, jamais une zone blanche */
.vue-erreur{font-size:13.5px;color:var(--text);background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--danger,#dc2626);border-radius:var(--r-md,8px);padding:12px 14px;margin:12px 0}

/* ═══ Menu d'actions « ⋯ » (Z.menuActions), mentions de liens, repli de listes ═══ */
.zm-btn { min-width: 34px; font-weight: 700; letter-spacing: 1px; }
.zm-panel { position: fixed; top: 0; left: 0; z-index: var(--z-menu); min-width: 190px; max-width: min(320px, calc(100vw - 16px)); overflow: auto; padding: 4px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 10px 30px rgb(0 0 0 / 0.28); }
.zm-item { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.zm-item:hover, .zm-item:focus-visible { background: var(--surface2); outline: none; }
.zm-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.zm-danger { color: var(--danger); }
.zm-sep { height: 1px; margin: 4px 2px; background: var(--border); }
.zm-cell { text-align: right; white-space: nowrap; width: 1%; }
.ph-liens { font-size: 12px; color: var(--muted); background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline dotted; }
.ph-liens:hover { color: var(--fg); }

.pm-fold{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 6px 0 0;line-height:1}
.pm-fold:hover{color:var(--fg)}
.pm-folded .panel-head{border-bottom:0}
.ph-actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-left:auto}

/* ── Visionneuse intégrée de documents (Z.visionneuse) ── */
/* Largeur du volet d'informations */
:root { --zv-volet-l: 300px; }
.zv-ov { position: fixed; inset: 0; z-index: var(--z-visionneuse); display: flex; align-items: center; justify-content: center; padding: 2.5vh 2.5vw; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.zv { display: flex; flex-direction: column; width: 100%; height: 100%; max-width: 1500px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--e-4); overflow: hidden; outline: none; }
.zv-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface2); flex-wrap: wrap; }
.zv-hdr .sp { flex: 1; }
.zv-titre { font-family: var(--font-display); font-size: 15px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zv-nav { display: inline-flex; align-items: center; gap: 4px; }
.zv-pos { font-size: 12px; color: var(--muted); min-width: 40px; text-align: center; }
.zv-rangee { display: flex; flex: 1; min-height: 0; }
.zv-rangee .zv-body { min-width: 0; }
.zv-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--surface2); overflow: auto; }
.zv-pdf { width: 100%; height: 100%; border: 0; background: #fff; }
.zv-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.zv-msg { text-align: center; padding: 24px; max-width: 420px; }
.zv-msg-a { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
/* Volet d'informations de la visionneuse (élément `volet`) */
.zv-volet { flex: 0 0 var(--zv-volet-l); display: flex; flex-direction: column; gap: 12px; padding: 16px; border-left: 1px solid var(--border); background: var(--surface); overflow: auto; }
.zv-volet[hidden] { display: none; }
.zv-etiq { align-self: flex-start; max-width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--c); font-size: 11.5px; font-weight: 650; }
.zv-etiq i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--c); }
.zv-v-titre { margin: 0; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.zv-v-dl { margin: 0; display: grid; gap: 12px; }
.zv-v-dl dt { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.zv-v-dl dd { margin: 0; overflow-wrap: anywhere; font-size: 13.5px; }
.zv-v-dl .rt-part { display: block; }
.zv-v-dl .rt-sep { display: none; }
.zv-v-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.zv-repli { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 12px; }
@media (max-width: 720px) { .zv-rangee { flex-direction: column; } .zv-volet { flex: 0 0 auto; max-height: 38vh; border-left: 0; border-top: 1px solid var(--border); } }
@media (max-width: 720px) { .zv-ov { padding: 0; } .zv { border-radius: 0; border: 0; } .zv-titre { flex-basis: 100%; order: 5; } }
@media print { .zv-ov { display: none !important; } }

/* Aperçu de l'accent : simple échantillon (pas un bouton), même rendu qu'un bouton principal */
.ap-fake { background: var(--accent-grad); color: var(--accent-text, #fff); box-shadow: 0 2px 8px var(--accent-d); border-radius: 8px; border: 0; cursor: default; pointer-events: none; }
.zv a.btn { text-decoration: none; color: inherit; }
.zv-nav .btn { font-size: 16px; line-height: 1; padding: 4px 10px; }

/* Filigrane nominatif de la visionneuse (consultation sans droit de téléchargement) : au-dessus de l'aperçu, sans capter la souris */
.zv-body { position: relative; }
.zv-fil { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; z-index: 2; }
.zv-fil-in { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; transform: rotate(-30deg); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 70px 60px; opacity: .17; color: #777; font: 600 15px/1.2 var(--font-body, system-ui), sans-serif; }
.zv-fil-in span { white-space: nowrap; }

/* Libellés de rattachement (Z.rattache) : « Client : … · Actif : … · Projet : réf nom » ; passe à la ligne sur mobile */
.rt-lbl { color: var(--muted); }
.rt-sep { color: var(--muted); padding: 0 2px; }
.rt-part { overflow-wrap: anywhere; }
.data-table td.rt-col { min-width: 140px; max-width: 320px; line-height: 1.45; }      /* le tableau des devis, BDC et factures tient dans son cadre à 1440 px */
.data-table td .badge { white-space: nowrap; }
/* Tableaux Commercial (devis, BDC, factures) : tiennent dans leur cadre à 1440 px, actions comprises ; au-dessous, le cadre défile. */
:root .table-scroll.table-dense .data-table th, :root .table-scroll.table-dense .data-table td { padding-left: var(--s-2); padding-right: var(--s-2); }
.com-abo-ligne { display: block; margin-top: var(--s-1); }
/* Colonnes souples : badge et référence passent à la ligne quand le cadre manque de place (sinon ils gardent leur largeur naturelle). */
:root .table-dense .data-table td.com-souple .badge { white-space: normal; }
:root .table-dense .data-table td.com-souple .ell { white-space: normal; overflow-wrap: break-word; }
:root .table-dense .data-table .ell-2 { min-width: 100px; }

/* Tableau de bord › « À traiter maintenant » (état calculé : une ligne disparaît quand son problème est réglé) */
.dash-todo { gap: var(--s-2); }
.dash-todo-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-todo-ligne { display: flex; align-items: center; gap: var(--s-4); min-height: calc(var(--s-7) + var(--s-3)); padding: var(--s-1) var(--s-2); border-top: 1px solid var(--border); border-radius: var(--r-sm); }
.dash-todo-ligne:first-child { border-top: 0; }
.dash-todo-ligne:hover { background: var(--surface2); }
.dash-todo-n { flex: none; min-width: calc(var(--s-7) + var(--s-2)); font-size: 1.5em; font-weight: 700; line-height: 1; text-align: right; }
.dash-todo-t { flex: 1 1 auto; min-width: 0; }
.dash-todo-ligne .btn { flex: none; margin-left: auto; text-decoration: none; }
.dash-todo-vide { color: var(--muted); padding: var(--s-2) 0; }
@media (max-width: 640px) {
  .dash-todo-ligne { flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding: var(--s-2); }
  .dash-todo-n { min-width: var(--s-7); }
  .dash-todo-t { flex-basis: calc(100% - var(--s-7) - var(--s-3)); }
  .dash-todo-ligne .btn { margin-left: calc(var(--s-7) + var(--s-3)); min-height: calc(var(--s-7) + var(--s-3)); }
}

/* ═══ R-b : Paramètres, Rôles, Liens partagés, Stock, Livraisons, Interventions, Mon espace ═══ */
/* État vide soigné (Z.etatVide) */
.ev { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-7) var(--s-4); text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--r-md); }
.ev-i { display: inline-flex; color: var(--muted); opacity: .7; }
.ev-t { margin: 0; font-size: .9em; color: var(--fg); }
.pm-main .empty-row { padding: var(--s-5) var(--s-3); text-align: center; color: var(--muted); }

/* Paramètres : sur mobile, d'abord la liste des sections, puis le contenu choisi avec « ‹ Paramètres » */
:root:root .pm-layout .pm-retour { display: none; margin-bottom: var(--s-2); }      /* :root:root : plus précis que `.btn` de Synthèse, qui impose inline-flex */
@media (max-width: 900px) {
  .pm-layout[data-etape="liste"] .pm-main { display: none; }
  .pm-layout[data-etape="detail"] .pm-nav { display: none; }
  :root:root .pm-layout[data-etape="detail"] .pm-retour { display: inline-flex; }
  .pm-layout[data-etape="detail"] .pm-aide { margin-bottom: var(--s-3); }
  .pm-nav-item { padding: var(--s-3) var(--s-3); }
}

/* Rôles : infobulle sur le module, grille qui tient sur mobile, détail d'audit sur deux lignes au plus */
.rl-mod[title] { cursor: help; }
.rl-detail { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
  .rl-grid th.rl-col { width: auto; padding: var(--s-2) var(--s-1); }
  .rl-grid td { padding: var(--s-2) var(--s-1); }
  .rl-mod { white-space: normal; }
}

/* Interventions : état « signé » discret (cadenas + date) à la place du bandeau d'avertissement */
.iv-verrou { display: inline-flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-3); font-size: .85em; color: var(--muted); }

/* Stock : chiffres en tête de l'onglet Articles */
.stk-barre { display: flex; flex-direction: column; gap: var(--s-2); }
.stk-resume { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: var(--s-2) 0 var(--s-3); font-size: .9em; color: var(--muted); }
.stk-kpi b { font-size: 1.05em; color: var(--fg); font-variant-numeric: tabular-nums; }
.stk-kpi.alerte b { color: var(--danger); }

/* Mon espace : accueil, droit en icône, rattachement des rapports */
.esp-salut { margin: 0 0 var(--s-3); font-size: 1.05em; color: var(--muted); }
.esp-salut b { color: var(--fg); }
.esp-droit { display: inline-flex; vertical-align: middle; color: var(--muted); }
.esp-rattache { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .esp-doc-a { width: 100%; }
  .esp-doc-a .btn { flex: 1 1 auto; justify-content: center; min-height: calc(var(--s-7) + var(--s-2)); }
}
@media (max-width: 640px) { .tb-externe .tb-ext-brand { flex: 0 0 auto; width: auto; min-width: max-content; overflow: visible; } .tb-externe .tb-ext-brand .logo .lg-ligne { overflow: visible; text-overflow: clip; } }
@media (max-width: 640px) {
  .lp-bar { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
  .lp-bar label { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; max-width: 100%; }
  .lp-bar select { max-width: 100%; }
}
/* Mon espace : onglets qui défilent horizontalement sur mobile (même principe que la fiche projet) */
@media (max-width: 640px) {
  .esp-corps .tabs-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .esp-corps .tabs-bar::-webkit-scrollbar { display: none; }
  .esp-corps .tabs-bar .detail-tab { flex: none; padding-inline: var(--s-3); }      /* trois onglets tiennent sur 375 px sans être coupés */
}

/* Paramètres > Modèles de projet : tâches-types sous un jalon-type */
.pt-det { margin-top: var(--s-1); }
.pt-det > summary { cursor: pointer; }
.pt-ul { list-style: none; margin: var(--s-2) 0; padding: 0; display: grid; gap: var(--s-2); }
.pt-li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pt-titre { font-weight: 500; }
.pt-desc { flex-basis: 100%; }
.pt-act { display: inline-flex; gap: var(--s-2); }

/* Synthèse SAV et liste des synthèses émises : sous 760 px, tableaux en cartes (écran seulement, l'impression garde le tableau) */
.syn-scroll { overflow-x: auto; }
@media screen and (max-width: 760px) {
  .syn-tickets, .syn-tickets thead, .syn-tickets tbody { display: block; width: 100%; }
  .syn-tickets thead { display: none; }
  .syn-tickets .syn-tk-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-1) var(--s-3); padding: var(--s-2) 0; }
  .syn-tickets .syn-tk-l td { display: block; padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .syn-tickets .syn-tk-l td[data-l]::before { content: attr(data-l); display: block; font-size: .8em; color: var(--syn-discret); }
  .syn-tickets .syn-c-n, .syn-tickets .syn-c-titre { grid-column: 1 / -1; }
  .syn-tickets .syn-cause { display: block; }
  .syn-tickets .syn-cause td { display: block; }
  .syn-tickets .syn-tk { display: block; border-bottom: 1px solid var(--syn-filet); }
  .syn-tickets .syn-tk-l td, .syn-tickets .syn-cause td { border-bottom: 0; }

  .syn-lst .data-table, .syn-lst .data-table tbody { display: block; width: 100%; }
  .syn-lst .data-table thead { display: none; }
  .syn-lst .data-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); padding: var(--s-3); border-bottom: 1px solid var(--border); }
  .syn-lst .data-table td { display: block; padding: 0; border: 0; min-width: 0; width: auto; }
  .syn-lst .data-table td:empty { display: none; }
  .syn-lst .data-table td.empty-row { flex: 1 0 100%; }
  .syn-lst .sl-n { order: 1; flex: 1 1 0; }
  .syn-lst .sl-x { order: 2; }
  .syn-lst .sl-clients, .syn-lst .sl-periode { order: 3; flex: 1 0 100%; }
  .syn-lst .sl-version { order: 4; }
  .syn-lst .sl-edit { order: 5; color: var(--muted); }
  .syn-lst .sl-suppr { order: 6; flex: 1 0 100%; color: var(--muted); }
}

/* ── Tableau en cartes sur téléphone (Z.table avec { cartes: true }) : chaque ligne devient une carte « libellé : valeur », sans défilement horizontal.
      Colonne `cls: 'carte-titre'` : en tête de carte, sans libellé ; `cls: 'carte-etat'` : juste dessous ; case vide : masquée. ── */
@media (max-width: 640px) {
  :root { --tc-etiquette-l: 5.5em; --tc-etiquette-t: 0.85em; }
  .table-cartes { overflow: visible; max-height: none; border: 0; border-radius: 0; }
  :root .table-cartes .data-table, :root .table-cartes .data-table tbody { display: block; width: auto; }
  :root .table-cartes .data-table thead { display: none; }
  :root .table-cartes .data-table tbody tr { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-2); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
  :root .table-cartes .data-table tbody td { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); height: auto; padding: 0; border: 0; background: none; min-width: 0; overflow-wrap: anywhere; }
  :root .table-cartes .data-table tbody td.r { justify-content: flex-end; }
  :root .table-cartes .data-table tbody td:empty { display: none; }
  :root .table-cartes .data-table tbody td[data-label]::before { content: attr(data-label); flex: 0 0 var(--tc-etiquette-l); color: var(--muted); font-size: var(--tc-etiquette-t); }
  :root .table-cartes .data-table tbody td.carte-titre { order: -2; }
  :root .table-cartes .data-table tbody td.carte-etat { order: -1; }
  :root .table-cartes .data-table tbody td.carte-titre::before, :root .table-cartes .data-table tbody td.carte-etat::before { content: none; }
  :root .table-cartes .data-table tbody tr:hover td { background: none; }
}

/* Lot B : un bouton de titre de panneau ne se tronque pas (l'en-tête passe à la ligne), liens téléphone et e-mail faciles à toucher */
.panel-head { flex-wrap: wrap; row-gap: var(--s-2); }
.panel-head .btn { flex: none; white-space: nowrap; }
@media (pointer: coarse), (max-width: 640px) {
  a[href^="tel:"], a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
}