/*!
* Lamarck UI v1.0 — Composants partagés.
* Inventaire COMPLET des primitives : toute app Lamarck doit utiliser ces
* classes plutôt que des styles maison. Charger après ds-tokens.css.
*
* qui les référence. Cette base rend
TOUTES les icônes sprite en trait, sinon elles s'affichent en aplat
noir. .ico = usage générique ; les contextes composants héritent aussi.
════════════════════════════════════════════════════════════════════ */
.ico,
.btn svg, .btn-sm svg, .field-icon svg, .card-h svg, .list-row .li-ico svg,
.alert svg, .app-tile .ti svg, .kpi-card svg, .segmented svg, .check svg,
svg.ico use, .ico use {
fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round;
}
.ico { width:1em; height:1em; vertical-align:-.125em; flex:none; }
/* ════════════════════════════════════════════════════════════════════
TYPOGRAPHIE
════════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4 { letter-spacing:-.01em; color:var(--text); margin:0; }
h1 { font-size:30px; font-weight:700; letter-spacing:-.02em; }
h2 { font-size:22px; font-weight:700; }
h3 { font-size:16px; font-weight:600; }
.kicker { font:600 12px/1 var(--font-mono); letter-spacing:.14em;
text-transform:uppercase; color:var(--accent); }
.lede { font-size:17px; color:var(--text-2); line-height:1.55; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
/* ════════════════════════════════════════════════════════════════════
BOUTONS — .btn + variantes + tailles
════════════════════════════════════════════════════════════════════ */
.btn {
display:inline-flex; align-items:center; justify-content:center; gap:8px;
padding:10px 16px; border-radius:var(--r); border:1px solid transparent;
font-family:var(--font); font-size:14px; font-weight:600; line-height:1;
cursor:pointer; white-space:nowrap; text-decoration:none;
transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:active { transform:translateY(.5px); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 4px var(--accent-ring); }
.btn svg { width:16px; height:16px; flex:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-dark); text-decoration:none; }
.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border-2); }
.btn-secondary:hover { background:var(--surface-2); border-color:var(--muted); text-decoration:none; }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.btn-danger { background:var(--surface); color:var(--text); border-color:var(--border-2); }
.btn-danger:hover { background:var(--red-light); color:var(--red); border-color:var(--red); text-decoration:none; }
.btn-danger-solid { background:var(--red); color:#fff; }
.btn-danger-solid:hover { filter:brightness(.94); text-decoration:none; }
.btn[disabled], .btn:disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn-sm { padding:7px 12px; font-size:12.5px; gap:6px; }
.btn-sm svg { width:14px; height:14px; }
.btn-lg { padding:13px 22px; font-size:15px; }
.btn-block { width:100%; }
.btn-icon { padding:0; width:38px; height:38px; }
.btn-icon.btn-sm { width:32px; height:32px; }
/* ════════════════════════════════════════════════════════════════════
FORMULAIRES — input / select / textarea / checkbox / radio / switch
════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom:16px; }
.form-group > label {
display:block; font:600 11px/1 var(--font-mono); color:var(--muted);
text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px;
}
.input, .select, .textarea,
.form-group input, .form-group select, .form-group textarea {
width:100%; padding:10px 13px; font-family:var(--font); font-size:14px;
color:var(--text); background:var(--surface);
border:1px solid var(--border-2); border-radius:var(--r);
outline:none; transition:border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring);
}
.input::placeholder, .textarea::placeholder { color:var(--muted); }
.textarea { min-height:96px; resize:vertical; line-height:1.5; }
.form-hint { font-size:12px; color:var(--muted); margin-top:5px; }
.form-error { font-size:12px; color:var(--red); margin-top:5px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }
/* Champ avec icône (search, etc.) */
.field-icon { position:relative; }
.field-icon svg { position:absolute; left:12px; top:50%; transform:translateY(-50%);
width:16px; height:16px; color:var(--muted); pointer-events:none; }
.field-icon .input { padding-left:38px; }
/* Checkbox & radio — accent natif suffit, on cadre juste la taille */
.check { display:inline-flex; align-items:center; gap:9px; font-size:14px; cursor:pointer; }
.check input { width:17px; height:17px; accent-color:var(--accent); cursor:pointer; }
/* Switch (toggle) */
.switch { position:relative; display:inline-block; width:40px; height:23px; flex:none; }
.switch input { opacity:0; width:0; height:0; }
.switch .track { position:absolute; inset:0; background:var(--border-2); border-radius:999px;
transition:background .18s; }
.switch .track::before { content:""; position:absolute; top:3px; left:3px; width:17px; height:17px;
background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .18s; }
.switch input:checked + .track { background:var(--accent); }
.switch input:checked + .track::before { transform:translateX(17px); }
.switch input:focus-visible + .track { box-shadow:0 0 0 4px var(--accent-ring); }
/* Segmented control (remplace les groupes de boutons radio visuels) */
.segmented { display:inline-flex; background:var(--surface-2); border-radius:var(--r-md); padding:3px; gap:2px; }
.segmented button { border:0; background:transparent; font:600 13px/1 var(--font); color:var(--muted);
padding:8px 14px; border-radius:8px; cursor:pointer; transition:.15s; }
.segmented button.on { background:var(--surface); color:var(--text); box-shadow:var(--sh-sm); }
/* ════════════════════════════════════════════════════════════════════
CARTES
════════════════════════════════════════════════════════════════════ */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rl);
box-shadow:var(--sh-sm); }
.card-pad { padding:22px; }
.card-h { display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--border); }
.card-h .ci { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none; }
.card-h .ci svg { width:16px; height:16px; }
.card-h h3 { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; margin:0; }
.card-h .card-more { margin-left:auto; font-size:13px; font-weight:600; color:var(--accent);
display:inline-flex; align-items:center; gap:4px; }
.card-h .card-more svg { width:14px; height:14px; }
.card-body { padding:18px; }
/* ════════════════════════════════════════════════════════════════════
TABLEAUX — .table (+ stacking responsive sur mobile)
════════════════════════════════════════════════════════════════════ */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--rl);
box-shadow:var(--sh-sm); overflow:hidden; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table thead th { text-align:left; padding:11px 16px; font:600 11px/1 var(--font-mono);
color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
background:var(--surface-2); border-bottom:1px solid var(--border); white-space:nowrap; }
.table th.num, .table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.table tbody td { padding:13px 16px; border-bottom:1px solid var(--border); color:var(--text-2); }
.table tbody td strong, .table tbody td .t-primary { color:var(--text); font-weight:600; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background:var(--surface-3); }
.table.zebra tbody tr:nth-child(even) { background:var(--surface-3); }
/* Mobile : chaque ligne devient une carte empilée (data-label sur les td) */
@media (max-width:640px) {
.table.stack thead { display:none; }
.table.stack tbody td { display:flex; justify-content:space-between; gap:16px;
padding:9px 14px; border:0; text-align:right; }
.table.stack tbody td::before { content:attr(data-label); font:600 11px/1.4 var(--font-mono);
text-transform:uppercase; letter-spacing:.05em; color:var(--muted); text-align:left; }
.table.stack tbody tr { display:block; padding:8px 0; border-bottom:1px solid var(--border); }
.table.stack tbody tr:last-child { border-bottom:0; }
}
/* ── Tableaux REPLIABLES ──────────────────────────────────────────────
1) Groupes repliables (.table.collapsible) : une ligne d'en-tête de
groupe (.t-group) plie/déplie ses lignes enfants (.t-child).
Toggle JS : window.lkToggleGroup(headerTr).
2) Ligne de détail dépliable (.t-expandable + .t-detail) : un clic sur
la ligne révèle un panneau de détail pleine largeur. */
.table .t-group { cursor:pointer; user-select:none; background:var(--surface-2); }
.table .t-group:hover { background:var(--border); }
.table .t-group > td { font-weight:700; color:var(--text); padding:11px 16px; }
.table .t-group .caret { display:inline-flex; width:16px; height:16px; margin-right:8px;
color:var(--muted); transition:transform .15s; vertical-align:-3px; }
.table .t-group.collapsed .caret { transform:rotate(-90deg); }
.table .t-group .g-count { color:var(--muted); font-weight:500; font-family:var(--font-mono);
font-size:12px; margin-left:8px; }
.table .t-child { transition:opacity .12s; }
.table .t-child.hidden { display:none; }
.table .t-child > td:first-child { padding-left:34px; }
.table .t-expandable { cursor:pointer; }
.table .t-expandable .caret { display:inline-flex; width:15px; height:15px; color:var(--muted);
transition:transform .15s; vertical-align:-2px; }
.table .t-expandable.open .caret { transform:rotate(90deg); }
.table .t-detail > td { padding:0; border-bottom:1px solid var(--border); background:var(--surface-3); }
.table .t-detail .t-detail-in { padding:14px 18px 16px 34px; }
.table .t-detail.hidden { display:none; }
/* ════════════════════════════════════════════════════════════════════
LISTES — .list (lignes d'items cliquables, icône + corps + méta)
════════════════════════════════════════════════════════════════════ */
.list { display:flex; flex-direction:column; }
.list-row { display:flex; align-items:center; gap:13px; padding:13px 16px;
border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; }
.list-row:last-child { border-bottom:0; }
.list-row:hover { background:var(--surface-3); }
.list-row .lead { width:8px; height:8px; border-radius:50%; flex:none; }
.list-row .li-ico { width:36px; height:36px; border-radius:9px; flex:none; display:grid; place-items:center;
background:var(--surface-2); color:var(--text-2); }
.list-row .li-ico svg { width:18px; height:18px; }
.list-row .li-body { flex:1; min-width:0; }
.list-row .li-title { font-weight:600; font-size:14px; color:var(--text); }
.list-row .li-meta { font-size:12.5px; color:var(--muted); margin-top:2px;
display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.list-row .li-trail { margin-left:auto; flex:none; color:var(--muted); }
/* ════════════════════════════════════════════════════════════════════
BADGES & TAGS (sémantiques + BU)
════════════════════════════════════════════════════════════════════ */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px;
font:600 11.5px/1.5 var(--font); white-space:nowrap; }
.badge-success { background:var(--green-light); color:var(--green); }
.badge-warning { background:var(--amber-light); color:var(--amber); }
.badge-error { background:var(--red-light); color:var(--red); }
.badge-info { background:var(--accent-light); color:var(--accent); }
.badge-neutral { background:var(--surface-2); color:var(--muted); }
.badge .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
/* Tags BU / agence — pilotés par .bu-{key} */
.bu-tag { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:6px;
font:600 11px/1.5 var(--font-mono); letter-spacing:.02em; }
.bu-fi { background:var(--bu-fi-bg); color:var(--bu-fi); }
.bu-sol { background:var(--bu-sol-bg); color:var(--bu-sol); }
.bu-ish { background:var(--bu-ish-bg); color:var(--bu-ish); }
.bu-han { background:var(--bu-han-bg); color:var(--bu-han); }
.bu-key { background:var(--bu-key-bg); color:var(--bu-key); }
.bu-stf { background:var(--bu-stf-bg); color:var(--bu-stf); }
.bu-ins { background:var(--bu-ins-bg); color:var(--bu-ins); }
/* ════════════════════════════════════════════════════════════════════
ALERTES
════════════════════════════════════════════════════════════════════ */
.alert { display:flex; gap:10px; align-items:flex-start; border-radius:var(--r);
padding:12px 14px; font-size:13.5px; line-height:1.5; }
.alert svg { width:18px; height:18px; flex:none; margin-top:1px; }
.alert-info { background:var(--accent-light); color:var(--accent-dark); }
.alert-success { background:var(--green-light); color:var(--green); }
.alert-warning { background:var(--amber-light); color:var(--amber); }
.alert-error { background:var(--red-light); color:var(--red); }
:root[data-theme="dark"] .alert-info { color:var(--text); }
/* ════════════════════════════════════════════════════════════════════
APP-TILES (annuaire d'outils / favoris)
════════════════════════════════════════════════════════════════════ */
.app-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; }
.app-tile { position:relative; display:flex; gap:13px; align-items:flex-start;
background:var(--surface); border:1px solid var(--border); border-radius:var(--rl);
padding:16px; box-shadow:var(--sh-sm); text-decoration:none; color:var(--text);
transition:transform .15s, box-shadow .15s, border-color .15s; }
.app-tile:hover { transform:translateY(-2px); box-shadow:var(--sh); border-color:var(--border-2); text-decoration:none; }
.app-tile .ti { width:42px; height:42px; border-radius:11px; flex:none; display:grid; place-items:center; color:#fff; }
.app-tile .ti svg { width:21px; height:21px; }
.app-tile .at-name { font-weight:700; font-size:14.5px; line-height:1.2; }
.app-tile .at-desc { font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.45; }
.app-tile .at-star { position:absolute; top:12px; right:12px; width:17px; height:17px; color:var(--border-2); }
.app-tile .at-star.on { color:var(--bu-ins); }
.app-tile.disabled { opacity:.55; pointer-events:none; }
/* ════════════════════════════════════════════════════════════════════
KPI CARDS (cockpits)
════════════════════════════════════════════════════════════════════ */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.kpi-grid.mini { grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); grid-auto-rows:1fr; }
.kpi-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--rl);
box-shadow:var(--sh-sm); padding:16px 18px; display:flex; flex-direction:column; }
.kpi-card .kpi-h { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.kpi-card .kpi-label { font:600 11px/1.2 var(--font-mono); letter-spacing:.05em;
text-transform:uppercase; color:var(--muted); }
.kpi-card .kpi-health { width:7px; height:7px; border-radius:50%; margin-left:auto; }
.kpi-value { font:700 30px/1 var(--font-mono); letter-spacing:-.02em;
font-variant-numeric:tabular-nums; color:var(--text); }
.kpi-delta { display:inline-flex; align-items:center; gap:5px; margin-top:11px;
font-weight:600; font-size:12px; padding:4px 9px; border-radius:7px; align-self:flex-start; }
.kpi-delta svg { width:12px; height:12px; }
.kpi-delta.up { color:var(--green); background:var(--green-light); }
.kpi-delta.down { color:var(--red); background:var(--red-light); }
.kpi-delta.flat { color:var(--muted); background:var(--surface-2); }
/* Variantes adoptées par les apps cockpit (recrutement/commerce) :
= alias de .kpi-label (cartes server-rendered), sous-ligne,
état erreur, et deltas inline dans du texte. */
.kpi-card h3 { font:600 11px/1.2 var(--font-mono); letter-spacing:.05em;
text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.kpi-sub { font-size:12px; color:var(--muted); margin-top:6px; }
.kpi-value.error { font:500 14px/1.3 var(--font); color:var(--red); }
.delta-up { color:var(--green); }
.delta-down { color:var(--red); }
.kpi-mini .kpi-value { font-size:21px; }
.mini .kpi-card { padding:11px 13px; }
/* ════════════════════════════════════════════════════════════════════
CHIPS / FILTRES
════════════════════════════════════════════════════════════════════ */
.chip { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px;
background:var(--surface); border:1px solid var(--border-2); font-weight:600; font-size:13px;
color:var(--text-2); cursor:pointer; transition:.15s; }
.chip:hover { border-color:var(--accent); color:var(--accent); }
.chip.on { background:var(--accent-light); border-color:var(--accent); color:var(--accent); }
.chip .x { color:var(--muted); }
/* ════════════════════════════════════════════════════════════════════
ONGLETS — soulignés (.nav-tabs) + pills (.lk-tab) + toolbar
════════════════════════════════════════════════════════════════════ */
.nav-tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; }
.nav-tabs::-webkit-scrollbar { display:none; }
.nav-tabs a { padding:11px 16px; font-size:14px; font-weight:500; color:var(--muted);
border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s, border-color .15s; }
.nav-tabs a:hover { color:var(--text); text-decoration:none; }
.nav-tabs a.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.lk-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lk-toolbar-spacer { flex:1; }
.lk-tab { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px;
background:var(--surface-2); color:var(--muted); border:1px solid var(--border-2);
font:600 12.5px/1 var(--font); cursor:pointer; transition:.15s; }
.lk-tab:hover:not(.active) { background:var(--border); color:var(--text); }
.lk-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
/* ════════════════════════════════════════════════════════════════════
BREADCRUMB · PAGINATION · AVATAR · EMPTY STATE · TOOLTIP
════════════════════════════════════════════════════════════════════ */
.crumb { display:flex; align-items:center; gap:8px; font-size:13.5px; }
.crumb a { color:var(--muted); font-weight:500; }
.crumb a:hover { color:var(--accent); }
.crumb .sep { color:var(--border-2); }
.crumb .cur { font-weight:700; color:var(--text); }
.pager { display:inline-flex; gap:2px; }
.pager button { min-width:34px; height:34px; padding:0 8px; border:1px solid var(--border-2);
background:var(--surface); color:var(--text-2); font:600 13px var(--font); cursor:pointer; }
.pager button:first-child { border-radius:var(--r) 0 0 var(--r); }
.pager button:last-child { border-radius:0 var(--r) var(--r) 0; }
.pager button + button { border-left:0; }
.pager button.on { background:var(--accent); color:#fff; border-color:var(--accent); }
.avatar { width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
font-weight:700; font-size:13px; color:#fff;
background:linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.avatar-sm { width:28px; height:28px; font-size:11px; }
.empty { text-align:center; padding:48px 24px; color:var(--muted); }
.empty .emp-ico { width:48px; height:48px; margin:0 auto 14px; color:var(--border-2); }
.empty .emp-ico svg { width:48px; height:48px; }
.empty h3 { color:var(--text); margin-bottom:6px; }
/* ════════════════════════════════════════════════════════════════════
MODALE
════════════════════════════════════════════════════════════════════ */
.lk-modal-overlay { position:fixed; inset:0; background:rgba(8,12,20,.5); backdrop-filter:blur(2px);
display:flex; align-items:flex-start; justify-content:center; padding:48px 16px; z-index:100; overflow-y:auto; }
.lk-modal { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
width:100%; max-width:520px; box-shadow:var(--sh-lg); position:relative; }
.lk-modal-h { display:flex; align-items:center; padding:18px 20px; border-bottom:1px solid var(--border); }
.lk-modal-h h3 { font-size:16px; font-weight:700; }
.lk-modal-h .close { margin-left:auto; width:32px; height:32px; border:0; background:transparent;
color:var(--muted); border-radius:8px; cursor:pointer; display:grid; place-items:center; }
.lk-modal-h .close:hover { background:var(--surface-2); color:var(--text); }
.lk-modal-body { padding:20px; }
.lk-modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:16px 20px; border-top:1px solid var(--border); }
/* ════════════════════════════════════════════════════════════════════
FILTRES COCKPIT — rangée label + segmented/chips + dates
Remplace les barres legacy .filter-bar/.fbtn/.dp de cockpit.css.
Usage : voir _partials/_filter_period.html (période) ; les filtres
multi-valeurs (Agence/BU) utilisent .filter-chips + .filter-chip.
════════════════════════════════════════════════════════════════════ */
.filter-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.filter-row .f-lab { font:600 11px/1 var(--font-mono); letter-spacing:.05em;
text-transform:uppercase; color:var(--muted); min-width:64px; }
.filter-row .dash { color:var(--muted); }
/* Dans une rangée de filtres, les champs (dates…) gardent leur taille
intrinsèque — le width:100% générique de .input casserait le flux. */
.filter-row .input, .filter-row .select { width:auto; padding:6px 10px; font-size:12.5px; }
.filter-chips { display:flex; gap:7px; flex-wrap:wrap; }
.filter-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
border-radius:999px; font:600 12.5px/1 var(--font); cursor:pointer;
border:1px solid var(--border-2); background:var(--surface); color:var(--text-2);
transition:background .15s, border-color .15s, color .15s; }
.filter-chip:hover { border-color:var(--muted); }
.filter-chip.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.filter-chip .bu-dot { width:7px; height:7px; border-radius:50%; }
.filter-chip.on .bu-dot { background:#fff !important; }