/* ===== NaroCRM · Design system « clair et aéré » ===== */
:root {
  --primary: #155eef; --primary-600: #0f4ec7; --primary-50: #eef4ff; --primary-100: #d9e6ff; --primary-25: #f5f8ff;
  --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f9fafb; --border: #eaecf0; --border-strong: #d5d9e0;
  --text: #0f172a; --text-2: #475467; --text-3: #667085; --muted: #98a2b3;
  --success: #12b76a; --success-50: #ecfdf3; --warning: #f79009; --warning-50: #fffaeb; --danger: #f04438; --danger-50: #fef3f2;
  --purple: #7a5af8; --sidebar-w: 240px; --topbar-h: 60px; --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;
  --ring: 0 0 0 4px rgba(21, 94, 239, .14);
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .18), 0 4px 12px -4px rgba(16, 24, 40, .06);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01"; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
h1 { font-size: 24px; letter-spacing: -.02em; } h2 { font-size: 18px; } h3 { font-size: 15px; } h4 { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
p { margin: 0 0 8px; }
::selection { background: var(--primary-100); }
:focus-visible { outline: none; box-shadow: var(--ring); }
* { scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-track { background: transparent; }
.boot { display: grid; place-items: center; height: 100vh; color: var(--text-3); }
svg.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
svg.icon.sm { width: 14px; height: 14px; } svg.icon.lg { width: 24px; height: 24px; }

/* ---------- Layout ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; height: 100vh; }
.sidebar { grid-row: 1 / 3; background: #fbfbfc; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; font-weight: 700; font-size: 16px; letter-spacing: -.02em; }
.sidebar .brand .logo { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--primary), var(--purple)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 4px 10px -2px rgba(21, 94, 239, .35); }
.sidebar .location-switch { margin: 2px 14px 14px; padding: 9px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; box-shadow: var(--shadow-xs); transition: border-color .15s var(--ease); }
.sidebar .location-switch:hover { border-color: var(--border-strong); }
.sidebar .location-switch .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.sidebar nav { padding: 0 10px; flex: 1; }
.sidebar nav .section { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); padding: 16px 12px 6px; letter-spacing: .06em; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; margin-bottom: 2px; transition: background .15s var(--ease), color .15s var(--ease); }
.sidebar nav a svg { color: var(--muted); transition: color .15s var(--ease); }
.sidebar nav a:hover { background: #f2f4f7; text-decoration: none; color: var(--text); }
.sidebar nav a:hover svg { color: var(--text-2); }
.sidebar nav a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border); }
.sidebar nav a.active svg { color: var(--primary); }
.sidebar nav a .badge { margin-left: auto; }
.sidebar .user { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); cursor: pointer; transition: background .15s var(--ease); }
.sidebar .user:hover { background: #f2f4f7; }
.sidebar .user .meta { flex: 1; min-width: 0; }
.sidebar .user .meta b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .user .meta span { font-size: 12px; color: var(--text-3); }
.topbar { background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 28px; position: relative; z-index: 5; }
.topbar .title { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.topbar .search { flex: 1; max-width: 440px; position: relative; }
.topbar .search input { padding-left: 36px; background: var(--surface-2); border-color: var(--border); }
.topbar .search input:focus { background: var(--surface); }
.topbar .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.topbar .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
main.content { overflow: auto; padding: 28px 32px 40px; }
main.content.flush { padding: 0; overflow: hidden; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.page-header .sub { color: var(--text-3); margin-top: 4px; font-size: 14px; }
.page-header .actions { display: flex; gap: 8px; }

/* ---------- Composants ---------- */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-100); color: var(--primary-600); display: inline-grid; place-items: center; font-weight: 600; font-size: 12px; flex-shrink: 0; overflow: hidden; box-shadow: 0 0 0 2px var(--surface); }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; } .avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card .card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card .card-body { padding: 20px; }
.card.pad { padding: 20px; }
.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat { padding: 18px 20px; }
.stat .label { color: var(--text-3); font-size: 13px; font-weight: 500; }
.stat .value { font-size: 28px; font-weight: 650; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .delta { font-size: 12px; margin-top: 4px; color: var(--text-3); }
.stat .delta.up { color: var(--success); } .stat .delta.down { color: var(--danger); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-weight: 500; cursor: pointer; line-height: 1.2; white-space: nowrap; box-shadow: var(--shadow-xs); transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .05s; }
.btn:hover { background: var(--surface-2); border-color: #c5cad3; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn.primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn.danger:hover { background: #d92d20; border-color: #d92d20; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); box-shadow: none; } .btn.ghost:hover { background: #f2f4f7; color: var(--text); }
.btn.sm { height: 32px; padding: 0 11px; font-size: 13px; } .btn.xs { height: 26px; padding: 0 8px; font-size: 12px; }
.btn.icon { width: 36px; padding: 0; } .btn.icon.sm { width: 28px; height: 28px; padding: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-group { display: inline-flex; gap: 6px; }

input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; width: 100%; outline: none; box-shadow: var(--shadow-xs); transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
input:not([type=checkbox]):not([type=radio]):not([type=color]), select { min-height: 38px; }
input:hover, select:hover, textarea:hover { border-color: #c5cad3; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-3); }
input[type=checkbox], input[type=radio] { width: auto; box-shadow: none; accent-color: var(--primary); width: 16px; height: 16px; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
select[multiple] { background-image: none; padding-right: 12px; }
textarea { min-height: 80px; resize: vertical; }
label.field { display: block; margin-bottom: 16px; }
label.field > span, .field-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.field .hint { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.field .error { font-size: 12px; color: var(--danger); margin-top: 6px; }
.row { display: flex; gap: 12px; align-items: center; } .row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; } .row.end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: 8px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: #f2f4f7; color: var(--text-2); border: 1px solid transparent; line-height: 1.5; white-space: nowrap; }
.badge.primary { background: var(--primary-50); color: var(--primary-600); }
.badge.success { background: var(--success-50); color: #027a48; }
.badge.warning { background: var(--warning-50); color: #b54708; }
.badge.danger { background: var(--danger-50); color: #b42318; }
.badge.purple { background: #f4f3ff; color: #5925dc; }
.badge.count { background: var(--danger); color: #fff; border: 0; padding: 0 6px; font-size: 11px; min-width: 18px; justify-content: center; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #fff; }
.tag .x { cursor: pointer; opacity: .8; } .tag .x:hover { opacity: 1; }

table.table { width: 100%; border-collapse: collapse; background: var(--surface); }
table.table th, table.table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.table th { font-size: 11px; font-weight: 600; color: var(--text-3); background: var(--surface-2); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
table.table tbody tr { transition: background .12s var(--ease); }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table tr.clickable { cursor: pointer; } table.table tbody tr.clickable:hover { background: var(--primary-25); }
table.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.table-toolbar { display: flex; gap: 8px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.table-toolbar input, .table-toolbar select { width: auto; }
.table-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: var(--text-3); font-size: 13px; border-top: 1px solid var(--border); }
.empty { padding: 48px 20px; text-align: center; color: var(--text-3); }
.empty > svg { width: 44px; height: 44px; color: var(--primary); background: var(--primary-50); border-radius: 12px; padding: 10px; margin-bottom: 12px; }
.empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }

.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tabs a, .tabs button { padding: 10px 12px; border: 0; background: none; font: inherit; font-weight: 500; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s var(--ease), border-color .15s var(--ease); }
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs a.active, .tabs button.active { color: var(--text); border-bottom-color: var(--primary); }
.subnav { display: flex; flex-direction: column; gap: 2px; }
.subnav a { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; transition: background .15s var(--ease); }
.subnav a svg { color: var(--muted); }
.subnav a.active { background: var(--primary-50); color: var(--primary-600); } .subnav a.active svg { color: var(--primary); }
.subnav a:hover { text-decoration: none; background: #f2f4f7; }

.dropdown { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 200px; z-index: 50; padding: 6px; animation: pop .12s var(--ease); }
.dropdown .item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; color: var(--text); }
.dropdown .item svg { color: var(--text-3); }
.dropdown .item:hover { background: #f2f4f7; } .dropdown .item.danger, .dropdown .item.danger svg { color: var(--danger); }
.dropdown .sep { height: 1px; background: var(--border); margin: 6px 0; }

.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 100; padding: 20px; animation: fade .15s ease; }
.modal { background: var(--surface); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: pop .18s var(--ease); }
.modal.lg { max-width: 820px; } .modal.xl { max-width: 1080px; }
.modal .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.modal .modal-head h2, .modal .modal-head h3 { font-size: 16px; }
.modal .modal-body { padding: 24px; overflow-y: auto; }
.modal .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .28); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 100; animation: fade .15s ease; }
.drawer { position: fixed; top: 8px; right: 8px; bottom: 8px; width: 540px; max-width: calc(100vw - 16px); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 101; display: flex; flex-direction: column; animation: slide .22s var(--ease); overflow: hidden; }
.drawer .modal-head, .drawer .modal-foot { padding: 18px 24px; } .drawer .modal-body { flex: 1; overflow-y: auto; padding: 24px; }
.drawer .modal-head { border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.drawer .modal-foot { border-top: 1px solid var(--border); background: var(--surface-2); display: flex; justify-content: flex-end; gap: 8px; }
@keyframes fade { from { opacity: 0 } } @keyframes pop { from { transform: scale(.96) translateY(8px); opacity: 0 } } @keyframes slide { from { transform: translateX(40px); opacity: 0 } }
/* Sorties (classe .closing ajoutée par ui.js avant retrait du DOM) */
.modal-backdrop.closing, .drawer-backdrop.closing { animation: fade-out .18s ease forwards; pointer-events: none; }
.modal-backdrop.closing .modal { animation: pop-out .18s var(--ease) forwards; }
.drawer-backdrop.closing .drawer { animation: slide-out .2s var(--ease) forwards; }
@keyframes fade-out { to { opacity: 0 } } @keyframes pop-out { to { transform: scale(.97) translateY(6px); opacity: 0 } } @keyframes slide-out { to { transform: translateX(40px); opacity: 0 } }
/* Changement de page (app.js) : une .page-view par navigation, animée (pas <main>, qui défile).
   Entrée sans « fill » après la fin : aucun transform ne reste (il casserait position: fixed). */
main.content.flush > .page-view { height: 100%; }
.page-view.page-enter { animation: page-in .28s var(--ease) backwards; }
.page-view.page-leave { animation: page-out .12s ease forwards; pointer-events: none; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes page-out { to { opacity: 0; transform: translateY(-4px); } }

#toast-root { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast.leaving { animation: toast-out .2s var(--ease) forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px); } }
.toast { background: #0f172a; color: #fff; padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; display: flex; gap: 8px; align-items: center; animation: pop .18s var(--ease); max-width: 380px; }
.toast.error { background: #b42318; } .toast.success { background: #067647; }

.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline .item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.timeline .item:last-child { border-bottom: 0; }
.timeline .item .dot { width: 30px; height: 30px; border-radius: 10px; background: #f2f4f7; display: grid; place-items: center; color: var(--text-3); flex-shrink: 0; }
.timeline .item .body { flex: 1; font-size: 13px; } .timeline .item .body time { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; font-size: 13px; }
.kv dt { color: var(--text-3); } .kv dd { margin: 0; word-break: break-word; }
.muted { color: var(--text-3); } .small { font-size: 12px; } .bold { font-weight: 600; } .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mt { margin-top: 12px; } .mb { margin-bottom: 12px; } .mt-lg { margin-top: 24px; }
.text-right { text-align: right; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link { color: var(--primary); cursor: pointer; } .link:hover { text-decoration: underline; }
.pill-toggle { display: inline-flex; gap: 2px; padding: 3px; background: #f2f4f7; border-radius: var(--radius-sm); }
.pill-toggle button { border: 0; background: transparent; padding: 5px 12px; font: inherit; font-weight: 500; cursor: pointer; color: var(--text-2); border-radius: 6px; transition: background .15s var(--ease), color .15s var(--ease); }
.pill-toggle button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.pill-toggle button:disabled { opacity: .45; cursor: not-allowed; }
.progress { height: 6px; background: #eaecf0; border-radius: 999px; overflow: hidden; } .progress > div { height: 100%; background: var(--primary); border-radius: 999px; transition: width .3s var(--ease); }
.split { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.split-3 { display: grid; grid-template-columns: 300px 1fr 320px; height: 100%; }
.pane { border-right: 1px solid var(--border); overflow-y: auto; background: var(--surface); height: 100%; }
.pane:last-child { border-right: 0; }
.list-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; gap: 10px; transition: background .12s var(--ease); }
.list-item:hover { background: var(--surface-2); } .list-item.active { background: var(--primary-25); box-shadow: inset 3px 0 0 var(--primary); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg) } }
.loading { display: grid; place-items: center; padding: 40px; color: var(--text-3); }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 20% -10%, #e3ecff 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #efeaff 0%, transparent 55%), var(--bg); }
.login { width: 400px; }
.login.card { padding: 32px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.login .brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 24px; }

/* Kanban */
.kanban { display: flex; gap: 16px; overflow-x: auto; height: 100%; padding: 24px 32px; align-items: flex-start; }
.kanban .column { width: 288px; flex-shrink: 0; background: #f2f4f7; border-radius: var(--radius); display: flex; flex-direction: column; max-height: 100%; }
.kanban .column .col-head { padding: 12px 14px; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--primary); }
.kanban .column .col-head .meta { font-size: 12px; color: var(--text-3); font-weight: 500; }
.kanban .column .col-body { padding: 8px; overflow-y: auto; flex: 1; min-height: 80px; border-radius: 0 0 var(--radius) var(--radius); transition: background .15s var(--ease); }
.kanban .column.drag-over .col-body { background: var(--primary-50); }
.kanban .kcard { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 8px; cursor: grab; box-shadow: var(--shadow); transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.kanban .kcard:hover { box-shadow: 0 4px 12px -2px rgba(16, 24, 40, .1); transform: translateY(-1px); }
.kanban .kcard:active { cursor: grabbing; } .kanban .kcard.dragging { opacity: .4; }
.kanban .kcard .name { font-weight: 600; font-size: 13px; } .kanban .kcard .meta { color: var(--text-3); font-size: 12px; margin-top: 4px; display: flex; justify-content: space-between; }
.kanban .kcard .value { font-weight: 600; color: var(--text); }

/* Calendrier */
.cal-week { display: grid; grid-template-columns: 56px repeat(7, 1fr); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.cal-week .day-head { padding: 10px 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-3); border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--surface-2); }
.cal-week .day-head.today { color: var(--primary); }
.cal-week .hour { font-size: 11px; color: var(--muted); text-align: right; padding: 2px 8px; border-top: 1px solid var(--border); height: 44px; }
.cal-week .cell { border-left: 1px solid var(--border); border-top: 1px solid #f2f4f7; height: 44px; position: relative; transition: background .1s; }
.cal-week .cell:hover { background: var(--primary-25); cursor: pointer; }
.cal-week .event { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 3px 7px; font-size: 11px; color: #fff; overflow: hidden; z-index: 2; cursor: pointer; line-height: 1.3; }

/* Conversations */
.msg { max-width: 72%; padding: 10px 14px; border-radius: 16px; margin-bottom: 8px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.msg.inbound { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 6px; align-self: flex-start; box-shadow: var(--shadow-xs); }
.msg.outbound { background: var(--primary); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; box-shadow: 0 1px 2px rgba(21, 94, 239, .2); }
.msg .meta { font-size: 11px; opacity: .7; margin-top: 4px; }
.composer { border-top: 1px solid var(--border); padding: 14px 18px; background: var(--surface); }
.composer textarea { min-height: 60px; }

/* Workflow builder */
.wf-canvas { display: flex; flex-direction: column; align-items: center; padding: 32px; gap: 0; }
.wf-node { width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: flex; gap: 12px; align-items: center; cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.wf-node:hover { border-color: var(--primary); box-shadow: var(--ring); } .wf-node.trigger { border-left: 4px solid var(--warning); } .wf-node.action { border-left: 4px solid var(--primary); }
.wf-node .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.wf-node.trigger .ic { background: var(--warning-50); color: var(--warning); }
.wf-node .t { font-weight: 600; font-size: 13px; } .wf-node .d { font-size: 12px; color: var(--text-3); }
.wf-connector { width: 2px; height: 26px; background: var(--border-strong); position: relative; }
.wf-add { width: 28px; height: 28px; border-radius: 50%; border: 1px dashed var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-3); margin: 4px 0; transition: all .15s var(--ease); }
.wf-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; } .sidebar { display: none; }
  main.content { padding: 20px 16px 32px; } .topbar { padding: 0 16px; }
  .grid.cols-4, .grid.cols-3 { grid-template-columns: 1fr 1fr; } .split, .form-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Page: contacts */
.contacts-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.contacts-toolbar .search { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.contacts-toolbar .search input { padding-left: 32px; }
.contacts-toolbar .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.bulk-bar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--primary-50); border-bottom: 1px solid var(--border); font-size: 13px; }
.bulk-bar b { color: var(--primary); }
table.table td.check, table.table th.check { width: 36px; padding-right: 0; }
.contact-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.contact-cell .who b { display: block; font-weight: 600; } .contact-cell .who span { font-size: 12px; color: var(--text-3); }
.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.contact-page { display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.contact-page .side .card + .card { margin-top: 16px; }
.contact-head { display: flex; gap: 14px; align-items: center; padding: 18px; border-bottom: 1px solid var(--border); }
.contact-head .name { font-size: 17px; font-weight: 600; } .contact-head .sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.contact-section { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.contact-section:last-child { border-bottom: 0; }
.contact-section h4 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.contact-section h4 .btn { text-transform: none; letter-spacing: 0; }
.inline-field { display: grid; grid-template-columns: 100px 1fr; gap: 6px 10px; font-size: 13px; padding: 4px 0; align-items: center; }
.inline-field .k { color: var(--text-3); } .inline-field .v { min-height: 22px; word-break: break-word; border-radius: 4px; padding: 2px 4px; margin-left: -4px; cursor: text; }
.inline-field .v:hover { background: var(--bg); } .inline-field .v.empty { color: var(--muted); font-style: italic; }
.inline-field .v input, .inline-field .v select { padding: 4px 8px; font-size: 13px; }
.quick-actions { display: flex; flex-direction: column; gap: 8px; }
.quick-actions .btn { justify-content: flex-start; }
.note-item { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; white-space: pre-wrap; }
.note-item .meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; margin-bottom: 4px; white-space: normal; }
.task-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.task-item input[type=checkbox] { margin-top: 2px; } .task-item .t { flex: 1; } .task-item.done .t { text-decoration: line-through; color: var(--muted); }
.task-item .due { font-size: 12px; color: var(--text-3); } .task-item .due.overdue { color: var(--danger); font-weight: 500; }
.timeline .item .body .txt { white-space: pre-wrap; color: var(--text-2); margin-top: 4px; font-size: 12px; background: var(--bg); padding: 6px 8px; border-radius: 4px; }
.import-preview { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.import-preview table th, .import-preview table td { padding: 6px 10px; font-size: 12px; }
.merge-fields { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.merge-fields .badge { cursor: pointer; } .merge-fields .badge:hover { border-color: var(--primary); color: var(--primary); }
@media (max-width: 1100px) { .contact-page { grid-template-columns: 1fr; } }

/* Page: settings */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-layout .subnav a { display: flex; align-items: center; gap: 8px; }
.settings-section + .settings-section { margin-top: 16px; }
.color-input { display: flex; gap: 8px; align-items: center; } .color-input input[type=color] { width: 40px; height: 34px; padding: 2px; }
.color-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 6px; }
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; align-items: center; gap: 8px; word-break: break-all; }
.code-box span { flex: 1; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } }
.badge.xs { font-size: 11px; padding: 0 7px; }
.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.segmented button { font: inherit; font-size: 13px; font-weight: 500; color: var(--text-3); background: none; border: 0; border-radius: 6px; padding: 5px 12px; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-xs), 0 0 0 1px var(--border); }
.integ-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 22px 24px; margin-bottom: 16px; }
.integ-hero > div:first-child { flex: 1; min-width: 260px; }
.integ-hero h2 { margin-bottom: 4px; } .integ-hero .muted { max-width: 560px; }
.integ-alert { display: flex; align-items: center; gap: 8px; background: var(--warning-50); color: #b54708; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; }
.integ-alert a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.integ-card-group { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.integ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.integ-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; color: var(--text); text-decoration: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.integ-card:hover { border-color: var(--primary-100); box-shadow: var(--shadow-lg); transform: translateY(-2px); text-decoration: none; }
.integ-card.tone-success { border-color: #d1fadf; }
.integ-card.tone-danger { border-color: #fecdca; }
.integ-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.integ-card-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.integ-card p { color: var(--text-3); font-size: 13px; margin: 0; flex: 1; line-height: 1.5; }
.integ-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.integ-card-foot .ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.integ-cta { font-size: 13px; font-weight: 600; color: var(--primary); white-space: nowrap; }
.integ-logo { --c: var(--primary); width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; color: var(--c); background: color-mix(in srgb, var(--c) 10%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent); }
.integ-logo.lg { width: 52px; height: 52px; border-radius: 14px; } .integ-logo.lg svg { width: 24px; height: 24px; }
.integ-detail-head { margin-bottom: 16px; }
.integ-back { display: inline-block; font-size: 13px; font-weight: 500; color: var(--text-3); margin-bottom: 12px; }
.integ-back:hover { color: var(--primary); text-decoration: none; }
.integ-title { display: flex; gap: 16px; align-items: flex-start; }
.integ-title h2 { font-size: 20px; } .integ-title .muted { margin-top: 2px; }
.integ-test { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.integ-test-search { position: relative; flex: 1; min-width: 220px; }
.integ-results:empty { display: none; }
.integ-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); overflow: hidden; }
.integ-results .list-item { align-items: center; padding: 8px 12px; }
.integ-test + div:not(:empty) { margin-top: 12px; }
.integ-brand-preview { --brand: var(--primary); display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--text-3); font-size: 13px; }
.integ-brand-preview .btn { background: var(--brand); border-color: var(--brand); color: #fff; pointer-events: none; }

/* Page: launchpad */
.launch-hero { background: linear-gradient(135deg, var(--primary), var(--purple)); color: #fff; border-radius: 12px; padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; }
.launch-hero h1 { color: #fff; font-size: 24px; } .launch-hero p { opacity: .9; margin: 6px 0 0; }
.launch-hero .progress { background: rgba(255,255,255,.3); height: 8px; margin-top: 14px; width: 100%; } .launch-hero .progress > div { background: #fff; }
.launch-hero .pct { font-size: 34px; font-weight: 700; white-space: nowrap; }
.launch-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.launch-step { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.launch-step .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.launch-step.done .ic { background: var(--success-50); color: var(--success); }
.launch-step .body { flex: 1; min-width: 0; } .launch-step .body b { display: block; margin-bottom: 2px; } .launch-step .body p { color: var(--text-3); font-size: 13px; margin: 0 0 10px; }
.launch-step .status { font-size: 12px; font-weight: 500; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.launch-step.done .status { color: var(--success); }
@media (max-width: 900px) { .launch-steps { grid-template-columns: 1fr; } }

/* Page: opportunities */
.opps-page { display: flex; flex-direction: column; height: 100%; }
.opps-toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.opps-toolbar .actions { display: flex; gap: 8px; }
.opps-toolbar select { width: auto; }
.opps-toolbar .pipe-select { font-weight: 600; min-width: 180px; }
.opps-search { position: relative; min-width: 220px; }
.opps-search input { padding-left: 32px; }
.opps-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.opps-summary { white-space: nowrap; }
.opps-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.opps-list { padding: 20px 24px; height: 100%; overflow: auto; }
.kanban .column .col-foot { padding: 4px 8px 8px; }
.kanban .column .col-foot .btn { width: 100%; justify-content: center; color: var(--text-3); }
.kanban .kcard .kcontact { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-top: 6px; min-width: 0; }
.kanban .kcard .kfoot { margin-top: 6px; }
.kanban-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 14px; text-align: center; color: var(--muted); font-size: 12px; }
.kanban .kghost { height: 44px; border: 2px dashed var(--primary); border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--primary-50); }
.kanban-overlay-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; color: var(--text-3); box-shadow: var(--shadow); pointer-events: none; }
.contact-chip { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); margin-bottom: 8px; }
.contact-chip > span { flex: 1; min-width: 0; }
.contact-chip > .avatar { flex: none; } /* l'avatar garde sa taille (pas étiré comme le texte) */
.opp-head { margin-bottom: 14px; }
.opp-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opp-contact-card { display: flex; align-items: center; gap: 12px; }
.manage-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; min-height: 360px; }
.manage-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; align-self: start; }
.manage-list-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.manage-list .list-item { align-items: center; }
.manage-editor .row input { flex: 1; }
.stage-list { display: flex; flex-direction: column; gap: 6px; }
.stage-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.stage-row input { flex: 1; padding: 5px 8px; font-size: 13px; }
.stage-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-50); color: var(--primary); font-size: 11px; font-weight: 600; display: grid; place-items: center; flex-shrink: 0; }
.flip-v { display: inline-flex; transform: rotate(180deg); }
@media (max-width: 900px) { .manage-layout { grid-template-columns: 1fr; } }

/* Page: dashboard */
.dash-stats { grid-template-columns: repeat(6, 1fr); }
.dash-stat:hover { border-color: var(--primary); text-decoration: none; }
.dash-stat .stat-ic { width: 26px; height: 26px; border-radius: 7px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; }
.dash-stat .stat-ic.warn { background: var(--danger-50); color: var(--danger); }
.dash-card .card-head h3 { font-size: 14px; }
.dash-card .card-foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-top: 1px solid var(--border); }
.dash-tasks .task-item:last-child { border-bottom: 0; }
.appt-row { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.appt-row:last-child { border-bottom: 0; }
.appt-time { border-left: 3px solid var(--primary); padding-left: 10px; min-width: 76px; display: flex; flex-direction: column; line-height: 1.25; }
.appt-time span { font-size: 11px; color: var(--text-3); }
.chart { width: 100%; }
.chart-svg { width: 100%; display: block; font-family: var(--font); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.donut { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.donut .chart-legend { justify-content: center; }
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; gap: 8px; }
.hbar-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-value { font-weight: 600; white-space: nowrap; }
.hbar-track { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 4px; transition: width .3s ease; }
.funnel { display: flex; flex-direction: column; gap: 8px; }
.funnel-row { display: grid; grid-template-columns: 170px 1fr; gap: 12px; align-items: center; }
.funnel-label b { display: block; font-size: 13px; font-weight: 600; }
.funnel-track { display: flex; justify-content: center; }
.funnel-band { height: 30px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; min-width: 8px; transition: width .3s ease; }
@media (max-width: 1300px) { .dash-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .dash-stats { grid-template-columns: 1fr 1fr; } .dash-row { grid-template-columns: 1fr; } .dash-row > .card { grid-column: span 1 !important; } .funnel-row { grid-template-columns: 110px 1fr; } }

/* Page: reporting */
.rep-card .card-head h3 { font-size: 14px; }
.rep-card .card-body .table-wrap { border: 0; border-radius: 0; overflow-x: auto; }
.rep-card .card-body .table-wrap table.table th:first-child, .rep-card .card-body .table-wrap table.table td:first-child { padding-left: 0; }
.rep-card .card-body .table-wrap table.table th:last-child, .rep-card .card-body .table-wrap table.table td:last-child { padding-right: 0; }
.grid.cols-2 > .rep-card { min-width: 0; }
@media (max-width: 900px) { .grid.cols-2 { grid-template-columns: 1fr; } }

/* Page: conversations */
.conv-page { height: 100%; min-height: 0; }
.conv-page .pane { display: flex; flex-direction: column; min-height: 0; }
.conv-left-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
.conv-left-head h3 { font-size: 15px; }
.conv-filters { display: flex; gap: 2px; padding: 0 10px 8px; border-bottom: 1px solid var(--border); }
.conv-filters button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 4px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 500; color: var(--text-3); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.conv-filters button:hover { background: var(--bg); color: var(--text); }
.conv-filters button.active { background: var(--primary-50); color: var(--primary); }
.conv-search { padding: 10px 12px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.conv-search .search { position: relative; }
.conv-search .search input { padding-left: 30px; font-size: 13px; }
.conv-search .search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.conv-search select { font-size: 12px; padding: 5px 6px; min-width: 0; }
.conv-list { flex: 1; overflow-y: auto; min-height: 0; }
.conv-list-foot { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-top: 1px solid var(--border); }
.conv-list-foot:empty { display: none; }
.conv-item { align-items: flex-start; padding: 10px 14px; }
.conv-item-body { flex: 1; min-width: 0; }
.conv-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.conv-item-top .name { font-weight: 500; font-size: 13px; }
.conv-item.unread .name { font-weight: 700; }
.conv-item-top .time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.conv-item-preview { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.conv-item.unread .conv-item-preview { color: var(--text-2); }
.conv-item-preview .ch { color: var(--muted); display: inline-flex; flex-shrink: 0; }
.conv-item-preview .truncate { flex: 1; min-width: 0; }
.conv-item-preview .star { color: var(--warning); display: inline-flex; flex-shrink: 0; }
.conv-item-preview .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
.conv-center { background: var(--bg); }
.conv-empty { flex: 1; display: grid; place-items: center; }
.conv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.conv-head-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.conv-head-who .name { font-weight: 600; font-size: 15px; color: var(--text); }
.conv-head-actions { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; }
.conv-head-actions .btn.starred { color: var(--warning); }
.conv-head-actions .btn.starred svg { fill: currentColor; }
.conv-messages { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; min-height: 0; }
.conv-msgs-empty { text-align: center; padding: 30px; font-size: 13px; }
.msg-day { text-align: center; margin: 8px 0 12px; }
.msg-day span { font-size: 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); padding: 2px 10px; border-radius: 999px; }
.msg.internal { background: var(--warning-50); border: 1px solid #fedf89; color: #7a2e0e; align-self: stretch; max-width: 100%; border-radius: 8px; }
.msg-internal-tag { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #b54708; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.msg-subject { font-weight: 600; margin-bottom: 4px; }
.msg-body { white-space: pre-wrap; }
.msg-status.failed { color: #fecdca; font-weight: 600; }
.msg.outbound .msg-status.failed { color: #fff; background: rgba(0,0,0,.18); padding: 0 6px; border-radius: 4px; }
.msg.outbound.failed { background: #b42318; }
.msg-status.simulated { font-style: italic; }
.msg-error { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12px; background: rgba(0,0,0,.18); padding: 6px 8px; border-radius: 8px; white-space: normal; }
.msg.inbound .msg-error { background: var(--danger-50, #fef3f2); color: #b42318; }
.msg-actions { margin-top: 6px; display: flex; justify-content: flex-end; }
.msg.outbound .msg-actions .btn { background: #fff; color: var(--text); border-color: transparent; }
.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; white-space: normal; }
.msg-att-img { display: block; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.06); }
.msg-att-img img { display: block; max-width: 240px; max-height: 240px; object-fit: cover; }
.msg-att-video { max-width: 280px; max-height: 240px; border-radius: 10px; }
.msg-att-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 12px; background: rgba(0,0,0,.06); color: inherit; text-decoration: none; max-width: 100%; }
.msg.outbound .msg-att-file { background: rgba(255,255,255,.18); }
.msg-att-file span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer { display: flex; flex-direction: column; gap: 8px; }
.composer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.composer-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.composer-tools .checkbox { font-size: 12px; margin-left: 6px; }
.composer-subject input { font-size: 13px; }
.composer-bottom { display: flex; align-items: center; gap: 10px; }
.conv-right { background: var(--surface); }
.conv-contact-head { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.conv-contact-head .name { font-weight: 600; font-size: 15px; color: var(--text); display: block; }
.conv-contact-head .badge.small { font-size: 11px; margin-top: 4px; }
.conv-section { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.conv-section h4 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.conv-section h4 .btn { text-transform: none; letter-spacing: 0; }
.conv-section .kv { grid-template-columns: 90px 1fr; font-size: 12px; }
.conv-section .quick-actions .btn { justify-content: flex-start; }
.conv-mini { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text); }
.conv-mini:last-child { border-bottom: 0; }
.conv-mini:hover { text-decoration: none; }
.conv-mini .truncate { flex: 1; min-width: 0; }
.conv-mini .appt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.conv-results { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.conv-results:empty { display: none; }
.conv-results .list-item { align-items: center; }
@media (max-width: 1200px) { .conv-page.split-3 { grid-template-columns: 280px 1fr; } .conv-right { display: none; } }
@media (max-width: 900px) { .conv-page.split-3 { grid-template-columns: 1fr; } .conv-left { display: none; } }

/* Page: calendars */
.cal-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-toolbar select { width: auto; }
.cal-week-wrap { position: relative; }
.cal-scroll { overflow: auto; max-height: calc(100vh - 260px); border-radius: var(--radius); }
.cal-week .day-head { position: sticky; top: 0; z-index: 3; line-height: 1.2; }
.cal-week .day-head .num { font-size: 16px; font-weight: 700; margin-top: 2px; }
.cal-week .day-head.today .num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; }
.cal-week .cell.today { background: var(--primary-25); }
.cal-week .cell.today:hover { background: var(--primary-50); }
.cal-week .event { right: 2px; box-shadow: 0 1px 2px rgba(16,24,40,.2); }
.cal-week .event:hover { filter: brightness(1.08); z-index: 4; }
.cal-week .event.cancelled { opacity: .5; text-decoration: line-through; }
.cal-week .event.pending { border: 1px dashed rgba(255,255,255,.8); }
.cal-week .event.showed::after, .cal-week .event.no_show::after { content: ''; position: absolute; right: 4px; top: 4px; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.cal-week .event.no_show::after { background: var(--danger); }
.cal-toolbar .gsync { display: flex; align-items: center; gap: 8px; }
.cal-toolbar .gsync .btn .spinner { margin-right: 2px; }
/* Événements Google Agenda (lecture seule) */
.cal-week .event.gcal { background: #eef0f4; color: var(--text-2, #344054); border-left: 3px solid #98a2b3; box-shadow: none; left: 2px; z-index: 1; }
.cal-week .event.gcal.free { background: transparent; border: 1px dashed #98a2b3; border-left-width: 3px; }
.cal-week .gcal-allday { margin-top: 4px; font-size: 11px; font-weight: 500; text-align: left; padding: 1px 6px; border-radius: 4px; background: #eef0f4; border-left: 3px solid #98a2b3; cursor: pointer; }
.gcal-legend { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: #eef0f4; border-left: 3px solid #98a2b3; vertical-align: -1px; }
.color-dot.lg { width: 18px; height: 18px; }
.cal-cards .cal-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.cal-card-head { display: flex; align-items: flex-start; gap: 10px; }
.cal-card-head h3 { display: flex; align-items: center; }
.cal-card-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.appt-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.appt-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avail-editor { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.avail-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 8px; align-items: start; padding: 4px 0; border-bottom: 1px solid var(--border); }
.avail-row:last-child { border-bottom: 0; }
.avail-day { font-size: 13px; padding-top: 4px; }
.avail-ranges { display: flex; flex-direction: column; gap: 4px; }
.avail-range { display: flex; align-items: center; gap: 6px; }
.avail-range input[type=time] { width: 110px; padding: 4px 6px; font-size: 13px; }
.table-toolbar input { min-width: 200px; }
/* Configuration d'un calendrier : sections, rappels, horaires des membres ; onglet Horaires */
.cal-form-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.cal-form-section h4 { margin: 0 0 2px; font-size: 14px; }
.rem-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rem-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rem-head select { width: auto; min-width: 96px; }
.rem-head input[type=number] { width: 80px; }
.sched-pick { display: grid; grid-template-columns: 160px minmax(200px, 1fr); gap: 4px 8px; align-items: center; }
.sched-pick > .muted { grid-column: 2; }
.sched-card { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
@media (max-width: 900px) { .cal-cards.grid.cols-2 { grid-template-columns: 1fr; } .avail-row { grid-template-columns: 1fr; } .sched-pick { grid-template-columns: 1fr; } }

/* Page: automation */
.wf-list-name { font-weight: 600; } .wf-list-name .sub { font-size: 12px; color: var(--text-3); font-weight: 400; margin-top: 2px; }
.switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: background .15s; cursor: pointer; }
.switch .track::after { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 2px rgba(16,24,40,.3); }
.switch input:checked + .track { background: var(--success); } .switch input:checked + .track::after { transform: translateX(16px); }
.switch input:disabled + .track { opacity: .5; cursor: not-allowed; }
.wf-page { display: flex; flex-direction: column; height: 100%; }
.wf-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.wf-head .name-input { font-size: 16px; font-weight: 600; border-color: transparent; background: transparent; width: 320px; padding: 6px 8px; }
.wf-head .name-input:hover, .wf-head .name-input:focus { border-color: var(--border-strong); background: var(--surface); }
.wf-head .tabs { margin: 0 0 0 12px; border-bottom: 0; } .wf-head .tabs button { padding: 8px 12px; }
.wf-head .spacer { flex: 1; }
.wf-dirty { font-size: 12px; color: var(--warning); display: inline-flex; align-items: center; gap: 4px; }
.wf-body { flex: 1; overflow: auto; background: radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 22px 22px, var(--bg); }
.wf-body.plain { background: var(--bg); padding: 24px; }
.wf-node { position: relative; }
.wf-node .txt { flex: 1; min-width: 0; } .wf-node .d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-node .num { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wf-node.selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }
.wf-node .tools { display: none; gap: 2px; } .wf-node:hover .tools { display: inline-flex; }
.wf-node.invalid { border-color: var(--danger); }
.wf-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 640px; margin-top: 4px; }
.wf-branch { display: flex; flex-direction: column; align-items: center; border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: 10px 8px 8px; background: rgba(255,255,255,.55); }
.wf-branch .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.wf-branch.then .lbl { color: #027a48; } .wf-branch.else .lbl { color: #b42318; }
.wf-branch .wf-node { width: 280px; padding: 9px 10px; }
.wf-branch .wf-node .ic { width: 26px; height: 26px; }
.wf-branch .wf-connector { height: 16px; }
.wf-end { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; background: var(--surface); }
.wf-catalog { display: flex; flex-direction: column; gap: 16px; }
.wf-catalog h4 { margin-bottom: 8px; }
.wf-catalog .items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wf-cat-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.wf-cat-item:hover { border-color: var(--primary); background: var(--primary-50); }
.wf-cat-item .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; flex-shrink: 0; }
.wf-cat-item b { display: block; font-size: 13px; } .wf-cat-item span { font-size: 12px; color: var(--text-3); }
.wf-merge { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wf-merge .chip { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); cursor: pointer; font-family: ui-monospace, monospace; }
.wf-merge .chip:hover { border-color: var(--primary); color: var(--primary); }
.wf-drawer-foot { display: flex; gap: 8px; }
.wf-triggers { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 12px 12px; border: 1px dashed var(--warning); border-radius: var(--radius); background: rgba(255,255,255,.55); }
.wf-triggers > .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--warning); }
.wf-or { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-3); }
.wf-add-trigger { margin-top: 4px; }
.wf-recipes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wf-recipe { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.wf-recipe:hover { border-color: var(--primary); background: var(--primary-50); }
.wf-recipe .ic { width: 34px; height: 34px; border-radius: 8px; background: var(--warning-50); color: var(--warning); display: grid; place-items: center; flex-shrink: 0; }
.wf-recipe b { display: block; font-size: 13px; } .wf-recipe span { font-size: 12px; color: var(--text-3); }
.wf-recipe .meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.wf-log { font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.wf-log .row { gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wf-log .ok { color: #027a48; } .wf-log .ko { color: #b42318; }
.wf-settings { max-width: 640px; }
.wf-settings .opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.wf-settings .opt:last-child { border-bottom: 0; } .wf-settings .opt b { display: block; font-size: 13px; } .wf-settings .opt span { font-size: 12px; color: var(--text-3); }
@media (max-width: 900px) { .wf-branches { grid-template-columns: 1fr; width: 380px; } .wf-catalog .items, .wf-recipes { grid-template-columns: 1fr; } }

/* Page: marketing */
.mk-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.mk-toolbar input, .mk-toolbar select { width: auto; }
.mk-audience { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; background: var(--bg); }
.mk-audience .count { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 8px; }
.mk-audience .sample { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.mk-tagpick { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-tagpick .tag { cursor: pointer; opacity: .45; } .mk-tagpick .tag.on { opacity: 1; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px currentColor; }
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.mk-preview { white-space: pre-wrap; font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.mk-body-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
@media (max-width: 900px) { .mk-stats { grid-template-columns: 1fr 1fr; } }

/* Page: payments */
.drawer.lg { width: 680px; } .drawer.xl { width: 920px; }
.drawer .modal-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); }
.pay-stats { grid-template-columns: repeat(3, 1fr); }
.pay-stat.ok .value { color: #027a48; } .pay-stat.late .value { color: var(--danger); } .pay-stat.wait .value { color: var(--primary); }
.pay-late { color: var(--danger); font-weight: 500; }
.pay-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pay-lines th, .pay-lines td { padding: 8px 10px; font-size: 13px; }
.pay-lines th:first-child, .pay-lines td:first-child { padding-left: 0; } .pay-lines th:last-child, .pay-lines td:last-child { padding-right: 0; }
.pay-totals { margin-left: auto; width: 280px; margin-top: 10px; font-size: 13px; }
.pay-totals > div { display: flex; justify-content: space-between; padding: 5px 0; }
.pay-totals .grand { border-top: 2px solid var(--text); font-weight: 700; font-size: 16px; margin-top: 4px; padding-top: 8px; }
.pay-notes { white-space: pre-wrap; font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.pay-contact { margin-bottom: 12px; }
.pay-results { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 6px; }
.pay-results:empty { display: none; }
.pay-results .list-item { align-items: center; padding: 8px 12px; }
.pay-editor-lines { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg); }
.pay-line { display: grid; grid-template-columns: minmax(0, 1fr) 70px 110px 100px 32px; gap: 6px; align-items: center; margin-bottom: 6px; }
.pay-line.head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-bottom: 4px; }
.pay-line input { padding: 6px 8px; font-size: 13px; }
.pay-line .bold { font-size: 13px; font-variant-numeric: tabular-nums; }
.pay-settings { max-width: 760px; }
@media (max-width: 900px) { .pay-stats { grid-template-columns: 1fr; } .pay-line { grid-template-columns: 1fr 60px 90px 80px 30px; } .pay-totals { width: 100%; } }

/* Page: reputation */
.rep-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rep-stars { display: inline-flex; gap: 1px; color: var(--border-strong); vertical-align: middle; }
.rep-stars svg { fill: currentColor; stroke: none; } .rep-stars svg.on { color: var(--warning); }
.rep-stars.lg svg { width: 26px; height: 26px; }
.rep-dist { display: flex; flex-direction: column; gap: 4px; }
.rep-bar { display: grid; grid-template-columns: 12px 14px 1fr 28px; gap: 6px; align-items: center; font-size: 12px; }
.rep-bar .n { color: var(--text-2); text-align: right; } .rep-bar svg { fill: var(--warning); stroke: none; color: var(--warning); }
.rep-bar .track { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; } .rep-bar .fill { height: 100%; background: var(--warning); border-radius: 4px; }
.rep-bar .c { color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; }
.rep-list { display: flex; flex-direction: column; }
.rep-card { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.rep-card:last-child { border-bottom: 0; }
.rep-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.rep-who { display: flex; align-items: baseline; gap: 10px; }
.rep-body { font-size: 14px; color: var(--text-2); white-space: pre-wrap; margin: 0 0 10px; }
.rep-reply { background: var(--primary-50); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 10px 12px; font-size: 13px; white-space: pre-wrap; }
.rep-results { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 6px; }
.rep-results:empty { display: none; } .rep-results .list-item { align-items: center; padding: 8px 12px; }
.rep-pick { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 10px; margin-top: 8px; }
.rep-pick-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.rep-pick-row:last-child { border-bottom: 0; } .rep-pick-row > span:nth-child(2) { flex: 1; min-width: 0; }
.rep-widget { grid-template-columns: 1fr 420px; }
@media (max-width: 1100px) { .rep-stats { grid-template-columns: 1fr 1fr; } .rep-widget { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .rep-stats { grid-template-columns: 1fr; } }

/* Page: sites */
.sf-fields { display: flex; flex-direction: column; gap: 8px; }
.sf-field { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); }
.sf-field-top { display: grid; grid-template-columns: 24px minmax(0, 1fr) 150px auto; gap: 8px; align-items: center; }
.sf-field-top input, .sf-field-top select, .sf-field-bottom input { padding: 6px 8px; font-size: 13px; }
.sf-field-bottom { display: grid; grid-template-columns: 50px 160px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; }
.sf-field .hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
.sf-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary-50); color: var(--primary); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.sf-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0; }
.sf-body { flex: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr) minmax(0, 1fr); min-height: 0; background: var(--bg); }
.sf-pages { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; }
.sf-pages .list-item { align-items: center; padding: 10px 12px; }
.sf-help { padding: 12px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-2); line-height: 1.5; }
.sf-help b { display: block; margin-bottom: 4px; } .sf-help .mono { margin-top: 6px; color: var(--text); }
.sf-editor { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--surface); }
.sf-editor-top { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 12px 14px 0; }
.sf-editor-top label.field { margin-bottom: 8px; } .sf-editor-top .checkbox { margin-bottom: 12px; font-size: 12px; }
.sf-editor-tools { display: flex; gap: 6px; align-items: center; padding: 6px 14px 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.sf-html { flex: 1; min-height: 0; border: 0; border-radius: 0; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; padding: 12px 14px; tab-size: 2; white-space: pre; overflow: auto; }
.sf-html:focus { box-shadow: none; }
.sf-preview-wrap { display: flex; flex-direction: column; min-height: 0; }
.sf-preview-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.sf-preview { flex: 1; border: 0; background: #fff; width: 100%; }
@media (max-width: 1100px) { .sf-body { grid-template-columns: 220px 1fr; } .sf-preview-wrap { display: none; } }
@media (max-width: 800px) { .sf-body { grid-template-columns: 1fr; } .sf-pages { max-height: 200px; } .sf-field-top, .sf-field-bottom { grid-template-columns: 1fr; } }

/* Page: 2FA (lib/twofa.js, connexion) */
.twofa-steps { margin: 0 0 12px; padding-left: 20px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.twofa-qr { display: flex; justify-content: center; padding: 8px 0 12px; }
.twofa-qr svg { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.twofa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.twofa-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; text-align: center; letter-spacing: .04em; }

/* Page: settings (import GHL) */
.ghl-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 16px; margin: 4px 0 14px; }
.ghl-parts .ghl-all { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.ghl-parts .checkbox { align-items: flex-start; }
.muted.xs { font-size: 11px; }

/* Intégrations : ce que chaque intégration peut faire sur le compte externe */
.integ-actions { margin-top: 16px; }
.integ-actions-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.integ-actions-list li { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; font-size: 13px; }
.integ-verb { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); justify-self: start; }
.verb-delete .integ-verb { color: #b42318; border-color: #fecdca; background: #fef3f2; }
.verb-write .integ-verb, .verb-send .integ-verb { color: #175cd3; border-color: #b2ddff; background: #eff8ff; }
.integ-never { border-top: 1px solid var(--border); padding-top: 10px; font-size: 13px; }
.integ-never-title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #067647; margin-bottom: 4px; }
.integ-never ul { margin: 0; padding-left: 20px; color: var(--muted); }
@media (max-width: 640px) { .integ-actions-list li { grid-template-columns: 1fr; gap: 4px; } }

/* Images : logo du compte et avatar (lib/image.js) */
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.xl { width: 72px; height: 72px; font-size: 22px; }
.image-field { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.image-field-preview { display: grid; place-items: center; overflow: hidden; background: var(--bg); border: 1px solid var(--border); flex-shrink: 0; }
.image-field-preview.round { border-radius: 50%; }
.image-field-preview.rounded { border-radius: 14px; }
.image-field-preview img { width: 100%; height: 100%; object-fit: contain; }
.image-field-preview.round img { object-fit: cover; }
.image-field-preview .avatar { width: 100%; height: 100%; box-shadow: none; }
.image-field-empty { color: var(--muted); }
.image-field-actions { display: flex; flex-direction: column; gap: 4px; }
.loc-logo { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.loc-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.integ-granted { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; font-size: 13px; }
.integ-granted-title { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #b54708; margin-bottom: 2px; }
.integ-granted p { margin: 0 0 4px; }
.integ-granted ul { margin: 0 0 8px; padding-left: 20px; }
.integ-granted li { margin-bottom: 3px; }
.integ-tip { display: flex; gap: 6px; align-items: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; }

/* Groupes de permissions (Agence) */
.perm-grid td, .perm-grid th { vertical-align: middle; }
.perm-grid select { width: auto; min-width: 170px; }
.perm-flags { display: flex; flex-direction: column; gap: 6px; }

/* ===== Responsive / PWA ===== */
/* Bloc dédié (mobile, tablette, application installée). L'apparence desktop (> 900 px) n'est pas touchée :
   seuls les éléments ci-dessous, réservés au mobile, y sont masqués. */
.nav-toggle, .search-toggle, .nav-backdrop, .mobile-only { display: none; }
@media (display-mode: standalone) { html, body { overscroll-behavior-y: none; } }

/* ---- Tablette et téléphone : sidebar en tiroir, coquille pleine hauteur, zones sûres iOS */
@media (max-width: 900px) {
  .shell { height: 100vh; height: 100dvh; grid-template-columns: minmax(0, 1fr); grid-template-rows: calc(var(--topbar-h) + env(safe-area-inset-top)) minmax(0, 1fr); }
  .sidebar { display: flex; position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 120; transform: translateX(-100%); visibility: hidden;
    transition: transform .22s var(--ease), visibility 0s linear .22s; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left); overscroll-behavior: contain; }
  .shell.nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-lg); transition: transform .22s var(--ease); }
  .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(15, 23, 42, .4); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .shell.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .sidebar nav a { min-height: 44px; }
  .sidebar .location-switch, .sidebar .user { min-height: 44px; }
  .nav-toggle { display: inline-flex; margin-left: -6px; }
  .topbar { gap: 8px; padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); }
  .topbar .title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar .search { min-width: 0; }
  .topbar .actions { flex-shrink: 0; }
  main.content { min-width: 0; padding: 20px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  main.content.flush { padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .dropdown { z-index: 130; max-width: calc(100vw - 16px); }
  #toast-root { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); align-items: stretch; }
  .toast { max-width: none; }
  .grid > *, .split > *, .form-grid > * { min-width: 0; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .contact-page, .settings-layout, .manage-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-page > *, .settings-layout > *, .manage-layout > * { min-width: 0; }

  /* Conversations : un panneau à la fois (liste → fil → fiche du contact) */
  .conv-page.split-3 { grid-template-columns: minmax(0, 1fr); }
  .conv-page .conv-left { display: flex; }
  .conv-page .conv-center, .conv-page .conv-right { display: none; }
  .conv-page:has(.conv-center > .conv-head, .conv-center > .loading) .conv-left { display: none; }
  .conv-page:has(.conv-center > .conv-head, .conv-center > .loading) .conv-center { display: flex; }
  .conv-page.show-contact .conv-center { display: none !important; }
  .conv-page.show-contact .conv-right { display: flex; }
  .conv-page .mobile-only { display: inline-flex; }
  .conv-right-back { align-self: flex-start; margin: 10px 12px 0; }
  .conv-head { padding: 8px 12px; gap: 6px; }
  .conv-head-who { flex: 1 1 200px; }
  .conv-head-who > div { min-width: 0; }
  .conv-head-who .muted.small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv-messages { padding: 12px; }
  .msg { max-width: 88%; }
  .msg-att-img img, .msg-att-video { max-width: 100%; }
  .composer { padding: 10px 12px; }

  /* Opportunités : kanban défilable horizontalement, colonnes accrochées */
  .kanban { padding: 12px; gap: 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .kanban .column { width: min(288px, 84vw); scroll-snap-align: start; }
  .opps-toolbar { padding: 10px 12px; gap: 8px; }
  .opps-list { padding: 12px; }
}

/* ---- Téléphone */
@media (max-width: 768px) {
  /* Recherche de la topbar : loupe qui déploie le champ par-dessus la barre */
  .search-toggle { display: inline-flex; }
  .topbar .search { display: none; position: absolute; top: env(safe-area-inset-top); bottom: 0; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); max-width: none; align-items: center; z-index: 3; background: var(--surface); }
  .topbar .search svg { left: 12px; }
  .topbar.search-open .search { display: flex; }
  /* 16 px : iOS ne zoome pas sur le champ actif */
  input:not([type=checkbox]):not([type=radio]):not([type=color]), select, textarea { font-size: 16px; }

  /* Cibles tactiles >= 40 px */
  .btn, .btn.sm, .btn.xs { min-height: 40px; }
  .btn.icon, .btn.icon.sm { min-width: 40px; min-height: 40px; }
  input:not([type=checkbox]):not([type=radio]):not([type=color]), select { min-height: 42px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .dropdown .item { min-height: 44px; }
  .subnav a, .list-item { min-height: 44px; }
  .tabs a, .tabs button, .pill-toggle button, .conv-filters button { min-height: 40px; }

  h1 { font-size: 20px; }
  .page-header { align-items: flex-start; margin-bottom: 16px; }
  .page-header .actions { flex-wrap: wrap; }
  .grid { gap: 14px; }
  .grid.cols-2, .grid.cols-3 { grid-template-columns: minmax(0, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid > div.field { margin-bottom: 14px; }
  .card .card-head { padding: 14px 16px; flex-wrap: wrap; }
  .card .card-body, .card.pad { padding: 16px; }

  /* Tableaux : défilement horizontal dans leur conteneur, jamais la page entière */
  .table-wrap, .card:has(> table.table), .card-body:has(> table.table), div:has(> table.table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.table th, table.table td { padding: 10px 12px; }
  .table-toolbar { padding: 10px 12px; }
  .table-toolbar input, .table-toolbar select { min-width: 0; flex: 1 1 140px; }
  .table-toolbar .search input { width: 100%; }
  .table-footer { flex-wrap: wrap; gap: 8px; }

  /* Onglets : une ligne défilable */
  .tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a, .tabs button { white-space: nowrap; flex-shrink: 0; }

  /* Modales et tiroirs plein écran */
  .modal-backdrop { padding: 0; place-items: stretch; }
  .modal, .modal.lg, .modal.xl { max-width: none; width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  .drawer { top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; border-radius: 0; }
  .modal .modal-head, .drawer .modal-head { padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); gap: 8px; }
  .modal .modal-body, .drawer .modal-body { flex: 1; min-height: 0; padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
  .modal .modal-foot, .drawer .modal-foot { flex-wrap: wrap; border-radius: 0; padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }

  /* Connexion */
  .login-wrap { padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
  .login { width: 100%; max-width: 400px; }
  .login.card { padding: 24px 20px; }

  /* Contacts */
  .contacts-toolbar .search { min-width: 0; max-width: none; flex: 1 1 100%; }
  /* Opportunités */
  .opps-search { min-width: 0; flex: 1 1 100%; }
  .opps-toolbar .pipe-select { min-width: 0; flex: 1 1 auto; }
  .opps-toolbar .row { gap: 8px; }
  .opps-toolbar .row > select:not(.pipe-select) { flex: 1 1 130px; min-width: 0; }
  .opps-toolbar .actions { flex-wrap: wrap; width: 100%; }
  .opps-toolbar .actions .btn { flex: 1 1 auto; }
  /* Calendriers : semaine défilable dans son cadre */
  .cal-scroll { max-height: calc(100dvh - 240px); -webkit-overflow-scrolling: touch; }
  .cal-week { min-width: 640px; }
  /* Paramètres : menu des sections en une ligne défilable au-dessus du contenu */
  .settings-layout { gap: 16px; }
  .settings-layout .subnav { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: none; }
  .settings-layout .subnav::-webkit-scrollbar { display: none; }
  .settings-layout .subnav a { white-space: nowrap; flex-shrink: 0; }
  /* Automatisation : branches à la largeur de l'écran */
  .wf-canvas { padding: 16px 8px; }
  .wf-branches { width: 100%; }
  .wf-head { padding: 10px 12px; gap: 8px; }
  .wf-head > * { min-width: 0; max-width: 100%; }
  .wf-head .name-input { width: 100%; }
  .wf-head .tabs { margin: 0; }
  .code-box { flex-wrap: wrap; }
}

/* ---- Petit téléphone */
@media (max-width: 480px) {
  .quick-add .btn-label { display: none; }
  .quick-add { padding: 0; width: 40px; }
  .topbar .actions > a.btn.icon[href="/settings"] { display: none; }
  main.content { padding: 16px max(12px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .stat { padding: 14px; }
  .stat .value { font-size: 22px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
  .inline-field { grid-template-columns: 90px minmax(0, 1fr); }
  .modal .modal-foot .btn, .drawer .modal-foot .btn { flex: 1 1 auto; }
  .page-header .actions { width: 100%; }
}

/* Éditeur visuel des courriels (lib/editor.js) et pièces jointes */
.rte { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.rte:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }
.rte-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--border); background: var(--bg); }
.rte-btn { min-width: 28px; height: 28px; padding: 0 6px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--text-2); font-size: 13px; display: inline-grid; place-items: center; }
.rte-btn:hover { background: var(--surface); color: var(--text); }
.rte-merge { font-family: ui-monospace, monospace; font-size: 12px; }
.rte-sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.rte-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.rte-area { padding: 10px 12px; outline: none; font-size: 14px; line-height: 1.5; overflow-y: auto; max-height: 420px; word-break: break-word; }
.rte-area:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rte-area p { margin: 0 0 8px; } .rte-area h2 { font-size: 18px; margin: 8px 0; } .rte-area blockquote { border-left: 3px solid var(--border); margin: 6px 0; padding-left: 10px; color: var(--text-2); }
.rte-area img { max-width: 100%; height: auto; } .rte-area a { color: var(--primary); text-decoration: underline; }
.att-list { display: flex; flex-wrap: wrap; gap: 6px; }
.att-list[hidden] { display: none; }
.att-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: 12px; max-width: 260px; }
.att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-x { border: 0; background: transparent; cursor: pointer; font-size: 14px; line-height: 1; color: var(--muted); padding: 0 2px; }
.msg-html-btn { margin-top: 6px; }
.msg.outbound .msg-html-btn { color: #fff; }
/* Page: companies */
.company-page { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.company-page .side .card + .card { margin-top: 16px; }
.company-logo { width: 32px; height: 32px; border-radius: 8px; background: var(--primary-50); color: var(--primary); display: inline-grid; place-items: center; flex: none; }
.company-logo.lg { width: 48px; height: 48px; border-radius: 12px; }
.need-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--bg); border: 1px solid var(--border); color: var(--text-2); }
.need-chip.pre { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary); }
button.need-chip.toggle { cursor: pointer; font: inherit; font-size: 12px; }
button.need-chip.toggle.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.company-contacts td { vertical-align: middle; }
.company-actions { white-space: nowrap; }
.who-group { padding: 10px 0; border-top: 1px solid var(--border); }
.who-group:first-of-type { border-top: 0; padding-top: 0; }
.who-need { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
.who-person { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 13px; }
.contact-company { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; font-size: 13px; }
.contact-company + .contact-company { border-top: 1px solid var(--border); }
@media (max-width: 1100px) { .company-page { grid-template-columns: minmax(0, 1fr); } .company-page > * { min-width: 0; } }

/* Conversations : répondre à un courriel dans le même fil */
.reply-banner { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--primary-50); font-size: 12px; }
.reply-banner[hidden] { display: none; }
.reply-banner > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-reply-btn { opacity: .75; }
.msg.outbound .msg-reply-btn { color: #fff; }

/* Fil d'activité d'un contact : message ciblé depuis un lien */
.msg-highlight { outline: 3px solid var(--warning, #f79009); outline-offset: 2px; transition: outline-color .6s; }

/* Fiche contact : photo modifiable */
.contact-photo { position: relative; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.contact-photo-edit { position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.contact-photo:hover .contact-photo-edit, .contact-photo:focus-visible .contact-photo-edit { opacity: 1; }

/* Conversations : charger les messages plus anciens */
.msg-older { display: flex; justify-content: center; margin: 4px 0 10px; }

/* Page: automation (historique) */
.wf-hist .wf-hist-search { position: relative; flex: 1; min-width: 180px; max-width: 320px; }
.wf-hist .wf-hist-search input { width: 100%; }
.wf-hist-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.wf-hist .table-toolbar .spacer { flex: 1; }
.wf-hist-counts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.wf-hist-counts:empty { display: none; }
.wf-hist-count { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; }
.wf-hist-count b { color: var(--text); }
.wf-hist-count:hover { border-color: var(--border-strong); }
.wf-hist-count.active { border-color: var(--primary); background: var(--primary-50); color: var(--primary-600); }
.wf-hist-count.ko b { color: #b42318; }
.wf-hist-last { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.wf-hist-last svg { color: #027a48; flex-shrink: 0; }
.wf-hist-last.ko svg { color: #b42318; }
.wf-hist-err { color: #b42318; }
.wf-hist-more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--border); }
.wf-hist-note { margin-top: 10px; }
.wf-hist-info td { padding: 6px 0; border: 0; vertical-align: top; }
.wf-hist-info td:first-child { width: 150px; padding-right: 12px; }
.wf-hist-actions { gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.wf-hist-reason { display: flex; gap: 6px; align-items: flex-start; }
.wf-hist-title { margin: 20px 0 8px; }
.wf-hist-steps { list-style: none; margin: 0; padding: 0; }
.wf-hist-steps li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); position: relative; }
.wf-hist-steps li:last-child { border-bottom: 0; }
.wf-hist-steps .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--success-50); color: #027a48; }
.wf-hist-steps li.ko .dot { background: var(--danger-50); color: #b42318; }
.wf-hist-steps .body { flex: 1; min-width: 0; font-size: 13px; }
.wf-hist-steps .head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wf-hist-steps time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.wf-hist-steps .info { color: var(--text-2); margin-top: 2px; word-break: break-word; }
.wf-hist-steps .err { color: #b42318; margin-top: 2px; word-break: break-word; }
.wf-hist-msg { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
@media (max-width: 768px) {
  .wf-hist .wf-hist-search { max-width: none; flex-basis: 100%; }
  .wf-hist-info td:first-child { width: 120px; }
}

/* Page: calendars (page de réservation) */
.drawer.bk-drawer { width: 1200px; }
.bk-editor { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.bk-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bk-section { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.bk-section h4 { margin: 0; font-size: 14px; }
.bk-section label.field { margin: 0; }
.bk-preview { position: sticky; top: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bk-preview-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-frame { width: 100%; height: calc(100vh - 190px); min-height: 480px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.bk-fields th, .bk-fields td { padding: 6px 8px; }
.bk-fields th:not(:first-child), .bk-fields td:not(:first-child) { text-align: center; width: 92px; }
.bk-question { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.bk-question .row > input { flex: 1; min-width: 0; }
.bk-question .row.wrap > select { flex: 1; min-width: 140px; }
.bk-q-num { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); display: grid; place-items: center; font-size: 12px; flex: none; }
.bk-image-prev img { max-width: 100%; max-height: 120px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: block; }
.bk-embed { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
@media (max-width: 900px) {
  .bk-editor { grid-template-columns: 1fr; }
  .bk-preview { position: static; }
  .bk-frame { height: 640px; }
}

/* Page: reputation (avis importés de Google et Facebook) */
.rep-who { flex-wrap: wrap; }
.rep-who a { display: inline-flex; align-items: center; gap: 3px; }

/* Page: settings (téléphone Android, jumelage) */
.android-pair .twofa-steps { margin-bottom: 8px; }
.android-code { text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 30px; font-weight: 700; letter-spacing: .12em; padding: 6px 0 2px; user-select: all; }
.android-pair .center { text-align: center; }
.android-pair .badge { white-space: normal; display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }