/* ═══════════════════════════════════════════════════════════════════════
   solutions.css — système de mockups HTML/CSS natif (page Solutions)
   Dépend des tokens du site : --bg --gold --ink --ink-mute --ink-dim
   --line --line-faint --f-display --f-body --f-mono
   Règle perf : seules opacity / transform sont animées.
   ═══════════════════════════════════════════════════════════════════════ */

.app-window {
  container-type: inline-size;
  position: relative;
  background: var(--w-bg);
  border: 1px solid var(--w-border);
  border-radius: 16px;
  box-shadow: var(--w-shadow);
  overflow: hidden;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.app-window *, .app-window *::before, .app-window *::after { box-sizing: border-box; }
.app-window button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; text-align: left;
}
.app-window button:focus-visible { outline: 1px solid rgba(245, 200, 66, 0.6); outline-offset: 2px; }
.app-window b { font-weight: 500; }
.mono { font-family: var(--f-mono); font-size: 0.92em; letter-spacing: 0; }
.dim  { color: var(--ink-dim); }
.mute { color: var(--ink-mute); }

/* ── Barre de titre ─────────────────────────────────────────────────── */
.app-bar {
  display: flex; align-items: center; gap: 14px;
  height: 42px; padding: 0 16px;
  border-bottom: 1px solid var(--w-line);
  background: var(--w-chrome);
}
.app-dots { display: flex; gap: 6px; }
.app-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--w-dot); }
.app-dots span:first-child { background: rgba(245, 200, 66, 0.55); }
.app-title { font-size: 12px; letter-spacing: 0.06em; color: var(--ink-mute); }
.app-badge {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); padding: 3px 8px; border: 1px solid rgba(245, 200, 66, 0.35); border-radius: 999px;
}

/* ── Corps : rail + main ────────────────────────────────────────────── */
.app-body { display: grid; grid-template-columns: 172px 1fr; height: 600px; }

.app-side {
  border-right: 1px solid var(--w-line);
  padding: 16px 10px; display: flex; flex-direction: column; gap: 4px;
}
.app-side .side-brand {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-mute);
}
.app-side .side-brand i {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: linear-gradient(135deg, rgba(245,200,66,.9), rgba(214,173,58,.6));
}
.side-nav button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; color: var(--ink-mute);
  transition: background .2s ease, color .2s ease;
}
.side-nav button svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.side-nav button:hover { color: var(--ink); background: var(--w-hover); }
.side-nav button.is-active { color: var(--ink); background: rgba(245, 200, 66, 0.08); }
.side-nav button.is-active svg { stroke: var(--gold); }
.side-nav .count {
  margin-left: auto; font-family: var(--f-mono); font-size: 10px;
  color: var(--w-warn); background: rgba(240,167,66,.12); padding: 1px 6px; border-radius: 999px;
}
.side-foot { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--w-line); font-size: 11px; color: var(--ink-dim); }
.side-foot .theme-slot { display: block; }

.app-main { display: grid; grid-template-rows: auto 1fr; min-width: 0; min-height: 0; }
.app-top {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-bottom: 1px solid var(--w-line);
}
.app-top h3 { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.app-top .date { font-size: 11.5px; color: var(--ink-dim); }
.ui-search {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  width: 190px; height: 28px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--w-line); background: var(--w-panel); color: var(--ink-dim); font-size: 11.5px;
}
.ui-search svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ui-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: inherit; outline: none; }
.ui-search input::placeholder { color: var(--ink-dim); }

/* ── Vues ───────────────────────────────────────────────────────────── */
.view { display: none; min-height: 0; height: 100%; overflow-y: auto; }
.view.is-active { display: flex; flex-direction: column; }
.view[data-view="appels"] { overflow: hidden; }
.ui-scroll { overflow-x: auto; }
/* Barres de défilement discrètes dans la fenêtre */
.app-window * { scrollbar-width: thin; scrollbar-color: var(--w-dot) transparent; }
.app-window *::-webkit-scrollbar { width: 6px; height: 6px; }
.app-window *::-webkit-scrollbar-thumb { background: var(--w-dot); border-radius: 3px; }

/* ── Chips de filtre ────────────────────────────────────────────────── */
.ui-chips { display: flex; gap: 6px; padding: 10px 16px 0; }
.ui-chip {
  font-size: 11px; letter-spacing: 0.04em; color: var(--ink-mute);
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--w-line);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ui-chip:hover { color: var(--ink); }
.ui-chip.is-active { color: var(--gold); border-color: rgba(245,200,66,.4); background: rgba(245,200,66,.06); }
.ui-chip .n { font-family: var(--f-mono); font-size: 10px; margin-left: 5px; color: var(--ink-dim); }
.ui-chip.is-active .n { color: var(--gold-soft); }

/* ── Split liste / panneau ──────────────────────────────────────────── */
.ui-split { display: grid; grid-template-columns: 1fr 292px; flex: 1; min-height: 0; }
.ui-split > * { min-width: 0; }
.ui-panel { border-left: 1px solid var(--w-line); display: flex; flex-direction: column; min-height: 0; }

/* ── Liste ──────────────────────────────────────────────────────────── */
.ui-list { padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; }
.ui-row {
  display: grid; grid-template-columns: 44px 1fr auto; column-gap: 12px; align-items: center;
  width: 100%; padding: 9px 10px; border-radius: 9px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease;
}
.ui-row:hover { background: var(--w-hover); }
.ui-row.is-selected { background: rgba(245,200,66,.06); border-color: rgba(245,200,66,.22); }
.ui-row .t { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-mute); }
.ui-row.is-selected .t { color: var(--gold); }
.ui-row .who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-row .who b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-row .who .ui-sub { font-size: 11px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-row .who .ui-sub .mono { color: var(--ink-dim); }
.ui-row .who .ui-sub .sep { margin: 0 6px; opacity: .5; }
.ui-row .end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ui-row .dur { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); }
.ui-row.is-live .t { color: var(--w-ok); }

/* ── Badges ─────────────────────────────────────────────────────────── */
.ui-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  color: var(--ink-mute); border: 1px solid var(--w-line); background: var(--w-panel);
}
.ui-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ui-badge.ok   { color: var(--w-ok);   border-color: rgba(95,211,154,.28); background: rgba(95,211,154,.07); }
.ui-badge.warn { color: var(--w-warn); border-color: rgba(240,167,66,.3);  background: rgba(240,167,66,.08); }
.ui-badge.info { color: var(--w-info); border-color: rgba(122,162,247,.3); background: rgba(122,162,247,.08); }
.ui-badge.gold { color: var(--gold);   border-color: rgba(245,200,66,.3);  background: rgba(245,200,66,.07); }
.ui-badge.plain::before { display: none; }

/* Point « en direct » : animation d'opacité uniquement (compositée) */
.ui-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--w-ok); position: relative; flex: none; }
/* Pas d'anneau animé : sur le site, le grain fixe en mix-blend-mode force une recomposition
   plein écran à chaque image dès qu'un calque bouge en continu (mesuré 2026-09-09 : viz 1,8 s / 2 s). */
.ui-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--w-ok); opacity: .35; }
/* @keyframes ui-ping retiré (voir .ui-dot) */

/* ── Panneau de détail ──────────────────────────────────────────────── */
.ui-panel-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--w-line); }
.ui-panel-head .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ui-panel-head b { font-size: 13px; font-weight: 500; }
.ui-panel-head .meta { font-size: 11px; color: var(--ink-dim); margin-top: 3px; }
.ui-panel-head .meta .mono { color: var(--ink-dim); }

.ui-banner {
  margin: 12px 12px 0; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--w-line); background: var(--w-panel);
  font-size: 12px;
}
.ui-banner .lbl {
  display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 4px;
}
.ui-banner.intent { border-color: rgba(245,200,66,.25); background: rgba(245,200,66,.05); }
.ui-banner.intent .val { color: var(--gold); font-weight: 500; }
.ui-banner.action ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ui-banner.action li { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.ui-banner.action li .mono { color: var(--ink-dim); margin-left: auto; font-size: 10.5px; }
.ui-check {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: rgba(95,211,154,.15); border: 1px solid rgba(95,211,154,.45);
  display: inline-grid; place-items: center;
}
.ui-check::after { content: ""; width: 5px; height: 3px; border-left: 1.5px solid var(--w-ok); border-bottom: 1.5px solid var(--w-ok); transform: translateY(-1px) rotate(-45deg); }
.ui-check.pending { background: rgba(240,167,66,.12); border-color: rgba(240,167,66,.45); }
.ui-check.pending::after { border-color: var(--w-warn); width: 4px; height: 4px; border: 0; background: var(--w-warn); border-radius: 50%; transform: none; }

/* ── Chat / transcription ───────────────────────────────────────────── */
.ui-chat { flex: 1; min-height: 0; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.ui-chat .msg { flex: none; }
.ui-chat { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.ui-chat .cap {
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim);
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.ui-chat .cap::after { content: ""; flex: 1; height: 1px; background: var(--w-line); }
.msg { max-width: 92%; font-size: 12px; line-height: 1.45; padding: 7px 10px; border-radius: 10px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}
.msg.agent { align-self: flex-start; background: rgba(245,200,66,.07); border: 1px solid rgba(245,200,66,.18); border-bottom-left-radius: 3px; }
.msg.caller { align-self: flex-end; background: var(--w-panel-2); border: 1px solid var(--w-line); border-bottom-right-radius: 3px; color: var(--ink-mute); }
.msg .who { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 2px; color: var(--ink-dim); }
.msg.agent .who { color: var(--gold-soft); }
.ui-chat.in .msg { opacity: 1; transform: none; }
.ui-chat.in .msg:nth-child(2) { transition-delay: .05s; }
.ui-chat.in .msg:nth-child(3) { transition-delay: .12s; }
.ui-chat.in .msg:nth-child(4) { transition-delay: .19s; }
.ui-chat.in .msg:nth-child(5) { transition-delay: .26s; }
.ui-chat.in .msg:nth-child(6) { transition-delay: .33s; }
.ui-chat.in .msg:nth-child(7) { transition-delay: .40s; }
.ui-chat.in .msg:nth-child(8) { transition-delay: .47s; }
.msg.typing { display: flex; gap: 4px; padding: 10px 12px; }
.msg.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-dim); animation: ui-typing 1.2s ease-in-out infinite; }
.msg.typing i:nth-child(2) { animation-delay: .2s; }
.msg.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes ui-typing { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* ── KPI ────────────────────────────────────────────────────────────── */
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 16px 0; }
.ui-kpi { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--w-line); background: var(--w-panel); }
.ui-kpi .lbl { font-size: 11px; color: var(--ink-mute); letter-spacing: 0.02em; }
.ui-kpi .val { font-family: var(--f-mono); font-size: 22px; font-weight: 500; margin-top: 6px; letter-spacing: -0.01em; }
.ui-kpi .val small { font-size: 12px; color: var(--ink-dim); margin-left: 3px; }
.ui-kpi .delta { font-size: 10.5px; margin-top: 4px; color: var(--w-ok); }
.ui-kpi .delta.neutral { color: var(--ink-dim); }

/* ── Cartes / grilles ───────────────────────────────────────────────── */
.ui-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; padding: 12px 16px 16px; }
.ui-card { border: 1px solid var(--w-line); background: var(--w-panel); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.ui-card .head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ui-card .head b { font-weight: 500; font-size: 12px; }
.ui-card .head span { font-size: 10.5px; color: var(--ink-dim); }

/* ── Graphe en aires (SVG statique) ─────────────────────────────────── */
.ui-chart { width: 100%; height: auto; display: block; }
.ui-chart .grid { stroke: var(--w-line); stroke-width: 1; }
.ui-chart .area { fill: url(#ui-area-fill); }
.ui-chart .line { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ui-chart .pt   { fill: var(--w-bg); stroke: var(--gold); stroke-width: 1.4; }
.ui-chart .lbl  { font-family: var(--f-mono); font-size: 11px; fill: var(--ink-dim); }

/* ── Barres horizontales ────────────────────────────────────────────── */
.ui-bars { display: flex; flex-direction: column; gap: 8px; }
.ui-bars .bar { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; font-size: 11.5px; }
.ui-bars .bar .lbl { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--ink-mute); }
.ui-bars .bar .track { height: 5px; border-radius: 3px; background: var(--w-track); overflow: hidden; }
.ui-bars .bar .fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, rgba(214,173,58,.85), var(--gold)); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ui-bars .bar .v { font-family: var(--f-mono); font-size: 11px; text-align: right; color: var(--ink); }

/* ── Table simple ───────────────────────────────────────────────────── */
.ui-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ui-table th { text-align: left; font-family: var(--f-mono); font-weight: 400; font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); padding: 6px 10px; border-bottom: 1px solid var(--w-line); }
.ui-table td { padding: 9px 10px; border-bottom: 1px solid var(--w-line); vertical-align: middle; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-table tbody tr { transition: background .18s ease; }
.ui-table tbody tr:hover { background: var(--w-chrome); }
.ui-table .avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--f-mono); font-size: 9.5px; color: var(--gold); background: rgba(245,200,66,.1); border: 1px solid rgba(245,200,66,.25); margin-right: 8px; vertical-align: middle; }

/* ── Formulaire / réglages ──────────────────────────────────────────── */
.ui-form { padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ui-form .ui-card.wide { grid-column: 1 / -1; }
.ui-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--w-line); font-size: 12px; }
.ui-field:last-child { border-bottom: 0; }
.ui-field .k { color: var(--ink-mute); }
.ui-field .k small { display: block; font-size: 10.5px; color: var(--ink-dim); margin-top: 1px; }
.ui-field .v { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink); }
.ui-toggle { width: 32px; height: 18px; border-radius: 999px; background: var(--w-track); position: relative; flex: none; transition: background .2s ease; }
.ui-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-mute); transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s ease; }
.ui-toggle.is-on { background: rgba(245,200,66,.35); }
.ui-toggle.is-on::after { background: var(--gold); transform: translateX(14px); }
.ui-textarea { font-size: 12px; line-height: 1.5; color: var(--ink-mute); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--w-line); background: var(--w-sunk); font-style: italic; }

/* ── Vide / info ────────────────────────────────────────────────────── */
.ui-empty { padding: 40px 16px; text-align: center; color: var(--ink-dim); font-size: 12px; }

/* ── Mode rail (fenêtre étroite) ────────────────────────────────────── */
@container (max-width: 820px) {
  .app-body { grid-template-columns: 52px 1fr; }
  .app-side { padding: 14px 8px; }
  .app-side .side-brand { padding: 4px 6px 12px; justify-content: center; }
  .app-side .side-brand span, .side-nav button span, .side-nav .count, .side-foot .theme-toggle span { display: none; }
  .side-foot { padding: 10px 0 0; }
  .side-foot .theme-toggle { justify-content: center; padding: 0; }
  .side-nav button { justify-content: center; padding: 9px 0; }
  .ui-split { grid-template-columns: 1fr 260px; }
  .ui-search { width: 150px; }
}
@container (max-width: 640px) {
  .app-body { height: auto; }
  .view[data-view="appels"] { overflow: visible; }
  .ui-split { grid-template-columns: 1fr; }
  .ui-list { max-height: 420px; }
  .ui-chat { max-height: 340px; }
  .ui-table .col-opt { display: none; }
  .ui-panel { border-left: 0; border-top: 1px solid var(--w-line); }
  .ui-kpis { grid-template-columns: 1fr 1fr; }
  .ui-grid, .ui-form { grid-template-columns: 1fr; }
  .app-top .date, .ui-search { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Composants ajoutés pour les fenêtres 3.2 → 3.6
   ═══════════════════════════════════════════════════════════════════════ */

/* Variante de split : navigation à gauche, contenu à droite */
.ui-split.left-nav { grid-template-columns: 236px 1fr; }
.ui-split.left-nav > .ui-list { border-right: 1px solid var(--w-line); }
.ui-split.three { grid-template-columns: 236px 1fr 250px; }

/* Onglets internes */
.ui-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--w-line); padding: 0 6px; }
.ui-tabs button { padding: 9px 10px; font-size: 11.5px; letter-spacing: .02em; color: var(--ink-mute); border-bottom: 1px solid transparent; margin-bottom: -1px; transition: color .2s ease, border-color .2s ease; }
.ui-tabs button:hover { color: var(--ink); }
.ui-tabs button.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.ui-tabs button .n { font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); margin-left: 5px; }
.tab-pane { display: none; }
.tab-pane.is-active { display: block; }

/* Boutons d'action (aucune action réelle) */
.ui-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; letter-spacing: .03em; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--w-line); color: var(--ink); background: var(--w-panel); transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.ui-btn:hover { background: var(--w-panel-2); border-color: var(--w-line-2); }
.ui-btn.primary { background: var(--gold-bright, var(--gold)); border-color: var(--gold-bright, var(--gold)); color: var(--w-on-gold); font-weight: 500; }
.ui-btn.primary:hover { filter: brightness(1.06); }
.ui-btn.ghost { background: none; }
.ui-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-actions { display: flex; gap: 8px; align-items: center; }

/* Champ de saisie */
.ui-input { display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 38px; border-radius: 9px; border: 1px solid rgba(245,200,66,.22); background: var(--w-sunk); }
.ui-input svg { width: 14px; height: 14px; stroke: var(--ink-dim); fill: none; stroke-width: 1.7; flex: none; }
.ui-input input { flex: 1; min-width: 0; background: none; border: 0; color: var(--ink); font: inherit; font-size: 12.5px; outline: none; }
.ui-input input::placeholder { color: var(--ink-dim); }
.ui-input .kbd { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-dim); border: 1px solid var(--w-line); border-radius: 4px; padding: 1px 5px; }

/* Frise (timeline) */
.ui-timeline { position: relative; padding: 14px 16px 14px 16px; display: flex; flex-direction: column; }
.ui-timeline::before { content: ""; position: absolute; left: 25px; top: 26px; bottom: 26px; width: 1px; background: var(--w-line); }
.ui-step { position: relative; display: grid; grid-template-columns: 18px 1fr; column-gap: 14px; padding: 7px 0; transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.ui-step.enter { opacity: 0; transform: translateY(8px); }
.ui-step .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--w-bg); border: 1px solid var(--w-line-2); display: grid; place-items: center; position: relative; z-index: 1; margin-top: 1px; }
.ui-step .dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-dim); }
.ui-step.ok .dot { border-color: rgba(95,211,154,.5); }   .ui-step.ok .dot::after { background: var(--w-ok); }
.ui-step.gold .dot { border-color: rgba(245,200,66,.55); } .ui-step.gold .dot::after { background: var(--gold); }
.ui-step.pending .dot { border-style: dashed; border-color: rgba(240,167,66,.55); } .ui-step.pending .dot::after { background: var(--w-warn); }
.ui-step .title { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12.5px; }
.ui-step .title .time { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); font-weight: 400; }
.ui-step .desc { color: var(--ink-mute); font-size: 11.5px; margin-top: 2px; }
.ui-step .preview { margin-top: 7px; padding: 8px 10px; border-radius: 8px; background: var(--w-sunk); border: 1px solid var(--w-line); font-size: 11.5px; line-height: 1.5; color: var(--ink-mute); }
.ui-step .preview b { color: var(--ink); font-weight: 500; }
.ui-auto { font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(245,200,66,.35); border-radius: 4px; padding: 1px 5px; }

/* Fiche contact / panneau de gauche */
.ui-contact { padding: 14px 16px; border-bottom: 1px solid var(--w-line); }
.ui-contact .name { font-size: 13px; font-weight: 500; }
.ui-contact .co { font-size: 11.5px; color: var(--ink-mute); }
.ui-contact .kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin-top: 10px; font-size: 11.5px; }
.ui-contact .kv .k { color: var(--ink-dim); }
.ui-contact .kv .v { font-family: var(--f-mono); font-size: 11px; color: var(--ink-mute); text-align: right; }
.ui-status { padding: 12px 16px; }
.ui-status .lbl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.ui-radio { display: flex; flex-direction: column; gap: 4px; }
.ui-radio button { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 12px; color: var(--ink-mute); border: 1px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.ui-radio button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--w-line-2); flex: none; }
.ui-radio button:hover { background: var(--w-hover); color: var(--ink); }
.ui-radio button.is-on { color: var(--ink); background: rgba(245,200,66,.06); border-color: rgba(245,200,66,.22); }
.ui-radio button.is-on::before { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 45%, transparent 50%); }
.ui-radio button .hint { margin-left: auto; font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-dim); }

/* Journal (log) */
.ui-log { padding: 12px 16px; font-family: var(--f-mono); font-size: 11px; line-height: 1.7; color: var(--ink-mute); }
.ui-log .l { display: grid; grid-template-columns: 52px 66px 1fr; gap: 12px; }
.ui-log .l .t { color: var(--ink-dim); }
.ui-log .l .lv { color: var(--w-ok); }
.ui-log .l .lv.warn { color: var(--w-warn); }
.ui-log .l .lv.info { color: var(--w-info); }

/* Carte (fond quadrillé, aucune tuile réelle) */
.ui-map { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--w-line); background-color: var(--w-map);
  background-image: linear-gradient(var(--w-line) 1px, transparent 1px), linear-gradient(90deg, var(--w-line) 1px, transparent 1px);
  background-size: 22px 22px; }
.ui-map .street { position: absolute; height: 3px; border-radius: 2px; background: var(--w-line); transform-origin: 0 50%; }
.ui-map .street.main { height: 5px; background: var(--w-line-2); }
.ui-map .ui-block { position: absolute; border-radius: 3px; background: var(--w-panel); }
.ui-map .pin { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--w-map); background: var(--w-info); transform: translate(-50%, -50%); transition: transform .25s cubic-bezier(.2,.7,.2,1); cursor: pointer; padding: 0; }
.ui-map .pin.e { background: var(--w-warn); }
.ui-map .pin.f { background: #e8703a; }
.ui-map .pin.g { background: #e25c5c; }
.ui-map .pin.is-active { background: var(--gold); transform: translate(-50%, -50%) scale(1.45); z-index: 2; }
.ui-map .pin.is-active::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(245,200,66,.6); opacity: .7; }
.ui-map .legend { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--w-float); border: 1px solid var(--w-line); font-size: 10px; color: var(--ink-mute); }
.ui-map .legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; vertical-align: 0; }
.ui-map .radius { position: absolute; width: 160px; height: 160px; border-radius: 50%; border: 1px dashed rgba(245,200,66,.3); background: rgba(245,200,66,.04); transform: translate(-50%, -50%); pointer-events: none; }
.ui-map .card { position: absolute; width: 190px; padding: 9px 11px; border-radius: 8px; background: var(--w-float); border: 1px solid rgba(245,200,66,.3); font-size: 11.5px; box-shadow: 0 10px 30px rgba(13,14,26,.25); opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.ui-map .card.in { opacity: 1; transform: none; }
.ui-map .card b { display: block; font-weight: 500; }
.ui-map .card .mono { color: var(--ink-mute); }

/* Étiquette DPE */
.ui-dpe { display: flex; gap: 3px; }
.ui-dpe span { flex: 1; height: 20px; border-radius: 3px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); background: var(--w-panel-2); border: 1px solid transparent; }
.ui-dpe span.is-on { color: var(--w-on-gold); font-weight: 500; transform: scale(1.12); }
.ui-dpe span.is-on[data-l="A"] { background: #2e9e5b; } .ui-dpe span.is-on[data-l="B"] { background: #4db35a; } .ui-dpe span.is-on[data-l="C"] { background: #a4c73b; }
.ui-dpe span.is-on[data-l="D"] { background: #f1d34a; } .ui-dpe span.is-on[data-l="E"] { background: #f0a742; } .ui-dpe span.is-on[data-l="F"] { background: #e8703a; } .ui-dpe span.is-on[data-l="G"] { background: #e25c5c; }
.ui-dpe-chip { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--w-on-gold); }
.ui-dpe-chip[data-l="D"] { background: #f1d34a; } .ui-dpe-chip[data-l="E"] { background: #f0a742; } .ui-dpe-chip[data-l="F"] { background: #e8703a; } .ui-dpe-chip[data-l="G"] { background: #e25c5c; } .ui-dpe-chip[data-l="C"] { background: #a4c73b; }

/* Estimation */
.ui-estim { display: flex; align-items: baseline; gap: 10px; }
.ui-estim .range { font-family: var(--f-mono); font-size: 18px; font-weight: 500; color: var(--gold); letter-spacing: -.01em; }
.ui-estim .ui-sub { font-size: 11px; color: var(--ink-dim); }
.ui-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 11.5px; }
.ui-kv div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--w-line); }
.ui-kv .k { color: var(--ink-dim); } .ui-kv .v { font-family: var(--f-mono); font-size: 11px; color: var(--ink); }

/* Assistant documentaire */
.ui-answer { padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(245,200,66,.2); background: rgba(245,200,66,.04); font-size: 12.5px; line-height: 1.55; }
.ui-answer .cap { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.ui-answer .cap .mono { color: var(--ink-dim); margin-left: auto; letter-spacing: 0; text-transform: none; }
.ui-hl { background: rgba(245,200,66,.18); color: var(--ink); border-radius: 2px; padding: 0 2px; }
.ui-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-doc { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--w-line); background: var(--w-panel); font-size: 11.5px; min-width: 0; }
.ui-doc .file { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-doc .file svg { width: 13px; height: 13px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.ui-doc .page { font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); margin: 3px 0 6px; }
.ui-doc .ex { color: var(--ink-mute); font-style: italic; line-height: 1.45; }
.ui-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-fade { transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); }
.ui-fade.out { opacity: 0; transform: translateY(6px); }

/* Éditeur de brouillon */
.ui-editor { padding: 16px 18px; font-size: 12.5px; line-height: 1.65; color: var(--ink); }
.ui-editor p { margin: 0 0 10px; }
.ui-editor .subject { font-weight: 500; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--w-line); }
.ui-editor .subject small { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); margin-right: 10px; }
.ui-var { font-family: var(--f-mono); font-size: 11px; color: var(--gold); background: rgba(245,200,66,.12); border: 1px dashed rgba(245,200,66,.4); border-radius: 4px; padding: 0 4px; white-space: nowrap; }
.ui-toolbar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--w-line); font-size: 11px; color: var(--ink-dim); }
.ui-toolbar .grp { display: flex; align-items: center; gap: 6px; }
.ui-toolbar .grp .ui-chip { padding: 3px 9px; }
.ui-footbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--w-line); }
.ui-footbar .hint { font-size: 11px; color: var(--ink-dim); margin-right: auto; }

/* Toast */
.ui-toast { position: absolute; right: 16px; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; background: var(--w-float); border: 1px solid rgba(95,211,154,.4); font-size: 12px; box-shadow: 0 12px 30px rgba(13,14,26,.25); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.ui-toast.in { opacity: 1; transform: none; }

/* KPI variante compacte + en-tête de vue */
.ui-kpi .val.sm { font-size: 18px; }
.ui-viewhead { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; font-size: 11.5px; color: var(--ink-dim); }
.ui-viewhead .ui-chips { padding: 0; margin-left: auto; }
.ui-updated { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-dim); }

/* Kanban / pipeline */
.ui-pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 16px 16px; }
.ui-col { border: 1px solid var(--w-line); background: var(--w-panel); border-radius: 10px; padding: 10px; min-width: 0; }
.ui-col .head { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-mute); margin-bottom: 8px; }
.ui-col .head .n { font-family: var(--f-mono); color: var(--ink); }
.ui-col .item { padding: 7px 8px; border-radius: 7px; background: var(--w-sunk); border: 1px solid var(--w-line); font-size: 11.5px; margin-bottom: 6px; }
.ui-col .item b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-col .item span { color: var(--ink-dim); font-size: 10.5px; }

@container (max-width: 820px) {
  .ui-split.left-nav { grid-template-columns: 200px 1fr; }
  .ui-split.three { grid-template-columns: 200px 1fr; }
  .ui-split.three > :last-child { display: none; }
  .ui-pipe { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 640px) {
  .ui-split.left-nav, .ui-split.three { grid-template-columns: 1fr; }
  .ui-split.left-nav > .ui-list { border-right: 0; border-bottom: 1px solid var(--w-line); max-height: 260px; }
  .ui-docs { grid-template-columns: 1fr; }
  .ui-pipe { grid-template-columns: 1fr; }
}

/* Utilitaires de mise en page des vues */
.view.fill { overflow: hidden; }
.ui-side-col { border-right: 1px solid var(--w-line); overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.ui-side-col .ui-list { padding-top: 4px; }
.ui-scroll-y { overflow-y: auto; min-height: 0; }
.ui-col-flex { display: flex; flex-direction: column; min-height: 0; }
.ui-col-flex > .ui-editor { flex: 1; overflow-y: auto; min-height: 0; }
.app-window button:disabled { opacity: .55; cursor: default; }
@container (max-width: 640px) { .ui-side-col { border-right: 0; border-bottom: 1px solid var(--w-line); max-height: 360px; } }

/* Correctifs après première revue des 6 fenêtres (2026-09-09) */
.ui-split.left-nav .ui-row { grid-template-columns: 40px 1fr; row-gap: 5px; }
.ui-split.left-nav .ui-row .end { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; }
.ui-split.left-nav .ui-row .ui-dpe-chip { grid-row: 1 / span 2; align-self: start; }
.ui-estim .range { font-size: 16px; }
.ui-grid.fiche { grid-template-columns: 1fr 1fr; }
.ui-toolbar { flex-wrap: wrap; row-gap: 6px; }
.ui-editor .to { font-size: 11.5px; color: var(--ink-mute); margin-bottom: 8px; }
.ui-editor .to small { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); margin-right: 10px; }
.ui-editor .to b { color: var(--ink); font-weight: 500; }
@container (max-width: 820px) {
  .ui-split.left-nav { grid-template-columns: 236px 1fr; }
  .ui-split.three { grid-template-columns: 236px 1fr; }
  .ui-grid.fiche { grid-template-columns: 1fr; }
  .ui-kv { grid-template-columns: 1fr; }
}
@container (max-width: 640px) {
  .ui-split.left-nav, .ui-split.three { grid-template-columns: 1fr; }
  .ui-grid.fiche { grid-template-columns: 1fr; }
}
@container (max-width: 640px) {
  .ui-panel-head .row { flex-wrap: wrap; }
  .ui-footbar { flex-wrap: wrap; }
  .ui-footbar .hint { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Section « En situation » : fenêtre navigateur à 6 onglets + texte à gauche
   (mise en page retenue le 2026-09-09 : mélange hi-talents / plan-test 3.1)
   ═══════════════════════════════════════════════════════════════════════ */
.demos-layout { display: grid; grid-template-columns: minmax(260px, 300px) 1fr; gap: 48px; align-items: start; margin-top: 64px; }
.demos-text { display: grid; }
.demo-text { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); visibility: hidden; pointer-events: none; transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s .35s; }
.demo-text.is-current { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.demo-text .section-title { font-size: clamp(30px, 2.6vw, 40px); max-width: 16ch; margin-top: 18px; }
.demo-text .sol-ba { margin-top: 26px; gap: 12px; }
.demo-text .sol-ba li { font-size: 14.5px; }
.demo-text .sol-figure { margin-top: 26px; padding-top: 18px; }
.demo-text .sol-figure .n { font-size: 44px; }
.demo-text .sol-cta { margin-top: 26px; }
.demos-browser { position: relative; min-width: 0; }
.demos-browser::before { content: ""; position: absolute; inset: 10% -6% -12% -6%; background: radial-gradient(ellipse at 50% 60%, rgba(245,200,66,.09), transparent 62%); pointer-events: none; }

.browser {
  position: relative; container-type: inline-size;
  background: var(--w-bg); border: 1px solid var(--w-border); border-radius: 16px;
  box-shadow: var(--w-shadow); overflow: hidden;
  font-family: var(--f-body); font-weight: 400; font-size: 12.5px; color: var(--ink);
}
.browser * { box-sizing: border-box; }
.browser-tabs { display: flex; align-items: flex-end; gap: 3px; padding: 10px 12px 0; background: var(--w-chrome); border-bottom: 1px solid var(--w-line); overflow-x: auto; scrollbar-width: none; }
.browser-tabs::-webkit-scrollbar { display: none; }
.browser-tabs .app-dots { flex: none; margin: 0 10px 13px 2px; }
.browser-tab {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px 10px 0 0; border: 1px solid transparent; border-bottom: 0;
  font: inherit; font-size: 11.5px; letter-spacing: .02em; color: var(--ink-mute); background: none; cursor: pointer;
  white-space: nowrap; transition: color .2s ease, background .2s ease;
}
.browser-tab span { overflow: hidden; text-overflow: ellipsis; }
.browser-tab svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.browser-tab:hover { color: var(--ink); background: var(--w-hover); }
.browser-tab.is-active { color: var(--ink); background: var(--w-bg); border-color: var(--w-line); position: relative; top: 1px; }
.browser-tab.is-active svg { stroke: var(--gold); }
.browser-tab:focus-visible { outline: 1px solid rgba(245,200,66,.6); outline-offset: -3px; }
.browser-url { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--w-line); }
.browser-url .ui-nav { display: flex; gap: 4px; color: var(--ink-dim); }
.browser-url .ui-nav svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.browser-url .addr { flex: 1; min-width: 0; height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 7px; background: var(--w-sunk); border: 1px solid var(--w-line); font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; }
.browser-url .addr svg { width: 11px; height: 11px; flex: none; stroke: var(--w-ok); fill: none; stroke-width: 1.8; }
.browser-url .addr b { color: var(--ink-mute); font-weight: 400; }
.browser-url .app-badge { margin-left: 0; }
.browser-url .url-live { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.browser-pages { position: relative; }
.browser-pages .app-window { display: none; border: 0; border-radius: 0; box-shadow: none; container-type: inline-size; }
.browser-pages .app-window.is-current { display: block; }
.browser-pages .app-window .app-bar { display: none; }

@media (max-width: 1100px) {
  .demos-layout { grid-template-columns: 1fr; gap: 36px; }
  .demo-text .section-title { max-width: 22ch; }
}
@media (max-width: 560px) {
  .browser-tab { flex: none; padding: 9px 12px; }
  .browser-url .ui-nav { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Affinage 2026-09-10 : sous-vues (retour), aération, retours à la ligne
   ═══════════════════════════════════════════════════════════════════════ */
.ui-back { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-mute); padding: 4px 9px 4px 5px; border-radius: 6px; margin-right: 2px; white-space: nowrap; }
.ui-back::before { content: "‹"; font-size: 17px; line-height: 1; margin-top: -2px; }
.ui-back:hover { color: var(--ink); background: var(--w-hover); }
.ui-back[hidden] { display: none; }
.app-top { min-height: 48px; padding: 10px 20px; }
.app-side { padding: 18px 12px; }
.side-nav button { padding: 9px 12px; }

.ui-detail-head { padding: 18px 20px 16px; border-bottom: 1px solid var(--w-line); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ui-detail-head h4 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .01em; }
.ui-detail-head .meta { font-size: 11.5px; color: var(--ink-dim); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ui-detail-head .meta .mono { color: var(--ink-mute); }
.ui-detail-head .ui-actions { flex-wrap: wrap; }
.ui-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; padding: 16px 20px 18px; min-height: 0; }
.ui-cols > * { min-width: 0; }
.ui-cols .ui-chat { padding: 0; -webkit-mask-image: none; mask-image: none; overflow: visible; }
.ui-cols .ui-banner { margin: 0 0 10px; }

.ui-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 20px 0; }
.ui-fact { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--w-line); background: var(--w-panel); min-width: 0; }
.ui-fact .lbl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
.ui-fact .val { margin-top: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.ui-fact .val.mono { font-family: var(--f-mono); font-size: 14px; letter-spacing: -.01em; color: var(--gold); }

.ui-status .note { font-size: 11px; color: var(--ink-dim); margin-top: 10px; }
.ui-radio.row { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.ui-radio.row button { padding: 6px 12px 6px 10px; border-radius: 999px; border: 1px solid var(--w-line); }
.ui-radio.row button .hint { display: none; }

.ui-seq { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 18px; }
.ui-seq .row { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--w-line); background: var(--w-panel); }
.ui-seq .row b { font-weight: 500; display: block; }
.ui-seq .row .ui-sub { font-size: 11.5px; color: var(--ink-dim); margin-top: 2px; }
.ui-seq .row .n { font-family: var(--f-mono); font-size: 11px; color: var(--ink-mute); white-space: nowrap; }

.ui-list { padding: 10px 12px 14px; gap: 4px; }
.ui-row { padding: 12px 12px; column-gap: 14px; }
.ui-row .who .ui-sub { margin-top: 1px; }
.ui-table td { padding: 11px 12px; }
.ui-table th { padding: 8px 12px; }
.ui-form { padding: 16px 20px 18px; gap: 12px; }
.ui-kpis { padding: 16px 20px 0; }
.ui-grid { padding: 12px 20px 18px; }
.ui-log { padding: 16px 20px; }

/* Retours à la ligne maîtrisés */
.ui-field .v, .ui-kv .v, .ui-kpi .delta, .ui-table .mono, .ui-row .t, .ui-seq .row .n, .ui-fact .val, .ui-badge { white-space: nowrap; }
.ui-kpi .delta, .ui-kpi .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-field .k { text-wrap: pretty; }
.ui-table td:not(.mono) { text-wrap: pretty; }
.msg, .ui-answer, .ui-doc .ex, .ui-step .desc, .ui-step .preview, .ui-editor p { text-wrap: pretty; }
.section-demos .section-title, .demo-text .section-title, .ui-detail-head h4 { text-wrap: balance; }
.sol-ba li span:last-child, .section-demos .lede, .sol-figure .c { text-wrap: pretty; }
.sol-cta { white-space: nowrap; }
.demo-text .sol-figure { flex-direction: column; gap: 8px; }
.demo-text .sol-figure .c { max-width: 30ch; }
.demo-text .sol-ba li { grid-template-columns: 56px 1fr; }

@container (max-width: 820px) { .ui-cols { grid-template-columns: 1fr; } }
@container (max-width: 640px) { .ui-facts { grid-template-columns: 1fr; } .ui-seq .row { grid-template-columns: 1fr auto; } .ui-seq .row .n { display: none; } }
/* Rail : libellés sur une ligne */
.app-body { grid-template-columns: 190px 1fr; }
.app-side .side-brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; letter-spacing: .12em; }
.app-side .side-brand span { overflow: hidden; text-overflow: ellipsis; }
.side-nav button span:not(.count) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.side-nav button { min-width: 0; }
@container (max-width: 820px) { .app-body { grid-template-columns: 52px 1fr; } }
@container (max-width: 640px) { .app-body { height: auto; } }

/* ═══════════════════════════════════════════════════════════════════════
   Itération 2026-09-10 (soir) : liens, groupes de menu, boutons, table Airtable,
   carte zoomable + volet, sparklines, entonnoir, anneau, échelle R0–R12, conversation
   ═══════════════════════════════════════════════════════════════════════ */
[data-open] { cursor: pointer; }
a[data-open], .ui-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--w-line-2); transition: border-color .2s ease, color .2s ease; }
a[data-open]:hover, .ui-link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.side-group { font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); padding: 12px 12px 4px; }
.side-nav button.sep { margin-top: 6px; }
.ui-btn { padding: 9px 16px; min-height: 34px; border-radius: 8px; }
.ui-btn.sm { padding: 6px 11px; min-height: 28px; font-size: 11px; }
.ui-footbar { padding: 12px 20px; gap: 10px; }
.app-top .js-top-extra[hidden] { display: none; }

/* Table façon Airtable */
.ui-viewbar { display: flex; align-items: center; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--w-line); flex-wrap: wrap; }
.ui-viewbar .views { display: flex; gap: 2px; margin-right: 8px; }
.ui-viewbar .views button { padding: 5px 10px; border-radius: 6px; font-size: 11.5px; color: var(--ink-mute); display: inline-flex; gap: 6px; align-items: center; }
.ui-viewbar .views button svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ui-viewbar .views button.is-active { background: rgba(245,200,66,.1); color: var(--ink); }
.ui-viewbar .tool { padding: 5px 9px; border-radius: 6px; font-size: 11px; color: var(--ink-dim); display: inline-flex; gap: 6px; align-items: center; }
.ui-viewbar .tool svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.ui-viewbar .tool:hover { color: var(--ink); background: var(--w-hover); }
.ui-viewbar .cnt { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); }
.ui-sheet-wrap { overflow: auto; flex: 1; min-height: 0; }
.ui-sheet { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 1180px; width: max-content; }
.ui-sheet th, .ui-sheet td { border-right: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); padding: 0 10px; height: 38px; white-space: nowrap; text-align: left; vertical-align: middle; }
.ui-sheet th { position: sticky; top: 0; z-index: 2; background: var(--w-bg); font-weight: 400; font-size: 11px; color: var(--ink-mute); }
.ui-sheet th .h { display: flex; align-items: center; gap: 7px; }
.ui-sheet th svg { width: 12px; height: 12px; stroke: var(--ink-dim); fill: none; stroke-width: 1.7; flex: none; }
.ui-sheet th.idx, .ui-sheet td.idx { width: 44px; min-width: 44px; text-align: center; color: var(--ink-dim); font-family: var(--f-mono); font-size: 10px; position: sticky; left: 0; z-index: 1; background: var(--w-bg); }
.ui-sheet th.idx { z-index: 3; }
.ui-sheet th.primary, .ui-sheet td.primary { position: sticky; left: 44px; z-index: 1; background: var(--w-bg); min-width: 210px; font-weight: 500; box-shadow: 1px 0 0 var(--w-line); }
.ui-sheet th.primary { z-index: 3; }
.ui-sheet tbody tr { cursor: pointer; }
.ui-sheet tbody tr:hover td { background: var(--w-hover); }
.ui-sheet tbody tr.is-selected td { background: rgba(245,200,66,.07); }
.ui-sheet td .chk { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--w-line-2); display: inline-block; vertical-align: middle; }
.ui-sheet tr.is-selected td .chk { background: var(--gold); border-color: var(--gold); }
/* colonnes figées : fond opaque même en survol / sélection, sinon les cellules défilées transparaissent */
.ui-sheet tbody tr:hover td.idx, .ui-sheet tbody tr:hover td.primary { background: linear-gradient(var(--w-hover), var(--w-hover)) var(--w-bg); }
.ui-sheet tbody tr.is-selected td.idx, .ui-sheet tbody tr.is-selected td.primary { background: linear-gradient(rgba(245,200,66,.07), rgba(245,200,66,.07)) var(--w-bg); }
.ui-sheet td.num { font-family: var(--f-mono); font-size: 11.5px; text-align: right; }
.ui-sheet td .sel { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 11px; background: var(--w-panel-2); color: var(--ink); }
.ui-sheet td .sel.ok { background: rgba(95,211,154,.14); color: var(--w-ok); } .ui-sheet td .sel.warn { background: rgba(240,167,66,.16); color: var(--w-warn); } .ui-sheet td .sel.info { background: rgba(122,162,247,.16); color: var(--w-info); } .ui-sheet td .sel.gold { background: rgba(245,200,66,.16); color: var(--gold); }
.ui-sheet td .who { display: inline-flex; align-items: center; gap: 7px; }
.ui-sheet td .who i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-family: var(--f-mono); font-size: 9px; color: var(--gold); background: rgba(245,200,66,.12); border: 1px solid rgba(245,200,66,.3); font-style: normal; }
.ui-sheet tfoot td { color: var(--ink-dim); font-size: 11px; border-right: 0; }
.ui-sheet .ui-dpe-chip { width: 20px; height: 20px; font-size: 10px; }

/* Carte v2 : calque zoomable + contrôles + volet */
.ui-mapwrap { display: grid; grid-template-columns: 1fr 272px; gap: 0; flex: 1; min-height: 0; }
.ui-mapwrap .ui-map { border-radius: 0; border: 0; border-right: 1px solid var(--w-line); }
.ui-map .layer { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.ui-map.dragging .layer { transition: none; }
.ui-map .pin { transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s ease; }
.ui-map .pin.dim { opacity: .25; }
.ui-map .lbl { position: absolute; transform: translate(-50%, 10px); font-size: 9.5px; color: var(--ink-mute); white-space: nowrap; pointer-events: none; background: var(--w-float); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--w-line); }
.ui-map-ctl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.ui-map-ctl button { width: 28px; height: 28px; border-radius: 7px; background: var(--w-float); border: 1px solid var(--w-line-2); color: var(--ink); font-size: 15px; display: grid; place-items: center; }
.ui-map-ctl button:hover { border-color: var(--gold); color: var(--gold); }
.ui-map-filters { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; gap: 4px; }
.ui-map-filters .ui-chip { background: var(--w-float); }
.ui-map-filters .ui-chip i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; }
.ui-map .scale { position: absolute; right: 12px; bottom: 10px; font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-dim); border-bottom: 2px solid var(--ink-dim); padding: 0 6px 2px; }
.ui-map-drawer { display: flex; flex-direction: column; min-height: 0; }
.ui-map-drawer .head { padding: 12px 14px; border-bottom: 1px solid var(--w-line); font-size: 11.5px; color: var(--ink-mute); display: flex; justify-content: space-between; }
.ui-map-drawer .ui-list { overflow-y: auto; flex: 1; padding: 6px; }
.ui-map-drawer .detail { border-top: 1px solid var(--w-line); padding: 14px; }
.ui-map-drawer .detail b { display: block; font-weight: 500; font-size: 13px; }
.ui-map-drawer .detail .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 8px 0 12px; font-size: 11.5px; }
.ui-map-drawer .detail .kv .k { color: var(--ink-dim); } .ui-map-drawer .detail .kv .v { font-family: var(--f-mono); font-size: 11px; text-align: right; }

/* Sparkline dans les tuiles KPI */
.ui-kpi { position: relative; }
.ui-kpi .ui-spark { position: absolute; right: 12px; top: 12px; width: 78px; height: 24px; }
.ui-kpi .ui-spark path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; opacity: .8; }
.ui-kpis.four { grid-template-columns: repeat(4, 1fr); }

/* Entonnoir */
.ui-funnel { display: flex; flex-direction: column; gap: 7px; }
.ui-funnel .fr { display: grid; grid-template-columns: 96px 1fr 36px 44px; align-items: center; gap: 10px; font-size: 11.5px; }
.ui-funnel .lbl { color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-funnel .track { height: 16px; border-radius: 4px; background: var(--w-track); overflow: hidden; }
.ui-funnel .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(214,173,58,.75), var(--gold)); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ui-funnel .v { text-align: right; font-size: 11px; }
.ui-funnel .pct { font-family: var(--f-mono); font-size: 10px; color: var(--ink-dim); text-align: right; }

/* Anneau */
.ui-donut { display: flex; align-items: center; gap: 18px; }
.ui-donut svg text { fill: var(--ink); text-anchor: middle; font-family: var(--f-mono); }
.ui-donut svg .big { font-size: 20px; font-weight: 500; } .ui-donut svg .small { font-size: 10px; fill: var(--ink-dim); }
.ui-donut ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 11.5px; color: var(--ink-mute); }
.ui-donut li { display: flex; align-items: center; gap: 8px; } .ui-donut li i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .ui-donut li b { margin-left: auto; font-weight: 400; color: var(--ink); padding-left: 12px; }

/* Barres verticales (SVG) */
.ui-vbars { width: 100%; height: auto; display: block; }
.ui-vbars rect { fill: var(--gold); opacity: .85; } .ui-vbars rect.alt { fill: var(--w-info); opacity: .7; }
.ui-vbars text { font-family: var(--f-mono); font-size: 11px; fill: var(--ink-dim); text-anchor: middle; }
.ui-vbars text.val { font-size: 10.5px; fill: var(--ink); }
.ui-vbars line { stroke: var(--w-line); }

/* Échelle de relance R0 – R12 */
.ui-stage { display: flex; gap: 3px; align-items: center; }
.ui-stage span { flex: 1; height: 8px; border-radius: 3px; background: var(--w-track); position: relative; }
.ui-stage span.done { background: var(--gold-soft); } .ui-stage span.cur { background: var(--gold); box-shadow: 0 0 0 2px rgba(245,200,66,.25); }
.ui-stage span.cur::after { content: attr(data-l); position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 9.5px; color: var(--gold); }
.ui-stage-lbl { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 9px; color: var(--ink-dim); margin-top: 18px; }
.ui-rchip { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 5px; font-family: var(--f-mono); font-size: 10px; color: var(--gold); background: rgba(245,200,66,.12); border: 1px solid rgba(245,200,66,.3); }

/* Conversation (assistant) */
.ui-convo { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 12px; overflow-y: auto; flex: 1; min-height: 0; }
.ui-convo .msg { max-width: 78%; font-size: 12.5px; opacity: 1; transform: none; }
.ui-convo .msg.user { align-self: flex-end; background: var(--w-panel-2); border: 1px solid var(--w-line); border-bottom-right-radius: 3px; }
.ui-convo .msg.bot { align-self: flex-start; background: rgba(245,200,66,.06); border: 1px solid rgba(245,200,66,.2); border-bottom-left-radius: 3px; max-width: 88%; }
.ui-convo .msg.enter { opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.ui-convo .msg .who { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 3px; }
.ui-convo .msg.bot .who { color: var(--gold-soft); }
.ui-convo .msg .ui-docs { margin-top: 10px; }
.ui-convo .msg .ui-doc { background: var(--w-bg); }
.ui-attach { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 7px; border: 1px dashed var(--w-line-2); font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-mute); background: var(--w-sunk); }
.ui-attach svg { width: 12px; height: 12px; stroke: var(--gold); fill: none; stroke-width: 1.7; }
.ui-verified { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--w-line); font-size: 10.5px; color: var(--ink-dim); }
.ui-verified .ui-check { width: 12px; height: 12px; }
.ui-composer { display: flex; align-items: center; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--w-line); }
.ui-composer .ui-input { flex: 1; }
.ui-composer .caret { display: inline-block; width: 1px; height: 14px; background: var(--ink); margin-left: 1px; vertical-align: -2px; animation: ui-caret 1s steps(2) infinite; }
@keyframes ui-caret { to { opacity: 0; } }
.ui-composer.idle .caret { animation: none; opacity: 0; }

/* Visionneuse de document */
.ui-paper { margin: 16px 20px 20px; padding: 26px 30px; border-radius: 6px; background: #fff; color: #1a1a1a; font-family: Georgia, serif; font-size: 12px; line-height: 1.6; box-shadow: 0 10px 30px rgba(13,14,26,.25); max-width: 640px; }
.ui-paper h5 { margin: 0 0 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #666; font-family: var(--f-mono); }
.ui-paper p { margin: 0 0 10px; }
.ui-paper mark { background: rgba(245,200,66,.45); color: inherit; padding: 0 2px; }
.ui-paper .pg { margin-top: 16px; font-family: var(--f-mono); font-size: 10px; color: #888; text-align: right; }

@container (max-width: 820px) { .ui-mapwrap { grid-template-columns: 1fr; } .ui-map-drawer { border-top: 1px solid var(--w-line); max-height: 260px; } .ui-kpis.four { grid-template-columns: 1fr 1fr; } }
@container (max-width: 640px) { .ui-funnel .fr { grid-template-columns: 70px 1fr 36px; } .ui-funnel .pct { display: none; } .ui-donut { flex-direction: column; align-items: flex-start; } }
.ui-mapwrap .ui-map { min-height: 340px; }
@container (max-width: 820px) { .ui-mapwrap .ui-map { min-height: 300px; border-right: 0; } }

.ui-kpi .lbl { padding-right: 84px; }
.ui-kpi .ui-spark { top: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   3.7 Chatbot web : site du client en fond, widget de conversation par-dessus
   (⚠️ overrides 820 / 640 px en fin de bloc, cf. ordre des @container)
   ═══════════════════════════════════════════════════════════════════════ */
.ui-sitewrap { position: relative; flex: 1; min-height: 0; overflow: hidden; margin-top: 12px; border-top: 1px solid var(--w-line); }
.ui-site { position: absolute; inset: 0; overflow: hidden; background: var(--w-sunk); }
.ui-site .ui-nav { display: flex; align-items: center; gap: 18px; padding: 12px 22px; border-bottom: 1px solid var(--w-line); background: var(--w-bg); font-size: 11px; color: var(--ink-mute); white-space: nowrap; }
.ui-site .ui-nav .logo { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em; color: var(--ink); margin-right: 8px; }
.ui-site .ui-nav .logo i { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, rgba(245,200,66,.9), rgba(214,173,58,.6)); }
.ui-site .ui-nav .ui-cta { margin-left: auto; padding: 5px 10px; border-radius: 6px; background: var(--gold); color: var(--w-on-gold); font-size: 10.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 14px; letter-spacing: .28em; text-transform: uppercase; border: 1px solid rgba(196,154,31,.35); }
.ui-site .url { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-dim); padding: 6px 22px 0; }
.ui-site .ui-hero { padding: 18px 22px 16px; max-width: 460px; }
.ui-site .ui-hero h4 { margin: 0 0 8px; font-family: var(--f-display); font-size: 26px; font-weight: 500; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.ui-site .ui-hero h4 em { font-style: italic; color: var(--gold); }
.ui-site .ui-hero p { margin: 0 0 12px; font-size: 11.5px; color: var(--ink-mute); max-width: 40ch; text-wrap: pretty; }
.ui-site .ui-hero .btn { display: inline-block; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--gold); color: var(--gold); font-size: 11px; }
.ui-site .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 22px 0; max-width: 560px; }
.ui-site .cards div { border-radius: 8px; border: 1px solid var(--w-line); background: var(--w-panel); padding: 10px 11px; font-size: 10.5px; color: var(--ink-dim); line-height: 1.4; text-wrap: pretty; }
.ui-site .cards div b { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-mute); margin-bottom: 3px; }
.ui-site .ph { height: 8px; border-radius: 4px; background: var(--w-track); margin: 12px 22px 0; }
.ui-widget { position: absolute; right: 18px; bottom: 18px; width: 300px; height: 410px; max-height: calc(100% - 36px); display: flex; flex-direction: column; border-radius: 14px; background: var(--w-float); border: 1px solid var(--w-line-2); box-shadow: 0 24px 60px rgba(13,14,26,.28); overflow: hidden; }
.ui-widget .wh { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--w-line); background: rgba(245,200,66,.06); }
.ui-widget .wh .av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--gold); color: var(--w-on-gold); font-family: var(--f-mono); font-size: 10px; font-weight: 500; }
.ui-widget .wh > div { flex: 1; min-width: 0; }
.ui-widget .wh b { display: block; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-widget .wh small { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-dim); white-space: nowrap; }
.ui-widget .wh .js-outcome { margin-left: auto; flex: none; }
.ui-widget .wh .x { color: var(--ink-dim); font-size: 15px; margin-left: 6px; }
.ui-widget .wh .js-outcome:empty + .x { margin-left: auto; }
.ui-widget .wm { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; }
.ui-widget .msg { max-width: 88%; font-size: 11.5px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
.ui-widget .msg.bot { align-self: flex-start; background: var(--w-panel-2); border: 1px solid var(--w-line); border-bottom-left-radius: 3px; color: var(--ink); }
.ui-widget .msg.user { align-self: flex-end; background: var(--gold); color: var(--w-on-gold); border-bottom-right-radius: 3px; }
.ui-widget .msg.typing-wrap { padding: 2px 10px; }
.ui-widget .msg.enter, .ui-widget .quick.enter, .ui-widget .sys.enter { opacity: 0; transform: translateY(6px); }
.ui-widget .msg .src { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--w-line); font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-widget .msg .src svg { width: 11px; height: 11px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.6; }
.ui-widget .quick { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 94%; transition: opacity .3s ease, transform .3s ease; }
.ui-widget .quick button { font: inherit; font-size: 11px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(245,200,66,.5); color: var(--gold); background: none; cursor: default; transition: background .2s ease, color .2s ease; }
.ui-widget .quick button.is-picked { background: var(--gold); color: var(--w-on-gold); }
.ui-widget .sys { align-self: center; text-align: center; font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-dim); padding: 4px 8px; transition: opacity .3s ease, transform .3s ease; text-wrap: balance; }
.ui-widget .wc { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; border-top: 1px solid var(--w-line); }
.ui-widget .wc .in { flex: 1; min-width: 0; height: 32px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; border: 1px solid var(--w-line); background: var(--w-sunk); font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.ui-widget .wc .in .js-win { flex: 1; min-width: 0; overflow: hidden; }
.ui-widget .wc .in .js-win.idle:empty::before { content: "Écrivez votre message…"; color: var(--ink-dim); }
.ui-widget .wc .caret { display: inline-block; width: 1px; height: 13px; background: var(--ink); margin-left: 1px; animation: ui-caret 1s steps(2) infinite; }
.ui-widget .wc .in:has(.idle) .caret { animation: none; opacity: 0; }
.ui-widget .wc .send { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--gold); color: var(--w-on-gold); }
.ui-widget .wc .send svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-widget .wf { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); padding: 0 0 7px; }
.apolyte-mark { width: 14px; height: 12px; color: var(--gold); flex: none; }
.view[data-view="site"] .ui-viewhead { padding-bottom: 0; }
.view[data-view="site"] .ui-viewhead .ui-chips { margin-left: 10px; }
@container (max-width: 820px) {
  .ui-site .cards { grid-template-columns: 1fr 1fr; }
  .ui-site .cards div:nth-child(3), .ui-site .ui-nav span:not(.logo):not(.ui-cta) { display: none; }
  .ui-widget { width: 270px; height: 380px; }
}
@container (max-width: 640px) {
  .ui-sitewrap { overflow: visible; }
  .ui-site { position: static; height: 250px; }
  .ui-widget { position: static; width: auto; height: 400px; max-height: none; margin: 12px 12px 14px; }
}

/* ── « Ajouter une source » (corpus, base de connaissances, documents d'un bien) ── */
.ui-addsrc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px 20px 0; }
.ui-addsrc[hidden] { display: none; }
.ui-addsrc .opt { display: grid; gap: 3px; justify-items: start; text-align: left; padding: 11px 12px; border-radius: 9px; border: 1px dashed var(--w-line-2); background: var(--w-panel); font: inherit; font-size: 10.5px; color: var(--ink-dim); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.ui-addsrc .opt:hover { border-style: solid; border-color: var(--gold); background: var(--w-panel-2); }
.ui-addsrc .opt svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 3px; }
.ui-addsrc .opt b { font-size: 12px; font-weight: 500; color: var(--ink); }
.ui-seq .row { transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.ui-seq .row.enter, .ui-table tr.enter { opacity: 0; transform: translateY(-6px); }
.ui-table tr { transition: opacity .35s ease, transform .35s ease; }
.ui-seq .row .prog { height: 3px; border-radius: 2px; background: var(--w-track); margin-top: 8px; max-width: 260px; overflow: hidden; }
.ui-seq .row .prog i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--gold); transition: width .8s cubic-bezier(.2,.7,.2,1); }
.ui-kv.one { grid-template-columns: 1fr; }
.ui-widget .wh .ui-badge { font-size: 9px; padding: 2px 7px; }
.ui-widget .wh .js-outcome:not(:empty) + .x { display: none; }
@container (max-width: 640px) { .ui-addsrc { grid-template-columns: 1fr 1fr; padding: 12px 12px 0; } }

/* ── Équipe & accès : avatar, nom, rôle sous le nom (plus de repli du nom) ── */
.ui-field .k.team { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; align-items: center; min-width: 0; }
.ui-field .k.team .avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-family: var(--f-mono); font-size: 9.5px; color: var(--gold); background: rgba(245,200,66,.1); border: 1px solid rgba(245,200,66,.25); }
.ui-field .k.team .nm { display: block; color: var(--ink); white-space: nowrap; }
.ui-field .k.team small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Logo Apolyte : marque de la fenêtre (haut gauche) et barre d'adresse ── */
.app-side .side-brand .apolyte-mark { width: 24px; height: 21px; flex: none; }
.browser-url .addr .apolyte-mark { width: 13px; height: 11px; flex: none; }
/* ── Mode rail : les intitulés de groupe (Rédaction · Bibliothèque · Réglages) deviennent un simple filet ── */
@container (max-width: 820px) {
  .side-group { font-size: 0; padding: 6px 0 4px; }
  .side-group::after { content: ""; display: block; height: 1px; margin: 0 12px; background: var(--w-line); }
}

/* ── Note « Démonstration interactive » : légende centrée au-dessus de la fenêtre (réf. Hi-Talents « Un aperçu de la plateforme en action ») ── */
.demos-browser { position: relative; }
.try-hint { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; margin: 0 0 10px; pointer-events: none; font-family: var(--f-body); font-size: 13px; font-weight: 400; letter-spacing: .02em; color: var(--ink-mute); }
.try-hint span { position: relative; white-space: nowrap; }
.try-hint svg { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ── Recette 2026-09-11 : KPI qui ne débordent plus (colonnes minmax(0,1fr)), journal, sparkline plus courte à 4 colonnes ── */
.ui-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-kpi { min-width: 0; }
.ui-kpis.four .ui-kpi .ui-spark { width: 58px; }
.ui-kpis.four .ui-kpi .lbl { padding-right: 64px; }
.ui-log .l { grid-template-columns: 64px 66px 1fr; }
@container (max-width: 640px) { .ui-kpis, .ui-kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Recette : libellés KPI sur deux lignes à 4 colonnes (plus de troncature), CTA du faux site, valeurs de champ en mobile ── */
.ui-kpis.four .ui-kpi .lbl { white-space: normal; text-overflow: clip; line-height: 1.25; min-height: 2.5em; }
.ui-site .ui-nav .ui-cta { flex: none; }
@container (max-width: 640px) {
  .ui-site .ui-nav .ui-cta { display: none; }
  .ui-field .v { white-space: normal; text-align: right; }
}

/* ── Recette mobile : composeur rétractable, onglets de fiche défilants, chips sur une ligne, noms avec avatar insécables ── */
.ui-composer .ui-input { min-width: 0; }
.ui-tabs { overflow-x: auto; scrollbar-width: none; }
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tabs button { flex: none; white-space: nowrap; }
.ui-chip, .ui-viewbar .views button { white-space: nowrap; }
.ui-chips { flex-wrap: wrap; }
.ui-table td:has(.avatar) { white-space: nowrap; }
@container (max-width: 640px) { .view[data-view="site"] .ui-viewhead { flex-wrap: wrap; row-gap: 6px; } .view[data-view="site"] .ui-viewhead .ui-chips { margin-left: 0; width: 100%; } }

/* ── Rédaction : vue « Suivi » empilée (à valider · envoyés · programmés) et choix ton / longueur en bas de l'éditeur ── */
.ui-stack { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 16px; }
.ui-stack-sec { padding: 8px 0 4px; }
.ui-stack-head { display: flex; align-items: baseline; gap: 10px; padding: 8px 20px 4px; }
.ui-stack-head b { font-weight: 500; font-size: 13px; }
.ui-stack-head .n { font-family: var(--f-mono); font-size: 10px; color: var(--w-warn); background: rgba(240,167,66,.12); padding: 1px 6px; border-radius: 999px; }
.ui-stack-head .ui-sub { font-size: 11px; color: var(--ink-dim); }
.ui-stack .ui-list { padding: 4px 12px 6px; }
.ui-stack .ui-seq { padding: 6px 20px 10px; }
.ui-stack .ui-row .end { flex-direction: row; align-items: center; gap: 8px; }
.ui-empty { padding: 14px 20px; font-size: 12px; color: var(--ink-dim); }
.ui-toolbar.bottom { border-bottom: 0; border-top: 1px solid var(--w-line); padding: 12px 20px; gap: 22px; }
.ui-toolbar.bottom .grp { gap: 6px; }
.ui-toolbar.bottom .grp .lbl { margin-right: 4px; color: var(--ink-dim); font-size: 11px; }
.ui-pill { font: inherit; font-size: 11.5px; padding: 6px 13px; border-radius: 999px; border: 1px solid var(--w-line-2); color: var(--ink-mute); background: var(--w-panel); cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.ui-pill:hover { color: var(--ink); border-color: var(--gold); }
.ui-pill.is-active { background: var(--gold); border-color: var(--gold); color: var(--w-on-gold); font-weight: 500; }
@container (max-width: 640px) { .ui-stack .ui-row .end .ui-btn { display: none; } .ui-toolbar.bottom { gap: 10px; } }

.app-window .ui-pill { padding: 6px 13px; border: 1px solid var(--w-line-2); background: var(--w-panel); color: var(--ink-mute); }
.app-window .ui-pill.is-active { background: var(--gold); border-color: var(--gold); color: var(--w-on-gold); }
.ui-list.wide-t .ui-row { grid-template-columns: 82px 1fr auto; }
.ui-hist { display: flex; flex-direction: column; gap: 2px; }
.ui-hist .ui-row { padding: 7px 8px; }
.ui-stack-head b { white-space: nowrap; }
.ui-stack-head .ui-sub { text-wrap: pretty; }

/* ── Rédaction : « Nouveau mail » hors process ── */
.ui-compose { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px; }
.ui-blk { display: flex; flex-direction: column; gap: 8px; }
.ui-blk > .lbl { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); }
.ui-blk .ui-chips { padding: 0; }
.ui-blk .hint { font-size: 11px; color: var(--ink-dim); }
.ui-brief { min-height: 72px; padding: 10px 12px; border-radius: 9px; border: 1px solid rgba(245,200,66,.22); background: var(--w-sunk); font-size: 12.5px; line-height: 1.5; color: var(--ink); outline: none; }
.ui-brief:empty::before { content: attr(data-placeholder); color: var(--ink-dim); }
.ui-brief:focus { border-color: var(--gold); }

/* ── Arbitrages (CIF · CGP) : allocation actuelle → cible ── */
.ui-alloc { display: grid; grid-template-columns: 1fr auto auto; gap: 5px 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--w-line); font-size: 11.5px; }
.ui-alloc .n { grid-row: 1; grid-column: 1; }
.ui-alloc .mono { grid-row: 1; }
.ui-alloc .bars { grid-row: 2; grid-column: 1 / -1; }
.ui-alloc:last-of-type { border-bottom: 0; }
.ui-alloc .n { color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-alloc .bars { position: relative; height: 12px; border-radius: 3px; background: var(--w-track); overflow: hidden; }
.ui-alloc .bars i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); opacity: .55; border-radius: 3px; }
.ui-alloc .bars b { position: absolute; left: 0; top: 0; bottom: 0; border: 1.5px solid var(--gold); border-radius: 3px; box-sizing: border-box; }
.ui-alloc .mono { font-size: 10.5px; white-space: nowrap; text-align: right; }
.ui-alloc .d { color: var(--ink-dim); } .ui-alloc .d.up { color: var(--w-ok); } .ui-alloc .d.down { color: var(--w-warn); }
.ui-alloc-legend { display: inline-flex; align-items: center; gap: 5px; font-style: normal; margin-left: 8px; }
.ui-alloc-legend i { width: 10px; height: 8px; border-radius: 2px; background: var(--gold); opacity: .55; }
.ui-alloc-legend b { width: 10px; height: 8px; border-radius: 2px; border: 1.5px solid var(--gold); box-sizing: border-box; margin-left: 6px; }

/* ── Cockpit CGP : valeurs suivies ── */
.ui-wrow { display: grid; grid-template-columns: 1fr 60px 58px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--w-line); font-size: 11.5px; cursor: pointer; }
.ui-wrow:last-child { border-bottom: 0; }
.ui-wrow .nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-wrow .nm small { display: block; font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-wrow .ui-spark { width: 60px; height: 18px; } .ui-wrow .ui-spark path { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: .8; }
.ui-wrow .mono { text-align: right; font-size: 11px; }
.mono.up { color: var(--w-ok); } .mono.down { color: var(--w-warn); }
.ui-seq .row.ui-wl { grid-template-columns: 1fr 80px auto auto; }
.ui-seq .row.ui-wl .ui-spark { width: 80px; height: 22px; } .ui-seq .row.ui-wl .ui-spark path { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: .8; }
.js-value-picker { grid-template-columns: 1fr; }
@container (max-width: 640px) { .ui-seq .row.ui-wl { grid-template-columns: 1fr auto; } .ui-seq .row.ui-wl .ui-spark { display: none; } }

/* ── Cockpit CGP : finitions ── */
.ui-donut li, .ui-donut li b { white-space: nowrap; }
@container (max-width: 640px) { .ui-list.wide-t .ui-row { grid-template-columns: 1fr auto; } .ui-list.wide-t .ui-row .t { display: none; } }

/* ── Mise en page 2026-09-11 : titre centré au-dessus de la fenêtre, Avant à gauche, Après à droite, plus de chiffre clé ── */
.section-demos .section-inner { max-width: 1400px; }
.demos-intro { display: grid; justify-items: center; text-align: center; margin-top: 56px; }
.demos-intro .demo-text { justify-self: center; }
.demo-intro .section-title { max-width: 26ch; margin: 14px auto 0; font-size: clamp(30px, 2.8vw, 42px); }
.demos-layout { grid-template-columns: 172px minmax(0, 1fr) 172px; gap: 28px; align-items: center; margin-top: 40px; }
@media (min-width: 1400px) { .demos-layout { grid-template-columns: 210px minmax(0, 1fr) 210px; gap: 40px; } }
.demos-side { display: grid; }
.demo-side .sol-ba { margin: 0; gap: 0; }
.demo-side .sol-ba li { grid-template-columns: 1fr; gap: 8px; font-size: 14.5px; line-height: 1.55; }
.demo-side .sol-cta { margin-top: 24px; }
@media (max-width: 1100px) {
  .demos-layout { grid-template-columns: 1fr; gap: 28px; }
  .demos-side { max-width: 560px; }
  .demos-side-after { justify-self: end; text-align: right; }
  .demos-side-after .sol-ba li { justify-items: end; }
}
@media (max-width: 700px) { .demos-side-after { justify-self: start; text-align: left; } .demos-side-after .sol-ba li { justify-items: start; } }
.demo-side .sol-cta { white-space: normal; display: inline-block; line-height: 1.5; }
@media (max-width: 1100px) { .demos-browser::before { inset: 10% -1% -12% -1%; } }

/* ── Lisibilité Avant / Après + note « Démonstration interactive » 2026-09-11 ──
   La rangée fenêtre + notes sort du conteneur 1400 px : chaque note est centrée dans l'espace
   entre le bord de l'écran et la fenêtre, quelle que soit la largeur. */
.section-demos .section-inner { max-width: none; }
.section-demos .demos-header { max-width: 1352px; margin-inline: auto; }
.demos-layout { grid-template-columns: minmax(196px, 1fr) minmax(0, 920px) minmax(196px, 1fr); gap: 28px; }
@media (min-width: 1400px) { .demos-layout { grid-template-columns: minmax(236px, 1fr) minmax(0, 940px) minmax(236px, 1fr); gap: 32px; } }
@media (min-width: 1600px) { .demos-layout { gap: 40px; } }
.demos-side { justify-items: center; }
.demo-side { width: 100%; max-width: 340px; }
.ba-k { margin: 0 0 14px; font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.01em; color: var(--ink-mute); }
.ba.after .ba-k { color: var(--gold); }
.ba ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ba li { position: relative; padding-left: 17px; font-size: 16px; line-height: 1.5; color: var(--ink-mute); text-wrap: pretty; }
.ba li::before { content: ""; position: absolute; left: 0; top: calc(.75em - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--ink-dim); }
.ba.after li { color: var(--ink); }
.ba.after li::before { background: var(--gold); }
@media (min-width: 1400px) { .ba li { font-size: 17px; } .ba-k { font-size: 36px; } }
/* centrage exact entre le bord de l'écran et la fenêtre : compense l'écart gouttière (40) / marge de section (24) */
@media (min-width: 1600px) { .demos-side-before { padding-left: 16px; } .demos-side-after { padding-right: 16px; } }
@media (max-width: 1100px) {
  .demos-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .demos-side { justify-items: stretch; }
  .demo-side { max-width: none; }
  .demos-side-after { text-align: left; }
  .ba li { font-size: 17px; }
  .demos-browser { margin-top: 16px; }
}
/* Lueur : un calque or du même texte monte à 78 % d'opacité, le chevron vire à l'or en même temps.
   En boucle (demande hongaki), mais seulement tant que la fenêtre est à l'écran (.is-inview, section-tabs.js) :
   le grain fixe en mix-blend-mode du site recompose la page à chaque image animée. */
.try-hint span::after { content: attr(data-t); position: absolute; inset: 0; color: var(--gold-bright); text-shadow: 0 0 12px rgba(245,200,66,.72); opacity: 0; }
@keyframes try-hint-glow { 0%, 100% { opacity: 0; } 50% { opacity: .78; } }
@keyframes try-hint-glow-chev { 0%, 100% { stroke: var(--ink-mute); } 50% { stroke: var(--gold-bright); } }
.try-hint.is-inview span::after { animation: try-hint-glow 3.2s ease-in-out infinite; }
.try-hint.is-inview svg { animation: try-hint-glow-chev 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .try-hint.is-inview span::after, .try-hint.is-inview svg { animation: none; } }

/* ── Titre d'onglet plus large (2 lignes max) et plus proche de la légende ; « Avant » / « Après » centrés sur leur bloc (2026-09-11) ── */
.demo-intro .section-title { max-width: min(100%, 38ch); font-size: clamp(26px, 2.8vw, 42px); }
.demos-layout { margin-top: 22px; }
.ba-k { text-align: center; }

/* ── Pas de filet devant les surtitres de la section (lu comme un cadratin, demande hongaki 2026-09-11) ── */
.section-demos .eyebrow::before { display: none; }

/* ── Avant / Après alignés sur la même ligne ; « Applicable chez vous ? » en pastille (2026-09-11) ──
   Rangée « auto » encadrée de deux rangées 1fr : la fenêtre couvre les trois, les deux notes partagent
   la rangée du milieu → leurs titres démarrent à la même hauteur et l'ensemble reste centré. */
.demos-layout { grid-template-rows: 1fr auto 1fr; }
.demos-browser { grid-column: 2; grid-row: 1 / 4; }
.demos-side { grid-row: 2; align-self: start; }
.demos-side-before { grid-column: 1; }
.demos-side-after { grid-column: 3; }
.demo-side { align-self: start; }
.demo-side .sol-cta { display: flex; justify-content: center; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 34px auto 0; padding: 11px 18px; border: 1px solid rgba(245,200,66,.45); border-radius: 999px; background: rgba(245,200,66,.05); font-size: 10.5px; letter-spacing: .2em; line-height: 1.45; text-align: center; white-space: normal; transition: border-color .3s ease, background .3s ease, gap .3s ease; }
.demo-side .sol-cta:hover { border-color: var(--gold); background: rgba(245,200,66,.1); gap: 14px; }
@media (max-width: 1100px) {
  .demos-layout { grid-template-rows: none; }
  .demos-browser, .demos-side, .demos-side-before, .demos-side-after { grid-column: auto; grid-row: auto; }
}

/* ── Itération 2026-09-14 ── */
/* Avant / Après encadrés comme les cartes I → VII du site (« Ce que vous y gagnez »). Titre centré, puces alignées à gauche,
   marges internes réduites et carte élargie (2026-09-14 soir : les puces à 3 lignes et les deux-points orphelins n'étaient pas lisibles). */
.demo-side .ba { position: relative; padding: 22px 18px 20px; background: rgba(11,12,24,.65); border: 1px solid var(--line-faint); border-radius: 16px; text-align: left; }
.demo-side .ba.after { border-color: rgba(245,200,66,.28); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245,200,66,.08), transparent 65%), rgba(11,12,24,.65); }
.demo-side .ba-k { margin: 0; line-height: .95; text-align: center; }
.demo-side .ba ul { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-faint); justify-items: stretch; gap: 9px; }
.demo-side .ba.after ul { border-top-color: rgba(245,200,66,.3); }
.demo-side .ba li { padding-left: 14px; font-size: 16px; line-height: 1.45; text-align: left; text-wrap: pretty; }
.demo-side .ba li::before { position: absolute; left: 0; top: calc(.725em - 2.5px); margin: 0; }
.demo-side .sol-cta { margin-top: 24px; }
@media (max-width: 1599px) { .demo-side .ba li { font-size: 15px; } .demo-side .ba-k { font-size: 30px; } }
@media (max-width: 1399px) { .demo-side .ba { padding: 20px 16px 18px; } .demo-side .ba li { font-size: 14.5px; padding-left: 13px; } .demo-side .ba-k { font-size: 28px; } }
@media (max-width: 1100px) { .demo-side .ba { padding: 24px 22px 20px; } .demo-side .ba li { font-size: 16.5px; padding-left: 15px; } }

/* Barres : la colonne des valeurs prend la largeur du texte le plus long, les bandes se raccourcissent */
.ui-bars { display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 12px; row-gap: 8px; align-items: center; }
.ui-bars .bar { display: contents; }
.ui-bars .bar .v { white-space: nowrap; }

/* Cockpit : compteur neutre sur En cours / Exécutés (la pastille reste réservée à À décider) */
.ui-stack-head .c { font-family: var(--f-mono); font-size: 11px; color: var(--ink-dim); }
.ui-swapnote { margin: 2px 0 10px; padding: 9px 11px; border-radius: 8px; background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-size: 11.5px; line-height: 1.5; color: var(--ink-mute); }
.ui-swapnote b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; }

/* Pièces reçues : filtres façon Notion (pastille → menu) */
.ui-filters { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; flex-wrap: wrap; }
.ui-fwrap { position: relative; }
.app-window .ui-fpill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--w-line); border-radius: 999px; background: var(--w-panel); font: inherit; font-size: 11.5px; color: var(--ink-mute); cursor: pointer; white-space: nowrap; }
.app-window .ui-fpill:hover { background: var(--w-hover); }
.app-window .ui-fpill svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.app-window .ui-fpill .k { color: var(--ink-dim); }
.app-window .ui-fpill b { font-weight: 500; color: var(--ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.app-window .ui-fpill .chev { width: 11px; height: 11px; opacity: .6; }
.app-window .ui-fpill.is-on { border-color: color-mix(in srgb, var(--gold) 55%, var(--w-line)); background: color-mix(in srgb, var(--gold) 7%, var(--w-panel)); }
.ui-fmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 190px; padding: 6px; border: 1px solid var(--w-line); border-radius: 10px; background: var(--w-float); box-shadow: 0 12px 30px rgba(0,0,0,.18); display: grid; gap: 2px; }
.ui-fmenu[hidden] { display: none; }
.ui-fmenu .cap { padding: 4px 8px 6px; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.ui-fmenu label { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--ink); cursor: pointer; }
.ui-fmenu label:hover { background: var(--w-hover); }
.ui-fmenu input { accent-color: var(--gold); margin: 0; }
.ui-fcount { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-dim); }

/* CRM · synchro : le conflit d'agenda s'explique au survol (ou au focus clavier) */
.ui-tipwrap { position: relative; display: inline-flex; cursor: help; outline: none; }
.ui-tipwrap .ui-badge { text-decoration: underline dotted; text-underline-offset: 3px; }
.ui-tip { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; width: 280px; padding: 10px 12px; border: 1px solid var(--w-line); border-radius: 10px; background: var(--w-float); box-shadow: 0 12px 30px rgba(0,0,0,.2); font-size: 11.5px; line-height: 1.5; color: var(--ink-mute); text-align: left; white-space: normal; opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.ui-tip b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.ui-tip .l { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; }
.ui-tip .end { display: block; margin-top: 8px; }
.ui-tipwrap:hover .ui-tip, .ui-tipwrap:focus .ui-tip { opacity: 1; transform: none; }

/* Journal des Leads : une semaine glissante, séparée par jour */
.ui-log .d { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--w-line); font-family: var(--f-body); font-size: 11.5px; font-weight: 500; color: var(--ink); }
.ui-log .d:first-child { margin-top: 0; }
.ui-log .d span { font-family: var(--f-mono); font-size: 10px; font-weight: 400; color: var(--ink-dim); }
.ui-log .l .lv.dim { color: var(--ink-dim); }
.ui-log .l > span:last-child { min-width: 0; }

/* Barre de titre : la date (corps plus petit) posée sur la même ligne de base que le titre ;
   la ligne « Scénario » du Chatbot calée sur le bord gauche du titre */
.app-top .date { position: relative; top: 1px; }
.view[data-view="site"] .ui-viewhead { padding-left: 20px; padding-right: 20px; }

/* ── Mise en page 2026-09-14 soir (phase envoi sur le site) ──
   En-tête : plus de surtitre, titre et légende centrés sur une ligne ; titres d'onglet sur une ligne ;
   « Applicable chez vous ? » remplacé par le CTA du site (« Réserver mon appel découverte ») sous la fenêtre. */
.section-demos .demos-header { text-align: center; }
.section-demos .demos-header .section-title { max-width: none; margin: 0 auto; font-size: clamp(32px, 3.6vw, 56px); }
.section-demos .demos-header .lede { max-width: none; margin: 18px auto 0; }
@media (min-width: 900px) { .section-demos .demos-header .section-title { white-space: nowrap; } }
@media (max-width: 899px) { .section-demos .demos-header .lede { max-width: 44ch; } }
.demos-intro { margin-top: 44px; }
.demo-intro .section-title { max-width: none; font-size: clamp(24px, 2.2vw, 38px); margin-top: 12px; }
@media (min-width: 1100px) { .demo-intro .section-title { white-space: nowrap; } }
@media (max-width: 1099px) { .demo-intro .section-title { max-width: min(100%, 38ch); } }
.demos-cta { display: flex; justify-content: center; margin-top: 48px; }
.demos-cta .cta { display: inline-flex; align-items: center; gap: 14px; font-family: var(--f-body); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); text-decoration: none; padding: 18px 30px; border: 1px solid rgba(245,200,66,.45); border-width: 0 2px 2px 0; border-radius: 999px; background: rgba(245,200,66,.02); position: relative; text-align: center; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, background .5s ease, border-color .5s ease; }
.demos-cta .cta:hover { transform: translateY(-2px); background: rgba(245,200,66,.08); border-color: rgba(245,200,66,.8); box-shadow: 0 0 32px rgba(245,200,66,.25), 0 0 80px rgba(245,200,66,.12); }
@media (max-width: 700px) { .demos-cta .cta { letter-spacing: .2em; padding: 16px 22px; } }

/* ── Alignement sur les chapitres du site (2026-09-14 soir, demande hongaki) ──
   Trois éléments de titre comme « Nos solutions » : H2 italique or à lueur constante, légende Cormorant, sous-titre
   d'onglet italique blanc (mots-clés en or). Plus de surtitre par onglet. « Démonstration interactive » reste. */
.section-demos .demos-header .section-title { font-size: clamp(40px, 6.4vw, 92px); line-height: 1.08; letter-spacing: -0.01em; margin: 0 auto; max-width: none; }
.section-demos .demos-header .section-title em { font-style: italic; color: var(--gold); }
.section-demos .eternal-glow em, .section-demos .demo-title em { text-shadow: 0 0 10px rgba(245,200,66,.55), 0 0 24px rgba(245,200,66,.28), 0 0 42px rgba(245,200,66,.12); }
.section-demos .demos-header .lede { font-family: var(--f-display); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--ink-mute); margin: 20px auto 0; max-width: none; }
@media (max-width: 1199px) { .section-demos .demos-header .section-title { white-space: normal; } }
.demos-intro { margin-top: 36px; }
.demo-intro .demo-title { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; letter-spacing: -0.005em; color: var(--ink); margin: 0 auto; max-width: none; text-wrap: balance; }
.demo-intro .demo-title em { color: var(--gold); }
@media (min-width: 1100px) { .demo-intro .demo-title { white-space: nowrap; } }
.demos-layout { margin-top: 44px; }

/* Pièces reçues : la colonne date prend la largeur de « ven. 11 sept. », plus de chevauchement avec les titres */
.ui-row .t { white-space: nowrap; }
.js-inbox .ui-row { grid-template-columns: 84px 1fr auto; }

/* Agent vocal : la transcription est encadrée, séparée des intentions / actions / routage */
.ui-cols .ui-chatbox { min-width: 0; padding: 12px 12px 10px; border: 1px solid var(--w-line); border-radius: 10px; background: var(--w-panel); }

/* Chatbot : les scénarios se choisissent sous « Propulsé par Apolyte », dans le widget */
.view[data-view="site"] .ui-sitewrap { margin-top: 0; border-top: 0; }
.ui-widget { height: 448px; }
.ui-widget .ws { display: flex; align-items: center; gap: 8px; padding: 7px 10px 9px 12px; border-top: 1px solid var(--w-line); }
.ui-widget .ws > span { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.ui-widget .ws .ui-seg { display: flex; margin-left: auto; padding: 2px; border-radius: 999px; border: 1px solid var(--w-line-2); background: var(--w-sunk); }
.ui-widget .ws .ui-chip { font-size: 10.5px; letter-spacing: 0; padding: 3px 9px; border: 0; border-radius: 999px; background: none; color: var(--ink-mute); white-space: nowrap; }
.ui-widget .ws .ui-chip:hover { color: var(--ink); }
.ui-widget .ws .ui-chip.is-active { background: var(--gold); color: var(--w-on-gold); }
.app-window[data-mockup="docs"] .side-brand { letter-spacing: .04em; font-size: 10px; }

/* ── En-tête, version 4 (2026-09-14 soir) : plus de sous-titre d'onglet. Élément 2 = la légende « Sept cas… » dans le style
   tagline du site (Cormorant italique blanc) ; élément 3 = la mention courte de l'onglet, style du 3e élément des chapitres
   du site (DM Sans 15 px, ink-mute). */
.section-demos .demos-header .lede { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.1vw, 31px); line-height: 1.25; letter-spacing: -0.005em; color: var(--ink); margin: 28px auto 0; max-width: none; text-wrap: balance; }
@media (min-width: 1100px) { .section-demos .demos-header .lede { white-space: nowrap; } }
.demos-intro { margin-top: 20px; }
.demo-intro .demo-kicker { font-family: var(--f-body); font-weight: 400; font-size: 15px; line-height: 1.6; letter-spacing: .01em; color: var(--ink-mute); margin: 0; }

/* couche site : le padding latéral est sur .section-inner (56 px) et non sur .section (24 px dans la page démo) → même largeur de fenêtre que la démo */
.section-demos .section-inner { padding-left: 24px; padding-right: 24px; }
/* mobile.html : section { position: relative } et body { line-height: 1.6 } débordaient sur les fenêtres (démo : static / 1.55) */
.section-demos .browser-pages section { position: static; }
.section-demos .demos-layout { line-height: 1.55; }