/* ============================================================
   Metis — design system (repris du prototype design/Metis Pointech ERP.html)
   Rendu serveur PHP : mêmes tokens & UI kit pour la fidélité visuelle.
   ============================================================ */
:root {
  --bg: oklch(0.968 0.004 247);
  --surface: #ffffff;
  --surface-2: oklch(0.985 0.003 247);
  --surface-3: oklch(0.975 0.004 247);
  --ink: oklch(0.25 0.02 258);
  --ink-soft: oklch(0.44 0.015 258);
  --muted: oklch(0.57 0.012 258);
  --faint: oklch(0.72 0.01 258);
  --border: oklch(0.915 0.006 258);
  --border-strong: oklch(0.86 0.008 258);
  --primary: #bc3381;
  --primary-600: #a72d72;
  --primary-700: #8a2660;
  --primary-soft: oklch(0.955 0.03 350);
  --primary-soft-2: oklch(0.9 0.06 350);
  --info: oklch(0.52 0.15 255);
  --info-700: oklch(0.4 0.16 255);
  --info-soft: oklch(0.955 0.028 255);
  --accent: oklch(0.72 0.14 64);
  --accent-soft: oklch(0.95 0.045 70);
  --success: oklch(0.58 0.12 150);
  --success-soft: oklch(0.95 0.04 150);
  --warn: oklch(0.74 0.15 72);
  --warn-soft: oklch(0.95 0.05 78);
  --danger: oklch(0.56 0.19 25);
  --danger-soft: oklch(0.955 0.03 25);
  --nav-bg: oklch(0.255 0.018 262);
  --nav-bg-2: oklch(0.225 0.018 262);
  --nav-border: oklch(0.34 0.02 262);
  --nav-text: oklch(0.78 0.012 262);
  --nav-text-dim: oklch(0.6 0.012 262);
  --shadow-sm: 0 1px 2px oklch(0.25 0.02 258 / 0.06), 0 1px 3px oklch(0.25 0.02 258 / 0.05);
  --shadow-md: 0 2px 4px oklch(0.25 0.02 258 / 0.05), 0 4px 12px oklch(0.25 0.02 258 / 0.08);
  --shadow-lg: 0 8px 24px oklch(0.25 0.02 258 / 0.12), 0 2px 6px oklch(0.25 0.02 258 / 0.08);
  --r-sm: 6px;
  --r: 9px;
  --r-lg: 14px;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.5;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--primary-soft-2); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: oklch(0.82 0.008 258); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: oklch(0.72 0.01 258); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- App shell ---- */
.app { display: grid; grid-template-columns: auto 1fr; height: 100vh; overflow: hidden; }

.sidebar {
  background: linear-gradient(180deg, var(--nav-bg), var(--nav-bg-2));
  color: var(--nav-text);
  width: 248px;
  display: flex; flex-direction: column;
  border-right: 1px solid oklch(0.2 0.018 262);
  overflow: hidden;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 18px 18px 16px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: var(--primary);
  display: grid; place-items: center; color: #fff; font-weight: 700;
  font-family: 'Cinzel', serif; font-size: 17px; box-shadow: 0 2px 10px oklch(0.5 0.18 350 / 0.5);
}
.brand-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: 17px; color: #fff; letter-spacing: 0.04em; white-space: nowrap; line-height: 1; }
.brand-name .wm-tech { color: var(--primary); }
.brand-sub { font-size: 9.5px; color: var(--nav-text-dim); font-family: var(--mono); letter-spacing: 0.1em; white-space: nowrap; margin-top: 4px; text-transform: uppercase; }

.nav { flex: 1; overflow-y: auto; padding: 6px 10px 16px; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: oklch(0.4 0.02 262); }
.nav-group { margin-top: 16px; }
.nav-group-label { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--nav-text-dim); padding: 0 12px 6px; white-space: nowrap; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--nav-text); font-size: 13.5px; font-weight: 500; white-space: nowrap;
  position: relative; transition: background .12s, color .12s; margin-bottom: 1px; cursor: pointer;
}
.nav-item:hover { background: oklch(0.3 0.02 262); color: #fff; }
.nav-item.active { background: oklch(0.32 0.04 258); color: #fff; }
.nav-item.active::before { content: ''; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.nav-item .ico { flex: none; opacity: 0.92; }
.nav-badge { margin-left: auto; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 20px; font-family: var(--mono); }
.nav-badge.warn { background: var(--accent); }

.sidebar-foot { border-top: 1px solid var(--nav-border); padding: 10px; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--r-sm); }
.user-chip:hover { background: oklch(0.3 0.02 262); }

/* ---- Main ---- */
.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.topbar {
  height: 58px; flex: none; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding: 0 22px;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.crumbs .sep { color: var(--faint); }
.crumbs .cur { color: var(--ink); font-weight: 600; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-user { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.icon-btn { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-soft); position: relative; }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }

.content { flex: 1; overflow-y: auto; padding: 24px 26px 60px; }
.page-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.page-title { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.page-sub { color: var(--muted); font-size: 13.5px; margin-top: 5px; }
.page-head-actions { margin-left: auto; display: flex; gap: 9px; align-items: center; flex: none; }

/* ---- UI kit ---- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1px solid transparent; transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-600); }
.btn-ghost { background: var(--surface); color: var(--ink-soft); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn-subtle { background: var(--surface-3); color: var(--ink-soft); }
.btn-subtle:hover { background: oklch(0.93 0.006 258); color: var(--ink); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.card-pad { padding: 18px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.card-head .btn, .card-head a { margin-left: auto; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 20px; line-height: 1.6; white-space: nowrap; }
.pill .pdot { width: 6px; height: 6px; border-radius: 50%; }
.pill-gray { background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--border); }
.pill-blue { background: var(--info-soft); color: var(--info-700); }
.pill-green { background: var(--success-soft); color: oklch(0.42 0.12 150); }
.pill-amber { background: var(--accent-soft); color: oklch(0.48 0.12 60); }
.pill-warn { background: var(--warn-soft); color: oklch(0.5 0.13 60); }
.pill-red { background: var(--danger-soft); color: oklch(0.46 0.18 25); }

.tag { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); padding: 1px 7px; border-radius: 5px; }

table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; background: var(--surface); z-index: 1; }
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
table.tbl tbody tr { transition: background .1s; }
table.tbl tbody tr:hover { background: var(--surface-2); cursor: pointer; }
table.tbl tbody tr:last-child td { border-bottom: none; }
.td-strong { font-weight: 600; color: var(--ink); }

.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: #fff; flex: none; font-family: var(--mono); }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.lg { width: 42px; height: 42px; font-size: 15px; }

.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 7px; }
.stat-value { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; margin-top: 7px; font-variant-numeric: tabular-nums; }
.stat-foot { font-size: 12px; color: var(--muted); margin-top: 5px; display: flex; align-items: center; gap: 5px; }
.trend-up { color: var(--success); font-weight: 600; }
.trend-down { color: var(--danger); font-weight: 600; }

.progress { height: 7px; background: var(--surface-3); border-radius: 20px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 20px; background: var(--primary); }

.grid { display: grid; gap: 16px; }
.divider { height: 1px; background: var(--border); margin: 0; border: none; }

.seg { display: inline-flex; background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.seg button { padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.seg button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.finp { width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--ink); transition: border-color .12s, box-shadow .12s; }
.finp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.flabel { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }

.ph { background-image: repeating-linear-gradient(45deg, oklch(0.93 0.006 258) 0 10px, oklch(0.95 0.004 258) 10px 20px); border: 1px dashed var(--border-strong); border-radius: var(--r); display: grid; place-items: center; color: var(--faint); font-family: var(--mono); font-size: 11.5px; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }

@keyframes enter { from { transform: translateY(10px); } }
.fadein { animation: enter .22s ease; }

/* ============================================================
   Ajouts rendu serveur : login + alertes (hors prototype)
   ============================================================ */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--bg); padding: 24px; }
.login-card { width: 100%; max-width: 380px; padding: 28px; }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-brand .brand-name { font-family: 'Cinzel', serif; font-weight: 600; font-size: 20px; letter-spacing: 0.04em; color: var(--ink); }
.login-brand .brand-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.alert { padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; margin-bottom: 16px; }
.alert-danger { background: var(--danger-soft); color: oklch(0.46 0.18 25); border: 1px solid oklch(0.85 0.08 25); }
.alert-success { background: var(--success-soft); color: oklch(0.40 0.12 150); border: 1px solid oklch(0.82 0.08 150); }

/* ---- Écran Utilisateurs & accès ---- */
.pill-primary { background: var(--primary-soft); color: var(--primary-700); }

/* .seg variante lien (sélecteur de rôle), sans JS */
.seg a { padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.seg a.active { background: var(--primary); color: #fff; box-shadow: none; }

/* une ressource = une ligne, ses actions en chips à droite */
.res-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 18px; border-top: 1px solid var(--border); }
.res-row:first-child { border-top: none; }
.res-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip { display: inline-flex; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { padding: 3px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border-strong); color: var(--ink-soft); background: var(--surface); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.chip input:checked + span { background: var(--primary-soft); color: var(--primary-700); border-color: var(--primary-soft-2); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---- Écran Clients ---- */
.filters-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.filters-bar .cl-search, .filters-bar .finp { height: 40px; }
.filters-bar .finp { padding-top: 0; padding-bottom: 0; }
.filters-bar .grow { flex: 1; }

/* ---- Modale (CSS :target — fonctionne sans JS) ---- */
.modal { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 20px; background: oklch(0.25 0.02 258 / 0.42); }
.modal:target { display: grid; animation: fade .15s ease; }
.modal.is-open { display: grid; animation: fade .15s ease; }   /* piloté par JS (fermeture backdrop/croix/Échap sans reload) */
.modal-backdrop { position: absolute; inset: 0; }
.modal-card { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 440px; max-height: 90vh; overflow: auto; animation: enter .18s ease; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.modal-head .card-title { flex: 1; }
.modal-body { padding: 18px; }
@keyframes fade { from { opacity: 0; } }

/* ---- Clients : favoris + logos ---- */
.sec-head{display:flex;align-items:center;gap:9px;margin:4px 0 13px;}
.sec-head .ttl{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:7px;}
.sec-head .ttl .ico{color:var(--accent);}
.sec-head .cnt{font-size:12px;color:var(--faint);font-family:var(--mono);}
.sec-rule{flex:1;height:1px;background:var(--border);}
.fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:13px;margin-bottom:28px;}
.fav-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s;}
.fav-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.fav-logo{height:66px;display:grid;place-items:center;padding:11px 16px;background:#fff;border-bottom:1px solid var(--border);}
.fav-logo img{max-width:100%;max-height:44px;object-fit:contain;display:block;}
.fav-mono{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:var(--mono);font-weight:700;font-size:17px;}
.fav-body{padding:11px 14px 13px;}
.fav-body .nm{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fav-body .sc{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.star{position:absolute;top:7px;right:7px;width:27px;height:27px;border-radius:7px;display:grid;place-items:center;color:var(--accent);background:oklch(1 0 0 / .82);box-shadow:var(--shadow-sm);border:none;cursor:pointer;}
.star:hover{background:#fff;}
.list-star{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--border-strong);background:none;border:none;cursor:pointer;}
.list-star:hover{background:var(--surface-3);color:var(--muted);}
.list-star.on{color:var(--accent);}
.thumb{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;font-family:var(--mono);font-weight:600;font-size:12px;flex:none;}

/* ---- Clients : champ de recherche ---- */
.cl-search{display:flex;align-items:center;gap:9px;flex:1 1 420px;max-width:480px;height:40px;padding:0 12px;background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;color:var(--muted);transition:border-color .12s,box-shadow .12s;}
.cl-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);color:var(--ink-soft);}
.cl-search .ico{flex:none;}
.cl-search input{flex:1;min-width:0;border:none;background:none;outline:none;font-size:13.5px;color:var(--ink);}
.cl-search input::placeholder{color:var(--faint);}
.cl-clear{display:none;flex:none;width:22px;height:22px;border-radius:6px;place-items:center;color:var(--faint);background:none;border:none;cursor:pointer;}
.cl-clear:hover{background:var(--surface-3);color:var(--ink-soft);}
.cl-search.has-val .cl-clear{display:grid;}

/* ---- Clients : contacts (multi-numéros, popup) ---- */
.ct-row{position:relative;display:flex;gap:11px;padding:12px 18px;border-top:1px solid var(--border);cursor:pointer;transition:background .1s;}
.ct-row:first-of-type{border-top:none;}
.ct-row:hover{background:var(--surface-2);}
.ct-rowlink{position:absolute;inset:0;z-index:0;}            /* overlay :target (sans JS), sous les liens */
.ct-row > .avatar, .ct-row > .ct-main{position:relative;z-index:0;pointer-events:none;}
.ct-main{flex:1;min-width:0;}
.ct-name{font-weight:600;font-size:13px;color:var(--ink);}
.ct-meta{font-size:11.5px;color:var(--muted);display:flex;flex-direction:column;gap:2px;margin-top:3px;}
.ct-link{position:relative;z-index:1;pointer-events:auto;color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;gap:6px;width:fit-content;}
.ct-link:hover{color:var(--primary);}
.ct-link .ico{color:var(--faint);flex:none;}
.ct-link:hover .ico{color:var(--primary);}
.ct-row .ct-edit{position:relative;z-index:1;}
.ct-tellabel{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);background:var(--surface-3);border:1px solid var(--border);border-radius:4px;padding:0 5px;flex:none;}
.ct-pop-head{display:flex;align-items:center;gap:13px;padding:18px 18px 16px;border-bottom:1px solid var(--border);}
.ct-pop-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px;}
.ct-field{display:flex;flex-direction:column;gap:6px;}
.ct-field .lbl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.ct-bigrow{display:flex;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);}
.ct-bigrow .ico{color:var(--primary);flex:none;}
.ct-bigrow a{font-size:13.5px;color:var(--ink);font-weight:500;text-decoration:none;}
.ct-bigrow a:hover{color:var(--primary);text-decoration:underline;}
.ct-bigrow .grow{flex:1;}
.tel-row{display:flex;gap:8px;margin-top:8px;align-items:center;}
.tel-row select{width:108px;flex:none;}
.tel-row .rm{width:34px;height:38px;flex:none;border-radius:8px;display:grid;place-items:center;color:var(--faint);border:1px solid var(--border-strong);background:var(--surface);cursor:pointer;}
.tel-row .rm:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-soft);}
.addtel{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--primary);background:none;border:none;cursor:pointer;}
.addtel:hover{color:var(--primary-700);}

/* ---- Dossiers : fiche + journal d'activité ---- */
.dossier-head{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;}
.kv-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--surface-3);border:1px solid var(--border);border-radius:7px;padding:4px 10px;}
.tl-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px;}
.tl-fchip{font-size:12px;font-weight:600;color:var(--muted);background:var(--surface-3);border:1px solid var(--border);border-radius:20px;padding:5px 13px;cursor:pointer;}
.tl-fchip:hover{color:var(--ink);}
.tl-fchip.on{background:var(--primary);color:#fff;border-color:var(--primary);}
.tl-composer{display:flex;gap:10px;align-items:center;padding:11px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin-bottom:18px;}
.tl-composer input{flex:1;border:none;outline:none;background:none;font-size:13px;color:var(--ink);}
.tl-composer input::placeholder{color:var(--faint);}
.tl-group.hide,.tl-item.hide{display:none;}
.tl-day{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:14px 0 12px;}
.tl-group:first-child .tl-day{margin-top:0;}
.tl-item{display:grid;grid-template-columns:34px 1fr;gap:13px;position:relative;}
.tl-node{display:flex;justify-content:center;position:relative;}
.tl-node::before{content:'';position:absolute;top:32px;bottom:-8px;left:50%;width:2px;transform:translateX(-50%);background:var(--border);}
.tl-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;z-index:1;border:2px solid var(--surface);}
.tl-body{padding-bottom:18px;min-width:0;}
.tl-text{font-size:13px;color:var(--ink-soft);line-height:1.5;}
.tl-text b{color:var(--ink);font-weight:600;}
.tl-actor{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--ink);}
.tl-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--primary-700);background:var(--primary-soft);border:1px solid var(--primary-soft-2);border-radius:6px;padding:1px 7px;text-decoration:none;white-space:nowrap;}
.tl-time{font-size:11px;color:var(--faint);margin-top:3px;}
.tl-note{display:block;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:9px 11px;font-style:italic;color:var(--ink-soft);margin-top:5px;}
.mini{padding:6px 0;}
.mini-row{display:flex;align-items:center;gap:9px;padding:8px 16px;font-size:12.5px;color:var(--ink-soft);border-top:1px solid var(--border);}
.mini-row:first-child{border-top:none;}
.mini-row .grow{flex:1;}
/* pastilles de journal par canal */
.tl-dot-activite{background:var(--info-soft);color:var(--info);}
.tl-dot-achat{background:var(--accent-soft);color:var(--accent);}
.tl-dot-client{background:var(--primary-soft);color:var(--primary-700);}
.tl-dot-interne{background:oklch(0.93 0.045 300);color:oklch(0.50 0.20 300);}
.tl-dot-success{background:var(--success-soft);color:var(--success);}
.tl-dot-warn{background:var(--warn-soft);color:var(--warn);}

/* ---- Dossiers : formulaire de création/édition ---- */
.seg.full{display:flex;width:100%;}
.seg.full label{flex:1;justify-content:center;}
.seg label{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;text-align:center;}
.seg label input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.seg label.active,.seg label:has(input:checked){background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);}
.sub-sec{margin:16px 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--border);padding-top:12px;}
[data-hide="1"]{display:none;}
.dropz{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:64px;padding:12px;border:1.5px dashed var(--border-strong);border-radius:var(--r);background:var(--surface-2);color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;text-align:center;transition:border-color .12s,color .12s;}
.dropz:hover{border-color:var(--primary);color:var(--primary);}
.dropz input[type=file]{font-weight:400;color:var(--ink-soft);}

/* ── Responsive : sidebar en tiroir off-canvas sous 860px (atelier mobile/tablette) ── */
.nav-burger{display:none;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--ink-soft);cursor:pointer;flex:none;}
.nav-burger:hover{color:var(--primary);border-color:var(--primary);}
.nav-scrim{display:none;}
@media (max-width:860px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;z-index:80;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-lg);}
  body.nav-open .sidebar{transform:translateX(0);}
  body.nav-open .nav-scrim{display:block;position:fixed;inset:0;background:oklch(0 0 0 / .42);z-index:70;}
  .nav-burger{display:inline-flex;}
  .topbar{gap:10px;}
}

/* ===== Mobile tech (.mtech) ===== */
.mtech{max-width:520px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:var(--bg);}
.mtech .m-head{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 16px;display:flex;flex-direction:column;gap:11px;}
.mtech .m-brandrow{display:flex;align-items:center;gap:12px;}
.mtech .m-head .mbrand{flex:1;min-width:0;display:flex;align-items:center;gap:10px;}
.mtech .m-head .mbrand img{height:26px;width:auto;display:block;}
.mtech .m-head .brand-name{color:var(--ink);}
.mtech .m-head .ttl{font-size:19px;font-weight:700;letter-spacing:-.01em;}
.mtech .m-head .sub{font-size:12px;font-weight:500;color:var(--muted);margin-top:1px;}
.mtech .m-head .ttl small{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:1px;}
.mtech .m-head .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--mono);font-weight:600;font-size:12px;flex:none;background:var(--primary);}
.mtech .m-body{flex:1;padding:14px;display:flex;flex-direction:column;gap:11px;padding-bottom:88px;}
.mtech .daylbl{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:3px 2px -1px;}
.mtech .banner{background:var(--warn-soft);border:1px solid oklch(0.88 0.06 78);border-radius:12px;padding:10px 13px;display:flex;gap:10px;align-items:center;}
.mtech .banner.late{background:var(--danger-soft);border-color:oklch(0.85 0.09 25);}
.mtech .banner svg{flex:none;color:oklch(0.55 0.13 60);}
.mtech .banner.late svg{color:var(--danger);}
.mtech .banner .t{font-size:12.5px;color:oklch(0.42 0.11 60);font-weight:600;line-height:1.4;}
.mtech .banner.late .t{color:oklch(0.46 0.18 25);}
.mtech .banner .go{margin-left:auto;flex:none;color:oklch(0.5 0.13 60);}
.mtech .task{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;text-decoration:none;color:inherit;display:block;}
.mtech .task-top{display:flex;align-items:flex-start;gap:11px;padding:12px 14px 10px;}
.mtech .tlogo{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;font-family:var(--mono);font-weight:700;font-size:12px;flex:none;}
.mtech .tlogo.img{background:#fff;border:1px solid var(--border);overflow:hidden;}
.mtech .tlogo.img img{max-width:82%;max-height:82%;object-fit:contain;}
.mtech .tcli{font-size:11.5px;color:var(--muted);}
.mtech .tobj{font-size:13.5px;font-weight:600;line-height:1.25;margin-top:1px;}
.mtech .tmeta{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 11px;}
.mtech .nat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--ink-soft);background:var(--surface-3);border:1px solid var(--border);border-radius:7px;padding:2px 8px;}
.mtech .nat .d{width:7px;height:7px;border-radius:2px;flex:none;}
.mtech .reg{font-family:var(--mono);font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:7px;background:var(--surface-3);color:var(--muted);border:1px solid var(--border);}
.mtech .reg.maj{background:var(--warn-soft);color:oklch(0.5 0.13 60);border-color:oklch(0.88 0.06 78);}
.mtech .tfoot{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid var(--border);background:var(--surface-2);}
.mtech .twhen{font-family:var(--mono);font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;flex:1;min-width:0;overflow:hidden;white-space:nowrap;}
.mtech .vok{color:var(--success);display:inline-flex;align-items:center;gap:3px;font-weight:700;}
.mtech .weeknav{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
.mtech .weeknav .wnav{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--ink);display:grid;place-items:center;font-size:22px;line-height:1;text-decoration:none;box-shadow:var(--shadow-sm);}
.mtech .weeknav .wnav:active{background:var(--surface-3);}
.mtech .weeknav .wc{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;}
.mtech .weeknav .wm{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.mtech .weeknav .wtoday{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--primary-700);background:var(--primary-soft);border:1px solid var(--primary-soft-2);border-radius:20px;padding:5px 12px;text-decoration:none;line-height:1;}
.mtech .weeknav .wtoday:active{background:var(--primary-soft-2);}
.mtech .weekstrip{display:flex;gap:5px;}
.mtech .wd{flex:1;text-align:center;padding:7px 0 8px;border-radius:11px;border:1px solid transparent;cursor:pointer;background:none;}
.mtech .wd .dn{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--muted);letter-spacing:.03em;}
.mtech .wd .dd{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ink);margin-top:2px;}
.mtech .wd .dot{width:5px;height:5px;border-radius:50%;background:var(--primary);margin:4px auto 0;}
.mtech .wd.on{background:var(--primary);} .mtech .wd.on .dn,.mtech .wd.on .dd{color:#fff;} .mtech .wd.on .dot{background:#fff;}
.mtech .wd.today{border-color:var(--primary-soft-2);background:var(--primary-soft);}
.mtech .agrow{display:flex;gap:10px;}
.mtech .agtime{width:46px;flex:none;text-align:right;font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:14px;}
.mtech .agtime b{color:var(--ink);font-weight:700;font-size:12.5px;display:block;}
.mtech .agline{flex:1;min-width:0;}
.mtech .sched{font-size:11px;color:var(--faint);text-align:center;padding:6px;font-style:italic;}
.mtech .tabbar{position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:var(--surface);border-top:1px solid var(--border);display:flex;padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:20;}
.mtech .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:10px;font-weight:600;color:var(--muted);background:none;border:none;text-decoration:none;}
.mtech .tab.on{color:var(--primary-700);}
.mtech .tab .ic{position:relative;}
.mtech .tab .cnt{position:absolute;top:-4px;right:-8px;background:var(--danger);color:#fff;font-family:var(--mono);font-size:8.5px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:grid;place-items:center;padding:0 3px;}
.mtech .scrim{position:fixed;inset:0;background:oklch(0.25 0.02 258 /.45);z-index:30;display:flex;align-items:flex-end;}
.mtech .sheet{background:var(--surface);width:100%;max-width:520px;margin:0 auto;border-radius:20px 20px 0 0;padding:10px 14px calc(14px + env(safe-area-inset-bottom));}
.mtech .sheet .grab{width:38px;height:4px;border-radius:3px;background:var(--border-strong);margin:6px auto 12px;}
.mtech .sheet .st{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:6px 4px 8px;}
.mtech .mods{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mtech .mod{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);text-decoration:none;color:inherit;}
.mtech .mod.soon{opacity:.55;}
.mtech .mod .mi{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--primary-soft);color:var(--primary-700);}
.mtech .mod .mn{font-size:13px;font-weight:600;}
.mtech .mod .ms{font-size:10.5px;color:var(--muted);}
.mtech .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}
.mtech .cpad{padding:14px;}
.mtech .lrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);}
.mtech .lrow:first-child{border-top:none;}
.mtech .lrow .ico{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--ink-soft);}
.mtech .lrow .nm{font-size:13.5px;font-weight:600;}
.mtech .lrow .sub{font-size:11.5px;color:var(--muted);margin-top:1px;}
.mtech .kv{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--border);font-size:13px;}
.mtech .kv:first-child{border-top:none;} .mtech .kv .k{color:var(--muted);} .mtech .kv .v{font-weight:600;}
.mtech .btn-block{width:100%;}

/* ===== Mobile tech — accueil (.mtech) ===== */
.mtech .hubgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.mtech .hub{display:flex;flex-direction:column;gap:9px;padding:15px 14px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);position:relative;min-height:104px;text-decoration:none;color:inherit;}
.mtech .hub .hi{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;}
.mtech .hub .hn{font-size:14px;font-weight:700;color:var(--ink);}
.mtech .hub .hs{font-size:11.5px;color:var(--muted);margin-top:1px;}
.mtech .hub .badge{position:absolute;top:12px;right:12px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:20px;}
.mtech .hub.soon{opacity:.64;}
.mtech .hub .badge.soon{background:var(--surface-3);color:var(--muted);border:1px solid var(--border);}
.mtech .hub .badge.cnt{background:var(--danger);color:#fff;font-family:var(--mono);}
.mtech .homehead{background:linear-gradient(180deg,var(--nav-bg),var(--nav-bg-2));color:#fff;padding:16px;flex:none;}
.mtech .homehead .hrow{display:flex;align-items:center;gap:12px;}
.mtech .homehead .hrow>div{flex:1;min-width:0;}
.mtech .homehead .hbrand{flex:1;min-width:0;display:flex;align-items:center;gap:10px;}
.mtech .homehead .hbrand img{height:26px;width:auto;display:block;}
.mtech .homehead .hgreet{margin-top:13px;}
.mtech .homehead .hi{font-size:20px;font-weight:700;letter-spacing:-.01em;}
.mtech .homehead .hsub{font-size:12.5px;color:oklch(0.78 0.012 262);margin-top:2px;}
.mtech .homehead .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--mono);font-weight:600;font-size:12px;background:var(--primary);flex:none;}
.mtech .todaybox{background:oklch(1 0 0 / .08);border:1px solid oklch(1 0 0 / .14);border-radius:12px;padding:11px 13px;margin-top:14px;}
.mtech .todaybox .tl{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.78 0.012 262);}
.mtech .mini{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid oklch(1 0 0 / .1);text-decoration:none;}
.mtech .mini:first-of-type{border-top:none;padding-top:6px;}
.mtech .mini .ml{width:26px;height:26px;border-radius:7px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;}
.mtech .mini .ml img{max-width:80%;max-height:80%;}
.mtech .mini .mt{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mtech .mini .mh{font-family:var(--mono);font-size:11px;color:oklch(0.8 0.012 262);flex:none;}
.mtech .m-body>.hubgrid,.mtech .m-body>.task,.mtech .m-body>.weekstrip,.mtech .m-body>.btn{flex:none;}
.mtech .taddr{font-size:11.5px;color:var(--faint);margin-top:3px;display:flex;align-items:center;gap:4px;}