/* ==========================================================================
   SMART AI · V9 · démonstrateurs
   Même grammaire que le site : pétrole = ce que l'assistant lit, retrouve et prépare ;
   corail = ce que vous décidez (validation). Les interfaces restent volontairement simples.
   ========================================================================== */

/* ---------------------------------------------------------------- en-tête */
.dhead { padding-block: clamp(36px, 5vw, 72px) clamp(44px, 5vw, 72px); background: var(--mist); border-bottom: 1px solid var(--line); }
.dhead__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 36px clamp(40px, 6vw, 96px); align-items: end; margin-top: clamp(22px, 2.6vw, 36px); }
.dhead__main { display: grid; gap: 22px; justify-items: start; }
.dhead h1 { font-size: clamp(34px, 4vw, 54px); max-width: 19ch; }
.dhead__facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--muted); align-items: center; }
.dsteps { list-style: none; display: grid; gap: 0; }
.dsteps li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 16px; padding-bottom: 20px; }
.dsteps li::before { content: ""; grid-row: 1 / span 2; width: 11px; height: 11px; margin: 6px 0 0 7px; border-radius: 50%; background: var(--petrol); box-shadow: 0 0 0 4px var(--petrol-100); }
.dsteps li::after { content: ""; position: absolute; left: 12px; top: 20px; bottom: 0; width: 1.5px; background: var(--line-2); }
.dsteps li:last-child { padding-bottom: 0; }
.dsteps li:last-child::after { display: none; }
.dsteps li.is-human::before { background: var(--coral); box-shadow: 0 0 0 4px var(--coral-100); }
.dsteps b { color: var(--navy); font-size: 17px; letter-spacing: -.01em; }
.dsteps span { grid-column: 2; font-size: 15px; color: var(--text); }
@media (max-width: 960px) { .dhead__in { grid-template-columns: minmax(0, 1fr); } .dsteps { display: none; } }

/* ---------------------------------------------------------------- scène */
.dstage { background: var(--deep); padding-block: clamp(36px, 4vw, 64px) clamp(56px, 6vw, 96px); color: var(--on-deep); scroll-margin-top: var(--hdr-h); }
.dstage__intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 20px; font-size: 16px; color: var(--on-deep); }
.dstage__intro p { max-width: 62ch; }
.dstage__integr { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; color: var(--on-deep-2); }
.dstage__integr span.chip { border: 1px solid rgba(255, 255, 255, .22); color: var(--on-deep); border-radius: var(--pill); padding: 5px 12px; font-weight: 560; font-size: 13.5px; }
.wrap--wide { max-width: calc(var(--wrap-wide) + 2 * var(--gut)); }

/* ---------------------------------------------------------------- application */
.app { background: #fff; border-radius: var(--r-lg); box-shadow: 0 2px 6px rgba(0, 0, 0, .2), 0 50px 90px -50px rgba(0, 0, 0, .8); overflow: hidden; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.app__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; background: var(--mist); border-bottom: 1px solid var(--line); }
.app__title { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; color: var(--navy); font-size: 14.5px; min-width: 0; flex-wrap: wrap; }
.app__title img { width: 22px; height: 22px; flex: none; }
.app__ctx { font-weight: 500; color: var(--muted); font-size: 13.5px; }
.app button { font-family: var(--font); }

/* boutons d'interface */
.ubtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--r-btn); border: 1.5px solid var(--line-2); background: #fff; color: var(--navy); font: 620 14.5px/1.2 var(--font); cursor: pointer; white-space: nowrap; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.ubtn:hover { border-color: var(--navy); }
.ubtn:active { transform: translateY(1px); }
.ubtn--primary { background: var(--coral); border-color: var(--coral); color: var(--deep); }
.ubtn--primary:hover { background: var(--coral-h); border-color: var(--coral-h); }
.ubtn--petrol, .ubtn--run { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.ubtn--petrol:hover, .ubtn--run:hover { background: var(--petrol-t); border-color: var(--petrol-t); }
.ubtn--danger { color: var(--risk); border-color: #EBB7B1; }
.ubtn--danger:hover { background: var(--risk-50); border-color: var(--risk); }
.ubtn[disabled] { opacity: .5; cursor: not-allowed; }
.ubtn svg { width: 16px; height: 16px; flex: none; }
.ubtn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.assist__body > .ubtn-row--act { position: sticky; bottom: -22px; margin: 0 -18px -22px; padding: 12px 18px 20px; background: #F5F9FB; border-top: 1px solid var(--line); box-shadow: 0 -10px 18px -14px rgba(16, 43, 66, .25); z-index: 2; }
@media (max-width: 600px) { .ubtn { min-height: 46px; } }

/* segments */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--mist); border: 1px solid var(--line); border-radius: var(--r-btn); }
.seg button { border: 0; background: transparent; padding: 8px 14px; min-height: 36px; border-radius: var(--r-xs); font: 600 13.5px var(--font); color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }

/* panneau assistant */
.assist { background: #F5F9FB; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.assist__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.assist__name { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--navy); }
.assist__name img { width: 22px; height: 22px; }
.assist__state { white-space: nowrap; font-size: 13px; font-weight: 640; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.assist__state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.assist__state[data-s="run"] { color: var(--petrol-t); }
.assist__state[data-s="run"]::before { background: var(--petrol); animation: pulse 1s infinite; }
.assist__state[data-s="wait"] { color: var(--coral-t); }
.assist__state[data-s="wait"]::before { background: var(--coral); }
.assist__state[data-s="done"] { color: var(--ok); }
.assist__state[data-s="done"]::before { background: var(--ok); }
@keyframes pulse { 50% { opacity: .3; } }
.assist__body { position: relative; padding: 18px 18px 22px; display: grid; gap: 14px; align-content: start; overflow: auto; scroll-behavior: smooth; }
.assist__empty { color: var(--muted); padding: 32px 10px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.assist__empty svg { width: 34px; height: 34px; color: var(--petrol-200); }
.assist__empty b { color: var(--navy); }

/* étapes de traitement */
.flow { list-style: none; display: grid; gap: 0; counter-reset: fl; }
.flow > li { position: relative; padding: 0 0 18px 36px; }
.flow > li::before { counter-increment: fl; content: counter(fl); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 680 12px/1 var(--font); background: #fff; border: 1.5px solid var(--line-2); color: var(--muted); transition: background .3s, border-color .3s, color .3s; }
.flow > li::after { content: ""; position: absolute; left: 11.5px; top: 26px; bottom: 2px; width: 1.5px; background: var(--line); }
.flow > li:last-child::after { display: none; }
.flow > li[data-st="done"]::before { content: "✓"; background: var(--petrol); border-color: var(--petrol); color: #fff; }
.flow > li[data-st="done"]::after { background: var(--petrol-200); }
.flow > li[data-st="active"]::before { background: #fff; border-color: var(--petrol); color: var(--petrol-t); box-shadow: 0 0 0 4px var(--petrol-100); }
.flow > li[data-st="wait"]::before { background: var(--coral); border-color: var(--coral); color: var(--deep); box-shadow: 0 0 0 4px var(--coral-100); }
.flow > li[data-st="pending"] .flow__t { color: var(--muted); font-weight: 500; }
.flow__t { font-weight: 650; color: var(--navy); font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-height: 24px; }
.flow__c { margin-top: 10px; display: grid; gap: 10px; }
.flow__c[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .flow__c:not([hidden]) { animation: rise .32s var(--ease); } }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* blocs de contenu */
.box { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; display: grid; gap: 8px; }
.box__k { font-size: 13px; font-weight: 650; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.box--ai { border-color: var(--petrol-100); background: linear-gradient(180deg, var(--petrol-50), #fff 70%); }
.box--ai > .box__k { color: var(--petrol-t); }
.box--you { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-50); }
.box--you > .box__k { color: var(--coral-t); }
.kv { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink); font-weight: 620; overflow-wrap: anywhere; }
.chk { list-style: none; display: grid; gap: 8px; font-size: 14px; }
.chk li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; }
.chk li::before { content: "✓"; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--font); color: #fff; background: var(--ok); margin-top: 1px; }
.chk li.w::before { content: "!"; background: #C47A00; }
.chk li.r::before { content: "!"; background: var(--risk); }
.chk li.i::before { content: "→"; background: var(--petrol); }
.chk li.x::before { content: "–"; background: var(--line-2); }
.draft { width: 100%; min-height: 200px; overflow: hidden; border: 1.5px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; font: 400 14.5px/1.6 var(--font); color: var(--ink); background: #fff; resize: vertical; }
.draft:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 4px rgba(16, 120, 150, .14); }
.draft-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--muted); }
.draft-meta b { color: var(--navy); }
.notice { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 11px 13px; border-radius: var(--r); font-size: 14px; background: var(--petrol-50); color: var(--navy); }
.notice svg { width: 18px; height: 18px; color: var(--petrol-t); }
.notice--warn { background: var(--warn-50); }
.notice--warn svg { color: var(--warn); }
.notice--risk { background: var(--risk-50); }
.notice--risk svg { color: var(--risk); }
.notice--ok { background: var(--ok-50); }
.notice--ok svg { color: var(--ok); }
.notice--sim { background: var(--mist); color: var(--muted); font-size: 13px; }
.notice--sim svg { color: var(--coral); }
.log { list-style: none; display: grid; gap: 5px; font-size: 13px; color: var(--muted); }
.log li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; }
.log b { color: var(--navy); font-weight: 620; }
.opts { display: grid; gap: 6px; }
.opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; font-size: 14px; }
.opt input { margin: 2px 0 0; accent-color: var(--petrol); }
.opt:has(input:checked) { border-color: var(--petrol); background: var(--petrol-50); }
.opt b { color: var(--navy); }
.saved { display: grid; gap: 10px; padding: 14px 15px; border-radius: var(--r); background: var(--deep); color: var(--on-deep); }
.saved__k { font-size: 13.5px; font-weight: 650; color: #fff; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.saved__k span { color: var(--petrol-l); }
.saved ul { list-style: none; display: grid; gap: 5px; font-size: 13.5px; }
.saved li { padding-left: 20px; position: relative; text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }
.saved li::before { content: "✓"; position: absolute; left: 0; color: var(--petrol-l); text-decoration: none; }
.saved a { color: var(--petrol-l); font-weight: 620; font-size: 14px; }

/* ---------------------------------------------------------------- démonstrateur administratif */
.inbox { display: grid; grid-template-columns: 270px minmax(0, 1fr) 390px; min-height: 680px; }
.inbox__list { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.inbox__lh { padding: 12px 16px; font-size: 13px; font-weight: 640; color: var(--muted); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.mail-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; width: 100%; min-width: 0; overflow: hidden; text-align: left; padding: 14px 16px 14px 18px; border: 0; border-bottom: 1px solid var(--line); background: #fff; cursor: pointer; position: relative; font: inherit; color: inherit; transition: background .15s; }
.mail-item:hover { background: var(--mist); }
.mail-item[aria-current="true"] { background: var(--petrol-50); }
.mail-item[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--petrol); }
.mail-item__top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.mail-item__top > span { min-width: 0; }
.mail-item__top > span:last-child { flex: none; }
.mail-item__from { font-weight: 650; color: var(--navy); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item__subj { display: block; min-width: 0; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.mail-item[data-unread]::after { content: ""; position: absolute; right: 14px; bottom: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--petrol); }
.inbox__msg { min-width: 0; display: flex; flex-direction: column; }
.msg-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.msg-head h3 { font-size: 19px; line-height: 1.3; }
.msg-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; font-size: 13px; color: var(--muted); }
.msg-meta b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.msg-body { padding: 20px 24px; white-space: pre-line; font-size: 15px; line-height: 1.65; color: var(--ink); }
.msg-body[data-hl] mark { background: var(--petrol-50); color: var(--petrol-t); font-weight: 650; padding: 1px 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--petrol-100); }
@media (prefers-reduced-motion: no-preference) { .msg-body[data-hl] mark { animation: hl .6s var(--ease); } }
@keyframes hl { from { background: transparent; box-shadow: none; } }
.attach { margin: 0 24px 18px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--mist); font-size: 13.5px; }
.attach__ic { width: 34px; height: 40px; border-radius: 4px; background: #fff; border: 1px solid var(--line-2); display: grid; place-items: center; font: 700 9.5px var(--font); color: var(--risk); letter-spacing: .03em; flex: none; }
.attach b { color: var(--navy); display: block; }
.msg-tr { margin: 0 24px 18px; padding: 12px 14px; border-left: 3px solid var(--petrol); background: var(--petrol-50); font-size: 14px; white-space: pre-line; }
.msg-foot { margin-top: auto; padding: 14px 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
/* Bureau : hauteur fixe, chaque colonne défile seule ; l'application garde la même taille du début à la fin */
@media (min-width: 1181px) {
  .inbox { height: clamp(640px, calc(100vh - 150px), 820px); min-height: 0; }
  .inbox__items, .inbox__msg { overflow-y: auto; }
  .inbox .assist { overflow: hidden; }
  .inbox .assist__body { flex: 1; min-height: 0; }
}
@media (max-width: 1180px) {
  .inbox { grid-template-columns: 260px minmax(0, 1fr); }
  .inbox .assist { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .inbox { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .inbox__list { border-right: 0; border-bottom: 1px solid var(--line); }
  .inbox .assist { order: 2; border-top: 0; border-bottom: 1px solid var(--line); }
  .inbox__msg { order: 3; }
  .inbox__items { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .inbox__items .mail-item { min-width: 236px; max-width: 256px; border-right: 1px solid var(--line); border-bottom: 0; scroll-snap-align: start; }
  .msg-head, .msg-body { padding-inline: 16px; }
  .attach, .msg-tr { margin-inline: 16px; }
  .msg-foot { padding-inline: 16px; }
  .assist__body { padding-inline: 14px; }
}

/* ---------------------------------------------------------------- démonstrateur commercial */
.crm { display: grid; grid-template-columns: 200px minmax(0, 1fr) 384px; min-height: 720px; }
@media (min-width: 1241px) {
  .crm { height: clamp(660px, calc(100vh - 150px), 840px); min-height: 0; }
  .crm__main { overflow-y: auto; }
  .crm .assist { overflow: hidden; }
  .crm .assist__body { flex: 1; min-height: 0; }
}
.crm__side { background: var(--navy); color: var(--on-deep); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.crm__side p { font-size: 13px; font-weight: 600; color: var(--on-deep-2); padding: 8px 10px 6px; }
.crm__tab { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 10px; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; color: var(--on-deep); padding: 11px 10px; border-radius: var(--r); cursor: pointer; font: 620 14.5px/1.3 var(--font); transition: background .2s; }
.crm__tab small { grid-column: 2; font-weight: 500; font-size: 12.5px; color: var(--on-deep-2); }
.crm__tab span.k { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .1); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.crm__tab:hover { background: rgba(255, 255, 255, .07); }
.crm__tab[aria-selected="true"] { background: #fff; color: var(--navy); }
.crm__tab[aria-selected="true"] small { color: var(--muted); }
.crm__tab[aria-selected="true"] span.k { background: var(--petrol); color: #fff; }
.crm__main { min-width: 0; display: flex; flex-direction: column; }
.crm__mh { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.crm__mh h3 { font-size: 18px; }
.crm__mh p { font-size: 14px; color: var(--muted); margin-top: 2px; max-width: 54ch; }
.crm__mb { padding: 18px 22px 24px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.found { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 16px; border-radius: var(--r); background: var(--petrol-50); border: 1px solid var(--petrol-100); color: var(--navy); }
.found b { font-size: 22px; letter-spacing: -.02em; color: var(--petrol-t); }
.found span { font-size: 14.5px; }
.rcards { list-style: none; display: grid; gap: 10px; }
.rcard { width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s; }
.rcard:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.rcard[aria-pressed="true"] { border-color: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-100); }
.rcard__t { color: var(--navy); font-weight: 650; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rcard__t small { font-weight: 500; color: var(--muted); font-size: 13.5px; }
.rcard__a { justify-self: end; align-self: start; display: grid; justify-items: end; gap: 4px; }
.rcard__amt { font-weight: 650; color: var(--navy); font-size: 14.5px; white-space: nowrap; }
.rcard__why { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.rcard__txt { grid-column: 1 / -1; font-size: 13.5px; color: var(--text); }
.rcard__rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.rcard.is-done { opacity: .72; }
.data { border: 1px solid var(--line); border-radius: var(--r); }
.data summary { cursor: pointer; padding: 12px 14px; font-weight: 620; font-size: 14px; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.data summary::-webkit-details-marker { display: none; }
.data summary::after { content: "+"; color: var(--petrol); font-size: 18px; line-height: 1; }
.data[open] summary::after { content: "–"; }
.data[open] summary { border-bottom: 1px solid var(--line); }
.data .dtable-wrap { border: 0; border-radius: 0; }
.dtable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtable th { text-align: left; font-size: 12.5px; font-weight: 640; color: var(--muted); background: var(--mist); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtable td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.dtable td:not(:nth-child(2)), .dtable th { white-space: nowrap; }
.dtable td.wrap { white-space: normal; }
.dtable tr:last-child td { border-bottom: 0; }
.dtable td.num, .dtable th.num { text-align: right; white-space: nowrap; }
.dtable tbody tr { transition: background .15s; }
.dtable tbody tr[data-pick] { cursor: pointer; }
.dtable tbody tr[data-pick]:hover { background: var(--mist); }
.dtable tbody tr[aria-selected="true"] { background: var(--petrol-50); box-shadow: inset 3px 0 0 var(--petrol); }
.dtable b { color: var(--navy); font-weight: 640; }
.dtable small { display: block; color: var(--muted); font-size: 12.5px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.kpi { border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; display: grid; gap: 2px; background: #fff; }
.kpi small { font-size: 13px; color: var(--muted); }
.kpi b { font-family: var(--font-head); font-size: 23px; line-height: 1.15; font-weight: 600; letter-spacing: -.025em; color: var(--navy); }
.kpi span { font-size: 12.5px; color: var(--muted); }
.kpi--alert b { color: var(--petrol-t); }
.bars { display: grid; gap: 9px; }
.bar { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.bar__t { height: 12px; background: var(--mist-2); border-radius: 6px; overflow: hidden; }
.bar__t i { display: block; height: 100%; background: var(--petrol); border-radius: 6px; transition: width .5s var(--ease); }
.bar b { color: var(--navy); font-weight: 650; }
.reco { list-style: none; display: grid; gap: 8px; }
.reco button { width: 100%; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; font: inherit; color: inherit; }
.reco button[aria-pressed="true"] { border-color: var(--petrol); box-shadow: 0 0 0 3px var(--petrol-100); }
.reco b { color: var(--navy); font-weight: 650; font-size: 14px; }
.reco small { grid-column: 1 / -1; color: var(--text); font-size: 13px; line-height: 1.45; }
.reco .why { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters label { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.filters select { font: 600 14px var(--font); color: var(--navy); border: 1.5px solid var(--line-2); border-radius: var(--r-btn); padding: 8px 14px; background: #fff; min-height: 40px; }
.seq { list-style: none; display: grid; gap: 6px; }
.seq li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; font-size: 13.5px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.seq b { color: var(--petrol-t); font-weight: 700; }
@media (max-width: 1240px) {
  .crm { grid-template-columns: 200px minmax(0, 1fr); }
  .crm .assist { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .crm { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* les quatre scénarios restent visibles d'un coup d'œil (deux par ligne), sans défilement horizontal caché */
  .crm__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px; gap: 6px; }
  .crm__side p { display: none; }
  .crm__tab { min-width: 0; padding: 10px; }
  .crm__mh, .crm__mb { padding-inline: 14px; }
  .bar { grid-template-columns: minmax(0, 92px) minmax(0, 1fr) auto; }
  .rcard { padding: 13px 14px; }
}

/* ---------------------------------------------------------------- démonstrateur marketing */
.mkt__goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 16px; border-bottom: 1px solid var(--line); background: var(--mist); }
.goal { text-align: left; display: grid; gap: 4px; padding: 14px 15px; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s; }
.goal b { color: var(--navy); font-size: 15px; }
.goal small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.goal:hover { border-color: var(--line-2); }
.goal[aria-pressed="true"] { border-color: var(--navy); box-shadow: 0 0 0 3px var(--mist-2); }
.mkt__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mkt__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 370px); min-height: 560px; }
@media (min-width: 1101px) {
  .mkt__body { height: clamp(520px, calc(100vh - 330px), 700px); min-height: 0; }
  .mkt__main { overflow-y: auto; }
  .mkt__body .assist { overflow: hidden; }
  .mkt__body .assist__body { flex: 1; min-height: 0; }
}
.mkt__main { padding: 20px 22px 26px; display: grid; gap: 16px; align-content: start; min-width: 0; }
.mkt__main h4 { font-size: 15.5px; }
.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.angles { display: grid; gap: 8px; }
.angle { border: 1.5px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: #fff; display: grid; gap: 4px; }
.angle b { color: var(--navy); }
.angle.is-reco { border-color: var(--petrol); background: var(--petrol-50); }
.plan { list-style: none; counter-reset: pl; display: grid; gap: 8px; }
.plan li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.plan li::before { counter-increment: pl; content: counter(pl); width: 24px; height: 24px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font: 700 12px/1 var(--font); }
.content-card { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.content-card__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: var(--mist); border-bottom: 1px solid var(--line); }
.content-card__h b { color: var(--navy); font-size: 14.5px; }
.content-card__b { padding: 14px; display: grid; gap: 10px; }
.content-card__b .draft { min-height: 180px; }
.li-post { display: grid; gap: 10px; }
.li-post__who { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); }
.li-post__av { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.ad { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.ad__label { font-size: 12.5px; color: var(--muted); }
.ad b { font-size: 16px; color: var(--navy); }
.ad .ubtn { justify-self: start; }
.ideas { list-style: none; display: grid; gap: 6px; }
.ideas li { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ideas li b { color: var(--navy); }
.cal-wrap { overflow-x: auto; }
.cal { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.cal th, .cal td { border: 1px solid var(--line); padding: 8px; vertical-align: top; text-align: left; }
.cal th { background: var(--mist); font-size: 12.5px; color: var(--muted); font-weight: 640; }
.cal td span { display: block; padding: 5px 7px; border-radius: var(--r-xs); background: var(--petrol-50); color: var(--navy); font-weight: 600; margin-bottom: 4px; font-size: 12.5px; }
.cal td span.c2 { background: var(--coral-50); color: var(--coral-t); }
.cal td span.c3 { background: var(--mist-2); color: var(--navy); }
.vsteps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.vsteps li { padding: 6px 11px; border-radius: var(--pill); background: var(--mist); color: var(--navy); font-weight: 600; }
.vsteps li + li::before { content: "→"; margin-right: 6px; color: var(--muted); }
.todo-list { list-style: none; display: grid; gap: 6px; }
.todo-list label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: 14px; cursor: pointer; }
.todo-list input { margin: 2px 0 0; accent-color: var(--petrol); }
.todo-list input:checked ~ span { text-decoration: line-through; color: var(--muted); }
.todo-list small { color: var(--muted); white-space: nowrap; }
.sources { list-style: none; display: grid; gap: 8px; }
.sources li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; }
.sources li span.ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--petrol-50); color: var(--petrol-t); }
.sources li span.ic svg { width: 16px; height: 16px; }
.sources b { color: var(--navy); display: block; font-size: 14px; }
.sources small { color: var(--muted); font-size: 12.5px; }
@media (max-width: 1100px) { .mkt__goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mkt__body { grid-template-columns: minmax(0, 1fr); } .mkt__body .assist { border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 640px) {
  .mkt__goals { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px; }
  .goal { scroll-snap-align: start; }
  .cols2 { grid-template-columns: minmax(0, 1fr); }
  .mkt__main { padding-inline: 14px; }
  .mkt__bar .seg { width: 100%; }
}

/* ---------------------------------------------------------------- bas de démonstrateur */
.compare { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.compare__r { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.compare__r:first-child { border-top: 0; }
.compare__r > * { padding: 16px 20px; font-size: 15.5px; }
.compare__r > :first-child { font-weight: 640; color: var(--navy); }
.compare__r > :last-child { background: var(--petrol-50); color: var(--navy); }
.compare__h > * { font-size: 15px; font-weight: 650; color: var(--muted); padding-block: 14px; }
.compare__h > :last-child { color: var(--petrol-t); background: var(--petrol-100); }
@media (max-width: 760px) {
  .compare__r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .compare__r > :first-child { grid-column: 1 / -1; padding-bottom: 4px; }
  .compare__r > * { padding: 12px 14px; font-size: 14.5px; }
  .compare__h > :first-child { display: none; }
}
.howit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.howit > div { padding-top: 22px; border-top: 1px solid var(--line-2); display: grid; gap: 12px; align-content: start; }
.howit ul { list-style: none; display: grid; gap: 9px; font-size: 15.5px; }
.howit li { padding-left: 22px; position: relative; }
.howit li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--petrol); }
@media (max-width: 900px) { .howit { grid-template-columns: minmax(0, 1fr); } }
.others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--line-2); }
.other { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--navy); }
.other b { font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -.016em; }
.other small { display: block; color: var(--muted); font-size: 15px; font-weight: 400; margin-top: 2px; }
.other::after { content: "→"; font-size: 22px; color: var(--petrol); transition: transform .25s var(--ease); }
.other:hover { color: var(--petrol-t); }
.other:hover::after { transform: translateX(4px); }
@media (max-width: 700px) { .others { grid-template-columns: minmax(0, 1fr); } }

/* Assistant commercial : statuts neutres, la couleur pétrole signale ce que l'assistant met en avant */
[data-sales] .tag--risk, [data-sales] .tag--warn, [data-sales] .tag--ok { background: var(--mist-2); color: var(--navy); }
.mail-item__top > span { min-width: 0; }