/* ============================================================
   Cockpit Entrepreneur · style Qonto (v1, 02/09/2026)
   Blanc, gris fins, noir profond, boutons pilule noirs, cartes bordées.
   ============================================================ */
:root {
  --ink: #1D1D1B; --ink-2: #3A3A37; --muted: #6F6F6B; --soft: #A3A39E; --faint: #C9C9C5;
  --bg: #FFFFFF; --bg2: #F7F7F5; --bg3: #EFEFEC; --card: #FFFFFF;
  --border: #E4E4E1; --line: #EFEFEC; --hover: #F7F7F5;
  --green: #1F8A4C; --green-ink: #176B3B; --green-soft: #E3F3E8; --green-bar: #2B8A4A;
  --red: #C62F2F; --red-ink: #A32222; --red-soft: #FBE7E6; --red-bar: #C0392B;
  --orange: #D97A12; --orange-ink: #9A5407; --orange-soft: #FDF0E0;
  --blue: #3B6FF2; --blue-ink: #2B55C4; --blue-soft: #E8EEFC; --blue-fill: rgba(59,111,242,.10);
  --violet: #7C5CD6; --violet-ink: #5E42B0; --violet-soft: #EEE9FA;
  --rose: #D64F8A; --rose-soft: #FBE6F0; --nuit: #24304A; --nuit-soft: #E4E8F0;
  --r: 12px; --r-sm: 8px; --pill: 999px;
  --sidebar: 240px; --bandeau-h: 0px;
  --sh: 0 1px 2px rgba(29,29,27,.04); --sh-2: 0 8px 30px rgba(29,29,27,.10); --sh-3: 0 24px 60px rgba(29,29,27,.18);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overscroll-behavior: none; overflow-x: hidden; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg); overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
b, strong { font-weight: 600; }
.ic { width: 18px; height: 18px; flex-shrink: 0; vertical-align: middle; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.pos { color: var(--green-ink); } .neg { color: var(--red-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Bandeau démo ---------- */
.demo-banner { position: sticky; top: 0; z-index: 60; background: var(--ink); color: #fff; display: flex; align-items: center; gap: 14px; padding: 9px 20px; font-size: 13px; }
.demo-banner .db-txt { flex: 1; min-width: 0; }
.demo-banner .db-txt b { font-weight: 600; }
.demo-banner .db-txt span { color: #B9B9B4; }
.demo-banner .btn { padding: 6px 13px; font-size: 12.5px; }
.demo-banner .btn.white { background: #fff; color: var(--ink); }
.demo-banner .btn.white:hover { background: #E8E8E5; }
.demo-banner .btn.line { border: 1px solid #55554F; color: #fff; }
.demo-banner .btn.line:hover { background: #333330; }
@media (max-width: 760px) { .demo-banner { padding: 8px 12px; gap: 8px; } .demo-banner .db-txt span { display: none; } .demo-banner .db-wa { display: none; } }

/* ---------- Structure ---------- */
.app { display: flex; min-height: calc(100vh - var(--bandeau-h)); }
.sidebar { width: var(--sidebar); flex-shrink: 0; background: var(--bg); border-right: 1px solid var(--border); position: sticky; top: var(--bandeau-h); height: calc(100vh - var(--bandeau-h)); display: flex; flex-direction: column; padding: 14px 12px; overflow-y: auto; scrollbar-width: none; }
.sidebar::-webkit-scrollbar { display: none; }
.main { flex: 1; min-width: 0; }
.container { max-width: 1240px; margin: 0 auto; padding: 24px 32px 60px; }

/* Compte (haut de sidebar, comme Qonto) */
.compte-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 8px; border-radius: var(--r-sm); text-align: left; position: relative; cursor: pointer; user-select: none; }
.compte-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.compte-chip:hover { background: var(--hover); }
.compte-chip .qui { flex: 1; min-width: 0; line-height: 1.2; }
.compte-chip .qui b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte-chip .qui small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compte-chip .ic-chev { width: 14px; height: 14px; color: var(--soft); }
.avatar-ini { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; flex-shrink: 0; letter-spacing: .02em; }
.avatar-ini.lg { width: 44px; height: 44px; font-size: 15px; }
.avatar-ini.xl { width: 64px; height: 64px; font-size: 21px; }
.av-1 { background: #E6EEFC; color: #2B55C4; } .av-2 { background: #E3F3E8; color: #176B3B; } .av-3 { background: #FDF0E0; color: #9A5407; }
.av-4 { background: #EEE9FA; color: #5E42B0; } .av-5 { background: #FBE6F0; color: #A8386A; } .av-6 { background: #E4E8F0; color: #24304A; } .av-7 { background: #EFEFEC; color: #3A3A37; }
.avatar-photo { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.compte-menu { position: absolute; left: 8px; right: 8px; top: calc(100% + 4px); background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-2); padding: 6px; display: none; z-index: 40; }
.compte-menu.open { display: block; }
.compte-menu button, .compte-menu a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--r-sm); font-size: 13px; text-align: left; }
.compte-menu button:hover, .compte-menu a:hover { background: var(--hover); }
.compte-menu .ic { width: 16px; height: 16px; color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.nav a, .nav button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--ink-2); width: 100%; text-align: left; }
.nav a:hover { background: var(--hover); color: var(--ink); }
.nav a.active { background: var(--bg3); color: var(--ink); font-weight: 600; }
.nav .ic { width: 18px; height: 18px; color: var(--muted); }
.nav a.active .ic { color: var(--ink); }
.nav .sep { height: 1px; background: var(--border); margin: 12px 6px; }
.nav-nb { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.nav-nb.gris { background: var(--bg3); color: var(--muted); }
.sidebar-bas { margin-top: auto; padding-top: 16px; }
.sidebar-bas .nav { margin-top: 0; }
.sidebar-bas .nav a { font-size: 13px; padding: 7px 10px; }
.wordmark { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 4px; }
.wordmark .wm { font-size: 22px; font-weight: 700; letter-spacing: -.03em; display: flex; align-items: center; gap: 6px; }
.wordmark .wm i { width: 10px; height: 10px; border-radius: 3px; background: var(--ink); display: inline-block; transform: rotate(45deg); }
.wordmark button { color: var(--muted); padding: 4px; border-radius: 6px; }
.wordmark button:hover { background: var(--hover); color: var(--ink); }

/* Topbar mobile */
.topbar { display: none; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 14px; }
.topbar .brand { font-size: 19px; font-weight: 700; letter-spacing: -.03em; display: flex; align-items: center; gap: 6px; }
.topbar .brand i { width: 9px; height: 9px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
.topbar .tb-droite { display: flex; align-items: center; gap: 6px; }
.tb-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); position: relative; }
.tb-btn .ic { width: 17px; height: 17px; }

/* ---------- En-tête de page ---------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.page-head .sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-head .sub .ic { width: 15px; height: 15px; }
.fraicheur { color: var(--soft); font-size: 12px; padding: 2px 6px; border-radius: 6px; }
.fraicheur:hover { background: var(--hover); color: var(--ink); }
.ph-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pastille-date { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--pill); background: var(--bg2); border: 1px solid var(--border); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.pastille-date .ic { width: 14px; height: 14px; color: var(--muted); }
.pastille-date.simu { background: #FFF6DB; border-color: #F3DF9E; color: #7A5A00; }

/* Cloche */
.cloche { position: relative; }
.cloche .pt { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid #fff; display: none; }
.cloche.on .pt { display: block; }
.notif-panel { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-2); display: none; z-index: 50; text-align: left; }
.notif-panel.open { display: block; }
.notif-panel h4 { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.notif-panel h4 small { color: var(--muted); font-weight: 500; }
.notif-list { max-height: 380px; overflow-y: auto; scrollbar-width: none; }
.notif-list::-webkit-scrollbar { display: none; }
.notif-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); align-items: flex-start; font-size: 13px; }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--hover); }
.notif-item .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.notif-item.rouge .ic { color: var(--red); } .notif-item.vert .ic { color: var(--green); } .notif-item.bleu .ic { color: var(--blue); } .notif-item.orange .ic { color: var(--orange); }
.notif-item b { display: block; font-weight: 600; }
.notif-item small { color: var(--muted); font-size: 12px; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: var(--pill); background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; transition: background .12s, transform .06s; border: 1px solid transparent; }
.btn:hover { background: #363633; }
.btn:active { transform: translateY(1px); }
.btn .ic { width: 16px; height: 16px; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--border); }
.btn.ghost:hover { background: var(--hover); border-color: #CFCFCB; }
.btn.soft { background: var(--bg2); color: var(--ink); }
.btn.soft:hover { background: var(--bg3); }
.btn.sm { padding: 6px 12px; font-size: 12.5px; }
.btn.xs { padding: 4px 10px; font-size: 12px; }
.btn.lg { padding: 12px 22px; font-size: 14.5px; }
.btn.full { width: 100%; }
.btn.danger { background: var(--red); }
.btn.danger:hover { background: var(--red-ink); }
.btn.green { background: var(--green); }
.btn.green:hover { background: var(--green-ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-ic { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.btn-ic:hover { background: var(--hover); color: var(--ink); }
.btn-ic .ic { width: 17px; height: 17px; }
.btn-ic.bord { border: 1px solid var(--border); color: var(--ink); }
.btn-ic.noir { background: var(--ink); color: #fff; width: 38px; height: 38px; }
.btn-ic.noir:hover { background: #363633; }
.lien { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
.lien:hover { text-decoration-thickness: 2px; }
.actions-rapides { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.actions-rapides .btn { padding: 8px 14px; }

/* ---------- Cartes ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--sh); }
.card.flat { box-shadow: none; }
.card.tight { padding: 14px 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { font-size: 14px; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.card-head h2 .ic { width: 15px; height: 15px; }
.card-head .ch-outils { display: flex; align-items: center; gap: 2px; }
.card-head .ch-outils .btn-ic { width: 28px; height: 28px; }
.card-head .ch-outils .btn-ic .ic { width: 15px; height: 15px; }
.card-titre { font-size: 15px; font-weight: 600; color: var(--ink); }
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, 1fr); } .g-3 { grid-template-columns: repeat(3, 1fr); } .g-4 { grid-template-columns: repeat(4, 1fr); }
.g-12 { grid-template-columns: 1fr 2fr; } .g-21 { grid-template-columns: 2fr 1fr; } .g-232 { grid-template-columns: 2fr 3fr 2fr; }
.stack { display: flex; flex-direction: column; gap: 16px; }
/* une colonne de grille ne prend jamais la largeur de son contenu : c'est le contenu qui se replie ou défile */
.grid > *, .stack > *, .mail-layout > *, .barre-outils > *, .card, .li-txt, .mi-txt, .qui, .t-txt { min-width: 0; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; } .mt-8 { margin-top: 8px; } .mt-24 { margin-top: 24px; }

/* Bannière d'accueil (comme le hero Qonto) */
.hero-card { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: center; padding: 26px 28px; position: relative; }
.hero-card .hc-x { position: absolute; top: 12px; right: 12px; }
.hero-card .tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pill); background: var(--bg2); border: 1px solid var(--border); font-size: 12px; font-weight: 500; margin-bottom: 12px; }
.hero-card h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; max-width: 560px; }
.hero-card p { color: var(--muted); font-size: 14px; max-width: 560px; margin-bottom: 16px; }
.hero-card .hc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-illu { background: var(--bg2); border-radius: var(--r); height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.hero-illu svg { width: 100%; height: 100%; }
@media (max-width: 900px) { .hero-card { grid-template-columns: 1fr; } .hero-illu { height: 150px; } }

/* KPI */
.kpi { padding: 18px 20px; }
.kpi .k-lab { font-size: 13px; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi .k-lab .ic { width: 15px; height: 15px; }
.kpi .k-sub { font-size: 12px; color: var(--soft); margin-top: 2px; }
.kpi .k-val { font-size: 28px; font-weight: 600; letter-spacing: -.03em; margin-top: 8px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .k-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; margin-top: 8px; padding: 3px 8px; border-radius: var(--pill); }
.kpi .k-delta .ic { width: 13px; height: 13px; }
.kpi .k-delta.up { background: var(--green-soft); color: var(--green-ink); }
.kpi .k-delta.down { background: var(--red-soft); color: var(--red-ink); }
.kpi .k-delta.flat { background: var(--bg3); color: var(--muted); }
.kpi.click { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.kpi.click:hover { border-color: #CFCFCB; box-shadow: var(--sh-2); }
.kpi .k-val.vert { color: var(--green-ink); } .kpi .k-val.rouge { color: var(--red-ink); } .kpi .k-val.orange { color: var(--orange-ink); } .kpi .k-val.bleu { color: var(--blue-ink); } .kpi .k-val.violet { color: var(--violet-ink); }
.kpi .k-graph { margin-top: 12px; }

/* Badges & pastilles */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--pill); font-size: 12px; font-weight: 500; background: var(--bg3); color: var(--ink-2); white-space: nowrap; line-height: 1.4; }
.badge .pt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--green-soft); color: var(--green-ink); }
.badge.warn { background: var(--orange-soft); color: var(--orange-ink); }
.badge.ko { background: var(--red-soft); color: var(--red-ink); }
.badge.info { background: var(--blue-soft); color: var(--blue-ink); }
.badge.violet { background: var(--violet-soft); color: var(--violet-ink); }
.badge.rose { background: var(--rose-soft); color: #A8386A; }
.badge.nuit { background: var(--nuit-soft); color: var(--nuit); }
.badge.off { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.badge.noir { background: var(--ink); color: #fff; }
.c-gris { --c: #6F6F6B; --cs: #EFEFEC; } .c-bleu { --c: #3B6FF2; --cs: #E8EEFC; } .c-vert { --c: #1F8A4C; --cs: #E3F3E8; } .c-violet { --c: #7C5CD6; --cs: #EEE9FA; }
.c-orange { --c: #D97A12; --cs: #FDF0E0; } .c-rose { --c: #D64F8A; --cs: #FBE6F0; } .c-nuit { --c: #24304A; --cs: #E4E8F0; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); flex-shrink: 0; }

/* Étiquettes de filtre (chips) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--border); background: #fff; font-size: 13px; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { background: var(--hover); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip small { color: inherit; opacity: .65; font-size: 12px; }
.chip.on small { opacity: .8; }
.barre-outils { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.recherche { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px; border: 1px solid var(--border); border-radius: var(--pill); background: #fff; min-width: 220px; }
.recherche .ic { width: 15px; height: 15px; color: var(--muted); }
.recherche input { border: 0; outline: none; background: transparent; flex: 1; min-width: 0; font-size: 16px; }
@media (min-width: 761px) { .recherche input { font-size: 13.5px; } }
.recherche input::placeholder { color: var(--soft); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin: 0 -22px; padding: 0 22px; }
.card.tight .table-wrap { margin: 0 -16px; padding: 0 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.click { cursor: pointer; }
.table tbody tr.click:hover td { background: var(--hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .mnt { font-weight: 600; }
.table th.tri { cursor: pointer; user-select: none; }
.table th.tri .ic { width: 13px; height: 13px; margin-left: 3px; opacity: .5; }
.table th.tri.on { color: var(--ink); }
.table th.tri.on .ic { opacity: 1; }
.cell-qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-qui .txt { min-width: 0; }
.cell-qui b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-qui small { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nom-lien { font-weight: 500; }
.nom-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; font-size: 13px; color: var(--muted); }
.pager-b { padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--border); background: #fff; font-size: 12.5px; }
.pager-b:hover:not([disabled]) { background: var(--hover); }
.pager-b[disabled] { opacity: .4; cursor: default; }
.vide { text-align: center; color: var(--muted); padding: 28px 16px; font-size: 13.5px; }
.vide .ic { width: 28px; height: 28px; color: var(--faint); display: block; margin: 0 auto 8px; }

/* ---------- Listes ---------- */
.liste { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.li:last-child { border-bottom: 0; }
.li .li-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--bg2); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex-shrink: 0; }
.li .li-ic .ic { width: 17px; height: 17px; }
.li .li-txt { flex: 1; min-width: 0; }
.li .li-txt b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .li-txt small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .li-droite { text-align: right; white-space: nowrap; }
.li .li-droite b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.li .li-droite small { color: var(--muted); font-size: 12px; }
.li.click { cursor: pointer; margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 8px; }
.li.click:hover { background: var(--hover); }
.voir-plus { margin-top: 12px; }

/* ---------- Agenda du jour (accueil) ---------- */
.jour-liste { display: flex; flex-direction: column; gap: 6px; }
.rdv-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; background: #fff; }
.rdv-ligne:hover { border-color: #CFCFCB; background: var(--hover); }
.rdv-ligne .h { font-weight: 600; width: 46px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.rdv-ligne .bar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--c, var(--muted)); }
.rdv-ligne .qui { flex: 1; min-width: 0; }
.rdv-ligne .qui b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdv-ligne .qui small { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 5px; }
.rdv-ligne .qui small .ic { width: 13px; height: 13px; }
.rdv-ligne.passe { opacity: .55; }
.rdv-ligne.encours { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(29,29,27,.06); }
.rdv-ligne .btn.xs { flex-shrink: 0; }

/* ---------- Agenda semaine ---------- */
.sem-nav { display: flex; align-items: center; gap: 8px; }
.sem-nav .titre { font-weight: 600; font-size: 15px; min-width: 200px; text-align: center; }
.agenda { display: grid; grid-template-columns: 52px repeat(5, 1fr); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: #fff; }
.agenda .ag-head { padding: 10px 6px; border-bottom: 1px solid var(--border); border-left: 1px solid var(--line); text-align: center; font-size: 12.5px; color: var(--muted); }
.agenda .ag-head b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.agenda .ag-head.auj b { color: var(--blue-ink); }
.agenda .ag-head .nb { display: inline-block; margin-top: 3px; font-size: 11px; padding: 1px 7px; border-radius: var(--pill); background: var(--bg3); }
.agenda .ag-col { position: relative; border-left: 1px solid var(--line); height: 660px; background-image: repeating-linear-gradient(to bottom, transparent 0 59px, var(--line) 59px 60px); }
.agenda .ag-heures { position: relative; height: 660px; font-size: 11px; color: var(--soft); }
.agenda .ag-heures span { position: absolute; right: 8px; transform: translateY(-50%); }
.agenda .ag-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 3; }
.agenda .ag-now::before { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.bloc-rdv { position: absolute; left: 4px; right: 4px; border-radius: 8px; padding: 5px 8px; font-size: 12px; line-height: 1.3; cursor: pointer; overflow: hidden; background: var(--cs, var(--bg3)); border-left: 3px solid var(--c, var(--muted)); color: var(--ink); transition: box-shadow .12s; }
.bloc-rdv:hover { box-shadow: var(--sh-2); z-index: 4; }
.bloc-rdv b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc-rdv small { display: block; color: var(--ink-2); opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bloc-rdv.fait { opacity: .55; }
.bloc-rdv.perso { background: repeating-linear-gradient(-45deg, #FAFAF8 0 6px, #F1F1EE 6px 12px); border-left-color: var(--faint); }
.agenda-mobile { display: none; }

/* ---------- Fiche client ---------- */
.fiche-tete { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fiche-tete h1 { font-size: 24px; }
.fiche-tete .ft-txt { flex: 1; min-width: 0; }
.fiche-tete .ft-meta { color: var(--muted); font-size: 13.5px; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.fiche-tete .ft-meta span { display: inline-flex; align-items: center; gap: 5px; }
.fiche-tete .ft-meta .ic { width: 14px; height: 14px; }
.fiche-infos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.fi { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.fi dt { color: var(--muted); }
.fi dd { font-weight: 500; text-align: right; min-width: 0; }
.fi dd.edit { cursor: text; border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
.fi dd.edit:hover { background: var(--bg2); outline: 1px dashed var(--faint); }
.progression { margin-top: 6px; }
.progression .p-txt { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.progression .p-txt b { font-weight: 600; }
.p-piste { height: 8px; border-radius: 6px; background: var(--bg3); overflow: hidden; }
.p-piste i { display: block; height: 100%; border-radius: 6px; background: var(--ink); }
.p-piste i.vert { background: var(--green); } .p-piste i.bleu { background: var(--blue); }
.seances-pts { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.seances-pts i { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border); display: inline-flex; align-items: center; justify-content: center; }
.seances-pts i.faite { background: var(--ink); border-color: var(--ink); }
.seances-pts i.faite::after { content: ''; width: 5px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); }
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding: 2px 0 14px; }
.tl-item::before { content: ''; position: absolute; left: -20px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.tl-item.vert::before { background: var(--green); } .tl-item.bleu::before { background: var(--blue); } .tl-item.orange::before { background: var(--orange); } .tl-item.violet::before { background: var(--violet); }
.tl-item small { display: block; color: var(--muted); font-size: 12px; }
.tl-item .txt { font-size: 13.5px; }
.notes-area { width: 100%; min-height: 96px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font-size: 16px; line-height: 1.5; background: #fff; resize: vertical; outline: none; }
@media (min-width: 761px) { .notes-area { font-size: 13.5px; } }
.notes-area:focus { border-color: var(--ink); }
.notes-etat { color: var(--soft); font-size: 12px; margin-top: 6px; text-align: right; min-height: 16px; }
.fichiers-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fichier { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; }
.fichier .doc-ic { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: var(--bg2); color: var(--muted); }
.fichier .doc-ic .ic { width: 28px; height: 28px; }
.fichier img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.fichier figcaption { padding: 7px 9px; font-size: 12px; }
.fichier figcaption b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fichier figcaption span { color: var(--muted); }

/* ---------- Offres ---------- */
.offres-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.offre-carte { padding: 20px; cursor: pointer; transition: border-color .12s, box-shadow .12s; position: relative; display: flex; flex-direction: column; gap: 8px; }
.offre-carte:hover { border-color: #CFCFCB; box-shadow: var(--sh-2); }
.offre-carte .oc-type { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.offre-carte h3 { font-size: 15.5px; font-weight: 600; padding-right: 60px; }
.offre-carte .oc-prix { font-size: 22px; font-weight: 600; letter-spacing: -.02em; position: absolute; top: 18px; right: 20px; }
.offre-carte .oc-prix small { font-size: 12px; color: var(--muted); font-weight: 500; }
.offre-carte p { color: var(--muted); font-size: 13px; line-height: 1.5; }
.offre-carte .oc-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.offre-carte .oc-pied b { color: var(--ink); font-weight: 600; }

/* ---------- Boîte mail ---------- */
.mail-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.mail-liste { padding: 6px; }
.mail-item { display: flex; gap: 10px; padding: 11px 12px; border-radius: 10px; cursor: pointer; align-items: flex-start; }
.mail-item:hover { background: var(--hover); }
.mail-item.on { background: var(--bg3); }
.mail-item .mi-txt { flex: 1; min-width: 0; }
.mail-item .mi-de { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.mail-item .mi-de b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item .mi-de small { color: var(--soft); font-size: 11.5px; white-space: nowrap; }
.mail-item .mi-obj { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mail-item .mi-res { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item .mi-cat { margin-top: 5px; }
.mail-item.nonlu .mi-obj { font-weight: 600; }
.mail-item.nonlu::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-top: 7px; flex-shrink: 0; }
.mail-item:not(.nonlu)::before { content: ''; width: 7px; flex-shrink: 0; }
.mail-lecture .ml-tete { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.mail-lecture h2 { font-size: 17px; font-weight: 600; }
.mail-lecture .ml-de { color: var(--muted); font-size: 13px; margin-top: 2px; }
.ia-bloc { border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; background: linear-gradient(180deg, #FAFAF8, #fff); }
.ia-bloc .ia-t { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--violet-ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.ia-bloc .ia-t .ic { width: 14px; height: 14px; }
.ia-bloc p { font-size: 14px; line-height: 1.55; }
.ia-bloc .ia-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.brouillon { margin-top: 16px; }
.brouillon textarea { width: 100%; min-height: 220px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; font-size: 16px; line-height: 1.55; background: #fff; resize: vertical; outline: none; }
@media (min-width: 761px) { .brouillon textarea { font-size: 14px; } }
.brouillon textarea:focus { border-color: var(--ink); }
.brouillon .br-pied { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.brouillon .br-pied small { color: var(--muted); }
.mail-vide { padding: 60px 20px; text-align: center; color: var(--muted); }
.mail-vide .ic { width: 36px; height: 36px; color: var(--faint); margin: 0 auto 10px; display: block; }
.tri-resume { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tri-resume .tr { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--border); font-size: 12.5px; cursor: pointer; background: #fff; }
.tri-resume .tr:hover { background: var(--hover); }
.tri-resume .tr.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.tri-resume .tr b { font-weight: 600; }

/* ---------- Tâches ---------- */
.tache { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tache:last-child { border-bottom: 0; }
.tache .case { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--faint); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; cursor: pointer; background: #fff; }
.tache .case:hover { border-color: var(--ink); }
.tache.faite .case { background: var(--ink); border-color: var(--ink); }
.tache.faite .case::after { content: ''; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px, -1px); }
.tache .t-txt { flex: 1; min-width: 0; }
.tache .t-txt b { font-weight: 500; display: block; }
.tache.faite .t-txt b { text-decoration: line-through; color: var(--muted); }
.tache .t-txt small { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tache .t-txt small .ic { width: 13px; height: 13px; }
.tache .t-txt small .retard { color: var(--red-ink); font-weight: 500; }
.tache .t-txt small .auj { color: var(--orange-ink); font-weight: 500; }
.tache .t-droite { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tache .prio { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.prio.haute { background: var(--red); } .prio.normale { background: var(--orange); } .prio.basse { background: var(--faint); }
.ajout-tache { display: flex; gap: 8px; margin-bottom: 14px; }
.ajout-tache input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--border); border-radius: var(--pill); padding: 0 16px; font-size: 16px; outline: none; background: #fff; }
@media (min-width: 761px) { .ajout-tache input { font-size: 13.5px; } }
.ajout-tache input:focus { border-color: var(--ink); }

/* ---------- Newsletter ---------- */
.nl-brouillon { border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; background: #fff; }
.nl-brouillon .nb-sujet { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.nl-brouillon .nb-txt { color: var(--ink-2); font-size: 14px; line-height: 1.6; white-space: pre-line; max-height: 200px; overflow: hidden; position: relative; }
.nl-brouillon .nb-txt::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, #fff); }
.nl-brouillon .nb-pied { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.taux { display: flex; gap: 12px; }
.taux .tx { flex: 1; text-align: center; padding: 12px 8px; border-radius: 10px; background: var(--bg2); }
.taux .tx b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.taux .tx small { color: var(--muted); font-size: 12px; }
.mini-bar { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.mini-bar .lab { width: 150px; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-bar .piste { flex: 1; height: 8px; border-radius: 6px; background: var(--bg3); overflow: hidden; }
.mini-bar .piste i { display: block; height: 100%; border-radius: 6px; background: var(--ink); }
.mini-bar .val { width: 60px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.barres-v { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Statistiques (SVG) ---------- */
.chart-svg { width: 100%; height: auto; display: block; }
.chart-legende { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-top: 8px; flex-wrap: wrap; }
.chart-legende span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.seg { display: inline-flex; background: var(--bg2); border-radius: var(--pill); padding: 3px; gap: 2px; }
.seg button { border-radius: var(--pill); padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--muted); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: var(--sh); }
.entonnoir { display: flex; flex-direction: column; gap: 8px; }
.entonnoir .et { display: flex; align-items: center; gap: 12px; font-size: 13.5px; }
.entonnoir .et .lab { width: 190px; flex-shrink: 0; }
.entonnoir .et .piste { flex: 1; height: 26px; border-radius: 6px; background: var(--bg2); overflow: hidden; }
.entonnoir .et .piste i { display: block; height: 100%; background: var(--ink); border-radius: 6px; min-width: 4px; }
.entonnoir .et:nth-child(2) .piste i { background: #4A4A47; } .entonnoir .et:nth-child(3) .piste i { background: #6F6F6B; } .entonnoir .et:nth-child(4) .piste i { background: var(--green); }
.entonnoir .et .val { width: 90px; text-align: right; font-weight: 600; flex-shrink: 0; }
.entonnoir .et .val small { color: var(--muted); font-weight: 500; }

/* ---------- Robots ---------- */
.robots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.robot-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.robot-card .rc-tete { display: flex; align-items: center; gap: 12px; }
.robot-card .rc-ic { width: 42px; height: 42px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--border); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.robot-card .rc-ic .ic { width: 21px; height: 21px; }
.robot-card h3 { font-size: 15px; font-weight: 600; }
.robot-card .rc-role { color: var(--muted); font-size: 12.5px; }
.robot-card p { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.robot-card .rc-log { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.robot-card .rc-log div { font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; }
.robot-card .rc-log div b { color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.robot-card .rc-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.robot-card.off { opacity: .6; }
.switch { position: relative; width: 40px; height: 22px; border-radius: var(--pill); background: var(--faint); transition: background .15s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(18px); }
.temps-evite { background: var(--ink); color: #fff; border-color: var(--ink); }
.temps-evite .k-lab, .temps-evite .k-sub { color: #B9B9B4; }
.temps-evite .k-val { color: #fff; }
.temps-evite .k-delta { background: rgba(255,255,255,.14); color: #fff; }

/* ---------- Connexions ---------- */
.connexions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cx-carte { padding: 20px; display: flex; flex-direction: column; }
.cx-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cx-logo { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--border); color: var(--ink); display: flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.cx-logo .ic { width: 20px; height: 20px; }
.cx-tete h2 { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; }
.cx-desc { color: var(--muted); font-size: 13px; line-height: 1.55; margin-bottom: 12px; }
.cx-pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cx-pied small { color: var(--muted); font-size: 12px; }

/* ---------- Formulaires ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
.champ label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 5px; }
.champ input, .champ textarea, .champ select { width: 100%; height: 42px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 12px; font-size: 16px; background: #FFFFFF; outline: none; }
.champ textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.champ input:focus, .champ textarea:focus { border-color: var(--ink); }
.champ small { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.radios { display: flex; gap: 8px; flex-wrap: wrap; }
.radios label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--pill); font-size: 13px; cursor: pointer; background: #fff; }
.radios label:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
.radios input { position: absolute; opacity: 0; width: 0; height: 0; }
.aide-form { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* Menus déroulants maison (habillage du select) */
.sel-jbc-vrai { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; }
.sel-jbc { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 42px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 12px; background: #fff; font-size: 14px; text-align: left; cursor: pointer; }
.sel-jbc:hover { border-color: #CFCFCB; }
.sel-jbc.ouvert, .sel-jbc:focus-visible { border-color: var(--ink); outline: none; }
.sel-jbc.vide .sel-jbc-t { color: var(--soft); }
.sel-jbc-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-jbc-fl { width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-2px); flex-shrink: 0; }
.sel-jbc.sm { height: 34px; font-size: 13px; width: auto; border-radius: var(--pill); }
.menu-jbc { position: fixed; z-index: 1200; background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-2); padding: 6px; max-height: 320px; overflow-y: auto; scrollbar-width: none; }
.menu-jbc::-webkit-scrollbar { display: none; }
.menu-jbc-o { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 7px; font-size: 13.5px; text-align: left; }
.menu-jbc-o:hover, .menu-jbc-o:focus-visible { background: var(--hover); outline: none; }
.menu-jbc-o.on { font-weight: 600; }
.menu-jbc-o.on .menu-jbc-c::after { content: ''; width: 4px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); display: block; margin: 0 auto; }
.menu-jbc-c { width: 14px; flex-shrink: 0; }
.menu-jbc-o.rien { color: var(--muted); }

/* ---------- Modales (pattern JBC : scroll intérieur invisible, croix fixe) ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(29,29,27,.5); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal__content { position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-3); }
.modal__content.large { max-width: 820px; }
.modal__scroll { overflow-y: auto; padding: 32px 30px 28px; scrollbar-width: none; -ms-overflow-style: none; }
.modal__scroll::-webkit-scrollbar { display: none; width: 0; }
.modal__pied { padding: 14px 30px; border-top: 1px solid var(--line); background: #fff; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--muted); z-index: 2; background: #fff; }
.modal-close:hover { background: var(--hover); color: var(--ink); }
.modal__scroll h3 { font-size: 20px; font-weight: 600; text-align: center; letter-spacing: -.02em; }
.modal__scroll .intro { text-align: center; color: var(--muted); font-size: 14px; margin: 6px 0 20px; }
.modal-btns { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.modal-btns .btn { min-width: 140px; }
.modal-btns .btn.annuler { background: #fff; color: var(--ink); border-color: var(--ink); }
.modal-btns .btn.annuler:hover { background: var(--hover); }
.qk-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; }
.qk-card { border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; }
.qk-card h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.qk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.qk-info dt { font-size: 12px; color: var(--muted); } .qk-info dd { font-weight: 500; font-size: 13.5px; }
.qk-ct { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 4px 0; }
.qk-ct .ic { width: 15px; height: 15px; color: var(--muted); }
.qk-liste { list-style: none; }
.qk-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; flex-wrap: wrap; }
.qk-liste li:last-child { border-bottom: 0; }
.qk-liste li small { width: 100%; color: var(--muted); font-size: 12px; }

/* Boîte de dialogue (Confirmer / Annuler) */
.dlg-fond { position: fixed; inset: 0; z-index: 1100; background: rgba(29,29,27,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dlg { background: #fff; border-radius: 16px; padding: 28px 28px 22px; width: 100%; max-width: 420px; text-align: center; box-shadow: var(--sh-3); }
.dlg h3 { font-size: 18px; font-weight: 600; }
.dlg p { color: var(--muted); font-size: 14px; margin-top: 8px; line-height: 1.55; }
.dlg-btns { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.dlg-btns button { padding: 10px 20px; border-radius: var(--pill); font-size: 13.5px; font-weight: 500; min-width: 120px; }
.dlg-btns .dlg-oui { background: var(--ink); color: #fff; }
.dlg-btns .dlg-oui:hover { background: #363633; }
.dlg-btns .dlg-non { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.dlg-btns .dlg-non:hover { background: var(--hover); }

/* Toasts */
.toasts { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1300; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast { background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--sh-2); display: flex; align-items: center; gap: 9px; animation: toastIn .2s ease; }
.toast .ic { width: 16px; height: 16px; color: #9BE2B6; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Recherche globale (⌘K) ---------- */
.cmdk-fond { position: fixed; inset: 0; z-index: 1150; background: rgba(29,29,27,.45); display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.cmdk-fond.open { display: flex; }
.cmdk { width: 100%; max-width: 600px; background: #fff; border-radius: 14px; box-shadow: var(--sh-3); overflow: hidden; }
.cmdk .ck-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 54px; border-bottom: 1px solid var(--line); }
.cmdk .ck-in .ic { width: 18px; height: 18px; color: var(--muted); }
.cmdk .ck-in input { flex: 1; border: 0; outline: none; font-size: 16px; background: transparent; min-width: 0; }
.cmdk .ck-in kbd { font: 11px var(--font); color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.cmdk .ck-liste { max-height: 380px; overflow-y: auto; padding: 6px; scrollbar-width: none; }
.cmdk .ck-liste::-webkit-scrollbar { display: none; }
.cmdk .ck-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--soft); padding: 8px 10px 4px; font-weight: 600; }
.cmdk .ck-o { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; text-align: left; font-size: 13.5px; }
.cmdk .ck-o:hover, .cmdk .ck-o.on { background: var(--bg3); }
.cmdk .ck-o .ic { width: 16px; height: 16px; color: var(--muted); }
.cmdk .ck-o small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.cmdk .ck-vide { padding: 24px; text-align: center; color: var(--muted); font-size: 13.5px; }
.recherche-globale { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--pill); border: 1px solid var(--border); color: var(--muted); font-size: 13px; background: #fff; margin: 10px 0 0; width: 100%; }
.recherche-globale:hover { background: var(--hover); }
.recherche-globale .ic { width: 15px; height: 15px; }
.recherche-globale kbd { margin-left: auto; font: 11px var(--font); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--soft); }

/* ---------- Assistant ---------- */
.assist-btn { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-2); transition: transform .12s; }
.assist-btn:hover { transform: scale(1.05); }
.assist-btn .ic { width: 22px; height: 22px; }
.assist-btn .pt { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.assist { position: fixed; right: 22px; bottom: 84px; z-index: 900; width: 380px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 120px); background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-3); display: none; flex-direction: column; overflow: hidden; }
.assist.open { display: flex; }
.assist .as-tete { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.assist .as-tete .as-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.assist .as-tete .as-ic .ic { width: 16px; height: 16px; }
.assist .as-tete b { display: block; font-size: 14px; }
.assist .as-tete small { color: var(--muted); font-size: 12px; }
.assist .as-fil { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.assist .as-fil::-webkit-scrollbar { display: none; }
.as-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-line; }
.as-msg.moi { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.as-msg.ia { align-self: flex-start; background: var(--bg2); border-bottom-left-radius: 4px; }
.as-msg.ia a { text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.as-sugg { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 10px; }
.as-sugg button { padding: 6px 11px; border-radius: var(--pill); border: 1px solid var(--border); font-size: 12px; background: #fff; }
.as-sugg button:hover { background: var(--hover); }
.assist .as-in { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.assist .as-in input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--border); border-radius: var(--pill); padding: 0 14px; font-size: 16px; outline: none; }
@media (min-width: 761px) { .assist .as-in input { font-size: 13.5px; } }
.assist .as-in input:focus { border-color: var(--ink); }
.as-ecrit { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.as-ecrit i { width: 6px; height: 6px; border-radius: 50%; background: var(--soft); animation: pts 1s infinite; }
.as-ecrit i:nth-child(2) { animation-delay: .2s; } .as-ecrit i:nth-child(3) { animation-delay: .4s; }
@keyframes pts { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------- Visite guidée ---------- */
.tour-cadre { position: fixed; z-index: 1400; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(29,29,27,.55); pointer-events: none; transition: all .25s ease; }
.tour-carte { position: fixed; z-index: 1401; width: 340px; max-width: calc(100vw - 24px); background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: var(--sh-3); }
.tour-carte .tc-etape { font-size: 11.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tour-carte h3 { font-size: 16px; margin: 4px 0 6px; }
.tour-carte p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.tour-carte .tc-btns { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; }
.tour-carte .tc-btns .btn.ghost { border-color: var(--ink); }

/* ---------- Facture (aperçu) ---------- */
.facture-papier { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 32px; font-size: 13px; }
.facture-papier .fp-tete { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.facture-papier .fp-tete h2 { font-size: 22px; letter-spacing: -.02em; }
.facture-papier .fp-tete .fp-num { color: var(--muted); margin-top: 4px; }
.facture-papier .fp-qui { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 26px; }
.facture-papier .fp-qui small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.facture-papier table { width: 100%; border-collapse: collapse; }
.facture-papier th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 0; border-bottom: 1px solid var(--ink); }
.facture-papier td { padding: 10px 0; border-bottom: 1px solid var(--line); }
.facture-papier .fp-total { display: flex; justify-content: flex-end; margin-top: 16px; }
.facture-papier .fp-total div { width: 240px; }
.facture-papier .fp-total p { display: flex; justify-content: space-between; padding: 5px 0; }
.facture-papier .fp-total p.tt { font-weight: 600; font-size: 16px; border-top: 1px solid var(--ink); margin-top: 4px; padding-top: 8px; }
.facture-papier .fp-pied { margin-top: 26px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }

/* ---------- Écran vide / skeleton ---------- */
.vue { display: none; }
.vue.active { display: block; animation: vueIn .18s ease; }
@keyframes vueIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.erreur-carte { border-color: var(--red); color: var(--red-ink); }

/* ---------- Tabbar mobile & feuille « Plus » ---------- */
.tabbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff; border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--muted); padding: 4px 2px; border-radius: 8px; position: relative; }
.tabbar a.active { color: var(--ink); }
.tabbar .ic { width: 21px; height: 21px; }
.tabbar .nav-nb { position: absolute; top: 0; right: calc(50% - 20px); margin: 0; }
.plus-sheet { position: fixed; inset: 0; z-index: 90; background: rgba(29,29,27,.5); display: none; align-items: flex-end; }
.plus-sheet.open { display: flex; }
.plus-sheet .ps { width: 100%; background: #fff; border-radius: 18px 18px 0 0; padding: 10px 14px calc(16px + env(safe-area-inset-bottom)); max-height: 80vh; overflow-y: auto; scrollbar-width: none; }
.plus-sheet .ps::-webkit-scrollbar { display: none; }
.plus-sheet .barre { width: 40px; height: 4px; border-radius: 2px; background: var(--faint); margin: 0 auto 10px; }
.plus-sheet .ps a, .plus-sheet .ps button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 8px; border-radius: 10px; font-size: 14.5px; font-weight: 500; text-align: left; }
.plus-sheet .ps a:hover, .plus-sheet .ps button:hover { background: var(--hover); }
.plus-sheet .ps .ic { width: 19px; height: 19px; color: var(--muted); }
.plus-sheet .ps .sep { height: 1px; background: var(--line); margin: 6px 0; }

/* ---------- Pied ---------- */
.app-footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--soft); font-size: 12px; display: flex; align-items: center; gap: 6px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-232 { grid-template-columns: 1fr 1fr; }
  .g-232 > :last-child { grid-column: 1 / -1; }
  .robots-grid, .connexions, .offres-grille { grid-template-columns: repeat(2, 1fr); }
  .mail-layout { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  .container { padding: 20px 22px 60px; }
}
@media (max-width: 900px) {
  .mail-layout { grid-template-columns: 1fr; }
  .mail-layout .mail-lecture { display: none; }
  .mail-layout.lecture .mail-liste { display: none; }
  .mail-layout.lecture .mail-lecture { display: block; }
  .g-3 { grid-template-columns: 1fr 1fr; }
  .g-12, .g-21 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sidebar { display: none; }
  .topbar { display: flex; }
  .tabbar { display: flex; }
  .container { padding: 12px 16px 96px; }
  .page-head h1 { font-size: 21px; }
  .page-head { margin-bottom: 14px; }
  .g-2, .g-3, .g-4, .robots-grid, .connexions, .offres-grille, .fichiers-grille { grid-template-columns: 1fr; }
  .g-4 { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 14px 16px; }
  .kpi .k-val { font-size: 22px; }
  .card { padding: 16px; }
  .table-wrap { margin: 0 -16px; padding: 0 16px; }
  .fiche-infos { grid-template-columns: 1fr; }
  .agenda { display: none; }
  .agenda-mobile { display: block; }
  .am-jour { margin-bottom: 14px; }
  .am-jour h3 { font-size: 13px; color: var(--muted); font-weight: 500; margin-bottom: 6px; display: flex; justify-content: space-between; }
  .am-jour h3 b { color: var(--ink); font-weight: 600; }
  .hero-card { padding: 18px; }
  .hero-card h2 { font-size: 18px; }
  .assist-btn { bottom: 84px; right: 14px; width: 46px; height: 46px; }
  .assist { right: 8px; left: 8px; width: auto; bottom: 140px; max-height: calc(100vh - 220px); }
  .toasts { bottom: 90px; }
  .entonnoir .et .lab { width: 120px; font-size: 12.5px; }
  .mini-bar .lab { width: 100px; }
  .taux { flex-wrap: wrap; }
  .taux .tx { min-width: 45%; }
  .modal__scroll { padding: 26px 18px 22px; }
  .modal__pied { padding: 12px 18px; }
  .form-grid { grid-template-columns: 1fr; }
  .sem-nav .titre { min-width: 0; font-size: 14px; }
  .actions-rapides { overflow-x: auto; flex-wrap: nowrap; margin: 0 -16px 14px; padding: 0 16px 4px; scrollbar-width: none; }
  .actions-rapides::-webkit-scrollbar { display: none; }
  .tri-resume { overflow-x: auto; flex-wrap: nowrap; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
  .tri-resume::-webkit-scrollbar { display: none; }
  .chips { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 2px; }
  .chips::-webkit-scrollbar { display: none; }
  .barre-outils { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
  .barre-outils > * { width: 100%; }
  .g-232 { grid-template-columns: 1fr; }
  .g-232 > :last-child { grid-column: auto; }
  .li .li-droite:has(.btn) { flex-basis: 100%; text-align: left; padding-left: 46px; }
  .li .li-droite:has(.btn) .btn { white-space: normal; text-align: left; }
  .recherche { min-width: 0; }
  .facture-papier { padding: 18px; }
  .facture-papier .fp-qui { grid-template-columns: 1fr; }
  .br-mobile { display: inline; }
}
@media (min-width: 761px) { .br-mobile { display: none; } }
@media (max-width: 380px) { .g-4 { grid-template-columns: 1fr; } .kpi .k-val { font-size: 21px; } }

/* impression facture */
@media print {
  body * { visibility: hidden; }
  .facture-papier, .facture-papier * { visibility: visible; }
  .facture-papier { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
}

/* ============================================================
   Couleur par nature (doctrine Fabien, élégance Qonto) · v3
   vert = encaissé / fait · orange = ce qui attend un geste · bleu = clients, agenda, mails
   violet = robots, newsletter · nuit = cumuls, banque, statistiques · rouge = retard
   ============================================================ */
:root { --t-vert: #1F8A4C; --t-vert-s: #E3F3E8; --t-orange: #D97A12; --t-orange-s: #FDF0E0; --t-bleu: #2B5BD7; --t-bleu-s: #E6EEFC; --t-violet: #6E4FC9; --t-violet-s: #EEE9FA; --t-nuit: #24304A; --t-nuit-s: #E4E8F0; --t-rouge: #C62F2F; --t-rouge-s: #FBE7E6; --t-rose: #C9407D; --t-rose-s: #FBE6F0; }

/* Tuile d'icône : l'icône d'une tête de carte, d'un robot, d'une connexion prend un fond doux et sa couleur */
.card-head h2 .ic, .card-head h3 .ic { width: 28px; height: 28px; padding: 6px; border-radius: 8px; background: var(--bg3); color: var(--ink-2); box-sizing: border-box; }
.card-head h2, .card-head h3 { color: var(--ink); font-weight: 600; }
.ia-bloc .ia-t .ic { width: 24px; height: 24px; padding: 5px; border-radius: 7px; background: var(--t-violet-s); color: var(--t-violet); box-sizing: border-box; }
.hero-card .tag { background: var(--t-violet-s); border-color: transparent; color: var(--t-violet); font-weight: 600; }
.hero-card .tag .ic { width: 14px; height: 14px; }

/* Familles par icône (le même mapping partout, sans toucher au JS) */
.card-head h2:has(use[href="#i-mail"]) .ic, .card-head h2:has(use[href="#i-calendar-event"]) .ic, .card-head h2:has(use[href="#i-users"]) .ic, .card-head h2:has(use[href="#i-video"]) .ic { background: var(--t-bleu-s); color: var(--t-bleu); }
.card-head h2:has(use[href="#i-list-check"]) .ic, .card-head h2:has(use[href="#i-target"]) .ic, .card-head h2:has(use[href="#i-hourglass"]) .ic, .card-head h2:has(use[href="#i-pencil"]) .ic { background: var(--t-orange-s); color: var(--t-orange); }
.card-head h2:has(use[href="#i-flag"]) .ic, .card-head h2:has(use[href="#i-wallet"]) .ic, .card-head h2:has(use[href="#i-coins"]) .ic, .card-head h2:has(use[href="#i-file-invoice"]) .ic, .card-head h2:has(use[href="#i-shield-check"]) .ic, .card-head h2:has(use[href="#i-check"]) .ic { background: var(--t-vert-s); color: var(--t-vert); }
.card-head h2:has(use[href="#i-send"]) .ic, .card-head h2:has(use[href="#i-sparkles"]) .ic, .card-head h2:has(use[href="#i-robot"]) .ic, .card-head h2:has(use[href="#i-bolt"]) .ic { background: var(--t-violet-s); color: var(--t-violet); }
.card-head h2:has(use[href="#i-chart-bar"]) .ic, .card-head h2:has(use[href="#i-building-bank"]) .ic, .card-head h2:has(use[href="#i-history"]) .ic, .card-head h2:has(use[href="#i-briefcase"]) .ic, .card-head h2:has(use[href="#i-paperclip"]) .ic, .card-head h2:has(use[href="#i-notes"]) .ic { background: var(--t-nuit-s); color: var(--t-nuit); }
.card-head h2:has(use[href="#i-alert-circle"]) .ic, .card-head h2:has(use[href="#i-bell-ringing"]) .ic { background: var(--t-rouge-s); color: var(--t-rouge); }

/* KPI : fond doux de sa nature + icône en tuile ronde */
.kpi .k-lab .ic { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--bg3); color: var(--ink-2); box-sizing: border-box; }
.kpi .k-lab { font-weight: 500; color: var(--ink-2); }
.kpi:has(.k-lab use[href="#i-wallet"]), .kpi:has(.k-lab use[href="#i-coins"]), .kpi:has(.k-lab use[href="#i-heart"]), .kpi:has(.k-lab use[href="#i-check"]) { background: linear-gradient(180deg, #F2FAF5 0%, #FFFFFF 70%); border-color: #CFE9D8; }
.kpi:has(.k-lab use[href="#i-wallet"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-coins"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-heart"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-check"]) .k-lab .ic { background: var(--t-vert-s); color: var(--t-vert); }
.kpi:has(.k-lab use[href="#i-hourglass"]), .kpi:has(.k-lab use[href="#i-file-text"]), .kpi:has(.k-lab use[href="#i-clock"]) { background: linear-gradient(180deg, #FEF7EE 0%, #FFFFFF 70%); border-color: #F3DDBE; }
.kpi:has(.k-lab use[href="#i-hourglass"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-file-text"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-clock"]) .k-lab .ic { background: var(--t-orange-s); color: var(--t-orange); }
.kpi:has(.k-lab use[href="#i-alert-circle"]) { background: linear-gradient(180deg, #FEF3F2 0%, #FFFFFF 70%); border-color: #F2CBC9; }
.kpi:has(.k-lab use[href="#i-alert-circle"]) .k-lab .ic { background: var(--t-rouge-s); color: var(--t-rouge); }
.kpi:has(.k-lab use[href="#i-users"]), .kpi:has(.k-lab use[href="#i-calendar-event"]), .kpi:has(.k-lab use[href="#i-video"]), .kpi:has(.k-lab use[href="#i-mail-opened"]) { background: linear-gradient(180deg, #F1F5FE 0%, #FFFFFF 70%); border-color: #CBD9F6; }
.kpi:has(.k-lab use[href="#i-users"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-calendar-event"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-video"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-mail-opened"]) .k-lab .ic { background: var(--t-bleu-s); color: var(--t-bleu); }
.kpi:has(.k-lab use[href="#i-send"]), .kpi:has(.k-lab use[href="#i-hand-click"]), .kpi:has(.k-lab use[href="#i-sparkles"]) { background: linear-gradient(180deg, #F5F2FD 0%, #FFFFFF 70%); border-color: #D9D0F3; }
.kpi:has(.k-lab use[href="#i-send"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-hand-click"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-sparkles"]) .k-lab .ic { background: var(--t-violet-s); color: var(--t-violet); }
.kpi:has(.k-lab use[href="#i-receipt-2"]), .kpi:has(.k-lab use[href="#i-credit-card"]), .kpi:has(.k-lab use[href="#i-target"]), .kpi:has(.k-lab use[href="#i-chart-bar"]) { background: linear-gradient(180deg, #F2F4F8 0%, #FFFFFF 70%); border-color: #CCD3E0; }
.kpi:has(.k-lab use[href="#i-receipt-2"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-credit-card"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-target"]) .k-lab .ic, .kpi:has(.k-lab use[href="#i-chart-bar"]) .k-lab .ic { background: var(--t-nuit-s); color: var(--t-nuit); }
.kpi .k-val.bleu { color: var(--t-bleu); } .kpi .k-val.violet { color: var(--t-violet); }
.kpi.temps-evite { background: var(--ink); border-color: var(--ink); }
.kpi.temps-evite .k-lab .ic { background: rgba(255,255,255,.14); color: #FFD166; }

/* Badges avec un peu plus de présence */
.badge { font-weight: 600; }
.badge .ic { width: 13px; height: 13px; }
.badge.info { background: var(--t-bleu-s); color: var(--t-bleu); }
.badge.violet { background: var(--t-violet-s); color: var(--t-violet); }
.badge.warn { background: var(--t-orange-s); color: #9A5407; }

/* Agenda : l'heure en pastille de la couleur du rendez-vous */
.rdv-ligne .h { background: var(--cs, var(--bg3)); color: var(--c, var(--ink)); border-radius: 8px; padding: 6px 0; text-align: center; width: 54px; font-size: 13px; }
.rdv-ligne .bar { display: none; }
.rdv-ligne.perso .h { background: var(--bg3); color: var(--muted); }
.rdv-ligne.encours .h { background: var(--ink); color: #fff; }
.rdv-ligne .qui small .ic { color: var(--c, var(--muted)); }
.bloc-rdv b { color: var(--c, var(--ink)); }

/* Listes : une tuile colorée devant chaque ligne d'action */
.li .li-ic { border-radius: 10px; }
.li-droite .btn.xs.ghost { background: var(--t-bleu-s); color: var(--t-bleu); border-color: transparent; font-weight: 600; }
.li-droite .btn.xs.ghost:hover { background: #D9E4FA; }
.li-droite .btn.xs.ghost .ic { width: 14px; height: 14px; }

/* Tâches : origine en tuile, priorité en pastille de couleur */
.tache .t-ic { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg3); color: var(--ink-2); }
.tache .t-ic .ic { width: 16px; height: 16px; }
.tache .t-ic.mail { background: var(--t-bleu-s); color: var(--t-bleu); }
.tache .t-ic.robot { background: var(--t-violet-s); color: var(--t-violet); }
.tache .t-ic.moi { background: var(--t-nuit-s); color: var(--t-nuit); }
.tache.faite .t-ic { background: var(--t-vert-s); color: var(--t-vert); }
.tache .prio { display: none; }
.tache .t-prio { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--pill); }
.tache .t-prio.haute { background: var(--t-rouge-s); color: var(--t-rouge); } .tache .t-prio.normale { background: var(--t-orange-s); color: #9A5407; } .tache .t-prio.basse { background: var(--bg3); color: var(--muted); }

/* Mails : catégories avec leur couleur, tuile devant l'expéditeur */
.mail-item .mi-cat .badge { font-size: 11px; padding: 2px 8px; }
.tri-resume .tr .ic { width: 14px; height: 14px; }
.mail-lecture .ml-tete h2 { display: flex; align-items: center; gap: 8px; }

/* Offres : icône du type dans une tuile de sa couleur */
.offre-carte .oc-type .tuile { width: 30px; height: 30px; border-radius: 9px; background: var(--cs); color: var(--c); display: inline-flex; align-items: center; justify-content: center; }
.offre-carte .oc-type .tuile .ic { width: 16px; height: 16px; }
.offre-carte .oc-type .dot { display: none; }
.offre-carte .oc-prix { color: var(--c); }

/* Robots et connexions : tuile de la couleur du rôle */
.robot-card .rc-ic { border-color: transparent; }
.robot-card .rc-ic:has(use[href="#i-mail"]), .robot-card .rc-ic:has(use[href="#i-calendar-event"]) { background: var(--t-bleu-s); color: var(--t-bleu); }
.robot-card .rc-ic:has(use[href="#i-file-invoice"]), .robot-card .rc-ic:has(use[href="#i-shield-check"]) { background: var(--t-vert-s); color: var(--t-vert); }
.robot-card .rc-ic:has(use[href="#i-send"]) { background: var(--t-violet-s); color: var(--t-violet); }
.robot-card .rc-ic:has(use[href="#i-target"]) { background: var(--t-orange-s); color: var(--t-orange); }
.robot-card .rc-ic:has(use[href="#i-presentation"]) { background: var(--t-nuit-s); color: var(--t-nuit); }
.robot-card .rc-log div b { color: var(--t-bleu); }
.cx-logo { border-color: transparent; }
.cx-logo:has(use[href="#i-brand-google"]) { background: #FFF1E6; color: #E8710A; }
.cx-logo:has(use[href="#i-mail"]) { background: var(--t-rouge-s); color: #D93025; }
.cx-logo:has(use[href="#i-video"]) { background: var(--t-bleu-s); color: #2D8CFF; }
.cx-logo:has(use[href="#i-send"]) { background: var(--t-vert-s); color: #0B996E; }
.cx-logo:has(use[href="#i-building-bank"]) { background: var(--t-nuit-s); color: var(--t-nuit); }
.cx-logo:has(use[href="#i-credit-card"]) { background: var(--t-violet-s); color: #635BFF; }
.cx-logo:has(use[href="#i-brand-notion"]) { background: var(--bg3); color: var(--ink); }
.cx-logo:has(use[href="#i-brand-whatsapp"]) { background: #E7F8EE; color: #25D366; }
.cx-logo:has(use[href="#i-world"]) { background: var(--t-bleu-s); color: var(--t-bleu); }

/* Navigation : l'entrée active prend la couleur de sa famille */
.nav a.active:has(use[href="#i-list-check"]) .ic { color: var(--t-orange); }
.nav a.active:has(use[href="#i-mail"]) .ic, .nav a.active:has(use[href="#i-agenda"]) .ic, .nav a.active:has(use[href="#i-calendar-event"]) .ic, .nav a.active:has(use[href="#i-users"]) .ic { color: var(--t-bleu); }
.nav a.active:has(use[href="#i-file-invoice"]) .ic { color: var(--t-vert); }
.nav a.active:has(use[href="#i-send"]) .ic, .nav a.active:has(use[href="#i-robot"]) .ic { color: var(--t-violet); }
.nav a.active:has(use[href="#i-chart-bar"]) .ic, .nav a.active:has(use[href="#i-briefcase"]) .ic, .nav a.active:has(use[href="#i-plug"]) .ic { color: var(--t-nuit); }
.nav-nb { background: var(--t-rouge); }

/* Fiche client : tuiles dans l'en-tête, timeline colorée */
.fiche-tete .ft-meta .ic { color: var(--t-bleu); }
.tl-item .txt .ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.tl-item.vert .txt .ic { color: var(--t-vert); } .tl-item.bleu .txt .ic { color: var(--t-bleu); } .tl-item.violet .txt .ic { color: var(--t-violet); } .tl-item.orange .txt .ic { color: var(--t-orange); }
.entonnoir .et .piste i { background: var(--t-bleu); }
.entonnoir .et:nth-child(2) .piste i { background: #4F7BE0; } .entonnoir .et:nth-child(3) .piste i { background: var(--t-orange); } .entonnoir .et:nth-child(4) .piste i { background: var(--t-vert); }
.mini-bar .piste i { background: var(--t-nuit); }
.p-piste i.vert { background: var(--t-vert); }
.taux .tx b { color: var(--t-violet); }
.card-head h2:has(use[href="#i-user-plus"]) .ic, .card-head h2:has(use[href="#i-clock"]) .ic { background: var(--t-bleu-s); color: var(--t-bleu); }
.card-head h2:has(use[href="#i-trending-up"]) .ic { background: var(--t-vert-s); color: var(--t-vert); }

/* v4 (retour Julien 02/09) : traits de séparation un peu plus présents */
:root { --border: #DCDCD7; --line: #E7E7E3; }
.card, .kpi, .sidebar, .agenda, .rdv-ligne, .offre-carte, .cx-carte, .robot-card, .qk-card, .ia-bloc, .nl-brouillon, .facture-papier { border-width: 1.5px; }
.sidebar { border-right-width: 1.5px; }
.table th { border-bottom-width: 1.5px; }
.table td, .li, .tache, .fi, .notif-item, .mail-lecture .ml-tete, .qk-liste li, .histo-ligne, .robot-card .rc-log { border-bottom-width: 1.5px; }
.tabbar { border-top-width: 1.5px; }
.chip, .pager-b, .btn.ghost, .recherche, .ajout-tache input, .champ input, .champ textarea, .sel-jbc, .notes-area, .brouillon textarea, .fichier, .tri-resume .tr { border-width: 1.5px; }
.timeline::before { width: 2.5px; }
.agenda .ag-head, .agenda .ag-col { border-left-width: 1.5px; }
.agenda .ag-head { border-bottom-width: 1.5px; }
.demo-banner { border-bottom: 1.5px solid #3A3A37; }