/* Suivi des chatbots — application de l'équipe */
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
}

:root {
  --side: #123840;
  --side-2: #0e2e35;
  --side-ink: #c9dadd;
  --bg: #eef2f1;
  --panel: #ffffff;
  --line: #dbe4e3;
  --line-2: #e9efee;
  --ink: #132a30;
  --ink-2: #46606a;
  --muted: #6f8389;
  --petrol: #1d4f5b;
  --petrol-2: #2b6876;
  --petrol-soft: #e2edee;
  --petrol-mid: #6f9ea8;
  --rose: #f2b8ad;
  --rose-ink: #a8483b;
  --bot-lea: #c0583f;
  --bot-courtier: #3f5fa8;
  --good: #2f8a5f; --good-soft: #e1f1e8; --good-ink: #1d6845;
  --neutral: #8a999e; --neutral-soft: #eef1f2; --neutral-ink: #4c5c61;
  --warn: #c9831d; --warn-soft: #fbefd9; --warn-ink: #8a5508;
  --bad: #bf3f2d; --bad-soft: #fbe4e0; --bad-ink: #9a2c1c;
  --r-panel: 14px;
  --r-ctl: 8px;
  --shadow: 0 1px 0 rgba(19, 42, 48, .04), 0 1px 3px rgba(19, 42, 48, .06);
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --side-w: 236px;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.5 var(--font); font-feature-settings: "ss01"; }
a { color: var(--petrol); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--petrol-2); outline-offset: 2px; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { display: block; }

/* ---------- Boutons, champs ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-weight: 550; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: #c3d1d0; background: #f8fbfa; }
.btn-primary { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.btn-primary:hover { background: #17424c; border-color: #17424c; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--petrol-soft); border-color: transparent; }
.btn-danger { color: var(--bad-ink); }
.btn-danger:hover { border-color: var(--bad); background: var(--bad-soft); }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .55; cursor: progress; }
.btn svg { width: 16px; height: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-weight: 600; font-size: 13px; }
.input, .field input, .select, textarea.input {
  height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); min-width: 0;
}
textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.input:hover, .select:hover { border-color: #c3d1d0; }
.select { appearance: none; padding-right: 32px; cursor: pointer;
  background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2346606a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center; }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.search .input { padding-left: 34px; width: 100%; }

/* ---------- Connexion ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr); }
.login-aside { background: var(--side); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-mark { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.login-mark .logo { width: 36px; height: 36px; color: #fff; }
.login-quote { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; font-weight: 560; font-stretch: 88%; max-width: 16em; margin: 0; letter-spacing: -.01em; position: relative; z-index: 1; }
.login-ribbon { position: absolute; left: 0; right: 0; top: 42%; width: 100%; height: 180px; opacity: .9; }
.login-ribbon path { fill: #1f5966; }
.login-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login-form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.login-form h1 { font-size: 28px; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.login-form p { margin: 0; }
.form-error { background: var(--bad-soft); color: var(--bad-ink); padding: 10px 12px; border-radius: var(--r-ctl); }
.login-form .btn { height: 44px; font-size: 15px; margin-top: 4px; }
.login-form .field input { height: 44px; }
@media (max-width: 820px) {
  .login { grid-template-columns: 1fr; }
  .login-aside { padding: 28px 24px 120px; }
  .login-quote { font-size: 24px; margin-top: 24px; }
  .login-ribbon { bottom: 0; height: 100px; }
}

/* ---------- Cadre de l'application ---------- */
.app { min-height: 100vh; }
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); background: var(--side); color: var(--side-ink); display: flex; flex-direction: column; padding: 18px 12px; z-index: 30; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; color: #fff; font-weight: 600; line-height: 1.2; }
.side-brand .logo { width: 32px; height: 32px; color: #fff; flex: none; }
.side-brand small { display: block; font-weight: 400; color: var(--side-ink); font-size: 12px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 9px; color: var(--side-ink); text-decoration: none; font-weight: 500; position: relative; }
.nav a svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.nav a.is-on { background: rgba(255, 255, 255, .1); color: #fff; }
.nav a.is-on::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--rose); }
.nav .badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--rose); color: var(--side); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nav .badge.live { background: #3fbf86; color: #062b1b; }
.side-foot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.me { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: #fff; text-decoration: none; }
.me:hover { background: rgba(255, 255, 255, .06); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--rose); color: var(--side); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.me small { display: block; color: var(--side-ink); font-size: 12px; }

.main { margin-left: var(--side-w); padding: 26px 32px 64px; max-width: calc(1360px + var(--side-w)); }
.topbar { display: none; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.015em; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters .custom { display: flex; gap: 6px; align-items: center; }
.filters .custom .input { height: 36px; width: 150px; }
.filters .select { height: 36px; }

.sample-bar { display: flex; gap: 12px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #fff7e8; border: 1px solid #f0d9a8; color: #6b4a0e; padding: 10px 14px; border-radius: 10px; margin-bottom: 20px; font-size: 13.5px; }
.sample-bar a { color: inherit; font-weight: 600; }
.sample-bar .btn { border-color: #e6c88a; background: #fffdf8; }

/* ---------- Panneaux ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.panel-head .link { font-size: 13px; font-weight: 550; text-decoration: none; }
.panel-head .link:hover { text-decoration: underline; }
.panel-body { padding: 14px 20px 18px; }
.grid { display: grid; gap: 16px; margin-top: 16px; }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-111 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-11 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g-21, .g-111 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .g-11 { grid-template-columns: minmax(0, 1fr); } }
.grid > * { min-width: 0; }
.g-21 { align-items: start; }

/* ---------- Parcours des visiteurs (ruban) ---------- */
.journey { padding: 6px 0 4px; }
.journey-bot { padding: 18px 20px 20px; }
.journey-bot + .journey-bot { border-top: 1px solid var(--line-2); }
.journey-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.journey-title h2 { margin: 0; font-size: 15px; font-weight: 600; }
.journey-title .meta { color: var(--muted); font-size: 13px; }
.journey-title .live-chip { margin-left: auto; }
.stages { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.stage { position: relative; z-index: 1; padding: 0 12px 0 0; min-width: 0; }
.stage-label { color: var(--ink-2); font-size: 13px; font-weight: 550; }
.stage-value { font-size: 40px; line-height: 1.05; font-weight: 620; font-stretch: 82%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 2px 0 0; }
.stage.is-goal .stage-value { color: var(--petrol); }
.stage-rate { font-size: 13px; color: var(--ink-2); margin-top: 2px; min-height: 20px; }
.stage-rate b { font-weight: 650; color: var(--ink); }
.stage-delta { display: none; font-size: 12.5px; margin-top: 2px; }
.ribbon { width: 100%; height: 76px; margin: 12px 0 8px; }
.ribbon .r-base { fill: var(--petrol-soft); }
.ribbon .r-goal { fill: var(--petrol); }
.ribbon .r-tick { stroke: var(--panel); stroke-width: 2; }
.deltas { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); font-size: 12.5px; }
.journey-empty { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) {
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
  .stage-value { font-size: 30px; }
  .ribbon, .deltas { display: none; }
  .stage-delta { display: block; }
  .journey-title .live-chip { margin-left: 0; }
}
.chart-foot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.chart-foot strong { display: block; font-size: 22px; font-weight: 620; font-stretch: 85%; font-variant-numeric: tabular-nums; line-height: 1.15; }
.chart-foot span { font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 760px) { .chart-foot { grid-template-columns: 1fr 1fr; } }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta svg { width: 12px; height: 12px; }
.delta.up { color: var(--good-ink); }
.delta.down { color: var(--bad-ink); }
.delta.flat { color: var(--muted); font-weight: 500; }
.delta + .vs { color: var(--muted); margin-left: 4px; }

.live-chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 13px; background: var(--good-soft); color: var(--good-ink); font-size: 12.5px; font-weight: 600; }
.live-chip.off { background: var(--neutral-soft); color: var(--neutral-ink); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #2fa36d; box-shadow: 0 0 0 0 rgba(47, 163, 109, .5); animation: pulse 2s infinite; }
.live-chip.off .pulse { background: var(--neutral); animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(47, 163, 109, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 163, 109, 0); } }

.bot-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.bot-dot.lea { background: var(--bot-lea); }
.bot-dot.courtier { background: var(--bot-courtier); }
.bot-dot.other { background: var(--neutral); }

/* ---------- Graphique d'activité ---------- */
.chart { position: relative; }
.chart svg { width: 100%; height: 240px; overflow: visible; }
.chart .grid-l { stroke: var(--line-2); }
.chart .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .bar { fill: var(--petrol-mid); }
.chart .bar-goal { fill: var(--side); }
.chart .hit { fill: transparent; cursor: default; }
.chart .col:hover .bar { fill: #5a8f9a; }
.chart .col.is-hover .hl { fill: rgba(29, 79, 91, .06); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tip { position: fixed; z-index: 80; pointer-events: none; background: var(--ink); color: #fff; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); max-width: 260px; opacity: 0; transition: opacity .1s; }
.tip.on { opacity: 1; }
.tip b { font-weight: 650; }
.tip .t-row { display: flex; align-items: center; gap: 6px; }
.tip i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* ---------- Listes « à traiter » ---------- */
.todo-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.todo-card { display: block; padding: 12px 14px; border-radius: 10px; background: var(--bg); text-decoration: none; color: inherit; }
.todo-card:hover { background: var(--petrol-soft); }
.todo-card strong { display: block; font-size: 26px; line-height: 1.1; font-weight: 620; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.todo-card > span { font-size: 12.5px; color: var(--ink-2); }
.todo-card.is-hot { background: var(--bad-soft); }
.todo-card.is-hot strong { color: var(--bad-ink); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li { border-top: 1px solid var(--line-2); }
.row-link { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: inherit; text-decoration: none; min-width: 0; }
.row-link:hover .row-title { color: var(--petrol); text-decoration: underline; }
.row-title { display: block; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-sub { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-main { min-width: 0; flex: 1; }
.row-end { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* ---------- Humeur, thèmes, consommation ---------- */
.moodbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--line-2); }
.moodbar span { display: block; min-width: 3px; }
.m-satisfait { background: var(--good); } .m-neutre { background: var(--neutral); } .m-mecontent { background: var(--warn); } .m-enerve { background: var(--bad); }
.mood-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 24px; }
.mood-list a { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.mood-list a:hover span:nth-child(2) { text-decoration: underline; }
.mood-list i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.mood-list b { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.mood-list em { font-style: normal; color: var(--muted); font-size: 12.5px; width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

.hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.hbars a { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px 10px; color: inherit; text-decoration: none; }
.hbars .hb-name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars a:hover .hb-name { text-decoration: underline; color: var(--petrol); }
.hbars .hb-n { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; }
.hbars .hb-track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.hbars .hb-fill { display: block; height: 100%; border-radius: 3px; background: var(--petrol-2); }

.meter { height: 10px; border-radius: 5px; background: var(--line-2); overflow: hidden; margin: 12px 0 8px; }
.meter span { display: block; height: 100%; border-radius: 5px; background: var(--petrol); }
.meter.warn span { background: var(--warn); }
.meter.over span { background: var(--bad); }
.big { font-size: 34px; line-height: 1.1; font-weight: 620; font-stretch: 84%; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }
.big small { font-size: 15px; font-weight: 500; color: var(--muted); font-stretch: 100%; letter-spacing: 0; margin-left: 4px; }

/* ---------- Pastilles ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill svg { width: 12px; height: 12px; }
.p-good { background: var(--good-soft); color: var(--good-ink); }
.p-neutral { background: var(--neutral-soft); color: var(--neutral-ink); }
.p-warn { background: var(--warn-soft); color: var(--warn-ink); }
.p-bad { background: var(--bad-soft); color: var(--bad-ink); }
.p-alert { background: var(--bad); color: #fff; }
.p-petrol { background: var(--petrol-soft); color: var(--petrol); }
.p-outline { border: 1px solid var(--line); color: var(--ink-2); background: var(--panel); }
.pills { display: flex; gap: 5px; flex-wrap: wrap; }

/* ---------- Conversations : liste + lecture ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .search { flex: 1 1 260px; max-width: 360px; }
.split { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.list { overflow: hidden; }
.list-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); color: var(--muted); font-size: 13px; }
.conv-list { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 230px); overflow: auto; }
.conv-item { display: block; padding: 12px 16px; border-bottom: 1px solid var(--line-2); text-decoration: none; color: inherit; position: relative; }
.conv-item:hover { background: #f7faf9; }
.conv-item.is-on { background: var(--petrol-soft); }
.conv-item.is-on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--petrol); }
.conv-item.is-alert::after { content: ""; position: absolute; right: 12px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
.ci-top { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.ci-q { font-weight: 550; margin: 4px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.more { padding: 12px; text-align: center; }

.reader { min-height: 420px; }
.reader-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--muted); padding: 80px 24px; gap: 8px; }
.reader-empty svg { width: 40px; height: 40px; color: var(--line); }
.reader-head { padding: 18px 22px; border-bottom: 1px solid var(--line-2); display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.reader-head h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.reader-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.reader-actions { display: flex; gap: 6px; }
.insight { margin: 16px 22px 0; padding: 14px 16px; border-radius: 10px; background: var(--bg); }
.insight.is-alert { background: var(--bad-soft); }
.insight-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 600; margin-bottom: 6px; }
.insight p { margin: 4px 0 0; }
.insight .alert-line { color: var(--bad-ink); font-weight: 600; }
.lead-box { margin: 12px 22px 0; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; }
.lead-box h3 { margin: 0; font-size: 14px; }
.lead-box .lead-meta { color: var(--ink-2); font-size: 13px; display: flex; gap: 4px 14px; flex-wrap: wrap; }
.transcript { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.msg { display: flex; flex-direction: column; max-width: 78%; }
.msg.user { align-self: flex-end; align-items: flex-end; }
.bubble { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user .bubble { background: var(--petrol); color: #fff; border-radius: 16px 16px 4px 16px; }
.msg-time { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.msg-event { align-self: center; font-size: 12.5px; color: var(--good-ink); background: var(--good-soft); padding: 4px 12px; border-radius: 12px; font-weight: 600; }
.back-link { display: none; }

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .split.has-detail .list { display: none; }
  .split:not(.has-detail) .reader { display: none; }
  .back-link { display: inline-flex; margin: 12px 0 0 16px; }
  .conv-list { max-height: none; }
  .msg { max-width: 92%; }
}

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; max-width: 100%; position: relative; }
@media (max-width: 760px) {
  .tbl.cards thead { display: none; }
  .tbl.cards, .tbl.cards tbody, .tbl.cards tr, .tbl.cards td { display: block; width: 100%; }
  .tbl.cards tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .tbl.cards td { border: 0; padding: 3px 0; max-width: none !important; }
  .tbl.cards td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--muted); }
  .tbl.cards .note { min-width: 0; }
  .tbl.cards tr:hover td { background: none; }
}
.panel { max-width: 100%; min-width: 0; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: 12.5px; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #fafcfb; }
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: #fafcfb; }
.tbl .select { height: 32px; font-size: 13px; }
.tbl .note { width: 100%; min-width: 200px; height: 32px; font-size: 13px; }
.tbl .who { font-weight: 600; }
.tbl a.tel { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.tbl a.tel:hover { color: var(--petrol); text-decoration: underline; }
.st-nouveau { border-color: #e9b3a9; background-color: #fff6f4; }
.st-inscrit { border-color: #a8d5bd; background-color: #f2faf5; }
.saved { color: var(--good-ink); font-size: 12px; font-weight: 600; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 0; padding: 0 12px; }
.tab { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; color: var(--ink-2); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--petrol); border-bottom-color: var(--petrol); }
.tab .count { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--line-2); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.tab.is-on .count { background: var(--petrol); color: #fff; }
.tab.is-hot .count { background: var(--rose); color: var(--side); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.kpi-label { font-size: 13px; color: var(--ink-2); font-weight: 550; }
.kpi-value { font-size: 30px; line-height: 1.1; font-weight: 620; font-stretch: 84%; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- En direct ---------- */
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.live-card { display: flex; flex-direction: column; overflow: hidden; }
.live-card .lc-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.live-card .lc-head .row-end { display: flex; gap: 8px; align-items: center; }
.live-card .transcript { padding: 14px 16px; gap: 8px; max-height: 340px; overflow: auto; font-size: 13.5px; }
.live-card .lc-foot { margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--muted); }
.typing { display: inline-flex; gap: 3px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

.empty { text-align: center; padding: 56px 24px; color: var(--ink-2); }
.empty svg { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--petrol-mid); }
.empty h3 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.empty p { margin: 0 auto; max-width: 42em; }

/* ---------- Analyse ---------- */
.notice { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 16px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 16px; font-size: 13.5px; }
.notice.err { border-color: #efc2ba; background: var(--bad-soft); color: var(--bad-ink); }
.topic-row { border-top: 1px solid var(--line-2); }
.topic-row:first-child { border-top: 0; }
.topic-btn { width: 100%; display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(80px, 2fr) 56px 90px 90px 20px; gap: 14px; align-items: center; padding: 12px 20px; background: none; border: 0; cursor: pointer; text-align: left; }
.topic-btn:hover { background: #fafcfb; }
.topic-btn .tb-name { font-weight: 600; }
.topic-btn .hb-track { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; }
.topic-btn .hb-fill { display: block; height: 100%; background: var(--petrol-2); border-radius: 4px; }
.topic-btn .tb-n, .topic-btn .tb-c { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink-2); }
.topic-btn .tb-n b { color: var(--ink); }
.topic-btn .chev { width: 16px; height: 16px; color: var(--muted); transition: transform .15s; }
.topic-row.is-open .chev { transform: rotate(180deg); }
.topic-qs { display: none; padding: 0 20px 14px; }
.topic-row.is-open .topic-qs { display: block; }
.topic-qs ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.topic-qs li { margin: 3px 0; }
.topic-qs a { font-size: 13px; font-weight: 550; }
.topic-cols { display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(80px, 2fr) 56px 90px 90px 20px; gap: 14px; padding: 12px 20px 6px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) {
  .topic-btn, .topic-cols { grid-template-columns: minmax(0, 1fr) 46px 20px; }
  .topic-btn .hb-track, .topic-btn .tb-c, .topic-cols span:nth-child(2), .topic-cols span:nth-child(4), .topic-cols span:nth-child(5) { display: none; }
}
.synthesis h4 { font-size: 14px; margin: 18px 0 6px; }
.synthesis h4:first-child { margin-top: 0; }
.synthesis ul { margin: 0; padding-left: 18px; }
.synthesis li { margin: 4px 0; }
.synthesis p { margin: 6px 0; }

/* ---------- Chatbots ---------- */
.bot-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bot-card h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.bot-card .bc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bot-card .bc-stats div { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.bot-card .bc-stats strong { display: block; font-size: 22px; font-weight: 620; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.bot-card .bc-stats span { font-size: 12px; color: var(--ink-2); }
.spark { width: 100%; height: 56px; }
.spark path.l { fill: none; stroke: var(--petrol); stroke-width: 2; stroke-linejoin: round; }
.spark path.a { fill: var(--petrol-soft); }
@media (max-width: 760px) { .bot-card .bc-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Compte ---------- */
.account { max-width: 560px; }
.account form { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Messages éphémères, chargement ---------- */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 16px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 550; opacity: 0; transition: .2s; z-index: 90; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--bad-ink); }
.skeleton { border-radius: 8px; background: linear-gradient(90deg, var(--line-2) 0%, #f5f8f7 50%, var(--line-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.loading-page { display: flex; flex-direction: column; gap: 16px; }
.err-box { padding: 24px; text-align: center; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .side { transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  .app.nav-open .side { transform: none; }
  .main { margin-left: 0; padding: 0 16px 48px; }
  .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; background: var(--side); color: #fff; margin: 0 -16px 18px; padding: 10px 16px; }
  .topbar .logo { width: 28px; height: 28px; color: #fff; }
  .topbar button { background: none; border: 0; color: #fff; padding: 6px; margin-left: -6px; cursor: pointer; }
  .topbar button svg { width: 22px; height: 22px; }
  .scrim { position: fixed; inset: 0; background: rgba(10, 30, 35, .4); z-index: 25; display: none; }
  .app.nav-open .scrim { display: block; }
  .page-head h1 { font-size: 23px; }
  .filters { width: 100%; }
  .filters .select { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Version 2.2 : navigation et design modernisé
   ===================================================================== */
:root {
  --r-panel: 18px;
  --shadow: 0 1px 2px rgba(19, 42, 48, .04), 0 12px 32px -20px rgba(19, 42, 48, .28);
  --shadow-hover: 0 2px 4px rgba(19, 42, 48, .05), 0 18px 40px -18px rgba(19, 42, 48, .35);
  --line: #dfe7e6;
  --t-rose: #c25b4b; --t-rose-soft: #fbe8e4;
  --t-blue: #3f5fa8; --t-blue-soft: #e6ecf8;
  --t-amber: #b7741a; --t-amber-soft: #fbf0dc;
  --t-green: #2f8a5f; --t-green-soft: #e1f1e8;
  --t-grey: #6f8389; --t-grey-soft: #eef1f2;
  --t-petrol: #1d4f5b; --t-petrol-soft: #e2edee;
}
body { background: radial-gradient(1200px 500px at 70% -200px, #e3eeec 0%, rgba(227, 238, 236, 0) 70%), var(--bg); background-attachment: fixed; }
.panel { border-color: var(--line); }

/* Entrée de page */
#view.enter > * { animation: rise .32s cubic-bezier(.2, .7, .2, 1) both; }
#view.enter > *:nth-child(2) { animation-delay: .04s; }
#view.enter > *:nth-child(3) { animation-delay: .08s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* En-tête de page collant, flou */
.page-head { position: sticky; top: 0; z-index: 15; margin: -26px -32px 20px; padding: 22px 32px 16px; background: rgba(238, 242, 241, .82); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; }
.page-head-sm { margin-top: 0; padding-top: 14px; }
.page-head-sm h2 { margin: 0; font-size: 18px; font-weight: 600; }
@media (max-width: 900px) { .page-head { top: 48px; margin: 0 -16px 16px; padding: 12px 16px; } }

/* Bouton retour */
.back { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px -6px; padding: 4px 10px 4px 6px; border-radius: 999px; color: var(--petrol); font-size: 13px; font-weight: 600; text-decoration: none; background: rgba(29, 79, 91, .07); }
.back svg { width: 16px; height: 16px; }
.back:hover { background: rgba(29, 79, 91, .13); }

/* Barre latérale */
.side { background: linear-gradient(180deg, #143e47 0%, #0f3037 100%); }
.side-search { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; height: 38px; padding: 0 10px 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: var(--side-ink); cursor: pointer; text-align: left; }
.side-search:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.side-search svg { width: 16px; height: 16px; }
.side-search span { flex: 1; }
kbd { font: 600 11px/1 var(--font); padding: 3px 6px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .18); color: inherit; opacity: .8; white-space: nowrap; }
.topbar-search { margin-left: auto; }

/* Héros d'accueil */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: end; padding: 30px 32px; border-radius: 24px; color: #fff;
  background: radial-gradient(600px 260px at 100% 0%, rgba(242, 184, 173, .22) 0%, rgba(242, 184, 173, 0) 70%), linear-gradient(135deg, #17495a 0%, #123840 55%, #0f2f36 100%); box-shadow: 0 24px 48px -28px rgba(18, 56, 64, .7); }
.hero-ribbon { position: absolute; left: -20px; right: -20px; bottom: -36px; width: calc(100% + 40px); height: 150px; opacity: .55; pointer-events: none; }
.hero-ribbon path { fill: #1d5664; }
.hero-text, .hero-stats { position: relative; }
.hero-date { margin: 0 0 6px; color: var(--rose); font-weight: 600; font-size: 13.5px; }
.hero h1 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; font-weight: 620; font-stretch: 90%; letter-spacing: -.02em; text-wrap: balance; }
.hero-sub { margin: 10px 0 0; color: #cfe0e2; max-width: 34em; font-size: 15px; }
.hero-sub b { color: #fff; font-weight: 650; }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hs { display: block; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none; transition: background .15s, transform .15s; }
a.hs:hover { background: rgba(255, 255, 255, .12); transform: translateY(-1px); }
.hs strong { display: flex; align-items: center; gap: 8px; font-size: 30px; line-height: 1.1; font-weight: 620; font-stretch: 84%; font-variant-numeric: tabular-nums; }
.hs > span { font-size: 12.5px; color: #c4d7da; }
.hs.is-hot { background: rgba(242, 184, 173, .16); border-color: rgba(242, 184, 173, .35); }
.hs.is-hot strong { color: var(--rose); }
.hs .pulse { background: #4fd08f; }
@media (max-width: 980px) { .hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; border-radius: 20px; } }
@media (max-width: 900px) { .hero { margin-top: 4px; } .page-head-sm { top: 48px; } }

/* Cartes interactives : léger soulèvement */
.todo-card, .kpi, .bot-card, .lcard, .hs { transition: transform .15s ease, box-shadow .15s ease, background .15s; }
a.todo-card:hover { transform: translateY(-1px); }
.bot-card:hover { box-shadow: var(--shadow-hover); }

/* KPI avec icône */
.kpi { display: flex; gap: 14px; align-items: flex-start; border-radius: 16px; padding: 16px; }
.kpi-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kpi-ic svg { width: 20px; height: 20px; }
.t-petrol { background: var(--t-petrol-soft); color: var(--t-petrol); }
.t-rose { background: var(--t-rose-soft); color: var(--t-rose); }
.t-blue { background: var(--t-blue-soft); color: var(--t-blue); }
.t-amber { background: var(--t-amber-soft); color: var(--t-amber); }
.t-green { background: var(--t-green-soft); color: var(--t-green); }
.t-grey { background: var(--t-grey-soft); color: var(--t-grey); }

/* Parcours : séparateurs plus doux */
.journey-bot { padding: 22px 24px; }
.stage-value { font-size: 44px; }
.ribbon .r-base { fill: #dbe9eb; }

/* Humeur : anneau */
.mood-wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.donut { position: relative; width: 132px; height: 132px; flex: none; }
.donut svg { width: 100%; height: 100%; }
.donut circle[data-tip] { cursor: default; transition: stroke-width .15s; }
.donut circle[data-tip]:hover { stroke-width: 17; }
.donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.donut-c strong { font-size: 24px; line-height: 1; font-weight: 650; font-stretch: 85%; }
.donut-c span { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.m-satisfait-s { stroke: var(--good); } .m-neutre-s { stroke: var(--neutral); } .m-mecontent-s { stroke: var(--warn); } .m-enerve-s { stroke: var(--bad); }
.mood-wrap .mood-list { flex: 1; min-width: 180px; margin: 0; grid-template-columns: 1fr; }

/* Avatars */
.av { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.av-lead { background: linear-gradient(135deg, #f6d2ca, #f2b8ad); color: #7c3427; }
.av-bot { color: #fff; font-size: 13px; }
.av-bot.lea { background: linear-gradient(135deg, #d4705a, #b54f3a); }
.av-bot.courtier { background: linear-gradient(135deg, #5a78c0, #3a5598); }
.av-bot.other { background: var(--neutral); }

/* Liste des conversations */
.conv-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.ci-body { min-width: 0; flex: 1; }
.ci-top { justify-content: space-between; }
.ci-top span:first-child { font-weight: 600; color: var(--ink-2); }
.conv-item.is-alert::after { top: auto; bottom: 16px; }
.conv-item:hover { background: #f5f9f8; }

/* Messages avec avatar */
.msg.bot { flex-direction: row; align-items: flex-end; gap: 8px; }
.msg.bot .av { width: 28px; height: 28px; font-size: 12px; margin-bottom: 18px; }
.msg-col { display: flex; flex-direction: column; min-width: 0; }
.bubble { box-shadow: 0 1px 1px rgba(19, 42, 48, .04); }
.msg.user .bubble { background: linear-gradient(135deg, #22606e, #1a4853); }
.reader-close { width: 30px; padding: 0; justify-content: center; }
.reader-close svg { width: 18px; height: 18px; }

/* Étiquettes de filtres */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -4px 0 14px; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid #c9dcdf; background: var(--petrol-soft); color: var(--petrol); font-weight: 600; cursor: pointer; }
.chip svg { width: 14px; height: 14px; opacity: .7; }
.chip:hover { background: #d3e5e7; }
.chip:hover svg { opacity: 1; }
.chip-clear { border: 0; background: none; color: var(--ink-2); text-decoration: underline; cursor: pointer; font-size: 13px; }

/* Contacts : barre, bascule, tableau en colonnes */
.contacts-bar { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.contacts-bar .search { flex: 0 1 300px; }
.contacts-bar .hint { font-size: 13px; }
.seg { display: inline-flex; padding: 3px; border-radius: 11px; background: #e3eaea; }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); font-weight: 600; cursor: pointer; }
.seg button svg { width: 16px; height: 16px; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(19, 42, 48, .12); }
.board-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px 8px; }
.board { display: grid; grid-template-columns: repeat(5, minmax(196px, 1fr)); gap: 12px; min-width: 1020px; align-items: start; }
.col { background: rgba(255, 255, 255, .55); border: 1px solid var(--line); border-radius: 16px; padding: 10px; transition: background .15s, border-color .15s; }
.col.is-over { background: var(--petrol-soft); border-color: var(--petrol-mid); border-style: dashed; }
.col-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.col-head i { width: 10px; height: 10px; border-radius: 50%; }
.col.t-rose .col-head i { background: var(--t-rose); } .col.t-blue .col-head i { background: var(--t-blue); } .col.t-amber .col-head i { background: var(--t-amber); } .col.t-green .col-head i { background: var(--t-green); } .col.t-grey .col-head i { background: var(--t-grey); }
.col { background-image: none; }
.col-head h2 { margin: 0; font-size: 14px; font-weight: 650; }
.col-head .count { margin-left: auto; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.col-body { display: flex; flex-direction: column; gap: 8px; min-height: 80px; max-height: 64vh; overflow-y: auto; padding: 2px; }
.col-empty { margin: 0; padding: 18px 8px; text-align: center; color: var(--muted); font-size: 12.5px; border: 1px dashed var(--line); border-radius: 12px; }
.lcard { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 12px; box-shadow: 0 1px 2px rgba(19, 42, 48, .05); cursor: grab; }
.lcard:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.lcard:focus-visible { outline: 2px solid var(--petrol-2); }
.lcard.dragging { opacity: .45; transform: rotate(1.5deg); }
.lcard.just-moved { animation: flash .7s ease; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px rgba(47, 138, 95, .5); } 100% { box-shadow: 0 1px 2px rgba(19, 42, 48, .05); } }
.lc-top { display: flex; gap: 10px; align-items: center; }
.lc-who { display: flex; flex-direction: column; min-width: 0; }
.lc-who b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-who .tel { font-size: 12.5px; color: var(--ink-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.lc-who .tel:hover { text-decoration: underline; }
.lc-q { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-note { margin: 6px 0 0; font-size: 12.5px; padding: 6px 8px; border-radius: 8px; background: var(--warn-soft); color: var(--warn-ink); }
.lc-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.lc-move { margin-left: auto; height: 26px; max-width: 108px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--ink-2); cursor: pointer; }
.who-cell { display: flex; gap: 10px; align-items: center; }

/* Recherche rapide */
.palette-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(10, 30, 35, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.palette { width: 100%; max-width: 620px; background: var(--panel); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); overflow: hidden; animation: rise .2s cubic-bezier(.2, .7, .2, 1); }
.pal-input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.pal-input svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.pal-input input { flex: 1; border: 0; outline: 0; font-size: 17px; background: none; min-width: 0; }
.pal-input kbd { border-color: var(--line); color: var(--muted); }
.pal-results { max-height: 56vh; overflow-y: auto; padding: 8px; }
.pal-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 650; color: var(--muted); }
.pal-item { display: flex; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; }
.pal-item > svg { width: 20px; height: 20px; color: var(--petrol); margin: 0 7px; flex: none; }
.pal-item .av { width: 32px; height: 32px; }
.pal-item.is-sel, .pal-item:hover { background: var(--petrol-soft); }
.pal-main { display: flex; flex-direction: column; min-width: 0; }
.pal-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-main small { color: var(--muted); font-size: 12.5px; }
.pal-empty { padding: 24px; text-align: center; color: var(--muted); margin: 0; }

/* Divers */
.todo-card { border-radius: 14px; }
.live-card { border-radius: 18px; }
.btn { border-radius: 10px; }
.btn-primary { background: linear-gradient(180deg, #23606e, #1b4b56); border-color: #1b4b56; box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 6px 16px -8px rgba(18, 56, 64, .6); }
.btn-primary:hover { background: linear-gradient(180deg, #1f5764, #17424c); }

[data-n] { font: inherit; color: inherit; }

.col { color: var(--ink); }
.lc-top { align-items: flex-start; }
.lc-ago { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.lc-foot { justify-content: space-between; }
.lc-move { margin-left: 0; max-width: 118px; }
.lc-who .tel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Version 2.3 : accès client, contacts en lecture seule ---------- */
.hero-logo { margin: 0 0 14px; }
.hero-logo img { display: block; height: 64px; width: auto; max-width: min(320px, 100%); object-fit: contain; object-position: left center; }
@media (max-width: 760px) { .hero-logo img { height: 48px; } }
.chart-sm svg { height: 170px; }
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis-4 { grid-template-columns: minmax(0, 1fr); } }
.kpi > div { min-width: 0; }
.kpi-delta { margin-top: 6px; font-size: 12px; }
.kpi-hero { background: linear-gradient(135deg, #17495a, #123840); border-color: #123840; color: #fff; }
.kpi-hero .kpi-label { color: #cfe0e2; }
.kpi-hero .kpi-value { color: #fff; font-size: 34px; }
.kpi-hero .kpi-sub { color: #c4d7da; }
.kpi-hero .kpi-sub b { color: #fff; }
.kpi-hero .kpi-ic { background: rgba(242, 184, 173, .18); color: var(--rose); }
.note-line { margin: -4px 0 16px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .6); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.note-line b { color: var(--ink); }
.lead-box { grid-template-columns: auto minmax(0, 1fr); }
.lead-box .av { width: 40px; height: 40px; font-size: 14px; }
.lead-box h3 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.hero-stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.g-1 { grid-template-columns: minmax(0, 1fr); max-width: 980px; }

/* ---------- Version 3 : un espace par chatbot ---------- */
.nav-top { margin-bottom: 8px; }
.bot-switch { margin: 4px 2px 10px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.bot-switch label { display: block; font-size: 11.5px; color: var(--side-ink); margin: 0 0 6px 2px; opacity: .85; }
.bot-sel-wrap { position: relative; display: flex; align-items: center; }
.bot-sel-wrap .bot-sel-av { position: absolute; left: 8px; pointer-events: none; }
.bot-sel-wrap select { width: 100%; height: 40px; padding: 0 30px 0 44px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .16); background: #0f3138 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23c9dadd' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; color: #fff; font: 600 13.5px var(--font); appearance: none; cursor: pointer; }
.bot-sel-wrap select:focus-visible { outline: 2px solid var(--rose); }
.bot-sel-av .av { width: 28px; height: 28px; font-size: 12px; }
.bot-one { display: flex; gap: 10px; align-items: center; color: #fff; }
.bot-one b { display: block; font-size: 13.5px; }
.bot-one small { display: block; color: var(--side-ink); font-size: 12px; }
.app.in-portfolio [data-bot-nav] a { opacity: .55; }
.app.in-portfolio [data-bot-nav] a:hover { opacity: 1; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 600; }
.hero-chip .av { width: 24px; height: 24px; font-size: 11px; }

/* Tous les chatbots */
.tbl.port td { vertical-align: middle; }
.tbl.port tbody tr { cursor: pointer; }
.tbl.port .r { text-align: right; }
.tbl.port small { display: block; font-size: 12px; color: var(--muted); }
.tbl.port small.ok { color: var(--good-ink); font-weight: 600; }
.big-n { font-size: 20px; font-weight: 640; font-stretch: 86%; font-variant-numeric: tabular-nums; }
.port-bot { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; min-width: 220px; }
.port-bot b { display: block; font-weight: 650; }
.port-bot:hover b { color: var(--petrol); text-decoration: underline; }
.port-logo { width: 64px; height: 40px; border-radius: 10px; background: var(--side); display: inline-flex; align-items: center; justify-content: center; padding: 6px; flex: none; }
.port-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.port-spark { width: 150px; min-width: 120px; }
.port-spark .chart svg { height: 54px; }
@media (max-width: 760px) { .port-spark { width: auto; } .tbl.port .r { text-align: left; } }

/* Contacts : converties / non converties */
.conv-split { padding: 22px 24px; }
.cs-head h2 { margin: 0; font-size: 22px; font-weight: 620; letter-spacing: -.01em; }
.cs-head p { margin: 4px 0 0; }
.cs-bar { display: flex; gap: 3px; height: 18px; border-radius: 9px; overflow: hidden; margin: 18px 0 16px; background: var(--line-2); }
.cs-yes { background: var(--good); }
.cs-no { background: #c6d1d3; }
.cs-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-item { display: flex; gap: 10px; align-items: flex-start; }
.cs-item b { font-size: 28px; font-weight: 640; font-stretch: 86%; font-variant-numeric: tabular-nums; margin-right: 4px; }
.cs-item small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cs-pct { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: var(--line-2); font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.cs-rate { padding: 12px 14px; border-radius: 12px; background: linear-gradient(135deg, #17495a, #123840); color: #fff; }
.cs-rate small { color: #c4d7da; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 8px; }
.dot-yes { background: var(--good); box-shadow: 0 0 0 3px rgba(47, 138, 95, .18); }
.dot-no { background: #c6d1d3; }
.conv-ok { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--good-ink); }
.conv-ok .dot { margin-top: 0; }
.pill.p-conv { background: var(--good-soft); color: var(--good-ink); }
.pill.p-conv i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block; }
@media (max-width: 860px) { .cs-legend { grid-template-columns: minmax(0, 1fr); } }

.live-chip { white-space: nowrap; }

/* v3.1 : pages d'origine, plafonds */
.hbars .hb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
.hbars .hb-n em { font-style: normal; font-weight: 500; font-size: 12px; }
.meter-sm { height: 5px; margin: 6px 0 0 auto; max-width: 110px; }
.tbl.port td .meter-sm { margin-left: auto; }

/* ---------- v3.2 : sélecteur de chatbot, statuts, réglages ---------- */
.app.in-portfolio [data-bot-nav] a { opacity: 1; }
.bot-switch { position: relative; padding: 10px; }
.bs-label { display: block; font-size: 11.5px; color: var(--side-ink); margin: 0 0 6px 4px; opacity: .85; }
.bs-btn { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 7px 10px 7px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .16); background: #0f3138; color: #fff; font: inherit; text-align: left; cursor: pointer; }
.bs-btn:hover { border-color: rgba(255, 255, 255, .3); }
.bs-btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 1px; }
.bs-cur { flex: 1; min-width: 0; }
.bs-cur b, .bs-cur small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-cur b { font-size: 13.5px; font-weight: 650; }
.bs-cur small { font-size: 12px; color: var(--side-ink); }
.bs-btn .chev { width: 16px; height: 16px; color: var(--side-ink); flex: none; transition: transform .15s; }
.bot-switch.is-open .bs-btn .chev { transform: rotate(180deg); }
.bs-pop { margin-top: 8px; }
.bs-search { position: relative; }
.bs-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--side-ink); }
.bs-search input { width: 100%; height: 36px; padding: 0 10px 0 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 13.5px; }
.bs-search input::placeholder { color: #9fb9bd; }
.bs-search input:focus { outline: 2px solid var(--rose); outline-offset: 0; }
.bs-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: min(46vh, 380px); overflow: auto; overscroll-behavior: contain; }
.bs-list li[data-i] { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: #fff; }
.bs-list li[data-i] span { min-width: 0; }
.bs-list li b, .bs-list li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-list li b { font-size: 13px; font-weight: 600; }
.bs-list li small { font-size: 11.5px; color: var(--side-ink); }
.bs-list li.is-hl { background: rgba(255, 255, 255, .1); }
.bs-list li[aria-selected="true"] b { color: var(--rose); }
.bs-list .bs-all svg { width: 16px; height: 16px; flex: none; color: var(--side-ink); }
.bs-list .bs-all { border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 8px 8px 0 0; margin-bottom: 4px; }
.bs-dot { width: 8px; height: 8px; border-radius: 50%; background: #4fd08f; flex: none; box-shadow: 0 0 0 3px rgba(79, 208, 143, .15); }
.bs-list li.is-off { opacity: .7; }
.bs-list li.is-off .bs-dot { background: #7f9599; box-shadow: none; }
.bs-sep { padding: 10px 10px 4px; font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: #9fb9bd; }
.bs-none { padding: 12px 10px; font-size: 13px; color: var(--side-ink); }
.bot-one { display: block; padding: 2px 4px; }

/* Bandeau « Tous les chatbots » : logo à gauche, 4 chiffres sur une ligne */
.hero.hero-port { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; }
.hero-port .hero-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-port .hs > span { display: block; line-height: 1.35; }
@media (max-width: 1180px) { .hero.hero-port { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .hero-port .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero-off { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 11.5px; }

/* Segments (Actifs / Inactifs / Tous) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--line-2); border: 1px solid var(--line); }
.seg button { height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: 550 13px var(--font); cursor: pointer; white-space: nowrap; }
.seg button span { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 2px; }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 42, 48, .12); }
.pill.p-off { background: var(--neutral-soft); color: var(--neutral-ink); }
.pill.p-on { background: var(--good-soft); color: var(--good-ink); }
.pill.p-on i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); display: inline-block; margin-right: 2px; }
.tbl tr.is-off td { color: var(--muted); }
.tbl tr.is-off .port-logo { opacity: .55; }

/* Réglages */
.set-tabs { display: flex; gap: 4px; margin: 0 0 18px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); width: max-content; max-width: 100%; overflow-x: auto; }
.set-tabs a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9px; color: var(--ink-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.set-tabs a svg { width: 17px; height: 17px; }
.set-tabs a:hover { background: var(--line-2); color: var(--ink); }
.set-tabs a.is-on { background: var(--petrol); color: #fff; }
.set-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.set-bar .search { flex: 1; min-width: 200px; max-width: 420px; }
.set-bar .btn-primary { margin-left: auto; }
.set-bar .btn svg, .set-tabs svg { flex: none; }
.set-tbl tbody tr { cursor: pointer; }
.set-tbl tbody tr:hover td { background: #f7faf9; }
.set-tbl .r { text-align: right; }
.set-tbl small { display: block; font-size: 12px; color: var(--muted); }
.av-user { width: 38px; height: 38px; background: var(--petrol-soft); color: var(--petrol); }
.set-grid { align-items: start; }
.set-grid .panel:last-child { grid-column: 1 / -1; }
.set-save { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; margin-top: 16px; }
.set-save .btn { box-shadow: 0 8px 24px -8px rgba(18, 56, 64, .5); height: 42px; padding: 0 20px; }

/* Champs */
.sf { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.sf-l { font-weight: 600; font-size: 13px; color: var(--ink); }
.sf-h { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.sf .input { width: 100%; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.input-unit { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); overflow: hidden; }
.input-unit .input { border: 0; border-radius: 0; min-width: 0; }
.input-unit em, .input-pre em { font-style: normal; color: var(--muted); font-size: 13px; padding: 0 12px; white-space: nowrap; background: var(--line-2); align-self: stretch; display: flex; align-items: center; }
.input-unit:focus-within, .input-pre:focus-within { outline: 2px solid var(--petrol-2); outline-offset: 1px; }
.input-unit .input:focus, .input-pre .input:focus { outline: none; }
.input-pre { display: flex; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--panel); }
.input-pre em { max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.input-pre .input { border: 0; border-radius: 0; min-width: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.login-code { padding: 8px 10px; border-radius: 8px; background: var(--line-2); width: max-content; max-width: 100%; }
.sw-row { display: flex; gap: 12px; align-items: flex-start; margin: 2px 0 16px; cursor: pointer; }
.sw-row b { display: block; font-weight: 600; font-size: 13.5px; }
.sw-row small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.sw { position: relative; flex: none; width: 40px; height: 24px; margin-top: 1px; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 12px; background: #c4d1d0; transition: background .15s; pointer-events: none; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.sw input:checked + i { background: var(--good); }
.sw input:checked + i::after { transform: translateX(16px); }
.sw input:focus-visible + i { outline: 2px solid var(--petrol-2); outline-offset: 2px; }
.logo-f { display: flex; gap: 14px; align-items: flex-start; }
.logo-prev { width: 120px; height: 72px; flex: none; border-radius: 12px; background: var(--side); display: flex; align-items: center; justify-content: center; padding: 10px; color: #7f9fa5; }
.logo-prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-prev svg { width: 26px; height: 26px; }
.logo-prev.is-busy { opacity: .5; }
.logo-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.logo-act .sf-h { flex-basis: 100%; }
.logo-act label.btn { cursor: pointer; }
.copy-row { margin: 0 0 10px; }
.copy-row .sf-l { display: block; margin-bottom: 4px; }
.copy-box { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--line-2); padding: 2px 2px 2px 10px; }
.copy-box code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 12.5px; padding: 6px 0; }
.copy-box .btn { flex: none; }
.checklist { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.checklist label { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.checklist label:hover { background: var(--line-2); }
.checklist label[hidden] { display: none; }
.checklist b { display: block; font-weight: 600; font-size: 13.5px; }
.checklist small { display: block; color: var(--muted); font-size: 12px; }
.checklist input, .check input { width: 17px; height: 17px; accent-color: var(--petrol); flex: none; }
.check { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 13.5px; cursor: pointer; }
.search-sm { margin-bottom: 6px; }
.search-sm .input { height: 34px; }
.seg-lg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; background: none; border: 0; width: 100%; margin-bottom: 14px; }
.seg-lg label { position: relative; display: block; cursor: pointer; }
.seg-lg input { position: absolute; opacity: 0; }
.seg-lg span { display: block; padding: 11px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--panel); }
.seg-lg b { display: block; font-size: 14px; }
.seg-lg small { display: block; color: var(--muted); font-size: 12px; }
.seg-lg input:checked + span { border-color: var(--petrol); background: var(--petrol-soft); }
.seg-lg input:focus-visible + span { outline: 2px solid var(--petrol-2); outline-offset: 2px; }
.seg-lg input:disabled + span { opacity: .5; cursor: not-allowed; }
.pw-row { display: flex; gap: 6px; }
.pw-row .input { flex: 1; min-width: 0; }
.pw-row .btn { height: 38px; }

/* Panneau latéral */
body.sheet-open { overflow: hidden; }
.sheet-wrap { position: fixed; inset: 0; z-index: 80; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(12, 32, 37, .42); opacity: 0; transition: opacity .2s; }
.sheet { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--bg); display: flex; flex-direction: column; box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .35); transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .7, .2, 1); }
.sheet-wrap.on .sheet-scrim { opacity: 1; }
.sheet-wrap.on .sheet { transform: none; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: 20px; font-weight: 640; letter-spacing: -.01em; }
.sheet-head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.sheet .sheet-body { flex: 1; overflow: auto; padding: 16px 22px 0; display: flex; flex-direction: column; }
.panel-body.sheet-body { display: block; }
.sheet-sec { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 2px; margin-bottom: 14px; }
.sheet-sec h3 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-2); }
.sheet-sec.danger { border-color: #efcdc6; padding-bottom: 14px; }
.sheet-sec.danger summary { cursor: pointer; font-weight: 650; color: var(--bad-ink); padding-bottom: 2px; }
.sheet-sec.danger[open] summary { margin-bottom: 10px; }
.sheet-foot { position: sticky; bottom: 0; margin: auto -22px 0; padding: 14px 22px; display: flex; justify-content: flex-end; gap: 8px; background: var(--panel); border-top: 1px solid var(--line); }
.sheet-foot .btn { height: 40px; }
[data-armed] { background: var(--bad-soft) !important; border-color: var(--bad) !important; color: var(--bad-ink) !important; }
@media (max-width: 760px) {
  .set-bar .btn-primary { margin-left: 0; }
  .two, .seg-lg { grid-template-columns: 1fr; }
  .logo-f { flex-direction: column; }
  .sheet-head, .sheet .sheet-body { padding-left: 16px; padding-right: 16px; }
  .sheet-foot { margin: auto -16px 0; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-scrim { transition: none; } }
@media (max-width: 760px) { .tbl.port td .meter-sm { margin-left: 0; } }

/* ---------- v3.3 : vue globale et sélecteur plus clair ---------- */
.bot-switch { z-index: 5; }
.bs-pop { position: absolute; left: 0; right: 0; top: calc(100% - 4px); z-index: 50; margin: 0; padding: 8px; border-radius: 12px; background: #0b262c; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6); }
.bs-list li[data-i] { align-items: center; }
.bs-list li[data-i] > span { flex: 1; }
.bs-list li b, .bs-list li small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.bs-list li > svg:last-child:not(:first-child) { width: 16px; height: 16px; color: var(--rose); flex: none; }
.bs-list li[aria-selected="true"] b { color: #fff; }
.bs-list li[aria-selected="true"] { background: rgba(242, 184, 173, .12); }
.bs-list li[aria-selected="true"].is-hl { background: rgba(242, 184, 173, .18); }
.bs-list .bs-all { border-bottom: 0; margin-bottom: 0; border-radius: 8px; }
.bs-sep:first-child { padding-top: 4px; }
.scope-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 4px; font-size: 12.5px; font-weight: 650; color: var(--petrol-2); letter-spacing: .01em; }
.scope-tag svg { width: 15px; height: 15px; }
.scope-tag .bs-dot { width: 7px; height: 7px; box-shadow: none; }
.page-head .scope-tag + h1 { margin-top: 0; }
.hero-chip svg { width: 16px; height: 16px; margin-left: 8px; }
.hero-chip { padding-left: 4px; }
.hero-chip > span:first-child { padding-left: 8px; }
.pf-panel { margin: 22px 0 8px; }
.pf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.pf-head p { margin: 2px 0 0; font-size: 13px; }
.pf-head .filters .search { min-width: 200px; }
.pf-panel .table-wrap { border-top: 1px solid var(--line); }
.bs-pop { right: auto; width: max(100%, 300px); }
@media (max-width: 900px) { .bs-pop { width: 100%; } }

/* ---------- v3.4 : bandeau uni, bilan du mois, objectif ---------- */
.hero { background: #174552; }
.hero-ribbon { display: none; }
.hero-sub { font-size: 15.5px; line-height: 1.5; max-width: 38em; }
.hero-cmp { display: block; margin-top: 2px; font-size: 13.5px; color: #b9cfd3; }
.hero-goal { margin-top: 14px; max-width: 420px; }
.hg-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #cfe0e2; margin-bottom: 6px; }
.hg-top b { color: #fff; font-variant-numeric: tabular-nums; }
.hg-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.hg-bar span { display: block; height: 100%; border-radius: 4px; background: var(--rose); transition: width .6s ease; }
.hg-bar.is-done span { background: #4fd08f; }
.hg-sub { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12.5px; color: #b9cfd3; }
.hg-sub svg { width: 14px; height: 14px; color: #4fd08f; }
.days { display: flex; flex-wrap: wrap; gap: 6px; }
.days label { position: relative; cursor: pointer; }
.days input { position: absolute; opacity: 0; }
.days span { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--panel); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.days input:checked + span { border-color: var(--petrol); background: var(--petrol-soft); color: var(--petrol); }
.days input:focus-visible + span { outline: 2px solid var(--petrol-2); outline-offset: 2px; }
.hours-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }
.hours-row .select { height: 36px; width: auto; }
@media (prefers-reduced-motion: reduce) { .hg-bar span { transition: none; } }
.hero.hero-port { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 1180px) { .hero.hero-port { grid-template-columns: minmax(0, 1fr); } }

/* ---------- v3.5 : mascotte ---------- */
.mascot { flex: none; width: 88px; height: 88px; border-radius: 50%; background: #e2edee; overflow: hidden; display: inline-flex; align-items: flex-end; justify-content: center; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
.mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mascot-xl { width: 150px; height: 150px; box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
.hero-say { display: flex; align-items: flex-end; gap: 14px; margin-top: 14px; }
.hero-say .hero-bubble { position: relative; margin: 0; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: #2a5662; border: 1px solid #3a6672; }
.hero-say .hero-bubble::before { content: ""; position: absolute; left: -8px; bottom: 10px; width: 14px; height: 14px; background: #2a5662; border-left: 1px solid #3a6672; border-bottom: 1px solid #3a6672; transform: rotate(45deg); }
.hero-goal { margin-left: 102px; }
.login-ribbon { display: none; }
.login-hello { display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 1; }
@media (max-width: 620px) {
  .mascot { width: 58px; height: 58px; }
  .hero-say { gap: 10px; }
  .hero-goal { margin-left: 0; }
  .mascot-xl { width: 96px; height: 96px; }
}

/* ---------- v3.5.2 : bandeau compact et aligné ---------- */
.hero.hero-v2 { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 20px 24px; padding: 18px 24px; border-radius: 20px; }
.hero-v2 .mascot { width: 76px; height: 76px; }
.hero-v2 .hero-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; }
.hero-v2 .hero-logo { margin: 0 0 8px; }
.hero-v2 .hero-logo img { height: 40px; }
.hero-v2 h1 { font-size: 26px; }
.hero-v2 .hero-date { margin-bottom: 2px; }
.hero-v2 .hero-chip { margin: 0; }
.hero-v2 .hero-goal { margin: 10px 0 0; width: 100%; max-width: 340px; }
.hero-v2 .hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; align-self: center; }
.hero-v2 .hs { padding: 10px 14px; border-radius: 12px; min-width: 0; }
.hero-v2 .hs strong { font-size: 24px; }
.hero-v2 .hs > span { font-size: 12px; line-height: 1.3; }
@media (max-width: 1180px) {
  .hero.hero-v2, .hero.hero-v2.hero-port { grid-template-columns: auto minmax(0, 1fr); }
  .hero-v2 .hero-stats { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .hero.hero-v2 { padding: 16px; gap: 14px; }
  .hero-v2 .mascot { width: 60px; height: 60px; }
  .hero-v2 .hero-logo img { height: 34px; }
  .hero-v2 .hero-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hero-v2 .hs > span { display: block; line-height: 1.3; }
@media (max-width: 620px) {
  .hero-v2:not(.hero-port) .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-v2 .hs { padding: 9px 10px; }
  .hero-v2 .hs strong { font-size: 21px; }
  .hero-v2 .hs > span { font-size: 11.5px; }
}

/* ---------- v3.5.3 : mascotte statistiques, plus grande ---------- */
.mascot { border-radius: 18px; }
.hero-v2 .mascot { width: 112px; height: 112px; border-radius: 18px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 10px 24px -12px rgba(0, 0, 0, .5); }
.mascot-xl { width: 190px; height: 190px; border-radius: 26px; }
@media (max-width: 620px) {
  .hero-v2 .mascot { width: 76px; height: 76px; border-radius: 14px; }
  .mascot-xl { width: 110px; height: 110px; border-radius: 18px; }
}

/* ---------- v3.6 : tableau de bord « waouh » ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi-card { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px 0; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.kpi-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--kc); opacity: .9; }
.kpi-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--kc) 40%, var(--line)); box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--kc) 60%, transparent); }
.kc-top { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.kc-top .delta { margin-left: auto; }
.kc-ic { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kc) 14%, #fff); color: var(--kc); flex: none; }
.kc-ic svg { width: 16px; height: 16px; }
.kc-val { margin-top: 10px; font-size: 38px; line-height: 1; font-weight: 640; font-stretch: 84%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi-card.is-hot .kc-val { color: #b4513b; }
.kc-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); min-height: 18px; }
.spark-k { display: block; width: calc(100% + 36px); height: 46px; margin: 8px -18px 0; }
.spark-empty { height: 20px; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kpi-row { gap: 10px; } .kpi-card { padding: 12px 14px 0; } .kc-val { font-size: 30px; } .spark-k { width: calc(100% + 28px); margin: 6px -14px 0; } .kc-top { font-size: 12px; } .kc-top .delta { display: none; } }

.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
.grid.g-1 { max-width: none; }
@media (max-width: 980px) { .g-12 { grid-template-columns: minmax(0, 1fr); } }
.seg-sm button { height: 26px; padding: 0 10px; font-size: 12.5px; }
.panel-head .seg { flex: none; }
.area-chart svg { display: block; overflow: visible; }
.ac-hit { cursor: crosshair; }
.ac-x { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; transition: opacity .15s; }
.ac-dot { transition: opacity .15s; }
.ac-peak text { font-size: 11.5px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.ac-area.anim { animation: fadeUp .9s ease both .2s; }
.lg-dash { display: inline-block; width: 16px; height: 0 !important; border-top: 2px dashed #9aa9ad; background: none !important; border-radius: 0 !important; vertical-align: middle; }
.t-prev { opacity: .8; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.donut2 { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; }
.dn-fig { position: relative; width: 170px; height: 170px; }
.dn-fig svg { width: 100%; height: 100%; overflow: visible; }
.dn-arc { transition: stroke-width .2s, opacity .2s; cursor: pointer; }
.dn-arc.is-on { stroke-width: 26; }
.dn-arc.is-dim, .dn-legend li.is-dim { opacity: .35; }
.anim-in .dn-arc { animation: dnIn 1s cubic-bezier(.3, .7, .2, 1) both .3s; }
@keyframes dnIn { from { stroke-dasharray: 0 400; } }
.dn-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.dn-c strong { font-size: 30px; font-weight: 650; font-stretch: 86%; line-height: 1; }
.dn-c span { font-size: 11.5px; color: var(--muted); max-width: 96px; margin-top: 4px; line-height: 1.25; }
.dn-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.dn-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 46px; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; transition: background .15s, opacity .15s; cursor: default; }
.dn-legend li:hover, .dn-legend li.is-on { background: var(--line-2); }
.dn-legend i { width: 12px; height: 12px; border-radius: 4px; }
.dn-legend b { font-variant-numeric: tabular-nums; }
.dn-legend em { font-style: normal; color: var(--muted); font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.dn-legend .dn-tot { grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 10px; color: var(--ink-2); }
@media (max-width: 520px) { .donut2 { grid-template-columns: 1fr; justify-items: center; } .dn-legend { width: 100%; } }

.heat { width: 100%; }
.hm-grid { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.hm-day { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.hm-c { aspect-ratio: 1 / 1; min-height: 12px; border-radius: 4px; transition: transform .12s, box-shadow .12s; }
.hm-c:hover { transform: scale(1.35); box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(0, 0, 0, .2); position: relative; z-index: 1; }
.anim-in .hm-c { animation: pop .35s ease both; animation-delay: calc(var(--d) * 3ms); }
@keyframes pop { from { opacity: 0; transform: scale(.4); } }
.hm-h { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: visible; }
.hm-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; }
.hm-peak { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: #e6f3f4; color: #075866; }
.hm-peak svg { width: 15px; height: 15px; }
.hm-scale { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.hm-scale i { width: 14px; height: 14px; border-radius: 3px; }

/* Objectif en anneau, dans le bandeau */
.hero-v2 .hero-goal { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.hg-ring { position: relative; width: 58px; height: 58px; flex: none; }
.hg-ring svg { width: 100%; height: 100%; }
.hg-bg { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 6; }
.hg-fg { fill: none; stroke: var(--rose); stroke-width: 6; stroke-linecap: round; animation: ring 1.2s cubic-bezier(.3, .7, .2, 1) both .3s; }
.hg-ring.is-done .hg-fg { stroke: #4fd08f; }
@keyframes ring { from { stroke-dasharray: 0 var(--c); } }
.hg-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; }
.hg-txt { display: flex; flex-direction: column; gap: 1px; }
.hg-txt span { font-size: 12px; color: #b9cfd3; }
.hg-txt b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.hg-txt small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #b9cfd3; }
.hg-txt small svg { width: 13px; height: 13px; color: #4fd08f; }

/* Entrées animées */
.anim-in .reveal { animation: fadeUp .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.anim-in .hb-fill { animation: grow 1s cubic-bezier(.3, .7, .2, 1) both .4s; transform-origin: left; }
.anim-in .ribbon .r-goal { animation: grow 1s cubic-bezier(.3, .7, .2, 1) both .5s; transform-origin: left; transform-box: fill-box; }
@keyframes grow { from { transform: scaleX(0); } }
.hero .hs { transition: transform .2s, background .2s; }
.hero a.hs:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .anim-in .reveal, .anim-in .hb-fill, .anim-in .hm-c, .anim-in .dn-arc, .hg-fg, .ac-area.anim { animation: none !important; } .kpi-card, .hm-c { transition: none; } }
.area-chart svg { height: auto; }
.g-12 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.6fr); }
.donut2 { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
.dn-fig { width: 150px; height: 150px; }
.dn-legend li { grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: 8px; }
.dn-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ribbon .r-goal { fill: #e0735a; }
.stage.is-goal .stage-value { color: #b4513b; }
@media (max-width: 980px) { .g-12 { grid-template-columns: minmax(0, 1fr); } }
.panel-head { flex-wrap: wrap; gap: 8px 12px; }
@media (max-width: 620px) {
  .hm-grid { grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 2px; }
  .hm-c { border-radius: 2px; min-height: 9px; }
  .hm-h:not(.hm-h6) { visibility: hidden; }
  .hm-h { font-size: 9.5px; }
}
@media (max-width: 560px) { .donut2 { grid-template-columns: 1fr; justify-items: center; } .dn-legend { width: 100%; } }

/* ---------- v3.7 : Analyse IA ---------- */
.set-grid .panel:last-child { grid-column: auto; }
.ai-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px; background: linear-gradient(90deg, #e6f3f4, #f3f8f8); border: 1px solid #cfe6e9; color: #0b4c57; font-size: 13.5px; }
.ai-status > svg { width: 18px; height: 18px; flex: none; color: #008ea3; }
.ai-status > span { flex: 1; min-width: 200px; }
.ai-status .muted { margin-left: 6px; }
a.kpi-card { color: inherit; text-decoration: none; display: block; padding-bottom: 16px; }
.ai-kpi { padding-bottom: 16px; }
.ai-kpi .kc-val { font-size: 34px; }
.mood-bar { display: flex; gap: 3px; height: 18px; border-radius: 9px; overflow: hidden; margin: 4px 0 16px; }
.mood-bar span { display: block; min-width: 4px; transition: filter .15s; }
.mood-bar span:hover { filter: brightness(1.1) saturate(1.2); }
.anim-in .mood-bar span { animation: grow .9s cubic-bezier(.3, .7, .2, 1) both .3s; transform-origin: left; }
.mood-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mood-legend a { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; color: inherit; text-decoration: none; }
.mood-legend a:hover { background: var(--line-2); }
.mood-legend i { width: 12px; height: 12px; border-radius: 4px; }
.mood-legend b { font-variant-numeric: tabular-nums; }
.mood-legend em { font-style: normal; color: var(--muted); font-size: 12.5px; text-align: right; }
.ai-dot { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ai-dot svg { width: 15px; height: 15px; }
.ai-bad { background: var(--bad-soft); color: var(--bad); }
.ai-ok { display: flex; align-items: center; gap: 8px; margin: 0; }
.ai-ok svg { width: 18px; height: 18px; color: var(--good); flex: none; }
.ai-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.ai-scroll { max-height: 430px; overflow: auto; }
.ai-qs { list-style: none; margin: 0; padding: 0; }
.ai-qs li + li { border-top: 1px solid var(--line-2); }
.ai-qs a { display: block; padding: 10px 4px; color: inherit; text-decoration: none; border-radius: 8px; }
.ai-qs a:hover { background: var(--line-2); }
.ai-q { display: block; font-weight: 550; line-height: 1.4; }
.ai-un .ai-q::before { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--warn-soft); color: var(--warn-ink); font-size: 11.5px; font-weight: 800; vertical-align: 1px; }
.ai-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.ai-meta em { font-style: normal; font-size: 12px; color: var(--muted); }
.ai-badn { font-style: normal; color: var(--bad-ink); }
.ai-nc .hb-fill { background: #e0735a; }
.ai-topics .hb-fill { background: #008ea3; }
.synth { margin-top: 16px; background: linear-gradient(180deg, #fff, #fbfdfd); }
.synth .panel-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.synth .panel-head h2 svg { width: 18px; height: 18px; color: #008ea3; }
.md h3 { font-size: 15px; margin: 18px 0 6px; color: var(--petrol); }
.md h3:first-child { margin-top: 0; }
.md ul { margin: 0; padding-left: 20px; }
.md li { margin: 4px 0; line-height: 1.5; }
.md p { margin: 6px 0; line-height: 1.55; }
.md { columns: 2 340px; column-gap: 36px; }
.md h3 { break-after: avoid; }
.md ul { break-inside: avoid-column; }
.insight ul { margin: 4px 0 0; padding-left: 20px; }
.insight .alert-line { display: flex; gap: 6px; align-items: center; }
.insight .alert-line svg { width: 14px; height: 14px; }
.ai-topics a, .ai-nc a { grid-template-columns: minmax(0, 1fr) auto; }
.ai-topics .hb-n, .ai-nc .hb-n { white-space: nowrap; font-weight: 600; }
.ai-topics .hb-n em, .ai-nc .hb-n em { font-style: normal; font-weight: 500; font-size: 12px; }
@media (max-width: 520px) { .ai-topics .hb-n em.muted { display: none; } }
.pf-per { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-per .custom { display: inline-flex; gap: 6px; align-items: center; }
.pf-per .custom .input { height: 36px; width: 150px; }
.pf-head p b { color: var(--ink); font-weight: 600; }
.cap-none { display: block; font-size: 16px; font-weight: 600; }
.tbl.port small.cap-warn { color: var(--warn-ink); font-weight: 600; }
.tbl.port small.cap-over { color: var(--bad-ink); font-weight: 700; }
[data-pf-body] { transition: opacity .15s; }

/* v3.8 : chatbot hébergé */
.sec-chat h4 { margin: 18px 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sec-chat .g-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
@media (max-width: 560px) { .sec-chat .g-2 { grid-template-columns: minmax(0, 1fr); } }
.install-box { border: 1.5px dashed var(--petrol, #1d4f5b); border-radius: 12px; padding: 14px; margin: 0 0 18px; background: rgba(29, 79, 91, .04); }
.install-h b { display: block; font-size: 14px; }
.install-h span { display: block; font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; line-height: 1.45; }
.install-h code { font-size: 12px; }
.install-box .copy-row { margin-bottom: 10px; }
.install-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.install-act small { margin: 0; }
.mono-ta { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.sec-chat .seg label { position: relative; cursor: pointer; }
.sec-chat .seg input { position: absolute; opacity: 0; }
.sec-chat .seg span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 7px; font: 550 13px var(--font); color: var(--ink-2); }
.sec-chat .seg input:checked + span { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 42, 48, .12); }
.sec-chat .seg input:focus-visible + span { outline: 2px solid var(--petrol, #1d4f5b); }
.color-f input { width: 64px; height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 2px; background: var(--panel); cursor: pointer; }
details.sub { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-top: 8px; }
details.sub summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
details.sub[open] summary { margin-bottom: 12px; }
.sw-row small b, .sw-row small strong { display: inline; font-size: inherit; font-weight: 700; }

/* v3.9 : comptes clients (invitation, mot de passe oublié) */
.login-alt { margin: 14px 0 0; text-align: center; font-size: 14px; }
.login-alt a { color: var(--petrol); font-weight: 600; text-decoration: none; }
.login-alt a:hover { text-decoration: underline; }
.form-ok { padding: 12px 14px; border-radius: 10px; background: var(--petrol-soft); color: var(--ink); font-size: 14px; line-height: 1.5; }
.pw-hint { font-size: 12.5px; margin: -4px 0 14px; }
.pw-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--line-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.pw-state svg { width: 18px; height: 18px; flex: none; }
.pw-state > span { flex: 1; min-width: 200px; }
.form-ok svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }