/* ============================================================
   Composants réutilisables. Chaque bloc correspond à un composant
   du Design System ; on les assemble pour composer chaque page.
   ============================================================ */

/* ---------- Navigation latérale ---------- */
.nav { width: 188px; flex-shrink: 0; border-right: var(--border); padding: 24px 16px; display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; }
.nav-logo { font-family: var(--font-serif); font-size: 20px; margin-bottom: 28px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--radius-md); font-size: 14px; color: var(--gris-fonce); position: relative; margin-bottom: 2px; }
.nav-item:hover { background: var(--blanc); }
.nav-item.active { background: var(--gris-clair); color: var(--graphite); }
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--graphite); }
.ni-dot { width: 16px; height: 16px; border-radius: 4px; background: currentColor; opacity: .32; flex-shrink: 0; }
.nav-foot { font-size: 13px; color: var(--gris-texte); padding: 9px 11px; }
/* Bloc bas : CTA d'action (Téléphonie) détaché + déconnexion */
.nav-action-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: var(--border); }
.nav-action { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: var(--radius-md); font-size: 14px; background: var(--graphite); color: var(--blanc-casse); }
.nav-action:hover { opacity: .9; }

/* ---------- La balance (double bloc KPI : acquisition / churn) ---------- */
.balance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bal-pane { padding: 21px 22px; }
.bal-head { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; font-size: 12px; color: var(--gris-texte); letter-spacing: .03em; text-transform: uppercase; }
.arrow.up { color: var(--vert); }
.arrow.down { color: var(--ambre); }
.bal-row { display: flex; align-items: flex-end; justify-content: space-between; }
.stat .v { font-family: var(--font-serif); font-size: 22px; line-height: 1; }
.stat .l { font-size: 12px; color: var(--gris-texte); margin-top: 6px; }
.stat.big .v { font-size: 32px; }
.stat.big .v .u { font-size: 17px; color: var(--gris-texte); }
.v.good { color: var(--vert); }
.v.warn { color: var(--ambre); }
.to { font-size: 15px; color: var(--gris-texte); margin-bottom: 13px; }
.bal-foot { font-size: 12px; color: var(--gris-texte); margin-top: 18px; padding-top: 14px; border-top: var(--border); }
.bal-foot.warn { color: var(--ambre); display: flex; align-items: center; gap: 6px; }

/* ---------- Solde net mensuel (graphique en barres divergentes) ---------- */
.trend { margin-top: 12px; padding: 22px 24px; }
.trend-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; }
.trend-title { font-family: var(--font-serif); font-size: 17px; }
.trend-meta { font-size: 12px; color: var(--gris-texte); }
.trend-sub { font-size: 13px; color: var(--gris-fonce); margin-bottom: 20px; }
.chart { display: flex; align-items: stretch; gap: 7px; height: 170px; position: relative; padding: 14px 0; }
.zero-line { position: absolute; left: 0; right: 0; top: 50%; height: 0.5px; background: var(--gris-clair); }
.zero-tag { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--gris-texte); background: var(--blanc); padding: 0 4px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.bar-top, .bar-bot { flex: 1; display: flex; flex-direction: column; width: 100%; align-items: center; }
.bar-top { justify-content: flex-end; }
.bar-bot { justify-content: flex-start; }
.bar { width: 62%; border-radius: 3px; position: relative; }
.bar.pos { background: var(--vert); }
.bar.neg { background: var(--rouge); }
.bar.neg.soft { background: var(--ambre); }
.bar-val { position: absolute; font-size: 12px; line-height: 1; color: var(--gris-texte); width: 40px; text-align: center; left: 50%; transform: translateX(-50%); }
.bar.pos .bar-val { top: -15px; }
.bar.neg .bar-val { bottom: -15px; }
.bar-month { position: absolute; bottom: -20px; font-size: 12px; line-height: 1; color: var(--gris-texte); }
.chart-foot { display: flex; margin-top: 34px; border-top: var(--border); }
.cf-item { flex: 1; padding: 14px 0; }
.cf-item + .cf-item { border-left: var(--border); padding-left: 18px; }
.cf-item .v { font-family: var(--font-serif); font-size: 24px; }
.cf-item .v.good { color: var(--vert); }
.cf-item .v.warn { color: var(--ambre); }
.cf-item .l { font-size: 12px; color: var(--gris-texte); margin-top: 4px; }
.legend { display: flex; gap: 18px; font-size: 12px; color: var(--gris-texte); margin-top: 14px; }
.lg { display: flex; align-items: center; gap: 6px; }
.lg .sw { width: 11px; height: 11px; border-radius: 2px; }

/* ---------- Ligne « à surveiller » + badge action IA ---------- */
.watch-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.watch-icon.warn { background: var(--ambre-bg); color: var(--ambre); }
.chev { color: var(--gris-moyen); font-size: 18px; }

/* ---------- Liste membres à risque + badges de palier ---------- */
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gris-clair); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--gris-fonce); flex-shrink: 0; }
.badge { font-size: 12px; padding: 3px 8px; border-radius: var(--radius-md); white-space: nowrap; }
.badge.neutral { color: var(--gris-fonce); background: var(--gris-clair); }
.badge.warn { color: var(--ambre); background: var(--ambre-bg); }
.badge.crit { color: var(--rouge); background: var(--rouge-bg); }
.badge.ia { color: var(--vert); background: var(--vert-bg); display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Bandeau preuve de valeur (permanent) ---------- */
.proof { border-top: var(--border); padding-top: 18px; margin-top: 28px; }
.proof-label { font-size: 12px; color: var(--gris-texte); letter-spacing: .03em; margin-bottom: 14px; }

/* Récap hebdo en lignes : catégorie + tunnel (chiffres) + détail canal */
.proof-grid { display: grid; grid-template-columns: auto 1fr; gap: 16px 20px; align-items: baseline; }
.proof-cat { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-texte); padding-top: 3px; }
.proof-val { display: flex; flex-direction: column; gap: 6px; }
.pf-funnel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pf-step { display: inline-flex; align-items: baseline; gap: 5px; }
.pf-num { font-family: var(--font-serif); font-size: 20px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.pf-lbl { font-size: 13px; color: var(--gris-fonce); }
.pf-arr { color: var(--gris-moyen); margin: 0 2px; }
.pf-sep { color: var(--gris-clair); }
.pf-chan { font-size: 12px; color: var(--gris-texte); }
.pf-chanlabel { width: 80px; flex-shrink: 0; font-size: 12px; color: var(--gris-texte); }
.pf-eq { color: var(--gris-moyen); margin: 0 8px; }
.pf-conv { font-family: var(--font-serif); font-size: 20px; color: var(--vert); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .nav { width: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: var(--border); gap: 4px; position: static; height: auto; overflow: visible; }
  .nav-action-wrap { width: 100%; margin-top: 8px; padding-top: 10px; }
  .nav-logo { width: 100%; margin-bottom: 12px; }
  .nav-foot { display: none; }
  .balance { grid-template-columns: 1fr; }
}

/* ============================================================
   Page Membres
   ============================================================ */
.badge.ok { color: var(--vert); background: var(--vert-bg); }

/* KPIs en tête */
.mkpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.mkpi { padding: 18px 20px; }
.mkpi-label { font-size: 12px; color: var(--gris-texte); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 10px; }
.mkpi-value { font-family: var(--font-serif); font-size: 28px; line-height: 1; color: var(--graphite); }
.mkpi-value.good { color: var(--vert); }
.mkpi-value.warn { color: var(--ambre); }

/* Filtres (chips) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { font-family: var(--font-sans); font-size: 13px; color: var(--gris-fonce); background: var(--blanc); border: var(--border); border-radius: 999px; padding: 6px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--gris-moyen); }
.chip.active { background: var(--graphite); color: var(--blanc); border-color: var(--graphite); }
.chip-n { font-variant-numeric: tabular-nums; color: var(--gris-texte); }
.chip.active .chip-n { color: var(--gris-clair); }

/* Table membres */
.mtable-card { padding: 4px 18px; }
.mtable { width: 100%; border-collapse: collapse; }
.mtable th, .mtable td { padding: 13px 10px; text-align: left; font-size: 14px; vertical-align: middle; }
.mtable thead th { font-size: 12px; font-weight: 400; color: var(--gris-texte); letter-spacing: .03em; text-transform: uppercase; border-bottom: var(--border); }
.mtable tbody tr + tr td { border-top: var(--border); }
.mtable tbody tr:hover { background: var(--blanc-casse); }
/* Event « mis en avant » : surbrillance verte (bordure gauche + fond léger, tokens DA). */
.mtable tbody tr.ev-featured td { background: var(--vert-bg); }
.mtable tbody tr.ev-featured td:first-child { box-shadow: inset 3px 0 var(--vert); }
.mt-member .avatar { display: inline-flex; vertical-align: middle; margin-right: 10px; }
.mt-ia { color: var(--gris-texte); font-size: 13px; }
.mt-chev { color: var(--gris-moyen); font-size: 18px; text-align: right; width: 24px; }
.mlist-foot { font-size: 12px; color: var(--gris-texte); margin-top: 14px; }
.chan-card { padding: 16px 22px; display: flex; flex-direction: column; gap: 8px; }
.week-sep { height: 0.5px; background: var(--gris-clair); margin: 2px 0; }
.ct-excerpt { color: var(--gris-fonce); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Page Agents IA
   ============================================================ */
.agents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.agent-card { padding: 20px 22px; }
.agent-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.agent-name { font-family: var(--font-serif); font-size: 19px; }
.agent-role { font-size: 13px; color: var(--gris-texte); margin-top: 3px; }
.agent-stat { font-size: 14px; color: var(--gris-fonce); padding-top: 14px; border-top: var(--border); }
.agent-cfg { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--gris-fonce); border-bottom: 0.5px solid var(--gris-clair); padding-bottom: 2px; }
.agent-cfg:hover { color: var(--graphite); }

/* Interrupteur Actif / En pause (visuel) */
.toggle { width: 38px; height: 22px; border-radius: 999px; background: var(--gris-clair); position: relative; flex-shrink: 0; }
.toggle.on { background: var(--vert); }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--blanc); }
.toggle.on .knob { left: 18px; }

@media (max-width: 860px) { .agents-grid { grid-template-columns: 1fr; } }

/* ---------- Modale agent réel (gate ON) : chat + config + persona + historique ---------- */
.agm-chat { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 240px; overflow-y: auto; padding: var(--sp-1) 0 var(--sp-2); }
.agm-msg { font-size: 14px; line-height: 1.45; padding: 8px 12px; border-radius: var(--radius-md); max-width: 85%; white-space: pre-wrap; word-break: break-word; }
.agm-msg.user { align-self: flex-end; background: var(--gris-clair); color: var(--graphite); }
.agm-msg.assistant { align-self: flex-start; background: var(--vert-bg); color: var(--graphite); }
.agm-msg.err { background: var(--rouge-bg); color: var(--rouge); }
.agm-chat-input { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.agm-chat-input .form-input { flex: 1; min-width: 0; }
.agm-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 14px; color: var(--graphite); margin-bottom: var(--sp-3); }
.agm-check input { width: 16px; height: 16px; }
.agm-persona-row { display: flex; gap: var(--sp-2); align-items: center; }
.agm-persona-row .form-select { flex: 1; min-width: 0; }
.agm-prompt { min-height: 120px; font-family: var(--font-sans); }
.agm-hist-row { padding: 10px 0; border-bottom: 0.5px solid var(--gris-clair); }
.agm-hist-row:last-child { border-bottom: none; }
.agm-hist-when { font-size: 12px; color: var(--gris-texte); margin-bottom: 4px; }
.agm-hist-u { font-size: 13px; color: var(--graphite); }
.agm-hist-a { font-size: 13px; color: var(--gris-fonce); margin-top: 2px; padding-left: var(--sp-2); border-left: 2px solid var(--vert-bg); }
.agm-hist-empty { font-size: 13px; color: var(--gris-texte); padding: 4px 0; }

/* ============================================================
   Page Réglages
   ============================================================ */
.set-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.set-row + .set-row { border-top: var(--border); }
.set-info { flex: 1; min-width: 0; }
.set-title { font-size: 14px; }
.set-desc { font-size: 12px; color: var(--gris-texte); margin-top: 2px; }
.set-action { font-size: 13px; color: var(--gris-fonce); border-bottom: 0.5px solid var(--gris-clair); padding-bottom: 2px; flex-shrink: 0; }
.set-action:hover { color: var(--graphite); }
.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 18px; font-size: 14px; }
.info-row + .info-row { border-top: var(--border); }
.info-row .k { color: var(--gris-texte); }
.info-row .v { color: var(--graphite); }

/* Apparence (thème) */
.swatches-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.swatch-btn { width: 26px; height: 26px; border-radius: 50%; border: 0.5px solid var(--gris-clair); cursor: pointer; padding: 0; }
.swatch-btn.active { box-shadow: 0 0 0 2px var(--blanc), 0 0 0 3.5px var(--graphite); }
.bg-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 13px; color: var(--gris-fonce); background: var(--blanc); border: var(--border); border-radius: 999px; padding: 5px 11px 5px 6px; cursor: pointer; }
.bg-btn.active { border-color: var(--graphite); color: var(--graphite); }
.bg-swatch { width: 18px; height: 18px; border-radius: 50%; border: 0.5px solid var(--gris-clair); }

/* ============================================================
   Page Téléphonie — Kanban pipeline
   ============================================================ */
.kb-board { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.kb-col { background: var(--blanc-casse); border: var(--border); border-radius: var(--radius-lg); min-height: 120px; }
.kb-col-head { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-texte); padding: 12px 12px 8px; display: flex; align-items: center; gap: 6px; }
.kb-count { background: var(--gris-clair); color: var(--gris-fonce); border-radius: 999px; padding: 0 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.kb-col-body { padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.kb-card { background: var(--blanc); border: var(--border); border-radius: var(--radius-md); padding: 10px 11px; }
.kb-name { font-size: 13px; }
.kb-meta { font-size: 12px; color: var(--gris-texte); margin-top: 3px; }
.kb-empty { font-size: 12px; color: var(--gris-clair); padding: 6px 4px; }

@media (max-width: 860px) { .kb-board { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(150px, 80%); } }

/* --- Signature « onglet d'action » (Téléphonie) --- */
.action-tag { display: inline-block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--blanc-casse); background: var(--graphite); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; }
.btn-action { font-family: var(--font-sans); font-size: 13px; color: var(--blanc-casse); background: var(--graphite); border: none; border-radius: var(--radius-md); padding: 7px 14px; cursor: pointer; flex-shrink: 0; }
.btn-action:hover { opacity: .88; }
/* Cartes Kanban manipulables */
.kb-card { cursor: grab; transition: box-shadow .12s ease, transform .12s ease; }
.kb-card:hover { box-shadow: 0 2px 10px rgba(26,26,24,.07); transform: translateY(-1px); }
.kb-actions { display: flex; gap: 6px; margin-top: 9px; }
.kb-act { font-family: var(--font-sans); font-size: 12px; color: var(--gris-fonce); background: var(--blanc-casse); border: var(--border); border-radius: var(--radius-md); padding: 4px 8px; cursor: pointer; }
.kb-act:hover { border-color: var(--graphite); color: var(--graphite); }

/* ============================================================
   Chat global « Directeur IA »
   ============================================================ */
.chat-fab { position: fixed; bottom: 22px; right: 22px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; background: var(--graphite); color: var(--blanc-casse); border: none; border-radius: 999px; padding: 12px 18px; font-family: var(--font-sans); font-size: 14px; cursor: pointer; box-shadow: 0 4px 16px rgba(26,26,24,.16); }
.chat-fab:hover { opacity: .92; }
.chat-panel { position: fixed; bottom: 22px; right: 22px; z-index: 51; width: 360px; max-width: calc(100vw - 32px); height: 70vh; max-height: 560px; background: var(--blanc); border: var(--border); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(26,26,24,.18); display: flex; flex-direction: column; overflow: hidden; }
/* `display:flex` ci-dessus écrase la règle UA `[hidden]{display:none}` : sans
   ceci le panneau s'affiche au chargement (attribut hidden ignoré) ET la croix
   reste sans effet (closeChat pose hidden=true mais flex le ré-affiche). On
   rend l'attribut hidden prioritaire → démarre FERMÉ, la croix referme. */
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px; border-bottom: var(--border); }
.chat-title { font-family: var(--font-serif); font-size: 17px; }
.chat-sub { font-size: 12px; color: var(--gris-texte); margin-top: 2px; }
.chat-close { background: none; border: none; font-size: 16px; color: var(--gris-moyen); cursor: pointer; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { font-size: 14px; line-height: 1.5; padding: 10px 13px; border-radius: var(--radius-md); max-width: 85%; }
.chat-msg.ai { background: var(--blanc-casse); border: var(--border); color: var(--graphite); align-self: flex-start; }
.chat-msg.user { background: var(--graphite); color: var(--blanc-casse); align-self: flex-end; }
.chat-suggest { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chat-chip { font-family: var(--font-sans); font-size: 13px; color: var(--gris-fonce); background: var(--blanc); border: var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer; text-align: left; }
.chat-chip:hover { border-color: var(--graphite); color: var(--graphite); }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: var(--border); }
.chat-input input { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: 14px; padding: 9px 12px; border: var(--border); border-radius: var(--radius-md); background: var(--blanc-casse); color: var(--graphite); }
.chat-input input:focus { outline: none; border-color: var(--gris-moyen); }

/* ============================================================
   Page « À valider » — file de décisions (human-in-the-loop)
   ============================================================ */
.nav-badge { background: var(--blanc-casse); color: var(--graphite); border-radius: 999px; font-size: 12px; padding: 1px 7px; margin-left: 6px; font-variant-numeric: tabular-nums; }
.decision-list { display: flex; flex-direction: column; gap: 12px; }
.decision { padding: 18px 20px; }
.decision-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.decision-note { font-size: 12px; color: var(--gris-texte); }
.decision-title { font-size: 15px; color: var(--graphite); margin-bottom: 8px; }
.decision-preview { font-size: 14px; color: var(--gris-fonce); background: var(--blanc-casse); border-left: 2px solid var(--gris-clair); padding: 10px 13px; border-radius: var(--radius-md); line-height: 1.5; }
.decision-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.btn-light { font-family: var(--font-sans); font-size: 13px; color: var(--gris-fonce); background: var(--blanc); border: var(--border); border-radius: var(--radius-md); padding: 7px 14px; cursor: pointer; }
.btn-light:hover { border-color: var(--graphite); color: var(--graphite); }

/* ============================================================
   Page Événements — Défis IA
   ============================================================ */
.chal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chal-card { padding: 18px 20px; }
.chal-title { font-family: var(--font-serif); font-size: 16px; }
.chal-desc { font-size: 13px; color: var(--gris-texte); margin: 4px 0 14px; }
.prog { height: 6px; background: var(--gris-clair); border-radius: 999px; overflow: hidden; }
.prog-fill { height: 100%; background: var(--vert); border-radius: 999px; }
.chal-foot { font-size: 12px; color: var(--gris-texte); margin-top: 10px; }
@media (max-width: 860px) { .chal-grid { grid-template-columns: 1fr; } }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.chal-auto { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris-fonce); }
/* Gate ON : toggle auto-génération CLIQUABLE (édite challenges_enabled). Reset du
   style bouton natif pour reprendre l'apparence de la rangée .chal-auto. */
.chal-autogen-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gris-fonce); background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.chal-auto-disabled { opacity: 0.5; cursor: help; }
.chal-actions { margin-top: 12px; }

/* Réglages : valeur de droite (tunnel) */
.set-value { font-family: var(--font-serif); font-size: 16px; color: var(--graphite); white-space: nowrap; }

/* Page Base de connaissance */
.kn-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; }
.kn-tag { font-size: 13px; color: var(--gris-fonce); background: var(--blanc-casse); border: var(--border); border-radius: 999px; padding: 5px 12px; }
.kn-faq-card { padding: 4px 18px; }
.kn-faq { padding: 14px 0; }
.kn-faq + .kn-faq { border-top: var(--border); }
.kn-q { font-size: 14px; color: var(--graphite); }
.kn-a { font-size: 13px; color: var(--gris-fonce); margin-top: 4px; line-height: 1.5; }

@media (max-width: 860px) {
  .mkpi-row { grid-template-columns: 1fr 1fr; }
  .mtable-card { overflow-x: auto; }
  .mtable { min-width: 640px; }
}

/* ============================================================
   Membres — Tendance : mini-barres de rétention 12 mois
   ============================================================ */
.ret-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; }
.ret-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.ret-track { width: 100%; max-width: 26px; height: 110px; background: var(--gris-clair); border-radius: var(--radius-md); display: flex; align-items: flex-end; overflow: hidden; }
.ret-fill { width: 100%; background: var(--vert); border-radius: var(--radius-md); }
.ret-pct { font-family: var(--font-serif); font-size: 12px; color: var(--gris-fonce); margin-top: 6px; font-variant-numeric: tabular-nums; }
.ret-month { font-size: 12px; line-height: 1; color: var(--gris-texte); margin-top: 2px; }

/* Matching partenaires : séparateur « ✕ » entre les deux noms */
.pair-x { color: var(--gris-moyen); font-size: 12px; margin: 0 2px; }

@media (max-width: 860px) {
  .ret-chart { overflow-x: auto; gap: 6px; }
  .ret-col { min-width: 30px; }
}

/* Apparence : upload image de fond */
.bg-upload { display: flex; align-items: center; gap: 10px; }
.bg-thumb { width: 48px; height: 32px; border-radius: var(--radius-md); border: var(--border); background: var(--gris-clair); display: inline-block; flex-shrink: 0; }

/* ===== Page Conversations (inbox WhatsApp supervisée par l'IA) ===== */
.conv-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 12px; }
.conv-list { padding: 4px 0; max-height: 60vh; overflow: auto; }
.conv-item { display: flex; gap: 10px; padding: 12px 16px; cursor: pointer; border-bottom: var(--border); align-items: center; }
.conv-item:hover { background: var(--blanc-casse); }
.conv-item.active { background: var(--gris-clair); }
.conv-item:last-child { border-bottom: none; }
.conv-main { flex: 1; min-width: 0; }
.conv-name { font-size: 14px; }
.conv-prev { font-size: 12px; color: var(--gris-texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.conv-when { font-size: 12px; color: var(--gris-texte); white-space: nowrap; }
.conv-thread { display: flex; flex-direction: column; min-height: 420px; }
.conv-thead { padding: 14px 18px; border-bottom: var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conv-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; overflow: auto; }
.conv-msg { max-width: 75%; font-size: 14px; line-height: 1.45; padding: 9px 12px; border-radius: var(--radius-md); }
.conv-msg.in { align-self: flex-start; background: var(--blanc-casse); border: var(--border); }
.conv-msg.ai { align-self: flex-start; background: var(--vert-bg); color: var(--graphite); }
.conv-msg.out { align-self: flex-end; background: var(--graphite); color: var(--blanc-casse); }
.conv-ai-tag { display: block; font-size: 12px; color: var(--vert); margin-bottom: 3px; }
.conv-foot { border-top: var(--border); padding: 12px 18px; display: flex; flex-direction: column; gap: 10px; }
.conv-winnote { align-self: flex-start; }
.conv-aibar { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gris-fonce); }
.conv-aibar .btn-light { margin-left: auto; }
.conv-input { display: flex; gap: 8px; }
.conv-input input { flex: 1; min-width: 0; font-size: 14px; padding: 9px 12px; border: var(--border); border-radius: var(--radius-md); background: var(--blanc-casse); }
@media (max-width: 860px) { .conv-wrap { grid-template-columns: 1fr; } }

/* ============================================================
   Modale + Drawer + Formulaire (overlays réutilisables)
   ============================================================ */
.modal-overlay { position: fixed; inset: 0; background: rgba(26,26,24,.38); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1000; }
.modal { background: var(--blanc-casse); border: var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(26,26,24,.18); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: var(--border); }
.modal-title { font-family: var(--font-serif); font-size: 20px; }
.modal-close { border: none; background: none; font-size: 18px; color: var(--gris-moyen); cursor: pointer; line-height: 1; padding: 4px; }
.modal-close:hover { color: var(--graphite); }
.modal-body { padding: 20px 22px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: var(--border); }
.modal-sub { font-size: 13px; color: var(--gris-texte); margin: -4px 0 16px; }

/* Drawer latéral droit (détail lead) */
.drawer-overlay { position: fixed; inset: 0; background: rgba(26,26,24,.38); display: flex; justify-content: flex-end; z-index: 1000; }
.drawer { background: var(--blanc-casse); border-left: var(--border); width: 100%; max-width: 420px; height: 100%; display: flex; flex-direction: column; box-shadow: -16px 0 48px rgba(26,26,24,.16); }
.drawer .modal-body { flex: 1; }

/* Formulaire */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12px; color: var(--gris-texte); margin-bottom: 6px; letter-spacing: .02em; }
.form-input, .form-select, .form-textarea { width: 100%; font-size: 14px; font-family: var(--font-sans); padding: 9px 12px; border: var(--border); border-radius: var(--radius-md); background: var(--blanc); color: var(--graphite); }
.form-textarea { min-height: 78px; resize: vertical; }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Modération IA */
.mod-flag { padding: 14px 0; border-top: var(--border); }
.mod-flag:first-child { border-top: none; }
.mod-flag-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mod-flag-from { font-size: 13px; color: var(--gris-texte); }
.mod-flag-text { font-size: 14px; margin-bottom: 10px; }
.mod-flag-actions { display: flex; gap: 8px; }
.mod-words { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mod-word { font-size: 13px; padding: 4px 10px; border: var(--border); border-radius: var(--radius-md); background: var(--gris-clair); display: inline-flex; align-items: center; gap: 6px; }
.mod-word button { border: none; background: none; color: var(--gris-moyen); cursor: pointer; font-size: 13px; line-height: 1; }
.mod-add { display: flex; gap: 8px; margin-top: 12px; }
.mod-add input { flex: 1; }
.mod-log-row { display: flex; gap: 12px; padding: 9px 0; border-top: var(--border); font-size: 13px; }
.mod-log-row:first-child { border-top: none; }
.mod-log-when { color: var(--gris-texte); white-space: nowrap; min-width: 88px; }

/* Téléphonie : derniers appels + transcript */
.call-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: var(--border); }
.call-row:first-child { border-top: none; }
.call-row .set-info { flex: 1; }
.tr-line { margin-bottom: 12px; }
.tr-who { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-texte); margin-bottom: 3px; }
.tr-marie .tr-who { color: var(--vert); }
.tr-text { font-size: 14px; }

/* Kanban interactif */
.kb-card { cursor: pointer; }
.kb-card[draggable="true"] { cursor: grab; }
.kb-card.dragging { opacity: .45; }
.kb-col-body.drop-hot { background: var(--vert-bg); border-radius: var(--radius-md); outline: 1px dashed var(--vert); outline-offset: -3px; }

/* ============================================================
   LOT 5 — Sémantique : reset des nouveaux <button> qui remplacent
   des <a>/<div> d'action (.agent-cfg, .nav-foot, .conv-item).

   :where(...) ramène la spécificité du bloc à 0,0,0. Avantage clé :
   les règles spécifiques existantes (.agent-cfg, .nav-foot,
   .conv-item, .conv-item.active, .conv-item:hover…) gagnent TOUJOURS
   par spécificité, quel que soit l'ordre dans le fichier. On
   neutralise juste les défauts natifs du <button> (UA stylesheet,
   spécificité encore plus basse) → iso-rendu visuel garanti par
   CONSTRUCTION, pas par position.
   ============================================================ */
:where(.agent-cfg, .nav-foot, .conv-item) {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
/* Styles VOULUS (pas du reset) — restent en spécificité normale. */
.conv-item { width: 100%; }
.nav-disabled { opacity: .55; cursor: not-allowed; }

/* ============================================================
   LOT 7 — Feature #11 : sélecteur de mode (segmented control) + activité IA annulable.
   ============================================================ */
.mode-switch { display: inline-flex; gap: 0; border: var(--border); border-radius: 999px; padding: 2px; background: var(--blanc-casse); }
.mode-radio { padding: 4px 12px; font-family: var(--font-sans); font-size: 12px; color: var(--gris-fonce); cursor: pointer; border-radius: 999px; background: none; border: none; }
.mode-radio[aria-checked="true"] { background: var(--graphite); color: var(--blanc-casse); }
.mode-radio:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }
.mode-radio:hover:not([aria-checked="true"]) { color: var(--graphite); }
.mode-switch-row { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.mode-hint { font-size: 12px; color: var(--gris-texte); line-height: 1.5; }
.mode-hint b { color: var(--gris-fonce); font-weight: 500; }

.activity-row { align-items: center; gap: 12px; }
.activity-text { flex: 1; min-width: 0; }
.activity-row > :last-child { margin-left: auto; }
.activity-expired { font-size: 12px; color: var(--gris-texte); font-style: italic; }
.activity-undone .activity-text { text-decoration: line-through; color: var(--gris-texte); }

/* Kanban : popup "Déplacer vers" (alternative clavier au drag souris) */
.kb-move-menu { position: absolute; background: var(--blanc); border: var(--border); border-radius: var(--radius-md); box-shadow: 0 6px 24px rgba(26,26,24,.16); padding: 6px; display: flex; flex-direction: column; min-width: 180px; z-index: 1100; }
.kb-move-item { background: none; border: none; padding: 8px 12px; text-align: left; font-family: var(--font-sans); font-size: 14px; color: var(--graphite); cursor: pointer; border-radius: var(--radius-md); }
.kb-move-item:hover, .kb-move-item:focus-visible { background: var(--gris-clair); outline: none; }
.drawer-field { padding: 12px 0; border-top: var(--border); }
.drawer-field:first-child { border-top: none; }
.drawer-field .k { font-size: 12px; color: var(--gris-texte); }
.drawer-field .v { font-size: 14px; margin-top: 2px; }

/* ============================================================
   LOT Contraste — Filets basse densité (écrans non-retina).
   Les hairlines 0,5px disparaissent ou bavent sur les laptops
   Windows des gérants (dppx ~1). En dessous de 1.5dppx on remonte
   TOUS les filets à 1px net : le token --border (override :root, ce
   fichier charge en dernier donc il gagne) + les hairlines codées en
   dur (zero-line, séparateurs, soulignés de liens, bordures de
   pastilles). Au-dessus (retina), on conserve le rendu fin d'origine.
   ============================================================ */
@media (resolution < 1.5dppx) {
  :root { --border: 1px solid var(--gris-clair); }
  .zero-line, .week-sep { height: 1px; }
  .see-all, .agent-cfg, .set-action { border-bottom-width: 1px; }
  .swatch-btn, .bg-swatch { border-width: 1px; }
}

/* ============================================================
   Page Impayés (écran gérant) — mobile d'abord.
   KPIs serif (style balance), liste actionnable = lignes sur desktop /
   cartes empilées sous 860px, contentieux > 90 j replié séparément.
   ============================================================ */

/* Badge compteur « Impayés » dans la nav latérale (item clair → ton ambre,
   poussé à droite). Visible sur toutes les pages = fonction de rappel. */
.nav-item .nav-badge-count { background: var(--ambre-bg); color: var(--ambre); margin-left: auto; }

/* KPIs de tête : 2 colonnes pleine largeur (gardées même en mobile). */
.imp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.imp-kpi { padding: 20px 22px; }
.imp-kpi-label { font-size: 12px; color: var(--gris-texte); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 12px; }
.imp-kpi-value { font-family: var(--font-serif); font-size: 32px; line-height: 1; color: var(--graphite); font-variant-numeric: tabular-nums; }
.imp-kpi-value.warn { color: var(--ambre); }
.imp-kpi-value.good { color: var(--vert); }
.imp-kpi-sub { font-size: 13px; color: var(--gris-texte); margin-top: 10px; }

/* Ligne de fraîcheur sous les KPIs. */
.imp-fresh { font-size: 13px; color: var(--gris-texte); margin-bottom: 6px; }
.imp-fresh.stale { color: var(--ambre); display: inline-flex; align-items: center; gap: 6px; }

/* La page Impayés est un poste de travail. On laisse .main occuper toute la
   largeur (on annule le cap 920px de lecture, propre aux autres pages) et on
   CENTRE le contenu via .imp-page — le blanc se répartit gauche/droite au lieu
   de s'accumuler à droite. Padding latéral resserré pour gagner en densité. */
.main-impayes { max-width: none; padding-inline: 28px; }
/* Zone de travail centrée + resserrée. Tout le contenu (KPIs + master-detail +
   contentieux) partage ce cadre → largeurs alignées (point de cohérence). */
.imp-page { max-width: 1100px; margin-inline: auto; }

/* === v2 — Master-detail : liste (gauche) + fiche (droite, 1fr). Master borné
   320–400px : reste lisible jusqu'au floor laptop sans écraser la fiche. === */
.imp-md { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
.imp-master { min-width: 0; }
.imp-detail { min-width: 0; position: sticky; top: 16px; }

/* Liste actionnable : 1 ligne = 1 membre, SÉLECTIONNABLE (<button>). */
.imp-list { padding: 4px 8px; }
.imp-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 10px; background: none; border: 0; border-radius: var(--radius-md); font-family: var(--font-sans); text-align: left; cursor: pointer; color: inherit; }
.imp-row + .imp-row { border-top: var(--border); }
.imp-row:hover { background: var(--blanc-casse); }
.imp-row.is-active { background: var(--gris-clair); }
.imp-row:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }
.imp-id { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
.imp-id-txt { min-width: 0; display: flex; flex-direction: column; }
.imp-name { font-size: 14px; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.imp-id-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.imp-flag { font-size: 12px; color: var(--ambre); }
/* Montant : Inter tabular-nums (JAMAIS serif dans les cellules). */
.imp-amount { flex: 0 0 auto; min-width: 78px; text-align: right; font-family: var(--font-sans); font-size: 14px; color: var(--graphite); font-variant-numeric: tabular-nums; }
.imp-seqwrap { flex: 0 0 auto; min-width: 44px; text-align: right; }

/* Badge séquence de la ligne maître : — pas démarrée / J2/3 en cours / ×3 épuisée. */
.imp-seqbadge { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: var(--radius-md); font-variant-numeric: tabular-nums; }
.imp-seqbadge.is-none { color: var(--gris-moyen); }            /* glyphe « — » décoratif */
.imp-seqbadge.is-active { color: var(--ambre); background: var(--ambre-bg); }
.imp-seqbadge.is-exhausted { color: var(--rouge); background: var(--rouge-bg); }

/* === Fiche (colonne detail) === */
.imp-fiche-empty { padding: 48px 28px; text-align: center; }
.imp-fiche-empty-txt { font-family: var(--font-serif); font-size: 20px; color: var(--gris-fonce); margin-bottom: 8px; }
.imp-fiche-empty-sub { font-size: 13px; color: var(--gris-texte); max-width: 320px; margin: 0 auto; }

.imp-fiche { padding: 20px 22px; }
.imp-fiche-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.imp-fiche-back { display: none; }  /* visible seulement en mobile (plein écran) */
.imp-fiche-idtxt { min-width: 0; }
.imp-fiche-name { font-family: var(--font-serif); font-size: 22px; color: var(--graphite); }
.imp-fiche-meta { font-size: 13px; color: var(--gris-texte); margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.imp-fiche-status { font-size: 12px; padding: 1px 8px; border-radius: var(--radius-md); }
.imp-fiche-status.on { color: var(--vert); background: var(--vert-bg); }
.imp-fiche-status.off { color: var(--gris-fonce); background: var(--gris-clair); }
.imp-fiche-contact { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-top: var(--border); border-bottom: var(--border); margin-bottom: 16px; }
.imp-fiche-clabel { font-size: 12px; color: var(--gris-texte); text-transform: uppercase; letter-spacing: .03em; }
.imp-fiche-phone { font-size: 15px; color: var(--graphite); text-decoration: none; font-variant-numeric: tabular-nums; }
.imp-fiche-phone:hover { color: var(--vert); }
.imp-fiche-phone.none { color: var(--gris-texte); font-size: 13px; }
.imp-fiche-sec { margin-bottom: 18px; }
/* Échéances (gauche) + séquence (droite) : 2 sous-colonnes dès que la fiche est
   assez large (auto-fit s'adapte à la largeur réelle de la colonne, sans media
   query), sinon empilées. Exploite l'espace au lieu d'une colonne étroite. */
.imp-fiche-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; align-items: start; }
.imp-fiche-cols .imp-fiche-sec { margin-bottom: 0; }

/* Échéances impayées dans la fiche. */
.imp-flines { margin-top: 8px; }
.imp-fline { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 13px; }
.imp-fline + .imp-fline { border-top: var(--border); }
.imp-fline-date { flex: 0 0 auto; min-width: 86px; color: var(--gris-texte); font-variant-numeric: tabular-nums; }
.imp-fline-lib { flex: 1 1 auto; min-width: 0; color: var(--gris-fonce); }
.imp-fline-amt { flex: 0 0 auto; color: var(--graphite); font-variant-numeric: tabular-nums; }

/* Séquence de relance (cœur de la fiche). */
.imp-seq-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.imp-x3 { font-size: 12px; color: var(--rouge); background: var(--rouge-bg); padding: 2px 8px; border-radius: var(--radius-md); }
.imp-seq-steps { display: flex; flex-direction: column; }
.imp-step { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; }
.imp-step + .imp-step { border-top: var(--border); }
.imp-step-no { flex: 0 0 auto; width: 30px; font-family: var(--font-serif); font-size: 15px; color: var(--gris-moyen); }
.imp-step.is-current .imp-step-no { color: var(--ambre); }
.imp-step.is-done .imp-step-no { color: var(--vert); }
.imp-step-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.imp-step-state { font-size: 13px; color: var(--gris-fonce); display: inline-flex; align-items: center; gap: 6px; }
.imp-step-check { color: var(--vert); }
.imp-step-todo { color: var(--ambre); font-size: 14px; }
.imp-step-muted { color: var(--gris-texte); }
.imp-step-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.imp-seq-foot { font-size: 12px; color: var(--gris-texte); margin-top: 12px; padding-top: 10px; border-top: var(--border); }

.imp-fiche-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: var(--border); }
.imp-foot-hint { font-size: 12px; color: var(--gris-texte); }

/* Boutons d'action d'étape. WhatsApp / Appeler = discrets (DA LoveFrom) ;
   slot IA grisé = « bientôt » (commercial-only verrouillé). */
.imp-wa, .imp-call, .imp-ai { font-family: var(--font-sans); font-size: 13px; border-radius: var(--radius-md); padding: 9px 13px; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.imp-wa, .imp-call { color: var(--gris-fonce); background: var(--blanc); border: var(--border); }
.imp-wa:hover:not([disabled]), .imp-call:hover:not([disabled]) { border-color: var(--vert); color: var(--vert); }
.imp-wa[disabled], .imp-call[disabled] { color: var(--gris-moyen); background: var(--blanc-casse); border: var(--border); cursor: not-allowed; }
.imp-ai { color: var(--gris-moyen); background: var(--blanc-casse); border: var(--border); cursor: not-allowed; }

/* État vide actionnable : célébré, sobre, serif. */
.imp-empty { padding: 44px 28px; text-align: center; }
.imp-empty-emoji { font-size: 30px; margin-bottom: 12px; }
.imp-empty-title { font-family: var(--font-serif); font-size: 24px; color: var(--graphite); margin-bottom: 8px; }
.imp-empty-sub { font-size: 14px; color: var(--gris-texte); max-width: 420px; margin: 0 auto; }

/* Contentieux > 90 j : agrégat sobre dépliable, liste séparée. */
.imp-cont-toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--blanc-casse); border: var(--border); border-radius: var(--radius-lg); cursor: pointer; font-family: var(--font-sans); color: var(--gris-fonce); text-align: left; }
.imp-cont-toggle:hover { border-color: var(--gris-moyen); }
.imp-cont-summary { font-size: 14px; color: var(--gris-fonce); }
.imp-cont-summary b { color: var(--graphite); font-weight: 500; font-variant-numeric: tabular-nums; }
.imp-cont-hint { font-size: 12px; color: var(--gris-texte); }
.imp-cont-chev { margin-left: auto; color: var(--gris-moyen); font-size: 18px; transition: transform .15s ease; }
.imp-cont-toggle[aria-expanded="true"] .imp-cont-chev { transform: rotate(90deg); }
.imp-cont-toggle[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.imp-cont-body { padding: 4px 18px; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; }
.imp-crow { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.imp-crow + .imp-crow { border-top: var(--border); }
.imp-crow .imp-amount { color: var(--gris-fonce); }
.imp-old { font-size: 12px; color: var(--gris-texte); }
.imp-agewrap { flex: 0 0 auto; min-width: 64px; text-align: right; }
.imp-hidden { display: none; }
.imp-cont-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 6px; }
.imp-cont-note { font-size: 12px; color: var(--gris-texte); }

/* --- Bascule ANTICIPÉE sous 1000px (petit laptop / tablette paysage / mobile) :
   le master-detail à 2 colonnes écraserait la fiche (nav 188px + marges) → on
   passe en LISTE SEULE + fiche au clic en PLEIN ÉCRAN (flèche retour). Au-dessus
   de 1000px (laptop standard 1024–1440 +) : 2 colonnes confortables. Cibles ≥44px.
   NB : la nav latérale ne se replie qu'à 860px (chrome global, inchangé). --- */
@media (max-width: 1000px) {
  .main-impayes { padding-inline: 16px; }
  .imp-page { max-width: none; }                  /* liste pleine largeur */
  .imp-md { grid-template-columns: 1fr; gap: 0; }
  .imp-fiche-cols { grid-template-columns: 1fr; gap: 0; }  /* fiche plein écran : on empile */
  .imp-detail { position: fixed; inset: 0; z-index: 60; background: var(--blanc-casse); overflow: auto; padding: 16px; display: none; }
  .imp-md.imp-detail-open .imp-detail { display: block; }
  .imp-fiche-back { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: var(--border); border-radius: var(--radius-md); background: var(--blanc); cursor: pointer; color: var(--gris-fonce); }
  .imp-row { padding: 14px 10px; min-height: 44px; }
  .imp-wa, .imp-call, .imp-ai { flex: 1; justify-content: center; min-height: 44px; }
  .imp-crow { flex-wrap: wrap; padding: 14px 0; }
  .imp-crow .imp-agewrap { text-align: left; }
}
/* Centre la fiche plein écran dans une colonne lisible sur tablette (évite une
   ligne trop longue) tout en restant pleine largeur sur vrai mobile. */
@media (min-width: 768px) and (max-width: 1000px) {
  .imp-md.imp-detail-open .imp-detail { padding: 24px; }
  .imp-fiche { max-width: 720px; margin-inline: auto; }
}

/* ============================================================
   Auth — écran de login + sélecteur de club (injectés par api.js, gate ON).
   Extrait des styles INLINE historiques (api.js showLogin/loadClubSelector) vers
   des classes, pour permettre une CSP stricte : style-src SANS 'unsafe-inline'
   (A19-L2). Valeurs ISO-VISUELLES (palette login historique conservée à
   l'identique — ne PAS remapper sur les tokens DA sans revalidation visuelle).
   Inerte tant que le gate d'auth n'a rien injecté (gate OFF = démo investisseur).
   ============================================================ */
#fra-club-selector {
  width: 100%;
  margin: 0 0 12px;
  padding: 8px;
  border: 1px solid #d8d2c8;
  border-radius: 8px;
  font-size: 13px;
  font-family: Inter, system-ui, sans-serif;
}
#fra-login {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #faf8f5;
  font-family: Inter, system-ui, sans-serif;
}
#fra-login-form {
  width: 320px;
  max-width: 88vw;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: #fff;
  border: 1px solid #e7e2da;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
}
.fra-login-title {
  font-family: Fraunces, serif;
  font-weight: 400;
  font-size: 22px;
  margin: 0 0 4px;
  color: #2b2620;
}
.fra-login-label {
  font-size: 12px;
  color: #6b6359;
}
.fra-login-input {
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid #d8d2c8;
  border-radius: 8px;
  font-size: 14px;
}
#fra-login-btn {
  margin-top: 6px;
  padding: 11px;
  border: 0;
  border-radius: 8px;
  background: #2b2620;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.fra-login-error {
  min-height: 16px;
  margin: 0;
  font-size: 12px;
  color: #b4452f;
}

/* ============================================================
   Membres · onglet « Base » (roster + actions, gate ON). Tokens DA uniquement.
   ============================================================ */
.base-head {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-3);
}
.base-export { flex-shrink: 0; }
.base-search {
  flex: 1;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--graphite);
}
.base-act {
  padding: var(--sp-2) var(--sp-3);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--blanc);
  color: var(--gris-fonce);
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
}
.base-act:hover {
  background: var(--blanc-casse);
}
/* Roster Base : table-layout fixed → la table reste dans la carte (sinon, en auto,
   un email long déborde la carte sur desktop et son border droit lit comme une
   « barre verticale » coupant les colonnes Compte/Action). Largeurs = 100%,
   Membre + Email tronqués en ellipsis. */
.base-mtable { table-layout: fixed; }
.base-mtable th:nth-child(1), .base-mtable td:nth-child(1) { width: 24%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.base-mtable th:nth-child(2), .base-mtable td:nth-child(2) { width: 24%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.base-mtable th:nth-child(3), .base-mtable td:nth-child(3) { width: 14%; }
.base-mtable th:nth-child(4), .base-mtable td:nth-child(4) { width: 12%; }
.base-mtable th:nth-child(5), .base-mtable td:nth-child(5) { width: 14%; }
.base-mtable th:nth-child(6), .base-mtable td:nth-child(6) { width: 12%; }

/* ============================================================
   Réglages-core (forms gate ON). Tokens DA ; réutilise .form-*/.btn-light/.set-*.
   ============================================================ */
.reg-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.reg-status { font-size: 13px; color: var(--gris-texte); }
.reg-status.ok { color: var(--vert); }
.reg-status.err { color: var(--rouge); }
.reg-readonly { font-family: var(--font-sans); font-size: 14px; color: var(--gris-fonce); padding: 9px 12px; border: var(--border); border-radius: var(--radius-md); background: var(--blanc-casse); }
.reg-color { height: 40px; padding: 4px; cursor: pointer; }
.reg-check { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; color: var(--graphite); }
.reg-upload { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.reg-file { font-size: 13px; font-family: var(--font-sans); }
.reg-secret-row { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; }
.reg-secret { flex: 1; min-width: 0; overflow: auto; white-space: nowrap; padding: 10px 12px; border-radius: var(--radius-md); background: var(--graphite); color: var(--vert-bg); font-size: 12px; font-family: monospace; }
.reg-danger { color: var(--rouge); border-color: var(--rouge-bg); }
.reg-danger:hover { background: var(--rouge-bg); border-color: var(--rouge); color: var(--rouge); }
.reg-copy-hidden { display: none; }

/* ---------- Tableau de bord — placeholder bloc gaté (gate ON, source leads-api à venir) ----------
   Affichage honnête « Disponible bientôt » à la place des blocs sans source réelle
   (acquisition/conversion, churn, solde net, preuve de valeur). JAMAIS de zéros. */
.dash-soon { text-align: center; padding: var(--sp-8) var(--sp-6); }
.dash-soon-title { font-family: var(--font-serif); font-size: 18px; color: var(--gris-texte); margin-bottom: var(--sp-2); }
.dash-soon-sub { font-size: 13px; color: var(--gris-texte); max-width: 420px; margin: 0 auto; line-height: 1.5; }

/* ---------- À valider : mots bannis (gate ON) + décision traitée ----------
   Chips de mots bannis avec retrait, et formulaire d'ajout. Aucun style inline (CSP L2). */
.bw-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.bw-chip { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 13px; color: var(--graphite); background: var(--blanc-casse); border: 1px solid var(--gris-clair); border-radius: var(--radius-md); padding: 4px 8px; }
.bw-remove { border: none; background: none; cursor: pointer; color: var(--gris-texte); font-size: 16px; line-height: 1; padding: 0 2px; }
.bw-remove:hover { color: var(--rouge); }
.bw-add { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.bw-add .form-input { flex: 1; min-width: 200px; }
.decision-done { font-size: 13px; color: var(--gris-texte); font-style: italic; }

/* ---------- À valider : journal de modération (décisions passées, gate ON) ---------- */
.mod-hist-card { display: flex; flex-direction: column; }
.mod-hist-row { padding: 10px 0; border-bottom: 0.5px solid var(--gris-clair); }
.mod-hist-row:last-child { border-bottom: none; }
.mod-hist-main { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.mod-hist-target { font-size: 14px; color: var(--graphite); }
.mod-hist-when { font-size: 12px; color: var(--gris-texte); margin-left: auto; }
.mod-hist-reason { font-size: 13px; color: var(--gris-fonce); margin-top: 4px; }
.mod-hist-empty { font-size: 13px; color: var(--gris-texte); padding: 4px 0; }

/* ---------- Membres › Ambassadeurs : pilote admin (gate ON) ----------
   Détection + shortlist + actifs. Réutilise mtable / badge / btn-action.
   Aucun style inline (CSP L2). */
.amb-detect-card { display: flex; flex-direction: column; gap: var(--sp-2); }
.amb-detect-bar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.amb-detect-meta { font-size: 13px; color: var(--gris-texte); }
.amb-alert { font-size: 13px; color: var(--rouge); background: var(--rouge-bg); border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: var(--sp-2); }
.amb-invite-cell { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.amb-cosign-lbl { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: 12px; color: var(--gris-texte); white-space: nowrap; }
.amb-cosign-lbl input { width: 16px; height: 16px; }

/* ---------- Réglages : Classes / cours (gate ON) ----------
   Liste de cours avec actions + formulaire d'ajout. Aucun style inline (CSP L2). */
.cl-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cl-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 8px 0; border-bottom: 0.5px solid var(--gris-clair); }
.cl-row:last-child { border-bottom: none; }
.cl-inactive { opacity: 0.55; }
.cl-name { font-size: 14px; color: var(--graphite); }
.cl-meta { font-size: 12px; color: var(--gris-texte); }
.cl-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.cl-add { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-2); }
.cl-add .form-input, .cl-add .form-select { flex: 0 1 auto; }
.cl-add .cl-hour { width: 90px; }